jQuery7(多条件选择器,层次选择器)
来源:互联网 发布:校园网络系统集成方案 编辑:程序博客网 时间:2024/05/22 06:44
多条件选择器
关键点:当使用$('')
,引号内的内容可以写多个.
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { //多条件选择器 $('p,.cls,strong').css('backgroundColor', 'red'); }); }); </script></head><body> <input type="button" name="name" value="效果" id='btn' /> <p> 这是p </p> <strong>这是strong</strong> <div class='cls' style='width: 300px; height: 300px; background-color: Green;'> </div></body></html>
层次选择器
空格
语法:$('div p')
.div层中所有的p标签
大于号>
语法:$('div>p')
div层中直接的p元素,不含嵌套
加号+
语法:$('div+p')
div层后面的第一个子元素,必须是p标签,直接的p标签.不往后顺延
波浪线~
语法:$('div~p')
div层后面的直接p标签
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#btn').click(function () { //第一种,直接加空格. div层中所有的p标签改变 //$('div p').css('backgroundColor', 'red'); //直接的子元素中,不包含嵌套什么的 $('div>p').css('backgroundColor', 'red'); //层后面第一个子元素,必须是p标签,必须是直接的p标签 // $('div+p').css('backgroundColor', 'red'); //层后面所有的直接p标签 // $('div~p').css('backgroundColor', 'red'); }); }); </script></head><body> <input type="button" name="name" value="显示效果" id='btn' /> <p> 外面p第一个 </p> <p> 外面第二个 </p> <div style='width: 300px; height: 200px; background-color: Gray;'> <p> 里面第一个 </p> <p> 里面第二个 </p> <strong> <p> strong中的p标签</p> </strong> <p> 里面第三个 </p> <p> 里面第四个 </p> </div> <strong> <p> 后面第一个 </p> </strong> <p> 后面第一个 </p> <p> 后面第二个 </p></body></html>
0 0
- jQuery7(多条件选择器,层次选择器)
- jquery 中多条件选择器,相对选择器,层次选择器的区别
- jq中多条件选择器,相对选择器,层次选择器的区别
- 基本选择器,层次选择器
- jQuery选择器 层次选择器
- css3选择器--层次选择器
- 基本选择器、层次选择器
- 层次选择器
- 层次选择器
- 层次选择器
- 层次选择器
- 层次选择器
- jQuery选择器之层次选择器
- jquery选择器之层次选择器
- jquery选择器之层次选择器
- jQuery选择器-层次选择器示例
- 3.jquery选择器 层次选择器
- Jquery选择器的层次选择器
- 关于导出android项目的keystore问题
- Spark天堂之门
- mac或linux下制作u启
- 我的2015我的Android
- LeetCode202 Happy Number
- jQuery7(多条件选择器,层次选择器)
- 排序算法
- bzoj1984 月下“毛景树”树链剖分 线段树
- Android实现推送方式解决方案
- 日元负利率和美元暴跌,是对人民币的夹击
- 面试笔试杂项积累-leetcode 121-125
- OpenSUSE 系统安装无线网卡驱动。
- C# 基础加强(二) 编译执行过程器
- How To FIX VLC Player Not Opening On Kali Linux (Google Chrome同理)