JQUERY学习（壹）

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

应用场景：修改页面结构，添加页面标签