精华内容
下载资源
问答
  • jQuery 选择器

    万次阅读 多人点赞 2019-02-22 21:58:10
    一、什么是jQuery选择器 jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成...

    一、什么是jQuery选择器
    jQuery选择器继承了CSS与Path语言的部分语法,允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择,而不必担心浏览器的兼容性,通过jQuery选择器对页面元素的精准定位,才能完成元素属性和行为的处理。
    二、jQuery选择器的优势

    • 代码更简单;
    • 支持CSS1到CSS3选择器;
    • 完善的机制处理
      三、jQuery选择器
      jQuery选择器分类示意图:
      jQuery选择器分类示意图
      1.基本选择器
      jQuery选择器中使用最多的选择器,它由元素id、class、元素名、多个元素符组成。
      功能表如下:
      基本选择器
      例1:CSS样式:<button id="btn" class="btn1">按钮</button>
      使用如下:
    console.log($("#btn"));
    console.log($(".btn1"));
    console.log($("*"));
    console.log($("button"));
    console.log($("#btn,.btn1,button"));
    

    2.层次选择器
    通过DOM元素间的层次关系来获取元素,主要层次关系包括父子、后代、相邻、兄弟关系。
    功能表如下:
    层次选择器

    说明
    例2:CSS样式如下:

    <ul>
        <li>1</li>
        <li>2
            <ol>
                <li>11</li>
                <li>22</li>
                <li>33</li>
            </ol>
        </li>
        <li class="li3">3</li>
        <p>0000</p>
        <li>4</li>
    </ul>
    

    使用如下:

    console.log($("ul li"));
    console.log($("ul>li"));
    console.log($(".li3+"));
    console.log($(".li3~li"));
    

    3.过滤选择器
    (1)简单过滤选择器
    过滤选择器是根据某类过滤规则进行元素的匹配,书写时都以(:)开头;简单过滤是使用最广泛的一种。
    功能表如下:
    简单过滤选择器
    例3:CSS样式如下:

    <ul>
        <li>1</li>
        <li>2
            <ol>
                <li>11</li>
                <li>22</li>
                <li>33</li>
            </ol>
        </li>
        <li class="li3">3</li>
        <p>0000</p>
        <li>4</li>
    </ul>
    

    使用如下:

    console.log($("ul>li:first"));
    console.log($("ul>li:last"));
    console.log($("ul>li:even"));
    console.log($("ul>li:odd"));
    console.log($("ul>li:gt(1)"));
    console.log($("ul>li:lt(1)"));
    console.log($("ul>li:eq(1)"));
    console.log($("ul>li:not(.li3)"));
    

    (2)内容过滤选择器
    根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位。
    功能表如下:
    内容过滤选择器
    例4:CSS样式如下:

    <ul>
        <li>1</li>
        <li>2
            <ol>
                <li>11</li>
                <li>22</li>
                <li>33</li>
            </ol>
        </li>
        <li class="li3">3</li>
        <p>0000</p>
        <li>4</li>
    </ul>
    <div><span>40</span></div>
    <span></span>
    

    使用如下:

    console.log($("li:contains(2)"));
    console.log($("span:empty"));
    console.log($("span:parent"));
    console.log($("div:has(span)"));
    

    (3)可见性过滤选择器
    根据元素是否可见的特征来获取元素
    功能表如下:
    在这里插入图片描述
    例5:CSS样式如下:

    <input type="button" class="btninput" value="按钮1" >
    <input type="button" class="btninput" value="按钮2" >
    

    使用如下:

    console.log($(".btninput:hidden"));
    console.log($(".btninput:visible"));
    

    (4)属性过滤选择器
    属性过滤选择器根据元素的某个属性获取元素,如ID号或匹配属性值的内容,并以"[“号开始,以”]"号结束。
    功能表如下:
    在这里插入图片描述
    例6:CSS样式:<button id="btn" class="btn1">按钮</button>
    使用如下:

    console.log($("button[id][class]"));
    console.log($("button[id='btn'][class='btn1']"));
    

    (5)子元素过滤选择器
    获取所有父元素中指定的某个元素
    功能表如下:
    在这里插入图片描述
    例7:CSS样式如下:

    <ul>
        <li>1</li>
        <li>2
            <ol>
                <li>11</li>
                <li>22</li>
                <li>33</li>
            </ol>
        </li>
        <li class="li3">3</li>
        <p>0000</p>
        <li>4</li>
    </ul>
    <div><span>40</span></div>
    

    使用如下:

    console.log($("ul>li:nth-child(2)"));
    console.log($("ul>li:first-child"));
    console.log($("ul>li:last-child"));
    console.log($("div>span:only-child"));
    

    (6)表单对象属性过滤选择器
    所选择的表单元素进行过滤,例如选择被选中的下拉框,多选框等元素
    功能表如下:
    在这里插入图片描述
    例7:CSS样式如下:

    <input type="checkbox" checked>
    <input type="checkbox">
    <input type="radio">男
    <input type="radio">女
    <input type="text">
    <select id="sel">
        <option>宝鸡</option>
        <option selected>西安</option>
    </select>
    

    使用如下:

    console.log($("input[type='checkbox']:checked"));
    console.log($("input[type='radio']"));
    console.log($("input[type='text']"));
    console.log($("input:text"));
    console.log($(":input"));
    console.log($(":button"));
    $("#sel").change(function(){
        console.log($("#sel>option:selected"));
    });
    
    展开全文
  • jQuery选择器

    千次阅读 多人点赞 2020-11-22 20:51:15
    jQuery选择器基本选择器层级选择器基本筛选器each方法基本筛选器的使用内容选择器可见性选择器属性选择器 基本选择器 基本选择器 说明 * 选择所有元素 element 标签选择器 id id选择器 class 类选择...

    基本选择器

    基本选择器 说明
    * 选择所有元素
    element 标签选择器
    id id选择器
    class 类选择器
    [selector1,selector2,selectorN] 并集选择器

    样例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <!--  引入jQuery文档-->
            <script src="../../js/jquery.min.js"></script>
            <script>
    
                $(function(){
                    // 1 * 选择所有元素
                    console.log($('*'));
    
                    //2 标签选择器
                    console.log('div: '+($('div').length))
                    console.log('div: '+($('div').size()))
    				
    				//3 id选择器
    				console.log('id: '+($('#d1').size()))
    
                    //4 类选择器
                    $('.dd').css("color","red");
                    console.log('class: '+($('.dd').size()))
    
                    //5 并集选择器
                    $('.d2,#d1').css('color','green')
    
                })
    
            </script>
        </head>
        <body>
    
            <div>div1</div>
            <div>div2</div>
    
            <div class="dd" >div3</div>
            <div class="dd" >div4</div>
    
            <div id="d1" >div5</div>
            <div class="d2" >div6</div>
    
        </body>
    </html>
    

    效果截图:
    在这里插入图片描述

    层级选择器

    根据层级关系选择:
    ancestor descendant 查找所有子元素,包括间接的子元素
    parent > child 直接子元素 ,不包括间接子元素
    prev + next 查找与prev同级的第一个元素,是兄弟关系
    prev ~ siblings 找与prev同级的所有元素,是兄弟关系

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<!--  引入jQuery文档-->
    		<script src="../../js/jquery.min.js"></script>
    		<title></title>
    	</head>
    	<body>
    		<script>
    		    $(function(){
    		        //ancestor descendant 所有子元素,包括间接的子元素
    		        console.log($('.container div').get())
    		        //parent > child 直接子元素 ,不包括间接子元素
    		        console.log($('.container>div').get())
    				
    				//prev + next 查找与prev同级的第一个元素,是兄弟关系
    				console.log($('.container+div').get())
    				//prev ~ siblings 找与prev同级的所有元素,是兄弟关系
    				console.log($('.container~div').get())
    		})
    		</script>
    		<div class="container">
    		
    		    <div class="head" >
    		        head
    		    </div>
    		
    		    <div class="content" >
    		        <div > content1</div>
    		        <div > content2</div>
    		        <div > content3</div>
    		    </div>
    		</div>
    		<div class="container1">container1</div>
    		<div class="container2">container2</div>
    		<div class="container3">container3</div>
    	</body>
    </html>
    
    
    

    效果截图:
    在这里插入图片描述

    基本筛选器

    each方法

    each方法用于迭代

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="../../js/jquery.min.js"></script>
    		<title></title>
    	</head>
    	<body>
    		<ul>
    		            <li>第1行</li>
    		            <li>第2行</li>
    		            <li>第3行</li>
    		            <li>第4行</li>
    		            <li>第5行</li>
    		            <li>第6行</li>
    		            <li>第7行</li>
    		            <li>第8行</li>
    		            <li>第9行</li>
    		            <li>第10行</li>
    		        </ul>
    		<script>
    		//each方法用于迭代
    		$('li').each(function(i,el){
    		    //i 代表遍历的 序号,
    		    //el 代表上下文对象(每一个匹配的元素)
    		    //this 此处this 是DOM原生对象
    		    console.log(i,el,$(this).text())
    		
    		})
    		</script>
    	</body>
    </html>
    
    

    效果截图:
    在这里插入图片描述

    基本筛选器的使用

    基本筛选器 说明
    :first 获取第一个元素
    :not(selector) 去除所有与给定选择器匹配的元素
    :even 匹配所有索引值为偶数的元素,从 0 开始计数
    :odd 匹配所有索引值为奇数的元素,从 0 开始计数
    :eq(index) 匹配一个给定索引值的元素
    :gt(index) 匹配所有大于给定索引值的元素
    :lang 选择指定语言的所有元素
    :last 获取最后个元素
    :lt(index) 匹配所有小于给定索引值的元素
    :header 匹配如 h1, h2, h3之类的标题元素
    :animated 匹配所有正在执行动画效果的元素
    :focus 匹配当前获取焦点的元素
    :root 选择该文档的根元素
    :target 选择由文档URI的格式化识别码表示的目标元素

    样例代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<!--  引入jQuery文档-->
    		<script src="../../js/jquery.min.js"></script>
    		<script>
    			$(function() {
    
    
    				//li:first 第一个元素
    				console.log('li:first', $('li:first').text())
    
    				//li:last 最后一个
    				console.log('li:last', $('li:last').text())
    
    				//li:eq(5) eq 获取索引所在的元素
    				console.log('li:eq(5)', $('li:eq(5)').text())
    				
    				//:even :odd 代表偶数和奇数
    				console.log('li:even', $('li:even').text())
    				console.log('li:odd', $('li:odd').text())
    
    				//:gt :lt 
    				// 匹配所有大于索引值4的元素
    				console.log('li:gt(4)', $('li:gt(4)').text())
    				// 匹配所有小于索引值4的元素
    				console.log('lt(4)', $('li:lt(4)').text())
    
    			})
    		</script>
    	</head>
    	<body>
    
    		<ul>
    			<li>第0行</li>
    			<li>第1行</li>
    			<li>第2行</li>
    			<li>第3行</li>
    			<li>第4行</li>
    			<li>第5行</li>
    			<li>第6行</li>
    			<li>第7行</li>
    			<li>第8行</li>
    			<li>第9行</li>
    			
    		</ul>
    
    	</body>
    </html>
    
    

    效果截图:
    在这里插入图片描述

    注意:下标是0开始算的

    内容选择器

    内容选择器 说明
    :contains(text) 匹配包含给定文本的元素
    :empty 匹配所有不包含子元素或者文本的空元素
    :has(selector) 匹配含有选择器所匹配的元素的元素
    :parent 匹配含有子元素或者文本的元素

    样例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <!--  引入jQuery文档-->
            <script src="../../js/jquery.min.js"></script>
            <script>
    
                $(function(){
                    //contains 包含文字
                    console.log($('div:contains("Keafmd")')[0].outerHTML)
                    console.log($('div:contains("Keafmd")')[0].innerHTML)
    				console.log($('td:contains("Keafmd")')[0].outerHTML)
    				console.log($('td:contains("Keafmd")')[0].innerHTML)
    
                    //:empty
                    $('p:empty').each(function(i,el){
                        console.log(el.outerHTML)
                    })
    
                    //匹配    含有选择器所匹配的元素(子元素) 的元素
                    console.log($('div:has(.mysapn)')[0].outerHTML)
    
    
                    //:parent 查找包含子元素的 元素
                    console.log('size',$("td:parent").length);
                    console.log('html',$("td:parent").html());
                    console.log('text',$("td:parent").text());
    
                })
    
            </script>
        </head>
        <body>
    
            <div>哈哈哈</div>
            <div>Keafmd</div>
            <div >div1
                <span class="mysapn"></span>
            </div>
    
            <p></p>
    
    
            <table>
              <tr><td>Keafmd</td><td></td></tr>
              <tr><td>牛哄哄的柯南</td><td></td></tr>
            </table>
    
        </body>
    </html>
    

    效果截图:
    在这里插入图片描述

    可见性选择器

    可见性选择器 说明
    :hidden 匹配所有不可见元素,或者type为hidden的元素
    :visible 匹配所有的可见元素

    样例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <style>
                div{
                    background-color: aliceblue;
                    margin: 5px;
                }
            </style>
    		<!--  引入jQuery文档-->
            <script src="../../js/jquery.min.js"></script>
            <script>
                $(function(){
                    //不可见的元素
                    console.log($(":hidden").length);
                    console.log($("input:hidden")[0].outerHTML);
                    console.log($("div:hidden")[0].outerHTML);
    
                    //visible 可见的元素
                    console.log($("div:visible").text());
    
                })
            </script>
        </head>
        <body>
            <input type="hidden" />
    		<input  />
            <div style="display: none;">d1</div>
            <div>d2</div>
            <div>d3</div>
    
        </body>
    </html>
    

    效果截图:
    在这里插入图片描述

    属性选择器

    属性选择器 说明
    [attribute] 匹配包含给定属性的元素
    [attribute=value] 匹配给定的属性是某个特定值的元素
    [attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
    [attribute^=value] 匹配给定的属性是以某些值开始的元素
    [attribute$=value] 匹配给定的属性是以某些值结尾的元素
    [attribute*=value] 匹配给定的属性是以包含某些值的元素
    [attrSel1] [attrSel2] [attrSelN] 复合属性选择器,需要同时满足多个条件时使用

    样例代码:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <!--  引入jQuery文档-->
            <script src="../../js/jquery.min.js"></script>
            <script>
    
                $(function(){
                    console.log($('[type=password]').val());        
    
                    //查找是否包含属性为class的元素
                    $('[class]').css({
                        'color':'red'
                    })
    
                    // $('input[type!=password]').css({
                    //     'color':'red'
                    // })
    
                    //查找name属性以a开头
                    // $('input[name^=a]').css({
                    //     'color':'red'
                    // })    
                    //查找name属性以a结束
                    $('input[name$=name]').css({
                        'color':'red'
                    })
    
                    //查找name属性包含a
                    // $('input[name*=a]').css({
                    //     'color':'red'
                    // })
    
                })
    
            </script>
        </head>
        <body>
    
            用户名: <input type="text"  name="username" /> <br/>
            昵称: <input type="text" name="nickname"/><br/>
            密码: <input type="password" name="password" value="123456" /><br/>
            地址:<input type="text" name="address"/><br/>
            <input type="text" name="gender"/><br/>
    
            <input type="text" class="aaa" /><br/>
            <input type="text" class="aaa" /><br/>
            <input type="text" class="aaa" /><br/>
    
        </body>
    </html>
    

    效果截图:
    在这里插入图片描述
    看完如果对你有帮助,感谢点赞支持!
    如果你是电脑端,看到右下角的 “一键三连” 了吗,没错点它[哈哈]

    在这里插入图片描述
    加油!

    共同努力!

    Keafmd

    展开全文
  • JQuery 选择器重点内容

    万次阅读 多人点赞 2021-02-22 22:45:34
    JQuery 选择器重点内容: 1. 基本选择器 (*重点) 标签选择器(元素选择器) * 语法: $(“标签名”) 获得 所有匹配标签名称的元素 id选择器 * 语法: $("#id的属性值") 获得与指定id属性值匹配的元素 类选择器 * ...

    JQuery 选择器重点内容:

    1. 基本选择器 (*重点)

    1. 标签选择器(元素选择器)
          -> 语法: $(“标签名”) 获得 所有匹配标签名称的元素
    2. id选择器
          -> 语法: $("#id的属性值") 得到与指定id属性值匹配的元素
    3. 类选择器
          -> 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
    4. 并集选择器:*
          -> 语法: $(“选择器1,选择器2…”) 获取多个选择器选中的 所有元素
    示例如下:
    $("div").css("background-color","red");;	//元素选择器 
    $("#user").css("background-color","red");;	//id选择器 
    $(".user").css("backgroundColor","red");;	//id选择器 
    $("span,#two").css("backgroundColor","pink");	//获取span标签对象和id为two的元素对象
    

    2. 层级选择器 (*重点)

    1. 后代选择器
          -> 语法: $("A B ") 选择A元素内部所有B元素(A内的所有B,不论是子,孙…)

    2. 子选择器
          -> 语法: $(“A > B”) 选择A元素内部的所有B子元素

    3. 属性选择器 (*重点)

    1. 属性名称选择器
          -> 语法: $(“A[属性名]”) 包含指定属性的选择器
    2. 属性选择器 (精华!!!根据正则表达筛选,详细见实例)
          -> 语法: $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
    3. 复合属性选择器
          -> 语法: $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器
    //将包含class属性的span元素,背景色设置为蓝色
    $("span[class]").css("backgroundColor","blue");
    
    // 将属性title值等于test1的span元素,背景色shezhi为蓝色
    $("span[title='test1']").css("backgroundColor","blue");
    
    // 选中有title,并且title属性的值以te开头的div元素
    $("div[title^='te']").css("backgroundColor","blue");
    // 选中有title,并且title属性的值以est结尾的div元素
     $("div[title$='est']").css("backgroundColor","blue");
    //选中title属性的值不为test的div元素(注:没有属性title的也将被选中)
    $("div[title!='test']").css("backgroundColor","blue");
    //只yao有title,并且title属性包含es的div元素,都会被选中
    $("div[title*='es']").css("backgroundColor","blue");
    
    //选中有id和title属性的div元素,并且属性title的值包含有“es”
    $("div[id][title*='es']").css("backgroundColor","blue");
    
    

    4. 过滤选择器 (*了解)

    1. 首元素选择器
          -> 语法: :first 获得选择的元素中的第一个元素
      2. 尾元素选择器
          -> 语法: :last 获得选择的元素中的最后一个元素
      3. 非元素选择器
          -> 语法: :not(selector) 不包括指定内容的元素
      4. 偶数选择器
          -> 语法: :even 偶数,从 0 开始计数
      5. 奇数选择器
          -> 语法: :odd 奇数,从 0 开始计数
      6. 等于索引选择器
          -> 语法: :eq(index) 指定索引元素
      7. 大于索引选择器
          -> 语法: :gt(index) 大于指定索引元素
      8. 小于索引选择器
          -> 语法: :lt(index) 小于指定索引元素
      9. 标题选择器
          -> 语法: :header 获得标题(h1~h6)元素,固定写法
    如:
    $("div:first").css("backgroundColor","blue");
    $("div:last").css("backgroundColor","blue");
    //注意:标题选择器为固定写法
     $(":header").css("backgroundColor","pink");
    

    5. 表单过滤选择器 (*了解)

    1. 可用元素选择器
          -> 语法: :enabled 获得可用元素
      2. 不可用元素选择器
          -> 语法: :disabled 获得不可用元素
      3. 选中选择器
          -> 语法: :checked 获得单选/复选框选中的元素
      4. 选中选择器
          -> 语法: :selected 获得下拉框选中的元素

      ~~点击转到《jQuery高级之each的几种遍历方式》
      ~~点击转到《jQuery高级之动画》
      创作不易,如果这篇文章能够帮助到你,希望能关注或收藏一下博主,如果文章内容有问题也可留言讨论,我们一起学习,一起进步!!

    展开全文
  • jQuery选择器和JS选择器

    万次阅读 2015-07-27 10:48:27
    jQuery选择器jQuery选择器的写法和CSS选择器的写法非常相似,在学习之前了解下CSS选择器,对掌握jQuery选择器是非常有帮助的(一) 基本选择器:主要包含id选择器、class选择器、*选择器、标签选择器以及复合选择...

    jQuery选择器:
    jQuery选择器的写法和CSS选择器的写法非常相似,在学习之前了解下CSS选择器,对掌握jQuery选择器是非常有帮助的

    (一) 基本选择器:主要包含id选择器、class选择器、*选择器、标签选择器以及复合选择器

    a: Id选择器:$(“#ID”) 选取id属性为“ID”的元素

    $("#text")  //选取id属性为“text”的元素

    b:class选择器:$(“.class”) 选取所有class属性为“class”的元素(id是单一的,而class则可以多次使用同一命名)

    $(".test")  //选取文档中所有的class属性为“test”的元素

    c: *选择器:$(“*”) 选取所有元素

    *{
        width:100%;
        height:100%;
    }

    d: 标签选择器:$(“标签”) 选取文档中所有匹配选择器的元素

    $("p")  //选取文档中所有的P元素

    e: 复合选择器:$(“selector1,selector2,selector3”) 选取文档中所有选择器匹配的元素

    $("div,p,span,.test")// 选取文档中所有的div、p、span以及class属性为“test”的元素

    (二) 层级选择器:根据元素之间的层次关系来获取特定的元素

    a: $(“标签1 标签2”) 获取所有标签1中的标签2后代元素

    $("div span") //获取div下所有的span元素

    b: $(“标签1>标签2”) 获取所有标签1中的标签2子元素

    $("div>span") //获取div下所有的span子元素

    c: $(“标签1+标签2”) 获取紧跟标签1之后的标签2元素,和$(“标签1”).next(“标签2”)的效果一样

    $("div+p") //获取紧跟div之后的P元素

    d:$(“标签1~标签2”) 获取紧跟标签1之后的所有标签2元素,和$(“标签1”).nextAll(“标签2”)的效果一样

    $("div~p") //获取div之后的所有兄弟节点P元素

    (三) 过滤选择器:过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、表单过滤

    A: 基本过滤

    1、 :first/:last 选取第一个/最后一个元素

    $("p:first")// 选取第一个P元素
    $("p:last")// 选取最后一个P元素
    

    2、 :first-child/:last-child/:nth-child/:nth-last-child 选取其父元素下第一个/最后一个/第n(>=1)个/倒数第n个匹配的子元素

    $("ul li:first-child") //选取每一个ul中的第一个子元素,如果第一个不是li,则不匹配,这是和:first的区别
    
    $("ul li:last-child") //选取每一个ul中的最后一个子元素,如果最后一个不是li,则不匹配,这是和:last的区别
    
    $("ul li:nth-child(n)") //选取每一个ul中的第n个子元素,如果第n个不是li,则不匹配
    
    $("ul li:nth-last-child(n)") //选取每一个ul中的倒数第n个子元素,如果倒数第n个不是li,则不匹配
    

    3、 :first-of-type/:last-of-type/:nth-of-type/:nth-last-of-child选取其父元素下第一个/最后一个/第n(>=1)个/倒数第n个匹配的子元素

    $("ul li:first-of-type") //选取每一个ul中的第一个li子元素,这是和:firs-child的区别
    
    $("ul li:last-of-type") //选取每一个ul中的最后一个li子元素这是和:last-child的区别
    
    $("ul li:nth-of-type(n)") //选取每一个ul中的第n个li子元素,这是和:nth-child(n)的区别
    
    $("ul li:nth-last-of-type(n)") //选取每一个ul中的倒数第n个li子元素,这是和:nth-last-child(n)的区别

    4、:only-child/:only-of-type 选取父元素中唯一的子元素/选取父元素中唯一的子元素而且子元素没有兄弟元素

    $("ul li:only-child");  //选取ul中只有一个li的元素
    
    $("ul li:only-of-type"); //选取ul中只有一个li子元素的元素

    5、 :eq(n) 选取第n个元素

    $("p:eq(3)")// 选取索引为3的P元素

    6、:even/:odd 选取索引为偶数/奇数的元素

    $("p:even") //选取索引为偶数的P元素
    $("p:odd") //选取索引为奇数的P元素
    

    7、 :gt(n)/:lt(n) 选取索引大于/小于n的元素

    $("p:gt(10)") //选取索引大于10 的P元素
    $("p:lt(10)") //选取索引小于10 的P元素
    

    8、 :not(selector) 选取不匹配selector的元素

    $("p:not(.test)") //选取class属性不是“test”的P元素

    9、 :header 选取文档中所有的标题元素

    $(":header") //选取文档中所有的标题元素

    10、 :focus 选取当前获取焦点的元素

    $(":focus")  //选取当前获取焦点的元素

    11、 :animated 选取所有正在执行动画效果的元素

    $("div:animated")  //选取当前正在执行动画的div元素

    B: 内容过滤

    1、 :contains(text) 选取包含给定文本的元素

    $("div:contains('jinlin')")  //选取所有中包含“jinlin”的div元素

    2、 :empty 选取不包含任何子元素或者文本的空元素

    $("td:empty")  //选取所有不包含子元素或者文本的

    3、 :parent 选取含有子元素或者文本的元素

    $("div:parent")  //选取文档中所有有子元素或者文本的div元素

    4、 :root 选取该文档的根元素,在HTML中,文档的根元素,永远是html

    $(":root") //选取整个文档的根元素

    5、:has(selector) //选取所有含有选择器所匹配的元素的元素

    $("div:has(p)")  //选取所有含有P元素的div

    C: 可见性过滤

    1、 :hidden 选取所有不可见或者type为hidden的元素

    $("input:hidden")  //选取所有type为hidden的元素
    $("div:hidden")  //选取所有隐藏的div
    

    2、 :visible选取所有可见

    $("div:visible")  //选取所有可见的div

    D: 属性过滤

    1、 [attribute] 选取包含给定属性的元素

    $("div[id]")  //选取所有包含id属性的div

    2、 [attribute=value]/ [attribute!=value] 选取包含给定属性的值为/不为value的元素

    $("div[class='test']")  //选取所有class属性值为test的div元素
    $("div[id!='test']")  //选取所有id属性值不为test的div元素
    

    3、 [attribute^=value]/[attribute$=value] 选取以value为开头/结尾的元素

    $("div[title^='text']")  //选取title属性以text开头的div元素
    $("div[title$='text']")  //选取title属性以text结尾的div元素
    

    4、 [attribute*=value] 选取属性中包含value的元素

    $("div[titile*='text']")  //选取所有title中包含有“text”的div

    5、 [attribute=value] [attribute=value] 选取同时满足多个属性选择器条件的元素

    $("input[id][name='name']")  //选取有ID属性并且name属性值为“name”的input元素

    E: 表单过滤

    1、 :input 选取所有input元素

    $(":input")  //选取所有input元素(包括input、textarea、select、button)

    2、 :text/:password 选取所有的单行文本框/密码框

    $(":text")  //选取所有的单行文本框
    $("password")   //选取所有的密码框
    

    3、 :radio/:checkbox 选取所有的单选框/复选框

    $(":radio")  //选取所有的单选框
    $(":checkbox")  //选取所有的复选框
    

    4、:image 选取所有的图像按钮

    $(":image")  //选取所有的图像按钮

    5、 :reset/:submit 选取所有的重置/提交按钮

    $(":reset")  //选取所有的重置按钮
    $(":submit")  ///选取所有的提交按钮

    6、 :button 选取所有的按钮

    $(":button")  //选取所有的按钮

    7、 :file 选取所有的上传控件

    $(":file")  //选取所有的上传控件

    8、 :hidden 选取所有的不可见元素

    $(":hidden")  //选取所有的不可见元素

    JS选择器

    JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

    A: getElementById(ID): 返回对指定ID的第一个对象的引用,如果在文档中查找一个特定的元素,最有效的方法是getElementById(),语法格式为:

    oElement = document. getElementById (ID);
    
    var x=document. getElementById("text")  //在文档中查找到id属性值为text的元素,x得到的是一个对象[object],不是一个具体的值

    但是getElementById()在IE6/7下有可能执行的结果是不同的,在ie6/7中,getElementById(idvalue)同时查询id、name两个值,返回的结果是第一个name或者id等于idvalue的对象,并不是仅按照id来查找的

    input type="text" name="test1" id="test" value="测试1" />
    <input type="text" name="test2" id="test1"  value="测试2" />
    <script type="text/javascript">
        var $test = document.getElementById("test1").value;
        alert($test);  //在ie6/7下输出的结果是“测试1”
    </script>

    可以通过以下方法确定确定通过id获取到

    var getElementById = function(ids){
        var idvalue = document.getElementById(ids);
            if(idvalue.id === ids){
                return idvalue;
            }else{
                var node = document.all[id];
                for(var i=0,len=node.length;i<len;i++){
                    if(node[i].id===id)
                        return node[i];
                }
            }
    }
    

    B: getElementsByName(name): 返回文档中name属性为name值的元素,因为name属性值不是唯一的,所以查询到的结果有可能返回的是一个数组,而不是一个元素。语法格式为:

    oElement = document. getElementsByName (name);
    
    <input name="myInput" type="text" size="20" />
    <input name="myInput" type="text" size="20" />
    <input name="myInput" type="text" size="20" />
    <script type="text/javascript">
        var x=document.getElementsByName("myInput");
        alert(x.length); //输入的结果为3
    </script>
    

    getElementsByName(name)在旧版浏览器中不支持除input之外的标签

    C: getElementsByTagName(tagname): 返回文档中指定标签的元素,语法格式为:

    oElement = document. getElementsByTagName (tagname);
    
    <input name="myInput" type="text" size="20" />
    <input name="myInput" type="text" size="20" />
    <input name="myInput" type="text" size="20" />
    <script type="text/javascript">
        var x=document.getElementsByTagName("input");
        alert(x.length); //输入的结果为3
    </script>
    

    D: getElementsByClassName():返回文档中所有指定类名的元素,语法格式为:

    oElement = document. getElementsByClassName (classname);
    
    <div class="example">第一个</div>
    <div class="example color">第二个</div>
    <script type="text/javascript">
        var x=document.getElementsByClassName("example");
        alert(x.length); //输入的结果为2
    </script>
    

    E: querySelector():返回文档中匹配指定css选择器的第一个元素,语法格式为:

    oElement = document. querySelector(css selector);
    
    document.querySelector(“p”)  //返回文档中第一个P元素

    F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素,语法格式为:

    oElement = document. querySelectorAll(css selector);
    document.querySelectorAll(".test")//返回文档中所有class值为test元素;
    

    (原生的JS选择速度相比较之下会快于同等条件下的JQuery选择器)

    展开全文
  • jquery选择器

    千次阅读 2015-04-06 22:51:33
    jquery选择器 1、通配符选择器 2、ID选择器 3、类选择器 4、元素选择器 5、相邻选择器 6、子代选择器 7、属性选择器 8、伪类选择器
  • 知识点:了解jQuery选择器的基本概念及优势、能够使用不同的jQuery选择器选取元素,比如基本选择器、层次选择器、属性选择器、基本过滤选择器、可见性过滤选择器的使用,了解使用jQuery选择器的注意事项。...
  • jQuery——jQuery选择器

    千次阅读 2020-12-19 00:28:51
    文章目录jQuery选择器什么是jQuery选择器$符号的实质3种用法jquery如何设置样式基本选择器基本选择器案例层级选择器过滤选择器案例:隔行变色筛选选择器(方法)【案例:下拉菜单】this+children+mouseenter+...
  • Jquery选择器

    千次阅读 2018-09-03 11:50:21
    Jquery选择器 选择带有变量的id或者类 $(".")+value $("#")+value
  • JQuery选择器

    千次阅读 2014-08-22 16:35:30
    JQuery选择器顾名思义就是通过选择器选中相应的DOM元素执行需要的操作,JQuery选择器的强大之处还在于它支持连缀,也就是说一条语句可以连续使用多个选择器执行多次操作,这样保证了代码的简洁性,更提高了代码的...
  • JQuery选择器之位置选择器

    千次阅读 2017-12-20 19:35:07
    匹配页面上满足选择器B的第一个元素 B:last 匹配页面上满足选择器B的最后一个元素 B:first-child 所有匹配选择器B的第一个元素 B:last-child 所有匹配选择器B的所有最后一个元素 B:only-child 匹配选择器B...
  • jQuery选择器详细介绍:基本选择器,层次选择器,属性选择器
  • 提示:我们可以从jquery文档上学习哦~ 下面简单的介绍几种常用的选择器 ===================================基本选择器================================== id选择器 #id --> 匹配指定id名称 元素选择器 --...
  • JQuery选择器之CSS选择器

    千次阅读 2017-12-07 20:47:53
    核心选择器 语法 描述 * 选择所有元素 选择特定类型的元素 . 选择具有特定class的元素 <type>. 选择具有特定class的某类元素 ‘#id 选择具有特定id属性值的元素 属性选择器 语法 描述 [attr] 选取...
  • jQuery选择器探究:ID选择器

    千次阅读 2016-07-31 16:04:22
    ID选择器算是jQuery选择器中最简单的一种了,这里跟踪并梳理jQuery id选择器的逻辑。 所有选择器的调用语法都是从jQuery构造函数开始的,id选择器的调用语法是:$("#x"),如果我们是jQuery的设计者,那么在jQuery...
  • jquery选择器大全

    千次阅读 2015-08-20 17:33:26
    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就非常简单,我更希望的是它能够提升个人编写jQuery代码的效率。...
  • 04- jQuery 选择器大全教程收藏备用

    万次阅读 多人点赞 2020-09-19 09:08:37
    jQuery选择器的优势 写法简单 支持CSS1至CSS3选择器 完善的处理机制 CSS选择器回顾 选择器 语法 ID选择器 #ID{CSS规则} 类选择器 .className{CSS规则} 分组选择器 E1,E2,E3{CSS规则} 包含选择器 E F...
  • 选择子类: div 下的img元素 $("div").children("img") 选择父类:div的所有父类  $("div").parent('') 选择 祖父: parents()获取所有上级元素 以下是 代码是从当前元素...
  • jQuery三种常见选择器

    千次阅读 2017-04-08 00:19:40
    什么是jQuery选择器 jQuery选择器允许您对DOM元素组或单个DOM节点进行操作,通过它可以准确地选取您希望应用效果的元素。 jQuery元素选择器 jQuery使用CSS选择器来选取 HTML 元素。 $("p")选取元素。 $("p....
  • JQuery选择器之自定义选择器

    千次阅读 2017-12-20 19:40:38
    语法 描述 ...匹配B的所有button元素(button, input[type=submit], input[type=reset] or input[type=button]) ...selects all header type elements within <p> ...https://dzone.com/refcardz/jquery-selectors
  • JQuery选择器超级详细

    千次阅读 2020-08-06 17:54:47
    基本选择器 id选择器:$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮,将id为myid的元素背景为绿色 ...JQuery选择器</title> <script src="js/jquery-3.3.1.min...
  • jQuery选择器之层级选择器

    千次阅读 2019-01-28 17:24:44
    若要通过DOM 元素之间的层次关系来获取元素,如后代元素,子元素,相邻元素和同辈元素,使用jQuery的层次选择器将会是最佳选择。 jQuery层次选择器和CSS的层次选择器相同,他们都是根据获取元素与其父元素,子元素,...
  • 常用jQuery选择器详解

    千次阅读 2016-05-26 14:46:56
    这里就汇总一些十分常用的jQuery选择器。1、jQuery选择器基本结构$('选择器') $('选择器 上下文') 2、使用基本css选择器关于基本的css选择器可以看一下css选择器详解。这里列出几种最基本的使用css选择器的用法。2.1...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 153,266
精华内容 61,306
关键字:

常见的jquery选择器