JQUERY学习(壹)

时间:2024-11-09 18:33:38

一、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文件

JQUERY学习(壹)

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属性名")

JQUERY学习(壹)

3)标签选择器:通过标签名称获得一组jquery对象

语法:$("html标签名")

JQUERY学习(壹)

4)多路选择器:组合id  class  标签,只要匹配一种选择器,可以选择出对应的jquery对象

语法:$("选择器1,选择器2")

$("#id,.c1") :以id选择的jquery对象+以class="c1"选择的jquery对象

JQUERY学习(壹)

5)全选择器:把当前html页面中的所有标签都选中

语法:$("*");

b)层次选择器

1)后代选择器:选择出所有的后代

语法:$("选择器1 选择器2")

JQUERY学习(壹)

2)儿子选择器:选择直接的子节点

语法:$("选择器1>选择器2")

JQUERY学习(壹)

3)第一个兄弟选择器:选择出,紧跟其后的第一个兄弟节点

语法:$("选择1+选择器2")

JQUERY学习(壹)

4)选择后续所有的兄弟:$("选择器1~选择器2")

JQUERY学习(壹)

c)过滤选择器:对选出一组jquery对象再次进行过滤

1)基本过滤选择器

:first  :last

JQUERY学习(壹)

2):eq(index)   :lt(index)   :gt(index)

JQUERY学习(壹)

3):even 选择偶数下标  :odd 奇数下标

JQUERY学习(壹)

4):not(选择器)

JQUERY学习(壹)

5)内容过滤选择器

:contains(text)  :选择包含text的标签

JQUERY学习(壹)

:has(selector) :

JQUERY学习(壹)

:empty  :选择没有子标签或者文本内容为空的jquery对象

JQUERY学习(壹)

:parent  选择具有子节点或者有文本的标签

JQUERY学习(壹)

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>")

应用场景:修改页面结构,添加页面标签