精华内容
下载资源
问答
  • 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 选择器

    万次阅读 多人点赞 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选择器

    千次阅读 2015-05-07 16:45:28
    jquery选择器

    http://www.php100.com/html/webkaifa/javascript/2012/0611/10527.html

    http://www.cnblogs.com/onlys/articles/jQuery.html

    注意:

    1. $("form input")//选择所有的form元素的input元素(*选择器)

    2. $("form, input")//选择所有的forminput元素(并列选择器)

    3.$("parent > children")//选择所有的parent的直系子元素(只包括子元素,不包括孙子元素)

    4.$("pre + next")//选择紧跟pre的兄弟元素next(pre和next必须是并列的,并且pre和next中间不能有其他元素);

    4.$("pre ~ siblings")//选择pre后面的所有sibling元素(pre和siblings必须是并列的,中间可以有其他元素);

    5.$('span:first')//第一个span元素;

    6.$('ol li:parent')//如果li中包含子元素或文本,则对li进行某个操作;


    展开全文
  • Jquery选择器

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

    Jquery选择器 选择带有变量的id或者类
    $(".")+value
    $("#")+value

    展开全文
  • JQuery选择器

    2016-09-07 09:40:21
    JQuery选择器类似于CSS选择器: 例如CSS中为一个class类demo添加样式时候为.demo{colour:red},而JQuery选择器为class类demo添加行为时候是$(".demo").click(function(){ ......}) 常用的选择器:标签选择td ,类...
  • JQuery 选择器

    千次阅读 2017-08-16 19:23:19
    JQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") class="intro" 的所有元素 ....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,580
精华内容 13,032
关键字:

jquery选择器