jquery 元素第二个_jQuery和DOM操作

Jquery的安装和使用

安装：

下载JQuery文件并把文件放到web项目中

下载网址：http://jquery.com

使用：

直接引入jQuery的核心JS文件

注意：

（1）引入jQuery的script标签可以放在推荐放在body标签后

（2）如果script标签设置了src属性，则在script双标签中写的js代码无效

4.常用操作：

5.DOM对象与jQuery对象之间的相互转换：

（1）DOM ===> jQuery

在DOM对象外面包装JQery $(dom对象)

（2）JQuery ===> DOM

JQuery包装集取下标 JQuery包装及对象[0]

JQuery中的each()遍历函数：

each(fucntion):

this：谁调用函数，this指代谁

jquery和js获取节点的区别

Js：如果节点不存在返回null

jQuery：如果节点不存在返回空包装集对象

所以判断jQuery对象是否存在需要用到length

JQuery选择器

基础选择器Basics（掌握即可）

举例：假设body中有这些元素

用基础选择器依次对其操作

Id选择器 $("#id属性值")

类选择器 $(".class属性值")

元素选择器 $("元素名/标签名")

选择所有选择器 $("*")

组合选择器 $("选择器1,选择器2...")

层次选择器

举例：假设body中有这些元素

用层次选择器依次对其操作

后代选择器 ncestor descendant、

子代选择器 parent>child

相邻选择器 prev + next

同辈选择器 prev ~ sibling

注意：

相邻选择器是选择与当前元素同级的下一个相邻元素

同辈选择器是选择与当前元素同级的后面的左右元素

其他选择器

表单选择器

过滤选择器

$(":input") 选择所有的表单元素 （文本框、密码框、下拉框、文本域等....）

$(":input") 选择所有input标签元素

$(":checked") 选择所有选中状态的元素（单选框和复选框）

$(":checkbox:checked") 选择所有复选框被选中的元素

$(":checkbox:checked:gt(0)") 选择下标大于指定值的元素

$(":checkbox:checked:eq(0)") 匹配被选中的选择的指定下表元素

$(":checkbox:checked").eq(1) 同上

$(":odd") 选择所有基数下标的元素

$(":even") 选择所有偶数下标的元素

属性选择器

$(“[属性名]”) 选择所有设置过指定属性的元素

$(“[属性名=属性值]”) 选择属性名等于指定值的元素

jQuery的DOM操作

操作元素的属性

假设body中有这些元素

方法

<1>获取属性

固有属性：元素本身就有的属性

自定义属性:

返回值是boolean类型的属性:

未设置过的checked属性:

<2>设置属性

固有属性：元素本身就有的属性

自定义属性:

返回值是boolean类型的属性:

<3>移除属性

区别

1、固有属性：attr()和prop()都可使用

2、自定义属性：attr()可用，prop()不可用

3、返回值是boolean的属性：

attr():如果设置过，则返回具体值，若未设置过，返回undefined

prop():返回true和false

返回值是boolean类型的属性:

checked（单选和复选选中状态）、selected（下拉框选中状态）、disabled（禁用）

总结：

返回值是boolean类型的属性，使用prop();其他的属性使用attr()

操作元素的样式

（1）方法

（2）实例

假设元素和样式为以下

attr(“class”) 获取 class 属性的值，即样式名称

attr(“class”,”样式名”) 修改 class 属性的值，修改样式

addClass(“样式名”) 添加样式名称

css() 添加具体的样式 （定义在style属性中的样式）

设置一个样式 css("样式名","样式值")

同时设置多个样式

removeClass(class) 移除样式名称

操作元素的内容

方法

实例

对以下代码进行操作

设置

取值

添加元素

方法

删除元素

（1）方法

（2）实例

遍历元素

each()

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

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

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

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

jQuery事件

ready加载事件

onload事件与ready事件的区别：

当Dom结构加载完毕后，ready事件就执行；

当Dom结构加载完毕，并且引入的外部文件加载完毕，onload事件才会执行

ready事件可以同时写多个，按顺序执行

语法：$(document).ready(function(){});

缩写版：$(function(){});

bind()绑定元素事件

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

1.确定为哪些元素绑定事件

获取元素

2.绑定什么事件（事件类型）

第一个参数：事件的类型

3.相应事件触发的，执行的操作

第二个参数：函数

实例：对以下按钮进行不同绑定事件

1. 简单的bind()事件

1. 原生的js点击事件

1. 多个事件绑定同一函数

普通形式（多个事件绑定同一函数）

bind链式编程形式（多个事件绑定不同函数）

简洁常用形式