系列文章目录
文章目录
- 系列文章目录
- 一、jQuery简介
- 二、选择器和筛选器
- 1. 基本选择器
- 2. 组合选择器
- 3. 选择器分组
- 4. 基本筛选器
- 5. 属性选择器
- 6. 表单筛选器
- 7. 筛选器方法
一、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") | 所有 元素 | |
$(":text") | 所有 type=“text” 的 元素 | |
$(":password") | 所有 type=“password” 的 元素 | |
$(":radio") | 所有 type=“radio” 的 元素 | |
$(":checkbox") | 所有 type=“checkbox” 的 元素 | |
$(":submit") | 所有 type=“submit” 的 元素 | |
$(":reset") | 所有 type=“reset” 的 元素 | |
$(":button") | 所有 type=“button” 的 元素 | |
$(":image") | 所有 type=“image” 的 元素 | |
$(":file") | 所有 type=“file” 的 元素 | |
$(":enabled") | 所有激活的input元素 | |
$(":disabled") | 所有禁用的input元素 | |
$(":selected") | 所有被选取的 input 元素 | |
$(":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(选择器)')
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
