jQuery

1.Jquery对象

1.1 Jquery的使用

• 下载Jquery的核心js文件
• 在需要使用Jquery的页面引入文件（若未引入，则报错"$ is no defined"）

1.2 Dom对象与Jquery包装集对象

• "$“代表的是Jquery对象的引用，相当于"jQuery”

  注：只有Jquery对象才能使用Jquery提供的方法

• JQuery的本质是一个数组，数组中包含了多个dom对象（document对象）

• Jquery与Dom相互转换的格式

  1.dom对象—>jQuery对象

  格式：

  ​ dom对象—>$(dom对象)

  2.jQuery对象—>dom对象

  格式：

  ​ jQuery对象—>jQuery对象[索引]

  ​ jQuery对象—>jQuery对象.get(索引)

• 当获取元素对象，元素不存在时

  通过document获取的值，返回null（通过判断返回的值是否为null，来得知元素是否存在）

  通过Jquery获取的值，返回空包装集（通过判断包装集的长度length来得知元素是否存在，存在则长度至少为1）

2.Jquey选择器

2.1 基础选择器

• id选择器：$("#testDiv")——选择id为testDiv的元素（如果出现多个同名id，只会获取第一个）
• 元素名称选择器：$(".div")——选择所有div元素
• 类选择器：$(".blue")——选择所有class为blue的元素
• 通用选择器：$("*")——选择页面所有元素
• 组合选择器：$("#testDiv,span,.blue")——同时选中多个选择器匹配的元素

2.2 层次选择器

• 后代选择器：$("#parent div")——选择id为parent的元素的所有div元素
• 子代选择器：$("#parent>div")——选择id为parene的直接div子元素
• 相邻选择器：$(".blue+img")——选择css类为blue的下一个img元素（只能下一个，间隔一个不可以）
• 同辈选择器：$(".blue~img")——选择css类为blue的之后的img元素（可以不相邻，后面满足条件的都算）

2.3 表单选择器

Forms	名称	举例
表单选择器	:input	查找所有的input元素：$(":input"); 注意：会匹配所有的input、textarea、select和button
文本框选择器	:text	查找所有文本框：$(":text")
密码框选择器	:password	查找所有密码框：$(":password")
单选按钮选择器	:radio	查找所有单选按钮：$(":radio")
复选框选择器	:checkbox	查找所有复选框按钮：$(":checkbox")
提交按钮选择器	:submit	查找所有提交按钮：$(":submit")
图像域选择器	:image	查找所有图像域：$(":image")
重置按钮选择器	:reset	查找所有重置按钮：$(":reset")
按钮选择器	:button	查找所有按钮：$(":button")
文件域选择器	:file	查找所有文件域：$(":file")

2.4 属性选择器&过滤选择器

• 属性选择器

  [属性名]——————$("[属性名]") ————————获取所有设置过指定属性名的元素

  [属性名 = ’属性值‘]——$("[属性名 = ‘属性值’]")————获取所有设置过指定属性名为指定值的元素

• 过滤选择器

  :checked————$(":checked")————获取选中状态为选中的元素（单选框，复选框）

  :selected————$(":selected")————获取选中状态为选中的元素（下拉框）

  :gt(index)————$(":gt(index)") ———获取下标大于指定值的元素

  :eq(index)————$(":eq(index)")———获取下标等于指定值的元素

  :odd ——————$(":odd") —————获取所有的奇数下标

  :even ——————$(":even") —————获取所有的偶数下标

  注：可以嵌套使用（如：$(":radio[属性名 = ‘属性值’]:checked") ）

3.Jquery Dom操作

jQuery提供了对HTML节点的操作，常用的操作有：查找元素(选择器已经实现)；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除、添加、修改、设定节点的css样式等。

注意：以下的操作方式只适用于jQuery对象

3.1 操作元素的属性

3.1.1 获取属性

方法	说明	举例
attr(属性名称)	获取指定的属性值，操作checkbox时， 选择返回checked，没有选中返回underfined	attr(‘checked’) attr(‘name’)
prop(属性名称)	获取具有true和false两个属性的属性值	prop(‘checked’)

3.1.2 操作元素的属性

​ attr()

​ 设置属性 ——$(“xx”).arr(“属性名”，“属性值”)

​ 获取属性 ——var 属性值 = 对象.arr(“属性名”)

​ prop()

​ 设置属性 ——对象.prop(“属性名”，“属性值”)

​ 获取属性 ——var 属性值 = 对象.prop(“属性名”)

区别：

1.固有属性（id，class，name，style…所有元素都拥有的）

​ attr和prop都可以操作

2.返回值是布尔类型的属性（checked、selected、disabled）

​ 最好使用prop操作(prop更直观更方便)

3.自定义属性（用户自定义的属性）

​ attr可以操作，prop不可以

总结：如果属性的返回值是布尔类型使用prop，否则使用attr。

