jQuery-使用方法、选择器和筛选器

系列文章目录

一、jQuery简介

• jQuery简介：

  jQuery是一个轻量级的JavaScript库，能极大地简化JavaScript编程。兼容所有主流浏览器、支持Ajax操作。

• 下载使用jQuery：

  到jQuery官网下载jQuery，development版本是没有压缩过的，代码逻辑清晰，适合开发环境使用；production版本是压缩过的，加载速度快，适合生产环境使用。

  点击development版本后，显示的是jquery的源代码，新建js文 件，粘贴保存这些源码即可。

  引入方法和我们写的js文件的引入方法是一样的。

• 免下载使用jQuery：

  可以到bootCDN搜索jQuery，版本名称带有min的，是压缩版本；不带min就是没有压缩的。

  点击未压缩版本后面的“复制<script>标签”，将内容粘贴到html中。这种方法每次加载页面都会从bootcdn下载jQuery，所以需要联网。

• jQuery基础语法结构：

  jQuery(选择器).action()
  

  也可以简写为：

  $(选择器).action()  // jQuer与$是等价的
  

二、选择器和筛选器

jQuery选择器的写法和CSS的十分相似，可以在这篇文章中找到CSS的选择器写法：CSS-引入方式和选择器。

1. 基本选择器

• id选择器：

  $('#元素id')
  

• 类选择器：

  $('.元素class值')  // 注意开头的英文句号
  

• 标签选择器：

  $('元素标签名')
  

• 通用选择器：

  $(*)
  

以上三种方法返回的是jQuery对象，类似于js的数组，但并不是真正的元素对象。元素对象是指用原生js代码获取到的标签元素，如：document.getElementById('元素id')，返回的就是元素对象。

之前学到的针对元素对象的各种方法不能用在jQuery对象上，因此需要转换：

• jQuery对象转为元素对象：

  可以使用数组索引的方法，获得目的元素对象：

  $('#元素id')[索引]
  

• 元素对象转为jQuery对象：

  $(元素对象)
  

2. 组合选择器

• 后代选择器：

  $('选择器 选择器')
  

• 子选择器：

  $('选择器>选择器')
  

• 相邻弟弟选择器：

  $('选择器+选择器')
  

• 普通弟弟选择器：

  $('选择器~选择器')
  

3. 选择器分组

选取出多个元素，应用同一套操作。

$('选择器1,选择器2……')

4. 基本筛选器

• 从选择器所选元素中，筛选出第一个：

  $('选择器:first')
  

• 从选择器所选元素中，筛选出最后一个：

  $('选择器:last')
  

• 从选择器所选元素中，筛选出索引指定的元素：

  $('选择器:eq(索引)')  // 索引从1开始
  

• 从选择器所选元素中，筛选出索引为偶数的元素：

  $('选择器:even') 
  

• 从选择器所选元素中，筛选出索引为奇数的元素：

  $('选择器:odd') 
  

• 从选择器所选元素中，筛选出索引大于指定数字的元素：

  $('选择器:gt(数字)') 
  

• 从选择器所选元素中，筛选出索引小于指定数字的元素：

  $('选择器:lt(数字)') 
  

• 从选择器A所选元素中，移除选择器B所选的元素：

  $('选择器A:not(选择器B))
  

• 从选择器A所选元素中，筛选出包含选择器B所选元素的元素：

  $('选择器A:has(选择器B))
  

5. 属性选择器

• 选择带有某个属性的所有元素：

  $('[属性名]')
  

• 选择属性等于某个值的所有元素：

  $('[属性名="值"]')
  

6. 表单筛选器

筛选器	举例	说明
:input	$(":input")	所有 元素
:text	$(":text")	所有 type=“text” 的 元素
:password	$(":password")	所有 type=“password” 的 元素
:radio	$(":radio")	所有 type=“radio” 的 元素
:checkbox	$(":checkbox")	所有 type=“checkbox” 的 元素
:submit	$(":submit")	所有 type=“submit” 的 元素
:reset	$(":reset")	所有 type=“reset” 的 元素
:button	$(":button")	所有 type=“button” 的 元素
:image	$(":image")	所有 type=“image” 的 元素
:file	$(":file")	所有 type=“file” 的 元素
:enabled	$(":enabled")	所有激活的input元素
:disabled	$(":disabled")	所有禁用的input元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

该表引用自W3school。

7. 筛选器方法

• $(……).next()：获取下一个元素。
• $(……).nextAll()：获取同一层中，下面的所有元素。
• $(……).nextUntil('选择器A')：向下获取同层元素，直到选择器A所选的元素为止，且不包含该元素。
• $(……).prev()：获取上一个元素。
• $(……).prevAll()：获取同一层中，上面的所有元素。
• $(……).prevUntil('选择器A')：向上获取同层元素，直到选择器A所选的元素为止，且不包含该元素。
• $(……).parent()：获取父元素。
• $(……).parents()：获取所有祖先元素，包括父元素的父元素……。
• $(……).parentsUntil()： 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
• $(……).children()：获取子元素。
• $(……).siblings()：获取兄弟元素，即同一层上下的所有元素。
• $(……).find(选择器A)：从前面的选择器找到的元素中，按照选择器A获取元素。
• $(选择器).first()等价于$('选择器:first')。
• $(选择器).last()等价于$('选择器:last')。
• $(选择器).not(选择器)等价于$('选择器:not(选择器)')

下一篇