1.1 什么是jquery(了解)
(1)jquery他是继prototype之后的优秀的js框架
prototype：原型
spring ：它是一个轻量级DI（IOC） 和AOP的容器框架
DI：依赖注入
IOC：控制反转
AOP：面向切面的编程
<bean id="" class="" scope="singleton/prototype"/>
(2)链式语法和多功能的接口
(3)兼容性强
(4)丰富的插件机制
(5)扩展了CSS的选择器
(6)写的更少完成更多write less do more
1.2 使用jquery(掌握)
使用步骤： (1) 下载jquery文件
(2)在页面引入jquery文件<script>标签引入
(3)测试 $("#id") --》就是jquery语法
页面加载事件
<script type="text/javascript">
//页面加载完之后 才执行内容 -- 最后执行，jquery写法先执行，都是在页面加载之后才执行
window.onload = function(){
alert(3);
console.log(document.getElementById("myDiv"));
}
//完整写法
$(document).ready(function(){
alert(2);
console.log($("#myDiv"));
});
//jquey写法 -- 也是页面加载完之后，才获取的内容 --推荐写法
$(function(){
alert(1);
console.log($("#myDiv"));
});
</script>
$ 和 jQuery等效
console.log($("#myDiv"));
console.log(jQuery("#myDiv"));
//为什么提供两种写法
console.log(window.$ === window.jQuery)
可能其他地方使用了$符号 可以用jQuery等效代替
基本选择器
Id选择器 #
$("#myDiv")
如果有多个id,只能操作第一个
如果要操作的控件在循环里面(id会重复出现)，就不能使用id选择器。
.class样式选择器
$(".div").html("xxx");
如果有多个对应的样式,都可以全部进行操作
element元素选择器
$("div").html("xxx");
$("input").val("所有的input");
如果有多个对应的控件,都可以全部进行操作
所有元素(控件)
console.debug($("*"));获取所有的页面控件 不常用
selector1选择器
console.debug($("div,input"));
层次选择器(有上下级关系)
[if !supportLists]1.1.1. [endif]祖先后代
在给定的祖先元素下匹配所有的后代元素
$("#book li")
<ul id="book">
<li class="history">
三国
<ul>
</ul>
</li>
</ul>
父亲儿子
在给定的父元素下匹配所有的子元素
$("#book > li")
<ul id="book">
<li class="history">
三国
<ul>
</ul>
</li>
</ul>
元素紧接下一个元素
匹配所有紧接在prev元素后的 next 元素
$("form+input")
form元素 下面的所有元素
$("form~input")
jQuery注册事件
jQuery注册事件方法：
[if !supportLists]1）[endif]$(“#id”).click(function(){alert(0)});
[if !supportLists]2）[endif]$(“#id”).on(“click”,function(){});
取消：$(“#id”).off(“click”);
[if !supportLists]3）[endif]$(“#id”).bind(“click”,function(){});
取消：$(“#id”).unbind(“click”);
附加对象
append(content)向每个匹配的元素内部追加内容。
content String(htmlString),Element(DOM), jQuery对象
克隆clone
clone()克隆匹配的DOM元素并且选中这些克隆的副本
二级联动jQuery版本
网友评论