【jQuery基础学习】01 jQuery选择器
关于CSS选择器
jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离。
同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器。
常用的CSS选择器如下:
- 标签选择器
- 以文档元素作为选择符
a{
text-decoration:none;
}
- 以文档元素作为选择符
- ID选择器
- 以文档元素的唯一标识符ID作为选择符
#myNameDiv{
font-size:14px;
width:120px;
}
- 以文档元素的唯一标识符ID作为选择符
- 类选择器
- 以文档元素的class作为选择符
div.note{
font-size:14px;
}
.noDivNote{
font-size:10px;
}
- 以文档元素的class作为选择符
- 群组选择器
- 多个选择符应用同样的样式规则
td,p,div,a{
font-size:14px;
}
- 多个选择符应用同样的样式规则
- 后代选择器
- 元素的任意后代元素
#parentElement a{
color:red;
}
- 元素的任意后代元素
- 通配选择器
- 以文档的所有元素作为选择符
*{
font-size:14px;
}
- 以文档的所有元素作为选择符
以上选择器为主流浏览器支持的,此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器。(理论上来说,现在都应该是支持了的,这本书大概2012年的)
关于jQuery选择器
jQuery选择器与CSS选择器的写法极为相似,只不过jQuery选择器还能操作行为而已。而jQuery中操作CSS样式的部分比单纯的CSS更为强大,并且拥有跨浏览器的兼容性。
jQuery选择器来操作对比一般的DOM操作的优势,不仅仅体现在简洁明了方面,也在于获取网页中不存在的元素也不会报错。
因为jQuery选择器选择出来的永远是jQuery对象,所以在判断是否取到值的时候,不能直接if判断,而是判断$("#divId").length>0。
基本选择器
- 标签选择器 $("div")
- ID选择器 $("#myId")
- 类选择器 $(".myClass")
- 群组选择器 $("div,span,p.myClass,#myId")
- 通配选择器 $("*")
层次选择器
- 后代选择器 $(div span) 选取div里所有的span
- 下级选择器 $(div>span) 选取div里为span的下一级元素
- 相邻元素选择器 $(div+span) 选取紧挨着div元素后面的下一个span元素,等价于$(div).next("span")
- 同级元素选择器 $(div~span ) 选取div元素后面的所有span元素,等价于$(div).nextALL("span")
扩展一下$(div).siblings("span")选取的是div元素同级的所有的span元素,不分前后,而上面的同级元素选择器只能选择div后面的元素
过滤选择器
- :first 选取第一个元素,如$(div:first)就是选取所有div元素中的第一个div元素
- :last 选取最后一个元素
- :even 选取索引是偶数的所有元素,元素从0开始
- :odd 选取索引是奇数的所有元素,元素从0开始
- :eq(index) 选取索引等于index的元素
- :gt(index) 选取索引大于index的元素
- :lt(index) 选取索引小于index的元素
- :header 选取所有的标题元素,如h1,h2,h3
- :animated 选取当前正在执行动画的所有元素
- :focus 选取当前获取焦点的元素
内容过滤选择器
- :contains(text) 选取含有文本内容为text的元素,如$(div:contains('Troy'))
- :empty 选取不包含子元素或者文本的空元素
- :has(selector) 选取含有选择器所匹配的元素的元素
- :not(selector) 去除所有与给定选择器匹配的元素
- :parent 选取含有子元素或者文本的元素
可见性过滤选择器
- :hidden 选取所有隐藏的元素
- :visible 选取所有可见的元素
属性过滤选择器
- [attribute] 选择拥有此属性的元素
- [attribute=value] 选择属性的值为value的元素
- [attribute!=value] 选择属性的值不为value的元素
- [attribute1][attributeN] 选取同时满足多种属性的元素
- ------------------------------------我是一个分割线,我就觉得我应该出现在这里了,虽然我不知道为什么----------------------
- [attribute^=value] 选择属性的值以value开始的元素
- [attribute$=value] 选择属性的值以value结束的元素
- [attribute*=value] 选择属性的值含有value的元素
- [attribute|=value] 选取属性等于给定字符串或者以该字符串为前缀的元素(就是该字符串后面跟着一个"-"的元素)
- [attribute~=value] 选取属性用空格分隔的值中包含一个给定的值的元素
<div title="en"></div>
//能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]') <div title="en-UK"></div>
//能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title|="en"]') <div title="english"></div>
//能选取到:$('div[title*="en"]'),$('div[title^="en"]') <div title="en uk"></div>
//能选取到:$('div[title*="en"]'),$('div[title^="en"]'),$('div[title~="en"]') <div title="uken"></div>
//能选取到:$('div[title*="en"]'),$('div[title$="en"]')
子元素过滤选择器
- :nth-child(index/even/odd/equation) 选取每个父元素下的的第index个子集元素或者奇偶元素,且index从1算起,而:eq(index)只能匹配一个元素
- :first-child 选取每个父元素的第1个子元素
- :last-child 选取每个父元素的最后一个子元素
- :only-child 如果此元素是其父元素的唯一一个子元素则匹配
表单对象属性过滤选择器
- :enabled 选取所有可用的元素
- :disabled 选取所有不可用的元素
- :checked 选取所有被选中的元素(单选框,复选框)
- :selected 选取所有被选中的元素(下拉列表)
表单选择器
- :input 选取所有input,textarea,select,button的元素,不仅仅是input
- :text 选取所有单行的文本框
- :password 选取所有的密码框
- :radio 选取所有的单选框
- :checkbox 选取所有的多选框
- :submit 选取所有的提交按钮
- :image 选取所有的图像
- :reset 选取所有的重置按钮
- :button 选取所有的按钮
- :file 选取所有的上传域
- :hidden 选取所有不可见元素
选择器注意事项
- 对于 . # ( ) [ ]等特殊字符可以通过在前面加\\形成转义字符,如$("#id\\[sad\\]")
好吧,终于写完了。又是这个点,o(︶︿︶)o 唉!
【jQuery基础学习】01 jQuery选择器的更多相关文章
- jQuery基础学习7——层次选择器find()方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery基础学习6——基本选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery基础学习3——jQuery库冲突
默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权 ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery基础学习8——层次选择器next()和prev()方法
$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 ...
- jQuery基础学习8——层次选择器children()方法
$('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent ...
- jQuery基础学习(一)—jQuery初识
一.jQuery概述 1.jQuery的优点 jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优 ...
- jQuery基础学习4——jQuery容错性
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误. <script type="t ...
- jQuery基础学习(三)—jQuery中的DOM操作
一.查找节点 查找属性节点: 通过jQuery的选择器来完成. 操作属性节点: 调用jQuery对象的attr()来获取它的属性值. 操作文本节点: 通过text()方法 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- 云服务器 ECS Linux 系统盘数据转移方法
转自:https://help.aliyun.com/knowledge_detail/41400.html 问题描述 购买云服务器 ECS Linux 服务器时,未购买数据盘,使用一段时间后,随着业 ...
- egit - not authorized
A. To specify credentials individually for each remote Open Git repositories view, open "Remote ...
- 通过PowerShell获取Windows系统密码Hash
当你拿到了系统控制权之后如何才能更长的时间内控制已经拿到这台机器呢?作为白帽子,已经在对手防线上撕开一个口子,如果你需要进一步扩大战果,你首先需要做的就是潜伏下来,收集更多的信息便于你判断,便于有更大 ...
- 初识WEB:输入URL之后的故事【转】
转载一篇文章,分析的是浏览器输入url后所执行的一系列操作!写得非常清晰易懂,分享给大家! 作者:Jesse 出处:http://jesse2013.cnblogs.com/ 本文版权归作者和博客园共 ...
- 数据库必会必知 之 SQL四种语言:DDL DML DCL TCL
作者:泥瓦匠 今天群里面讨论,DDL 还是 DML,我这种小白还是总结下他们的区别吧. 1. DDL - Data Definition Language 数据库定义语言:定义数据库的结构. 其主要命 ...
- jade模板引擎学习笔记(WebsStorm9.0.3+ nodejs+express+jade)
jade环境搭建 jade标签写法 jade注释 jade添加类名.id.属性 jade添加脚本,css jade变量 jade多行文本显示 jade流程代码:for,each,while jade流 ...
- cmd窗口编码方式的修改
cmd默认的编码是采用GBK regedit HKEY_CURRENT_USER\Console\%SystemRoot%_system32_cmd.exe\CodePage 十进制:936 GB ...
- sqlserver 字符串最后一次的位置,截取字符串
--reverse:字符串倒排 SUBSTRING(字段,1,len(字段)- CHARINDEX('-',REVERSE(字段)))
- node递归属性目录结构
要求,读取结束后才能输出所有文件 var fs = require('fs');var path = require('path'); var list = [];var count = 0;func ...
- jqGrid标题行与第一行之间有很大空白的问题解决。
如题的问题,网上找了很久,都没有解决方案.最后发现,问题不在jqgrid的配置代码,问题在前台HTML代码. <table id="grid" height="30 ...