jQuery 选择器简介
jQuery 选择器简介
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
1 .基本选择器
$("#test") 选择id值为test的元素,id值是唯一的所以返回单个元素。 $("div") 选择所有的div标签元素,返回div元素数组 $(".myclass") 选择使用myclass类的css的所有元素 $("*") 选取所有元素。 $("#test,div,.myclass") 选取多个元素。
2.层次选择器
$("div span") 选取<div>里的所有<span>元素$("div >span") 选取<div>元素下元素名是<span>的子元素$("#one +div") 选取id为one的元素的下一个<div>同辈元素 等同于$("#one").next("div") $("#one~div") 选取id为one的元素的元素后面的所有<div>同辈元素 等同于$("#one").nextAll("div") $("#one").siblings("div") 获取id为one的元素的所有<div>同辈元素(不管前后) $("#one").prev("div") 获取id为one的元素的前面紧邻的同辈<div>元素 所以 获取元素范围大小顺序依次为: $("#one").siblings("div")>$("#one~div")>$("#one +div") 或是 $("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
3.基本过滤选择器
$("div:first") 选取所有<div>元素中第1个<div>元素 $("div:last") 选取所有<div>元素中最后一个<div>元素 $("input:not(.myClass)") 选取class不是myClass的<input>元素 $("input:even") 选取索引是偶数的<input>元素(索引从0开始) $("input:odd") 选取索引是基数的<input>元素(索引从0开始) $("input:eq(2)") 选取索引等于2的<input>元素 $("input:gt(4)") 选取索引大于4的<input>元素 $("input:lt(4)") 选取索引小于4的<input>元素 $(":header") 过滤掉所有标题元素,例如:h1、h2、h3等 $("div:animated") 选取正在执行动画的<div>元素 $(":focus") 选取当前获取焦点的元素
4.内容过滤选择器
$("div:contains('Name')") 选取所有<div>中含有'Name'文本的元素 $("div:empty") 选取不包含子元素(包括文本元素)的<div>空元素 $("div:has(p)") 选取所有含有<p>元素的<div>元素 $("div:parent") 选取拥有子元素的(包括文本元素)<div>元素
5.可见性过滤选择器
$("div:hidden") 选取所有不可见的<div>元素 $("div:visible") 选取所有可见的<div>元素
6.属性过滤选择器
$("div[id]") 选取所有拥有属性id的元素 $("input[name='test']") 选取所有的name属性等于'test'的<input>元素 $("input[name!='test']") 选取所有的name属性不等于'test'的<input>元素 $("input[name^='news']") 选取所有的name属性以'news'开头的<input>元素 $("input[name$='news']") 选取所有的name属性以'news'结尾的<input>元素 $("input[name*='news']") 选取所有的name属性包含'news'的<input>元素 $("div[title|='en']") 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素 $("div[title~='en']") 选取属性title用空格分隔的值中包含字符en的<div>元素 $("div[id][title$='test']") 选取拥有属性id,并且属性title以'test'结束的<div>元素
7.子元素过滤选择器
$("div .one:nth-child(2)") 选取class为'one'的<div>父元素下的第2个子元素$("div span:first-child") 选取每个<div>中的第1个<span>元素 $("div span:last-child") 选取每个<div>中的最后一个<span>元素 $("div button:only-child") 在<div>中选取是唯一子元素的<button>元素
8.表单对象属性过滤选择器
$("#form1 :enabled") 选取id为'form1'的表单内所有可用元素 $("#form2 :disabled") 选取id为'form2'的表单内所有不可用元素 $("input :checked") 选取所有被选中的<input>元素 $("select option:selected") 选取所有的select 的子元素中被选中的元素
9.表单选择器
$(":input") 选取所有<input>,<textarea>,<select> 和 <button>元素 $(":text") 选取所有的单行文本框 $(":password") 选取所有的密码框 $(":radio") 选取所有单的选框 $(":checkbox") 选取所有的多选框 $(":submit") 选取所有的提交按钮 $(":image") 选取所有的图像按钮 $(":reset") 选取所有的重置按钮 $(":button") 选取所有的按钮 $(":file") 选取所有的上传域 $(":hidden") 选取所有不可见元素
转载于:https://www.cnblogs.com/wang1593840378/p/6368832.html
jQuery 选择器简介相关推荐
- jquery选择器连续选择_jQuery选择器简介
您可能已经知道, CSS3引入了一组新的选择器,使我们能够在添加HTML类较少的情况下选择文档中的元素 . 但是,新CSS选择器依赖于浏览器的功能,因此在某些情况下不适用. jQuery有一组选择器, ...
- 推荐JQuery学习简介
"从零学习jQuery"系列教程收到了很多人喜欢, 也完成了一本介绍jQuery的书: "jQuery风暴" 在这里向大家郑重推荐这本书. 写书的时候jQuer ...
- Java程序员从笨鸟到菜鸟之(八十六)跟我学jquery(二)大话jquery选择器
本篇博客我将带大家来学习一下jQuery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer ...
- 6JS库-前端框架(库)-jQuery选择器
#jQuery选择器 请列举出在CSS中学习过的选择器的类型 jQuery选择器的优势有哪些? jQuery选择器包括哪几大类? 通过位置选取元素的jQuery选择器有哪些? 课件 1jQuery选择 ...
- JQuery——选择器作业
一.省市级连 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
- 常用CSS与Jquery选择器
1.常用CSS选择器 在介绍CSS选择器之前先介绍CSS各个选择器的权重,权重用于解决CSS样式的冲突问题. a.选择器权重 选择器 权重 继承 * 0,0,0,0 伪元素,元素选择器 0,0,0,1 ...
- jQuery框架简介
jQuery框架简介 1.jQuery框架是JS代码写出来的,本身就算一个JS文件 2.由第三方厂商做出来的,免费开源 3.提供大量的方法,以前需要编写多行代码的功能,现在一行代码就可以实现 4.程序 ...
- xpath选择器简介及如何使用
xpath选择器简介及如何使用 一.总结 一句话总结:XPath 的全称是 XML Path Language,即 XML 路径语言,它是一种在结构化文档(比如 XML 和 HTML 文档)中定位信息 ...
- 【jquery】jquery选择器
知识点 1.jquery选择器的作用是选择jquery页面中的html元素. 2.常用的选择器有:基本选择器.层级选择器.过滤选择器.属性选择器. 基本选择器 1. id 选择器 代码实现: elem ...
- JQuery——选择器分类
JQuery选择器 1 什么是JQuery选择器 快速高效的找到指定节点,支持css语法设置页面 2 JQuery选择器分类 2.1 基本选择器 CSS选择器 层级选择器 表单域选择器 ...
最新文章
- linux——Shell脚本说明、创建、执行、调试
- Net设计模式实例之单例模式( Singleton Pattern)
- C/C++学习之路: 模板和异常
- use SAP web IDE to commit change to git
- 后端技术:Java中Spring 和 Spring Boot 有哪些区别,看完你就明白了!
- 【连载】如何掌握openGauss数据库核心技术?秘诀四:拿捏事务机制(3)
- 华为手机改定位怎么改变_华为推送HMS服务,依靠鸿蒙OS,或将改变手机行业格局...
- python 长度queue_Python基础知识梳理
- Coolite中的ComboBox控件示例
- 张果老能是鸿蒙时期一蝙蝠,张果老(中国古代神话传说八仙之一)_百度百科...
- 多媒体技术及应用:概述、多媒体技术的特征、多媒体硬件系统、多媒体存储技术
- Please refer to dump files (if any exist) [date].dump, [date]-jvmRun[N].dump and [date].dumpstream.
- sz方法从服务器下载超过4g文件方法
- 超详细Gulp打包seajs模块压缩合并,绝对对你项目有帮助 ~
- 单片空间后方交会 python实现
- 程序员为什么不写注释
- 文件的打开方式怎么用计算机,电脑怎样修改文件默认打开方式
- 360锁屏壁纸在哪个文件夹
- Tableau筛选器:仪表板中运用地图做筛选器
- iphone ios 视频采集AVCaptureSessionPresetHigh/Medium/Low分辨率等参数