jQuery入门&以及选择器

r囧r小猫 2023-10-08 22:07 20阅读 0赞

### 一、jQuery基本介绍 ###

> jQuery 是一个快速、简洁的 **`JavaScript 库`**，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。

#### 1.1 什么是jQuery ####

> **jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。**
> 
> j 就是 JavaScript； Query 查询； 意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。
> 
> **jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。**
> 
> **学习jQuery本质： 就是学习调用这些函数（方法）。**
> 
> jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

*  一个优秀的 JS 函数库
 *  `Write Less，Do More！！！`

#### 1.2 使用 jQuery ####

**在页面中引入 jQuery 库**

<script src="./jquery-3.6.0.js"></script>

**jQuery 核心函数**

简称：`jQuery`函数（`$`/`jQuery`），`jQuery`库向外直接暴露的就是`$`/`jQuery`

引入`jQuery`库后，直接使用即可

*  当函数用：`$(xxx)`
 *  当对象用：`$.xxx()`

// jQuery函数：直接可用
    console.log($, typeof $);  // ƒ ( selector, context ) {}    function
    console.log(jQuery === $); // true

**jQuery 核心对象**

简称：`jQuery`对象

得到`jQuery`对象：执行`jQuery`函数返回的就是`jQuery`对象

使用`jQuery`对象：`$obj.xxx()`

// jQuery对象：执行jQuery函数得到它
    console.log($(), typeof $(), $() instanceof Object); // jQuery.fn.init {} "object" true

#### 1.3 入口函数 ####

一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，或者可以使用下方入口函数解决

### 二、选择器 ###

jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素

#### 2.1 基本选择器 ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ID选择器</td> 
   <td>$('#id');</td> 
   <td>获取指定ID的元素</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>$('.class');</td> 
   <td>获取同一类class的元素</td> 
  </tr> 
  <tr> 
   <td>标签选择器</td> 
   <td>$('div');</td> 
   <td>获取同一类标签的所有元素</td> 
  </tr> 
  <tr> 
   <td>并集选择器</td> 
   <td>$('div,p,li');</td> 
   <td>使用逗号分隔，只要符合条件之一就可。</td> 
  </tr> 
  <tr> 
   <td>交集选择器</td> 
   <td>$('div.redClass');</td> 
   <td>获取class为redClass的div元素</td> 
  </tr> 
  <tr> 
   <td>属性选择器</td> 
   <td>$('input[name=username]')</td> 
   <td>获取 input 标签中 name 属性为 username 的元素</td> 
  </tr> 
 </tbody> 
</table>

注意：jQuery选择器返回的是jQuery对象。

#### 3.2 层级选择器 ####

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>子代选择器</td> 
   <td>$('ul &gt; li');</td> 
   <td>使用 &gt; 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td>$('ul li');</td> 
   <td>使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等</td> 
  </tr> 
 </tbody> 
</table>

#### 3.3 过滤选择器 ####

这类选择器都带冒号:

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:eq（index）</td> 
   <td>$('li:eq(2)').css('color', 'red');</td> 
   <td>获取到的li元素中，选择索引号为2的元素，索引号index从0开始。</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>$('li:odd').css('color', 'red');</td> 
   <td>获取到的li元素中，选择索引号为奇数的元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>$('li:even').css('color', 'red');</td> 
   <td>获取到的li元素中，选择索引号为偶数的元素</td> 
  </tr> 
 </tbody> 
</table>