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 ...
随机推荐
- Java源码解释之Integer.bitCount
Java中的Integer.bitCount(i)的返回值是i的二进制表示中1的个数.源码如下: public static int bitCount(int i) { // HD, Figure 5 ...
- PAT 天梯赛 L1-041. 寻找250 【水】
题目链接 https://www.patest.cn/contests/gplt/L1-041 AC代码 #include <iostream> #include <cstdio&g ...
- Linux工作管理 jobs、fg、bg、nohup命令
概述 在Linux 中我们登陆了一个终端,已经在执行一个操作,可以通过一定的操作或命令在不关闭当前操作的情况下执行其他操作. 例如,我在当前终端正在 vi 一个文件,在不停止 vi 的情况下,如果我想 ...
- linux 文本分析工具---awk命令(7/1)
awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得尤为强大.简单来说awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各 ...
- ping主机脚本
#!/bin/bash #ping net='172.16.1' uphosts=0 downhosts=0 for i in {1..254};do ping -c 1 -w 1 ${net}.${ ...
- React生命周期及事件详解
引用原文:http://blog.csdn.net/limm33/article/details/50942808 一.组件的详细说明和生命周期ComponentSpecs and Lifecycle ...
- 导出成可运行jar包时所遇问题的解决办法 - 转载
Could not find main method from given launch configuration 当我把我的Java工程导出为可运行的jar包时,遇到了“Could not fin ...
- ubuntu 支持中文
1.cat /usr/share/i18n/SUPPORTED 说明:查看系统支持的字符集,你需要注意的是支持字符集的格式,如对中文会有以下一些显示(我的系统如此,我不知是否普遍) zh_CN.GB1 ...
- geoserver源码学习与扩展——kml/kmz转shapefile文件
geoserver通过工作空间Workspace-数据源DataStore-图层Layer管理地理数据,默认只支持shapefile格式的文件发布,不支持kml/kmz.csv的文件格式,所以存在将这 ...
- 编写一个程序,将 d:\java 目录下的所有.java 文件复制到 d:\jad 目录下,并将原来文件的扩展名从.java 改为.jad。
package IO; import java.io.*; public class FileCopy { public static void main(String[] args) throws ...