jquery获取第一个子元素—jquery获取第几个元素 收藏 0

jQuery学习笔记

学习目标

• 能够知道jQuery的作用及优点

jQuery是对JavaScript的封装，它是免费、开源的JavaScript函数库，jQuery 极大地简化了 JavaScript 编程。

jQuery和JavaScript它们的作用一样，都是负责网页行为操作，增加网页和用户的交互效果的，只不过jQuery简化了JavaScript编程，jQuery实现交互效果更简单。

• jQuery兼容了现在主流的浏览器，增加了程序员的开发效率。
• jQuery简化了 JavaScript 编程，代码编写更加简单。

• jQuery是一个免费、开源的JavaScript函数库
• jQuery的作用和JavaScript一样，都是负责网页和用户的交互效果。
• jQuery的优点就是兼容主流浏览器，代码编写更加简单。

学习目标

• 能够知道jQuery的引入方式
• 能够说出两种jQuery入口函数的写法

我们知道使用js获取标签元素，需要页面加载完成以后再获取，我们通过给onload事件属性设置了一个函数来获取标签元素，而jquery提供了ready函数来解决这个问题，保证获取标签元素没有问题，它的速度比原生的 window.onload 更快。

入口函数示例代码:

入口函数的简写示例代码:

• 引入jQuery
• 获取标签元素需要在入口函数来完成，它的速度比原生的 window.onload 更快
• jQuery入口函数有两种写法:
• // 完整写法 $(document).ready(function(){ … }); // 简化写法 $(function(){ … });

学习目标

• 能够使用jQuery选择器获取标签元素

jquery选择器就是快速选择标签元素，获取标签的，选择规则和css样式一样。

1. 标签选择器
2. 类选择器
3. id选择器
4. 层级选择器
5. 属性选择器

示例代码:

说明:可以使用length属性来判断标签是否选择成功, 如果length大于0表示选择成功，否则选择失败。

• jQuery选择器就是选择标签的
• 标签选择器是根据标签名来选择标签
• 类选择器是根据类名来选择标签
• id选择器是根据id来选择标签
• 层级选择器是根据层级关系来选择标签
• 属性选择器是根据属性名来选择标签

学习目标

• 能够使用选择器进行标签过滤

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

• has(选择器名称)方法，表示选取包含指定选择器的标签
• eq(索引)方法，表示选取指定索引的标签

has方法的示例代码:

eq方法的示例代码:

• 选择集过滤可以使用has方法和eq方法来完成
• jquery给标签设置样式使用css方法

学习目标

• 能够说出2种选择集转移方法

选择集转移就是以选择的标签为参照，然后获取转移后的标签

