jquery 中多条件选择器,相对选择器,层次选择器的区别
一、Jquery常用的过滤选择器如下所示:
1、:first,选取第一个元素,比如$("div:first")选取第一个div元素
2、:last,选取最后一个元素,比如$("div:last")选取最后一个div元素
3、:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素
4、:even/:odd,选取索引为偶数/奇数的元素,比如$("div:even"),选取索引号为偶数的所有div元素
5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号),选取等于索引号/大于索引号/小于索引号的元素,比如$("div:lt(3)"),选取索引号小于3的所有div元素
注意:
过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础,即过滤的逐级性,比如
$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号,不要写成lt(4)
二,重点
多条件选择器
多条件选择器:$("p,div,span,menuitem"),同时选择p标签,div标签,和拥有menuitem样式的span标签元素
注意选择器表达式中的空格不能多不能少,易错!
相对选择器
只要在$()指定第二个参数,第二个参数为相对的元素。比如html代码如下
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
<tr><td>dsds</td><td>dsfdef</td></tr>
</table>
那么可以用如下的js代码操作td的背景色
$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器,选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素,没有涉及到其他行的td元素
$(function () {
$("#table1 tr").click(function () {
$("td", $(this)).css("background", "red");
});
});
</script>
层次选择器:
1 $("#div li")获取div下的所有li元素(后代,子,子的子....)
2 $("#div > li")获取div下的直接li子元素//注意空格
3 $(".menuitem + div")获取样式名为menuitem之后的第一个div元素,不常用。
3 $(".menuitem ~ div")获取样式名为menuitem之后的所有的div元素,不常用。
细节区别在于(易错点):
多条件选择器:$("p,div,span,menuitem"),相对选择器:$("td", $(this)).css("background", "red")",层次选择器:$("#div li")获取div下的所有li元素(后代,子,子的子....)
三者的区别是:
多条件选择器:在一个“”内有逗号区分,
相对选择器:2个元素分开 ,
层次选择器在一个“”内以空格区分
jquery 中多条件选择器,相对选择器,层次选择器的区别的更多相关文章
- 详解jQuery中 .bind() vs .live() vs .delegate() vs .on() 的区别
转载自:http://zhuzhichao.com/2013/12/differences-between-jquery-bind-vs-live/ 我见过很多开发者很困惑关于jQuery中的.bin ...
- 在JQuery中$(document.body)和这个$("body") 这两的区别在哪里?
两种写法代表的是同一个对象 $("body") 是一个选择器,jQuery 会从 DOM 顶端开始搜索,直到找到标签为 body 的元素. 而 $(document.body) 中 ...
- jquery中innerwidth,outerwidth,outerwidth和width的区别
在jQuery中,width()方法用于获得元素宽度: innerWidth()方法用于获得包括内边界(padding)的元素宽度, outerWidth()方法用于获得包括内边界(padding)和 ...
- jquery中ready函数,$(function(){})与自执行函数的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery中append()、prepend()与after()、before()的区别
转载 未曾见海 https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...
- jquery中append、prepend, before和after方法的区别(一)
原文:http://blog.csdn.net/woosido123/article/details/64439490 在 jquery中append() 与 prepend()是在元素内插入内容(该 ...
- CSS优先级问题以及jQuery中的.eq()遍历方法和:eq()选择器的差别
在写一个TAB选项卡的时候遇到几个有意思的问题,记录下来 先把代码贴出来 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transition ...
- JQuery中阻止事件冒泡的两种方式及其区别
JQuery 提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function(event){ ...
- jQuery中的 return false, e.preventDefault(), e.stopPropagation()的区别
e.stopPropagation()阻止事件冒泡 <html><head> <title></title> <script sr ...
随机推荐
- webpack基础使用
环境: win10, webpack v3.5.6, node v8.4, npm v5.3. 安装与配置 新建一个项目目录demo, 在当前目录执行如下命令: npm init -y npm ins ...
- CNN学习笔记:正则化缓解过拟合
CNN学习笔记:正则化缓解过拟合 过拟合现象 在下图中,虽然绿线完美的匹配训练数据,但太过依赖,并且与黑线相比,对于新的测试数据上会具有更高的错误率.虽然这个模型在训练数据集上的正确率很高,但这个模型 ...
- Unity 碰撞检测 OnTriggerEnter 入门
当我们需要检测两个物体A和B发生碰撞的时候,必须要满足一下条件 1:A和B必须有碰撞边界,你可以点开一个A,在属性窗口点击AddComponent,在physis(物理)目录下看到以下这些 ,根据形状 ...
- 【JavaScript】动态的小球
参考: 1.CSS 对比 JavaScript 动画 2.CSS制作水平垂直居中对齐_水平居中, 垂直居中 教程_w3cplus:https://www.w3cplus.com/css/vertica ...
- java调用操作系统命令
java的Runtime.getRuntime().exec(commandStr)可以调用执行cmd指令. cmd /c dir 是执行完dir命令后关闭命令窗口. cmd /k dir 是执行完d ...
- Nginx 自定义404、500错误页面跳转
自定义Nginx错误界面跳转 1.开启Nginx.conf配置文件下的自定义接口参数. http { fastcgi_intercept_errors on; } 2.在Server区域添加自定义的错 ...
- Apache 工作模式详解
Apache 工作模式详解 Apache 2.X 支持插入式并行处理模块,称为多路处理模块(MPM).在编译apache时必须选择也只能选择一个MPM,对类UNIX系统,有几个不同的MPM可供选择, ...
- golang解析json报错:invalid character '\x00' after top-level value
golang解析json报错:invalid character '\x00' after top-level value 手动复制字符串:{"files":["c:/t ...
- LeetCode Weekly Contest 23
LeetCode Weekly Contest 23 1. Reverse String II Given a string and an integer k, you need to reverse ...
- Gamma函数相关matlab代码
1.Gamma函数: Gamma函数matlab代码: x=:0.5:5syms t y=)*exp(-t),,inf) y=double(y) plot(x,y,) 图像如下: 2.lgΓ(x)函数 ...