文章目录

  • 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->jQuery
var 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效果

属性操作