jquery 学习(一) - 选择器
2024-10-13 17:34:14
基本选择器(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'))
最新文章
- C# 字符串 数据类型 判断 与特定规则验证
- java语言实现堆排序
- Scala 深入浅出实战经典 第40讲:Set、Map、TreeSet、TreeMap操作代码实战
- Unity3D如何制作透贴和使用透贴模型
- [ionic开源项目教程] - 第10讲 新闻详情页的用户体验优化
- android开发之路09(浅谈SQLite数据库01)
- Autodesk 2014全套密钥
- xcode7下开发ios9等相关问题记录
- Highcharts使用====一些问题记录
- LeetCode——Spiral Matrix
- 自定义View常处理的回调函数
- SpringMVC 3.2集成Spring Security 3.2集成mybaties
- Dynamics CRM EXCEL导入数据字段类型为选项集时的注意事项
- linux netlink通信机制
- 知其所以然~redis的原子性
- python-web自动化-文件上传操作(非input标签的上传,需要借助第三方工具)
- c语言:第二次作业,循环结构
- js数据结构之二叉树的详细实现方法
- 快速搭建springboot框架以及整合ssm+shiro+安装Rabbitmq和Erlang、Mysql下载与配置
- 聊天对话框(ctrl+enter发送)