jquery 学习(一) - 选择器
基本选择器(html)
<div>123</div>
<div id="n1">123</div>
<span>321</span>
<div class="n2"><span>ABC</span>123</div>
<div>123</div>
jquery:
// 基本语法:
// $(select).action() //基本选择器:
//所有匹配
$('*').css('color','#C0FF3E');
//id匹配
$('#n1').css('color','#CD00CD');
//标签匹配
$('span').css('color','#68228B');
//class匹配
$('.n2').css('color','#338b0e');
//组合匹配
$('.n2 span').css('color','#54FF9F');
层级选择器(html)
<!--层级选择器-->
<p>XXXXX0</p>
<div class="n10">
<div><p>XXXXXX1</p></div>
<p>XXXXXX2</p>
</div>
<p>XXXXX3</p>
<div>aaaaaa</div>
<p>XXXXX4</p>
jquery
// 层级选择器
// 子类选择器
$('.n10>p').css('color','#54FF9F');
// 兄弟选择器
$('.n10+p').css('color','#54FF9F');
// 多个兄弟选择器
$('.n10~p').css('color','#54FF9F');
筛选器(html)
<!--筛选器-->
<ul>
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
<li>555555</li>
<li>666666</li>
<li>777777</li>
<li>888888</li>
</ul>
jquery
// 筛选器
$('li:first').css('color','#54FF9F');
$('li:last').css('color','#54FF9F');
$('li:eq(2)').css('color','#54FF9F');
$('li:gt(2)').css('color','#54FF9F');
$('li:lt(6)').css('color','#54FF9F'); $('li').eq(2).css('color','#54FF9F');
$('li').first().css('color','#54FF9F');
$('li').last().css('color','#54FF9F'); // 单数行
$('li:even').css('color','#54FF9F');
// 双数行
$('li:odd').css('color','#54FF9F');
属性/表单(HTML)
<!--属性选择器-->
<p n1="n1">this n1 !!! </p>
<p n2="n2">this n2 !!!</p>
<p id="idx" n2="n2">this n3 !!!</p> <!--表单选择器-->
<form>
<input type="text">
<input type="password">
<input type="submit">
</form>
jquery
//属性选择器
$('[n1]').css('color','#54FF9F');
$('[n2="n2"]').css('color','#ff2727');
$("[n2='n2'][id='idx']").css('color','#fb00ff'); // 表单选择器
$("[type='text']").css('width',"300px")
$(":text").css('width',"400px")
查询筛选器
<!--查询筛选器 -->
<div id="AA">AA</div>
<div class="BB">BB
<div class="BB1">BB1
<p>BB-BB1-BBB1</p>
<p>BB-BB1-BBB2</p>
<p>BB-BB1-BBB3</p>
</div>
<div class="BB2">BB2
<p>BB-BB2-BBB1</p>
<p>BB-BB2-BBB2</p>
<p>BB-BB2-BBB3</p>
</div>
<div class="BB3">BB3
<p class="BB3-p1">BB-BB3-BBB1</p>
<p class="end">BB-BB3-BBB2</p>
<p>BB-BB3-BBB3</p>
<p>BB-BB3-BBB3</p>
<p>BB-BB3-BBB3</p>
<p>BB-BB3-BBB3</p>
<p class="end">BB-BB3-BBB3</p>
<p>BB-BB3-BBB3</p>
</div>
</div>
<div id="CC">CC</div>
jquery
// 查询筛选器
$('.BB').children('.BB1').css('color','#ff2727');
$('.BB').find('div').css('color','#ff2727'); $('.BB').next().css('color','#ff2727');
$('.BB1').nextAll().css('color','#ff2727');
$('.BB1').nextAll().css('color','#ff2727');
$('.BB3').children('p').eq(4).nextUntil().css('color','#ff2727'); $('.BB3').children('p').eq(4).prev().css('color','#ff2727');
$('.BB3').children('p').eq(4).prevAll().css('color','#ff2727');
$('.BB3').children('p').eq(6).prevUntil('.end').css('color','#ff2727'); $('.BB3-p1').parent().css('color','#ff2727');
$('.BB3-p1').parents().css('color','#ff2727');
$('.BB3-p1').parentsUntil('body').css('color','#ff2727'); $('.BB2').siblings().css('color','#ff2727'); // 判断一个标签内是否有classname
console.log($('.BB3').children('p').hasClass('BB3-p1'))
jquery 学习(一) - 选择器的更多相关文章
- jQuery学习- 子选择器与可见性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习- 内容选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习- 层叠选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习- 位置选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习-属性选择器
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery学习-基本选择器
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jQuery学习之------选择器
a.id选择器 <div id=”test1”></div> var div1=$(“#test1”); //同css的写法一样id选择器用#号实 ...
- jquery学习:选择器&dom操作
分类; 1.基本选择器 1.标签选择器(元素选择器) * 语法:$("html标签名”) 获得所有匹配标签名称的元素 2.id选择器 * 语法:$("#id的属性值" ...
- jQuery学习(三)——选择器总结
1.基本选择器 id选择器:$(“#id名称”); 元素选择器:$(“元素名称”); 类选择器:$(“.类名”); 通配符:* 多个选择器共用(并集) 案例代码: <!DOCTYPE html& ...
随机推荐
- 2019.3.18考试&2019.3.19考试&2019.3.21考试
2019.3.18 C O D E T1 树上直接贪心,环上for一遍贪心 哇说的简单,码了将近一下午终于码出来了 感觉自己码力/写题策略太糟糕了,先是搞了一个细节太多的写法最后不得不弃疗了,然后第二 ...
- JAVA8给我带了什么——lambda表达
这此年来我一直从事.NET的开发.对于JAVA我内心深处还是很向往的.当然这并不是说我不喜欢.NET.只是觉得JAVA也许才是笔者最后的归处.MK公司是以.NET起家的.而笔者也因为兄弟的原因转行.N ...
- 【LOJ#6279】数列分块3
题目大意:维护 N 个数组成的序列,支持两种操作:区间加.区间查询某个值的前驱(小于该值的最大值,若无前驱,输出-1). 题解1:可以像分块2一样,维护每个块内元素的一个有序序列,每次查询时二分查找即 ...
- poj3070_斐波那契数列(Fibonacci)
用矩阵求斐波那契数列,快速幂log(n),只用求最后4位(加和乘的运算中前面的位数无用) #include <stdio.h> #include <stdlib.h> int ...
- myeclipse如何设置或关闭断点调试自动跳入debug模式
遇到了很坑的问题,在myeclipse(eclipse应该也一样)开发过程中,打了断点调试,最初时候会弹出一个弹出框,让你选择是否进入debug模式,结果一不小心点了一个记住选择,然后选择了yes,结 ...
- Linux下JDK+Eclipse安装
Ubuntu版本14.04 JDK8_144 eclipse最新下载 注:原本安装JDK7配置好环境后报错,原来是最新eclipse的一个功能只有JDK8支持,若想使用JDK7需要注释某条代码 JDK ...
- 在Win10中,在安装msi安装包的时候常常会出现代码为2502、2503的错误。
前言:在Win10中,在安装msi安装包的时候常常会出现代码为2502.2503的错误.其实这种错误是由于安装权限不足造成的,可以这种msi的安装包不像其他exe的安装程序,在安装包上点击“右键”之后 ...
- MySQL_异常
问题1 描述:在连接MYSQL数据库时出现问题:“ERROR 2003 (HY000): Can’t connect to MySQL server on ‘localhost’ (10061)” 分 ...
- maven中经常使用的插件
tomcat插件:非常实用,特点就是不用配置tomcat,可以任意修改端口号. <plugin> <groupId>org.apache.tomcat.maven</gr ...
- servlet dispatcher .forward(request, response); 进入其它servlet【原】
dispatcher .forward(request, response); 进入其它servlet 假如我们的web.xml配置如下 <servlet> <servlet-nam ...