一、jQuery的引言
1、jQuery框架:对JavaScript的封装,简化js开发
2、jQuery框架的好处:
1)语法简单
js中:document.getElementById("id");
jQuery中:$("#id名");
2)屏蔽浏览器差异
3)简化Ajax开发
4)jQuery提供丰富的插件,提高用户的体验,如:日期
二、DOM对象和jQuery对象的区别
1、DOM对象:js中使用document.getElementByXXX("");可以调用JavaScript中的方法
2、jQuery对象:通过jQuery的方式,获取到的对象;可以调用jQuery中的方法
注意:
1、DOM对象和jQuery对象都表示一个html标签
2、如果使用this作为参数,this是一个DOM对象
3、一个jQuery对象中封装一个DOM对象
三、第一个jQuery程序
1、搭建jQuery的运行环境(把jquery-1.8.3.js文件引入到开发的页面中)
1)创建一个folder,js(保存js文件),jquery-1.8.3.js拷贝到js目录中
2)在开发的页面中引入jquery-1.8.3.js文件
2、jquery的语法特点
1)简洁
2)支持链式调用
css("","").css("",").css("","").....
3)方法:
css("样式属性名","样式属性值")
jquery对象.text():获得文本节点的内容
jquery对象.text(""):修改文本节点的内容
jquery对象.html():获得文本节点的内容
jquery对象.html(""):修改文本节点的内容 ,如果修改为html标签时,解析html标签,呈现标签的结果。
四、jquery对象的获得
1、选择器【重点】
a)基本选择器
1)id选择器 :唯一一个可以取到一个jquery对象
语法:$("#id属性名")
2)class选择器:通过class属性,获得一组jquery对象,可以在不同html标签中
语法:$(".class属性名")
3)标签选择器:通过标签名称获得一组jquery对象
语法:$("html标签名")
4)多路选择器:组合id class 标签,只要匹配一种选择器,可以选择出对应的jquery对象
语法:$("选择器1,选择器2")
$("#id,.c1") :以id选择的jquery对象+以class="c1"选择的jquery对象
5)全选择器:把当前html页面中的所有标签都选中
语法:$("*");
b)层次选择器
1)后代选择器:选择出所有的后代
语法:$("选择器1 选择器2")
2)儿子选择器:选择直接的子节点
语法:$("选择器1>选择器2")
3)第一个兄弟选择器:选择出,紧跟其后的第一个兄弟节点
语法:$("选择1+选择器2")
4)选择后续所有的兄弟:$("选择器1~选择器2")
c)过滤选择器:对选出一组jquery对象再次进行过滤
1)基本过滤选择器
:first :last
2):eq(index) :lt(index) :gt(index)
3):even 选择偶数下标 :odd 奇数下标
4):not(选择器)
5)内容过滤选择器
:contains(text) :选择包含text的标签
:has(selector) :
:empty :选择没有子标签或者文本内容为空的jquery对象
:parent 选择具有子节点或者有文本的标签
6)可见性选择器
:hidden 选择隐藏的或者式属性为hidden的jquery对象
:visible 选择可见的jquery对象,没有hidden属性或者没有display:none样式的标签,默认是可见的
7)属性过滤选择器
[attribute] :选择具有attribute属性的jquery对象
[attribute=value]:选择attribute属性为value值的jquery对象
[attribute!=value]:选择attribute属性不为value值的jquery对象
8)表单对象选择器
:checked :单选按钮或者复选按钮被选中的jquery对象
:selected :选择下拉菜单中被选中的option
2、通过DOM对象转化
语法:$(dom)------>jQuery对象
应用场景:this:dom对象,$(this) 其他的程序传入如的参数是一个DOM对象,需要使用jQuery中的方法时。
jQuery对象------->DOM对象
jQuery对象.get(0)
3、通过html标签创建
语法:$("html标签")
如:var div1 = $("<div class='div1'>yanxj</div>")
应用场景:修改页面结构,添加页面标签