jQuery入门 | 任先生的笔记库

jQuery 是一个封装的 JavaScript 方法库，除此之外还加了一些其他的功能，因此也可以叫做一个前端库。

链接

jQuery 中文网 (opens new window)
jQuery API 中文网 (opens new window)

# 一、JQuery

# 安装

jQuery 文件下载 (opens new window)

前端 CDN 公共库- BootCDN (opens new window)

# 1、简介

它之所以能被人们广泛使用，是因为他有下面的几个优点：

优质的选择器和筛选器
好用的隐式迭代
强大的链式编程

核心：一行代码解决问题

# 2、使用

方式 1

<script src="lib/jquery.js"></script>
<script>
  console.log($)
  console.log(jQuery)

  console.log($ === jQuery)
</script>

方式 2

# 使用npm包下载
npm i jquery -S

# es6语法导入
import $ from 'jquery'

# 二、jQuery 选择器

# 1、基本选择器

在基本选择器中，使用$()和原生 js 的 querySelector()的作用类似。

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
</ul>
<div id="box"></div>

<script>
  console.log($(ul li)) // 返回的是一个✨伪数组

  console.log($("#box")) // 返回的是一个伪数组
</script>

# 2、伪类选择器 ✨

css 中的伪类选择器 jQuery 中基本也是能用的：

// 1、首尾
// :first-child、:last-child
console.log($('ul li:first-child'))

// 2、任意
// :nth-child(1)、:nth-last-child(1)
console.log($('ul li:nth-child(1)')) // 奇数 odd、偶数 even、小于6 -n+6、大于6 n+6

// 3、类型
// :nth-of-type(1)、:nth-last-of-type(1)
console.log($('ul li:nth-of-type(1)'))

除此之外， jQuery 提供了一些它特有的内容（对原生 css 的封装）：

// 1、首尾
// :first、:last（注意它和:first-child、:last-child使用的区别🤔---一份）
console.log($('ul li:first'))

// 2、任意
// :eq （注意它和:nth-child(1)、:nth-of-type(1)使用的区别 🤔---一份）
console.log($('ul li:eq(0)')) // 等于eq
console.log($('ul li:lt(6)')) // 小于6 lt、大于6 gt
console.log($('ul li:odd')) // 奇数 odd、偶数 even

注意

jQuery 方法中提供的方法的 n 表示的是元素的索引值，而原生方法中的 n 表示第几个元素：

<ul>
  <li>苹果</li>
  <li>梨子</li>
  <p>------</d>
  <li>葡萄</li>
  <li>西瓜</li>
</ul>

<script>
  $('li:eq(1)').css('color', 'red')

  document.querySelector('li:nth-child(1)').style.color = 'skyblue'
</script>

在使用上，在选择器和方法间也可以进行选择：

$(`ul li:eq(${index})`)
$('ul li').eq(index)

// 类似的还有：
$('ul > li:nth-of-type(3)').css('color', 'red')
$('ul').children('li').eq(2).css('color', 'red')

document.querySelectorAll('ul > li:nth-of-type(3)')[0].style.color = 'red'
document.querySelector('ul > li:nth-of-type(3)').style.color = 'red'

# 3、显示与隐藏

在上面的伪类选择器中，jQuery 其实还提供了：

我们可以🌝使用这两个可见性伪类选择器，对页面上显示或者隐藏的元素进行相关操作。

选择器	说明
:visible	选取所有可见元素。
:hidden	选取所有不可见元素。

$('#btn1').click(function () {
  $('div:hidden').css('display', 'block') /*让隐藏元素显示到页面上*/
})

# 三、筛选与链式

# 1、体验

<ul class="list">
  <li>one</li>
  <li class="active">two</li>
  <li>three</li>
  <li class="lencamo">four</li>
  <li>five</li>
  <li class="end">six</li>
  <li>seven</li>
  <li>
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </li>
</ul>

<script>
  console.log($('ul li').eq(3).removeclass().first())

  // 1、前后
  console.log($('ul li.active').next().nextAll('.lencamo').nextUntil('.end')) // 当然与之对应的是 prev(前)、siblings(前后：除自己以外)

  // 2、父子
  console.log($('li.active').parent())
  console.log($('ul.list').children()) // 浅
  // console.log($('ul').find('li')) // 深

  // 3、索引
  console.log($('ul li.active').index())
</script>

# 2、伪类 🎈

对于伪类，在 css 原生中，其实还有：

选择器	说明
:has(selector)	对包含指定选择器的元素进行操作
:not(selector)	对不包含指定选择器的元素进行操作
:empty	对空元素进行操作
:checked (opens new window) 👏	对处于选中状态的 `radio`, `checkbox`（input 表单）或 `option`（select 选择框）操作

css 原生中的 :checked

input 表单中

<input type="checkbox" name="checkItem" value="1" /> one<br />
<input type="checkbox" name="checkItem" value="2" /> two<br />

document.querySelectAll([name=checkItem]:checkbox:checked)

select 选择框中

document.querySelectorAll('#leftSelect option:checked')

见后面的 —— 打印选中的 options 数组案例

对应的，jQuery 中还有：

文本伪类选择器

选择器	说明
:contains(text)	对包含指定 text 文本的元素进行操作
:parent	对含有文本或者子元素的元素进行操作

表单 👀 伪类选择器

选择器	说明
:button	选取所有 input 类型为 button 的元素（其他同理）

:checked	选取所有被选中的表单元素
:selected	选取被选中的表单元素项
:enabled	选取所有可用的表单元素

# 3、each 遍历

each() 方法规定为每个匹配元素规定运行的函数。返回 false 可用于及早停止循环。

$(selector).each(function(index,element))

tip

element - 当前的元素（也可使用 $(this)）

# ① 简单使用：

$('button').click(function () {
  $('li').each(function () {
    alert($(this).text())
  })
})

# ② 应用场景：

打印选中的 options 数组

在线演示 (opens new window)

<select multiple id="leftSelect">
  <option value="小花">小花</option>
  <option value="二狗">二狗</option>
  <option value="三叔">三叔</option>
  <option value="闷油瓶">闷油瓶</option>
  <option value="胡八一">胡八一</option>
  <option value="胖子">胖子</option>
  <option value="杨参谋">杨参谋</option>
</select>
<button onclick="selectOptions_1_1()">原生1-查看</button>
<button onclick="selectOptions_1_2()">原生2-查看</button>
<button onclick="selectOptions_2()">jQuery-查看</button>

原生实现

selectedOptions 属性

function selectOptions_1_1() {
  let selectList = []
  Array.from(document.querySelector('#leftSelect').selectedOptions).forEach((item) => {
    selectList.push(item)
  })

  console.log(document.querySelector('#leftSelect').selectedOptions)
  console.log(selectList)
}

:checked 属性

function selectOptions_1_2() {
  let selectList = []
  Array.from(document.querySelectorAll('#leftSelect option:checked')).forEach((item) => {
    selectList.push(item)
  })

  console.log(document.querySelectorAll('#leftSelect option:checked'))
  console.log(selectList)
}

关于 HTMLCollection 对象

在原生中，我们可以通过 Array.from()将 HTMLCollection 对象 / NodeList 对象转为数组然后遍历
但在 jQuery 中，我们可以直接使用 each()方法对通过$("")获取的类数组对象进行遍历

jQuery 实现

:selected 伪类

function selectOptions_2() {
  let selectList = []
  $('#leftSelect option:selected').each((index, elm) => {
    selectList.push(elm)
  })

  console.log($('#leftSelect option:selected'))
  console.log(selectList)
}

← DOM事件 DOM操作 →