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

# 一、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)
}
更新于 : 7/8/2024, 10:21:14 AM