3.1.3 移除属性

方法	说明	举例
removeAttr(属性名)	移除指定的属性	removeAttr(‘checked’)

3.2 操作元素的样式

方法	说明
attr(“class”)	获取class属性的值，即样式名称
attr(“class”,“样式名”)	修改class属性的值，修改样式(覆盖)
addClass(“样式名”)	添加样式名称(追加)
css()	添加具体的样式
removeClass(class)	移除样式名称

增加元素的具体样式，格式：(考虑优先级：行内样式>内部样式>外部样式)

1) css({'样式名':'样式值','样式名2':'样式值2'})
例：css({'background-color':'red','color':'#fff'})
2) css('样式名','样式值')
例：css('color','white')

3.3 操作元素的内容

对于元素还可以操作其中的内容，例如文本、值、甚至是html。

方法	说明
html()	获取元素的html内容
html(“html,内容”)	设定元素的html内容
text()	获取元素的文本内容，不包含html
text(“text”,内容)	设置元素的文本内容，不包含html
val()	获取元素的value值
val(“值”)	设定元素的value值

操作元素的内容

​ val()操作表单元素的值

​ 取值：var 值 = $(“xx”).val();

​ 赋值: 表单元素对象.val(值)；

​ html()操作非表单元素的内容（包含html标签）

​ 取值：var 内容 = $(“xx”).html();

​ 赋值: 对象.html(内容)；

​ text()操作非表单元素的文本内容（不包含html标签）

​ 取值：var 内容 = 对象.text();

​ 赋值: 对象.text(内容)；

3.4 创建元素

3.5 添加元素

​ 在jQuery中创建元素很简单，直接使用核心函数即可

$('元素内容')；

$('<p>this is a paragraph!</p>');

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，被迫加的content参数，可以是字符、HTML元素标记。
$(content).prependTo(selector)	把content元素或内容加入selector元素开头
append(content)(常用)	在被选元素内部的结尾插入元素或内容，被迫加的content参数，可以是字符、HTML元素标记。
$(content).appendTo(selector)	把content元素或内容插入selector元素内，默认是在尾部。
before()	在元素前插入指定的元素或内容：$(selector).before(content)
after()	在元素前插入指定的元素或内容：$(selector).after(content)

注：追加元素时（同级添加和子元素添加）

​ 如果元素不存在，则创建元素，并添加

​ 如果元素存在，则会获取已存在的元素，并剪切到新的位置

3.6 删除元素

方法	说明
remove()	删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty()	清空所选元素的内容。

3.7 遍历元素

each()

$(selector).each(function(index,element)):遍历元素

参数;
function为遍历时的回调函数，

index为遍历元素的序列号，从0开始。

element是当前的元素，此时是dom元素。

this是当前元素，此时是dom元素。

4.Jquery事件

4.1 ready加载事件

当HTML的文档结构加载完毕后执行

​ ready()类似于 onLoad()事件，可以写多个，按顺序执行，

格式：

​ $(document).ready(function(){定义函数})

​ $(function(){}) 【简略版】

4.2 bind()绑定事件

为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

$(selector).bind(eventType[,evenData].handler(eventObject));

参数介绍

eventType:是一个字符串类型的事件类型，就是你所需要绑定的事件。（常用的有click，focus，change，blur，moueseover，mouseout）

这类型可以包括如下：

​ blur，focus，focusin，focusout，load，resize，scroll，unload，click，dbclick，

​ mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter

​ mouseleave，change，select，submit，keydown，keypress，keyup，error

[,evenData]：传递的参数，格式：{键：值，键：值。。}

handler(evenObject):该事件触发执行的函数

绑定事件格式

绑定事件（单个）

​	$（选择器).bind("事件名",function(){

});

绑定事件（多个）

方式一：为某一个元素绑定不同的事件，执行不同的函数

​

$（选择器).bind("事件名",function(){

​	}).bind("事件名",function(){

​	});

方式二：为某一个元素绑定不同的事件，执行相同的函数（多个事件用空格隔开）

​

$（选择器).bind("事件名 事件名",function(){

​	});

方式三：为某一个元素绑定不同的事件，执行不同的函数（使用JSON对象格式）

​

$（选择器).bind({

​				"事件名",function(){

​				}，

​				"事件名",function(){

​				}

​	});

如何绑定事件

1.事件源：确认给什么元素绑定事件

​ 通过不同的选择获取对应元素

2.事件类型：给元素绑定什么事件

​ 常用的事件名

3.执行函数：当事件触发时需要执行的函数

​ 匿名函数 或 自定义函数

通过Jquery直接绑定事件

绑定单个事件

​ $(selector).事件名(函数)；

绑定多个事件

​ $(selector).事件名(函数).事件名(函数)；

声明：部分资料源自网络，如有侵权，请联系我删除！
文中如存在谬误、混淆等不足，欢迎批评指正！