• $(\’#box\’).prev(); 表示选择id是box元素的上一个的同级元素
• $(\’#box\’).prevAll(); 表示选择id是box元素的上面所有的同级元素
• $(\’#box\’).next(); 表示选择id是box元素的下一个的同级元素
• $(\’#box\’).nextAll(); 表示选择id是box元素的下面所有的同级元素
• $(\’#box\’).parent(); 表示选择id是box元素的父元素
• $(\’#box\’).children(); 表示选择id是box元素的所有子元素
• $(\’#box\’).siblings(); 表示选择id是box元素的其它同级元素
• $(\’#box\’).find(\’.myClass\’); 表示选择id是box元素的class等于myClass的元素

选择集转移的示例代码:

• prev() 表示获取上一个同级元素
• prevAll() 表示获取上面所有同级元素
• next() 表示获取下一个同级元素
• nextAll() 表示获取下面所有同级元素
• parent() 表示获取父元素
• children() 表示获取所有的子元素
• siblings() 表示获取其它同级元素
• find(\”选择器名称\”) 表示获取指定选择器的元素

学习目标

• 能够知道获取和设置元素内容的操作

jquery中的html方法可以获取和设置标签的html内容

示例代码:

说明:

给指定标签追加html内容使用append方法

• 获取和设置元素的内容使用: html方法
• 给指定元素追加html内容使用: append方法

学习目标

• 能够知道获取和设置元素属性的操作

之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。

示例代码:

说明: 获取value属性和设置value属性还可以通过val方法来完成。

• 获取和设置元素属性的操作可以通过prop方法来完成
• 获取和设置元素的value属性可以通过val方法来完成，更加简单和方便

学习目标

• 能够说出两个常用的jQuery事件

• click() 鼠标单击
• blur() 元素失去焦点
• focus() 元素获得焦点
• mouseover() 鼠标进入（进入子元素也触发）
• mouseout() 鼠标离开（离开子元素也触发）
• ready() DOM加载完成

示例代码:

说明:

• this指的是当前发生事件的对象，但是它是一个原生js对象
• $(this) 指的是当前发生事件的jquery对象

jQuery常用事件:

• click() 鼠标单击
• blur() 元素失去焦点
• focus() 元素获得焦点
• mouseover() 鼠标进入（进入子元素也触发）
• mouseout() 鼠标离开（离开子元素也触发）
• ready() DOM加载完成

学习目标

• 能够知道事件代理的使用方式

事件代理就是利用事件冒泡的原理(事件冒泡就是事件会向它的父级一级一级传递),把事件加到父级上，通过判断事件来源，执行相应的子元素的操作，事件代理首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。

事件冒泡代码:

说明:

当点击子元素div，它的点击事件会向它父元素传递，也会触发了父元素的点击事件，这就是事件冒泡。

一般绑定事件的写法:

事件代理的写法

delegate方法参数说明:

delegate(childSelector,event,function)

• childSelector: 子元素的选择器
• event: 事件名称，比如: \’click\’
• function: 当事件触发执行的函数

• 事件代理就是使用父元素来代理子元素的事件，好处是减少事件的绑定次数，提高性能。
• 使用场景当多个相同的子元素绑定同一个事件，可以使用事件代理。
• 事件代理使用是使用delegate方法来完成

学习目标

• 能够知道JavaScript对象有两种创建方式

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。

创建自定义javascript对象有两种方式:

• 通过顶级Object类型来实例化一个对象
• 通过对象字面量创建一个对象

Object类创建对象的示例代码:

对象字面量创建对象的示例代码:

说明:

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

创建自定义javascript对象有两种方式:

• Object
• 字面量

学习目标

• 能够知道json的格式

json是 JavaScript Object Notation 的首字母缩写，翻译过来就是javascript对象表示法，这里说的json就是类似于javascript对象的字符串，它同时是一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。

json有两种格式：

1. 对象格式
2. 数组格式

对象格式:

对象格式的json数据，使用一对大括号({})，大括号里面放入key:value形式的键值对，多个键值对使用逗号分隔。

对象格式的json数据:

格式说明:

json中的(key)属性名称和字符串值需要用双引号引起来，用单引号或者不用引号会导致读取数据错误。

数组格式:

数组格式的json数据，使用一对中括号([])，中括号里面的数据使用逗号分隔。

数组格式的json数据:

实际开发的json格式比较复杂,例如:

json本质上是字符串，如果在js中操作json数据，可以将json字符串转化为JavaScript对象。

示例代码:

• json就是一个javascript对象表示法，json本质上是一个字符串。
• json有两种格式：1. 对象格式, 2. 数组格式

学习目标

• 能够知道ajax的作用

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码:

ajax方法的参数说明:

1. url 请求地址
2. type 请求方式，默认是\’GET\’，常用的还有\’POST\’
3. dataType 设置返回的数据格式，常用的是\’json\’格式
4. data 设置发送给服务器的数据，没有参数不需要设置
5. success 设置请求成功后的回调函数
6. error 设置请求失败后的回调函数
7. async 设置是否异步，默认值是\’true\’，表示异步，一般不用写
8. 同步和异步说明同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。异步是多个ajax同时请求，不需要等待其它ajax请求完成， 好比线程异步。

ajax的简写方式:

$.ajax按照请求方式可以简写成$.get或者$.post方式

ajax简写方式的示例代码:

$.get和$.post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)

1. url 请求地址
2. data 设置发送给服务器的数据，没有参数不需要设置
3. success 设置请求成功后的回调函数data 请求的结果数据status 请求的状态信息, 比如: \”success\”xhr 底层发送http请求XMLHttpRequest对象
4. dataType 设置返回的数据格式\”xml\”\”html\”\”text\”\”json\”
5. error 表示错误异常处理func 错误异常回调函数

• ajax 是发送http请求获取后台服务器数据的技术
• ajax的简写方式可以使用$.get和$.post方法来完成

Javascript应用-jQuery Ajax DOM 元素、遍历、数据操作和方法

jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许在不刷新浏览器的情况下从服务器加载数据，具体如下：

jQuery 遍历函数

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

jQuery 数据操作函数

这些方法允许我们将指定的 DOM 元素与任意数据相关联。

jQuery DOM 元素方法

jQuery 核心函数

jQuery 属性

下面列出的这些方法设置或返回元素的 CSS 相关属性。

jQuery基础回顾——jQuery中的DOM操作

DOM是Document Object Model的缩写，意思是文档对象模型，根据W3C DOM规范，DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件，简单来说，DOM解决了Netscape的javaScript和Microsoft的Jscript之间的冲突，给予了Web设计师和开发者一套标准的方法，让他们能够轻松获取和操作网页中的数据、脚本和表现层对象。

一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM。

• DOM Core

DOM Core并不专属于javaScript，任何一种支持DOM的程序设计语言都可以使用它，它的用途并非仅限于处理页面，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。

javaScript中的document.getElementById()、getElementByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。

• HTML-DOM

在使用javaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性，HTML-DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性。

例如：

注：HEML-DOM只能用来处理Web文档。

• CSS-DOM

CSS-DOM是针对CSS的操作，在javaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。

例如：设置某元素style兑现字体颜色的方法：

jQuery作为javaScript库，继承并发扬了javaScript对DOM对象的操作的特性，使开发人员能方便地操作DOM对象。

样例DOM

1、查找节点

使用jQuery在文档树上查找节点非常容易，可以通过在上一节介绍的来完成。

• 查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

• 查找节点属性

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值，attr()方法的参数可以是一个，也可以是两个，当参数是一个时，则是要查询的属性的名字，当参数是两个时，则表示给属性赋值，例如：

2、插入节点

在jQuery中提供了多种插入节点的方法：

3、删除节点

如果文档中某一个元素多余，那么应将其删除，jQuery提供了三种删除节点的方法，即remove()、detach()和empty()。

• remove()

从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选的元素。

当某个节点用remove()方法删除后，该节点所包含的所有后代节点同时被删除，这个方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素。

另外，remove()方法也可以通过传递参数来选择性地删除元素如下：

• detach()

detach()和remove()一样，也是从DOM中去掉所有匹配的元素，但需要注意的是，这个方法不会把匹配的元素从jQuery对象中移除，因而可以再将来再使用这些匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

• empty()

严格来讲，empty()方法并不是删除节点，而是清空节点，它能清除元素中的所有后代节点。

4、属性操作

在jQuery中，用attr()方法来获取和设置元素属性，removeAttr()方法来删除元素属性。

• 获取和设置元素属性

如果要获取<p>元素的属性title，那么只需要给attr()方法传递一个参数，即属性名称。

如果需要设置<p>元素的属性title的值，也可以使用同一个方法，不同的是，需要传递两个参数，即属性名和对应的值。

如果需要一次性为同一个元素设置多个属性，可以使用如下代码：

注意：jQuery中的很多方法都是同一个函数实现获取和设置的，例如上面的attr(),类似的还有html()、text()、height()、width()、val()和css()等方法。

• 删除元素属性

在某些情况下，需要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成该任务。

如果需要删除<p>元素的title 属性，可以使用下面的代码实现：

prop()方法与attr()方法类似，但有区别，大家都知道有的浏览器只要写disabled，checked就可以了，而有的要写成disabled = \”disabled\”，checked=\”checked\”，比如用attr(\”checked\”)获取checkbox的checked属性时选中的时候可以取到值,值为\”checked\”，但没选中获取值就是undefined。

jQuery提供新的方法prop()来获取这些属性，就是来解决这个问题的，以前我们使用attr获取checked属性时返回\”checked\”和\”\”,现在使用prop方法获取属性则统一返回true和false。

那么，什么时候使用attr()，什么时候使用prop()？

a) 添加属性名称该属性就会生效应该使用prop();

b) 具有true,false两个属性使用prop();

c) 其他则使用attr();

attr与pop方法对比

5、样式操作

• 获取和设置样式

由于 class 也是元素的属性，因此获取和设置class都可以使用attr()方法来完成，但是attr()方法实现的原理是替换，即以新属性值替换原属性值，如果此处需要的是“追加“效果，那么我们可以使用addClass()方法。

• 追加样式

jQuery提供了专门的addClass()方法来追加样式。

attr()与addClass()的区别

• 移除样式

要删除class的某个值，那么可以使用与addClass()方法相反的removeClass()方法来完成，它的作用是从匹配的元素中删除全部或者指定的class。

可以使用如下jQuery代码来删除<p>元素中值为“high”的class：

如果要把<p>元素的两个class都删除，就要使用两次removeClass方法，代码如下：

jQuery提供了更简单的方法，可以以空格的方式删除多个class名，jQuery代码如下：

另外，还可以利用removeClass()方法的一个特性来完成同样的效果，当它不带参数时，就会将class的值全部删除。

• 判断是否含有样式

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false。

注意：这个方法是为了增强代码可读性而产生的，在jQuery内部实际上时调用了is()方法来完成这个功能的，该方法等价于$(\”p\”).is(\”.another\”);

6、设置和获取 HTML、文本和值

• html()

此方法类似于javaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。

• text()

此方法类似javaScript中的innerText属性，可以用来读取或者设置某个元素的文本内容。

• val()

此方法类似于javaScript中的value属性，可以用来设置和获取元素的值，无论元素是文本框、下拉框还是单选框，它都可以返回元素的值，如果元素为多选，则返回一个包含所有选择的值的数组。

若方法有入参，则表示设置对应的值。

7、遍历节点

• children()

该方法用于取得匹配元素的子元素集合。

注意：children()方法只考虑子元素而不是其他后代元素。

• next()

该方法用于取得匹配元素后面紧邻的同辈元素。

• prev()

该方法用于取得匹配元素前面紧邻的同辈元素。

• siblings()

该方法用于取得匹配元素前后所有的同辈元素。

8、CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

可以直接利用css()方法获取元素的样式属性。

无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。

也可以直接利用css()方法设置某个元素的的那个样式。

与attr()方法一样，css()方法也可以同时设置多个样式属性。

注意：

1) 如果值是数字，将会自动转化为像素值。PX

2) 在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法，例如：

$(“p”).css({fontSize: “30px”, backgroundColor: “#888888”})

如果带上了引号，既可以写成“font-size”，也可以写成“fontSize”。

建议加上引号，养成良好的习惯。

如果需要某个元素的height属性，则可以通过如下代码实现：

在jQuery中还有另外一种方法也可以获取元素的高度，即height()，它的作用是获得匹配元素当前计算的高度值（px），如

height()方法也能用来设置元素的高度，如果传递的值是一个数字，则默认单位为px，如果要用其他单位（例如em），则必须传递一个字符串如：

若感觉对您有用，可以关注并转发，您的关注是对我莫大的支持！

关注并战法后私信“jQuery基础材料”获取线下资料，包括完整基础资料、chm文档、示例代码及其他参考资料。

上一章：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com