jQuery学习之一---选择器
本博文记录了大部分常用的jq选择器,需要的小伙伴可以过来瞅一眼哦,我会陆陆续续的更新系统的jq博文,一起加油吧!
基本选择器
1.id选择器:通过id名获取
<div id="div"></div>$("$div");//<div id="div"></div>
2.element:标签名选择器
<div></div>
$("div");//<div></div>
3.类名选择器:通过类名选取
<div class="div"></div>
$(".div");//<div class="div"></div>
4.*:统配选择器,匹配所有元素
<div></div>
<span></span>
$("*");//<div></div><span></span>
5.群组选择器:将每一个选择器匹配到的元素合并后一起返回
<div id="div"></div>
<span class="span"></span>
<p></p>
$("div#div,p");//<div id="div"></div>,<p></p>
层级选择器
1.后代选择器 div span
<div><span>1</span><div><span>2</span></div>
</div>
$("div span");//<span>1</span>,<span>2</span>
2.子代选择器 div>span
<div class="div"><span>1</span><div><span>2</span></div>
</div>
$(".div span");//<span>1</span>
请注意观察,这个时候第二个span标签是类名为div的孙子级了哦,所以不包含它
3.兄弟相邻选择器 div + span
紧邻在div后面的span标签
<div class="div"><span>1</span><div>1</div><div><span>2</span></div>
</div>
$("span + div");//<div>1</div>
4.兄弟选择器 div ~ span
<div class="div"><span>1</span><div>1</div><div>2</div>
</div>
$("span ~ div");//<div>1</div>,<div>2</div>
基本筛选选择器
1.:first和:last
获取第一个和最后一个元素
<ul><li>1</li><li>2</li><li>3</li>
</ul>
$("li:first");//<li>1</li>
$("li:last");//<li>3</li>
2.:gt(index)和:lt(index)
获取比大于/小于索引值的元素
<ul><li>1</li><li>2</li><li>3</li>
</ul>
$("li:gt(1)");//<li>3</li>
$("li:lt(2));//<li>1</li>
3.:header,标题元素的匹配
<ul><li>1</li><h1></h1><li>2</li><h5></h5><li>3</li>
</ul>
$(":header");//<h1></h1>,<h5></h5>
内容选择器
1.:has(selector),匹配含有选择器所匹配的元素的元素
<div><p>hello</p></div>
<div>hi</div>
$("div:has(p)");//<div><p>hello</p></div>
2.:parent,含有子元素或文本的元素
:empty,不含子元素或文本的元素
<div><p>hello</p></div>
<div>hi</div>
<div></div>
$("div:parent");//<div><p>hello</p></div>,<div>hi</div>
$("div:empty");//<div></div>
3.:contains(text),包含给定文本的元素
<div>hello</div>
<div>hi</div>
$("div:contains('hi')");//<div>hi</div>
可见性
:visible:匹配所有可见元素
:hidden:匹配所偶遇不可见或者type为hidden的元素
<div style="display:none"></div>
<div></div>
$("div:visible");//<div></div>
$("div:hidden");//<div style="display:none"></div>
属性选择器
1.[attr]:匹配包含给定属性的元素
<div><p>Hello!</p>
</div>
<div id="test2"></div>
$("div[id]");//<div id="test2"></div>
2.[attr = value]:匹配给定的属性是某个特定值的元素
[attr != value]:匹配给定的属性不是某个特定值的元素
<div id="test1"></div>
<div id="test2"></div>
$("div[id = 'test1']");//<div id="test1"></div>
$("div[id != 'test1']");//<div id="test2"></div>
3.[attr^ = value]:匹配给定属性以value开头的元素
[attr$ = value]:匹配给定属性以value结尾的元素
[attr* = value]:匹配给定属性包含value的元素
<div id="news"></div>
<div id="youngGirl"></div>
<div id="test1"></div>
$("div[id* = '1']");//<div id="test1"></div>
$("div[id^ = 'new']");//<div id="news"></div>
$("div[id$ = 'Girl']");//<div id="youngGirl"></div>
子元素选择器
1.nth-child():匹配其父元素下的第N个子或奇偶元素
<ul><li>John</li><li>Karl</li><li>Brandon</li>
</ul>
<ul><li>Glen</li><li>Tane</li><li>Ralph</li>
</ul>
$("ul li:nth-child(2)");//<li>Karl</li>,<li>Tane</li>
必须是同级里面所有标签顺序的第二个
2.nth-of-type():选择同属于一个父元素之下,并且标签名相同的子元素中的第n个。
<ul><li>John</li><span></span><li>Karl</li><span></span><li>Brandon</li>
</ul>
$("li:nth-of-type(2)");//<li>Karl</li>
只要是同类标签的第几个即可,不用在乎中间有没有其他的标签
3.:first-child,:last-child,:only-child
匹配所给选择器的第一个元素;最后一个元素;如果某个元素是父元素中唯一的子元素,那将会被匹配
<ul><li>John</li><li>Karl</li><li>Brandon</li>
</ul>
<ul><li>Glen</li><li>Tane</li><li>Ralph</li>
</ul>
<ul><li>Mike</li>
</ul>
$("ul li:first-child");// <li>John</li>, <li>Glen</li>
$("ul li:last-child");// <li>Brandon</li>, <li>Ralph</li>
$("ul li:only-child");//<li>Mike</li>
4.first-of-type,last-of-type
所有所有匹配标签的第一个,最后一个,和唯一一个
<ul><span></span><li>Karl</li><li>Brandon</li>
</ul>
<ul><li>Glen</li><li>Tane</li><span></span>
</ul>
$("ul li:first-of-type");// <li>Karl</li>, <li>Glen</li>
$("ul li:last-of-type");// <li>Brandon</li>, <li>Tane</li>
表单选择器
1.:input
<input type="file" /><input type="hidden" /><input type="image" />$(":input");//<input type="file" />,<input type="hidden" />,<input type="image" />
2.其他的就很简单了,是哪个选择器就对应的选择标签就可以了,下面以单选框和复选框打比方。
:radio,:checkbox
<input type="checkbox" />
<input type="file" />
<input type="password" />
<input type="radio" />
$("input:radio");//<input type="radio" />
$("input:checkbox");//<input type="checkbox" />
表单对象属性
1.:enabled,:disabled
匹配所有可用的不可用的元素
<form><input name="email" disabled="disabled" /><input name="id" />
</form>
$("input:enabled");//<input name="id" />
$("input:disabled");//<input name="email" disabled="disabled" />
2.:checked,单复选框的选中,select的option被选中
<input type="checkbox" checked="checked" />
<input type="radio" />
<select><option checked="checked">1</option><option></option>
</select>
$("input:checked");//<input type="checkbox" checked="checked" />
$("option:checked");//<option checked="checked">1</option>
3.:selected:匹配所有被选中的option元素
<select><option checked="checked">1</option><option>2</option><option checked="checked">3</option>
</select>
$("select option:selected");//<option checked="checked">1</option>,<option checked="checked">3</option>
jQuery学习之一---选择器相关推荐
- 70天的JQUERY学习: 选择器+事件+效果。总结篇
运行结果 这是我等下要发的代码.首先去了解Jquery的Apl:APL代码. <!DOCTYPE html> <html class="no-js loading-pr ...
- jQuery学习- 内容选择器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>内容选 ...
- jQuery学习- 位置选择器
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>位置选 ...
- jquery学习(3)--高级选择器
自己手写的学习笔记.常规选择器: /****************学习--高级选择器(1)****************/ ---高级选择器:ie7+ 层次选择器: 后代选择器 ul li ...
- jQuery学习笔记系列(一)——入口函数,jQuery对象和DOM对象,jQuery选择器、样式操作、效果(显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列)
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...
- JQuery学习04篇(层次选择器)
直接po图和代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- jQuery学习笔记(二)使用选择器一
jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的 注意,在jQuery中通过各种选择器和方法获取的结果集 ...
- jQuery 学习-样式篇(三):jQuery 选择器类型详解
推荐阅读 Helm3(K8S 资源对象管理工具)视频教程:https://edu.csdn.net/course/detail/32506 Helm3(K8S 资源对象管理工具)博客专栏:https: ...
- jquary学习(二)jquary的使用,jQuery中的选择器
目录 首先在官网下载jquary的js文件 html页面文件里面引入 jQuery中的选择器 基本选择器 id 选择器 标签选择器 $("a") 类选择器 $(".cla ...
最新文章
- Linux数据报文接收发送总结4
- K折交叉验证(StratifiedKFold与KFold比较)
- BC之链式块状结构:区块链之链式块状结构——链式块状结构、内容相关配图
- notepad++添加插件管理器
- C语言再学习 -- ctype.h字符判断函数
- windows清理图标缓存并重新加载
- (八)深入浅出TCPIP之TCP长连接与短连接详解
- Light oj 1214-Large Division (同余定理)
- pack unpack 用法 转载
- Select()和SelectMany()的区别
- cisco交换机端口“假死”现象
- mysql 数据生成_mysql生成数据
- 线段树(区间合并) HDOJ 3308 LCIS
- mysql mapinfo_MapInfo常见数据格式
- 为什么摄像头模块功耗和EMI需要求助SerDes?
- 沈小滨 项目管理中的领导力
- 2055041-21-7,Acid-PEG4-S-PEG4-acid在EDC和HATU等活化剂存在下,羧酸基团可与伯胺反应
- 新乡学院计算机主任教研室,新乡学院关于开展教研室之间互评互学活动方案
- python做题记录之切西瓜
- ubuntu 常识(转)