文章目录

• what\’s jQuery
• 入口函数
• jQuery对象与DOM对象的相互转换
• jQuery常见API
• 选择器
• 设置样式
• 隐式迭代
• 筛选选择器
• 获取第一个元素
• 获取最后一个元素
• 按索引获取元素
• 获取索引为基数或偶数的元素

• 查找父级或组先级元素
• 查找子元素或子孙级
• 查找兄弟元素
• 查找当前元素之前或之后的所有同辈元素
• 查找第n个元素
• 检查当前元素是否含有某个特定的类

• *样式操作*
• *jQuery效果*
• *属性操作*

what’s jQuery

jQuery是一种JS库，能够快速方便的操作DOM，因为它里面都是一些封装好的JS函数（方法）。

入口函数

在前端开发中，一般先等页面DOM加载完毕，再执行JS代码，所谓的入口函数就是起这个功能。在jQuery中，入口函数一般有两种形式。
第一种形式：

// 第一种形式，其中$也可换成jQuery$(document).ready(function(){codeblock;})

第二种形式：

// 第二种形式，$可换jQuery$(function(){codeblock;})

因为效率以及懒惰的原因，我们一般使用第二种形式。

jQuery对象与DOM对象的相互转换

jQuery对象只能使用jQuery属性和方法，而原生DOM对象也只能使用原生JS的属性和方法，所以在一些使用场景下，我们必须将它们转换才能使用。
下面展示几种

转换形式

。

// DOM->jQueryvar n = documnet.querySelector(\"vedio\");//获取DOM节点$(n);//DOM对象 n 转换为jQuery对象 $(n)

// jQuery->DOM两种形式1.$(\"div\")[index];//index为索引，因为$获取的结果是数组形式2.$(\"div\").get(index);

特别注意：因为我例子里面使用的是vedio标签，而在chrome浏览器中是禁止音视频自动播放的，如果需要使用自动播放，则在vedio属性里加上 muted属性，即静音。

jQuery常见API

选择器

// css选择器$(\"selector\");

设置样式

//获取属性$(\"selector\").css(\"attribute\");// 设置样式$(\"selector\").css(\"attribute\",\"value\");

隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代。同时，jQuery中也是有遍历存在的，两者的差别是：隐式迭代是对同一类元素进行同样的操作，遍历是对同一类元素进行不用的操作。

筛选选择器

获取第一个元素

//获取第一个元素$(\"selector:first\");

获取最后一个元素

// 获取最后一个元素$(\"selector:last\");

按索引获取元素

//按索引获取元素$(\"selector\").eq(index);

获取索引为基数或偶数的元素

$(\"selector\").odd;// 获取索引为基数的元素$(\"selector\").even;// 获取索引为偶数的元素

筛选方法

查找父级或组先级元素

// 查找父级元素$(\"selector\").parent();//查找祖先级元素$(\"selector\").parents();

查找子元素或子孙级

// 查找子元素$(\"selector\").children();//查找子孙级元素$(\"selector\").find();

查找兄弟元素

// 查找兄弟元素，不包括自己$(\"selector\").siblings();

查找当前元素之前或之后的所有同辈元素

// 查找当前元素之后的所有同辈元素$(\"selector\").nextAll();//查找当前元素之前的所有同辈元素$(\"selector\").prevAll();

查找第n个元素

// 查找第n个元素$(\"selector:eq(index)\");//第一种方式$(\"selector\").eq(index);//第二种方式

检查当前元素是否含有某个特定的类

// 检查当前元素是否含有某个特定的类，如果有，返回true$(\"selector\").hasClass(\"classname\");

下期知识点：

样式操作

jQuery效果

属性操作