设为首页 加入收藏

TOP

02-jQuery的选择器(一)
2019-09-07 07:09:04 】 浏览:63
Tags:02-jQuery 选择

02-jQuery的选择器

 

 

 

 

 

我们以前在CSS中学习的选择器有:

今天来学习一下jQuery 选择器。

jQuery选择器是jQuery强大的体现,它提供了一组方法,让我们更加方便的获取到页面中的元素。

1、jQuery 的基本选择器

 

代码如下:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/java script" src="jquery-3.3.1.js"></script>
    <script type="text/java script">
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $('div');

            //操作标签选择器
            jqBox3.css('width', '100');
            jqBox3.css('height', 100);
            jqBox3.css('background-color', 'red');
            jqBox3.css('margin-top', 10);


            //操作类选择器(隐式迭代,不用一个一个设置)
                    jqBox2.css("background", "green");
                    jqBox2.text('哈哈哈')

                    //操作id选择器
                    jqBox1.css("background", "yellow");
                   
        })
    </script>
    
</body>
</html>
复制代码

效果如下:

 

2、层级选择器

 

代码如下:

复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代:儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin", 5);
            jqLi.css("background", "pink");

            //子代:亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>
复制代码

效果如下:

 

3、基本过滤选择器

解释:

代码如下:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈,基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>
            
        </ul>
    </body>
    <script src="jquery-3.3.1.js"></script>
    <script type="text/java script">
        
        $(function(){
            //获取第一个 :first ,获取最后一个 :last
            
            //奇数
            $('li:odd').css('color','red');
            //偶数
            $('li:even').css('color','green');
            
            //选中索引值为1的元素 *
            $('li:eq(1)').css('font-size','30px');
            
            //大于索引值1
            $('li:gt(1)').css('font-size','50px');
            
            //小于索引值1
            $('li:lt(1)').css('font-size','12px');
            
            
            
            
        })
        
        
    </script>
</html>
复制代码

效果如下:

4、属性选择器

 

代码如下:

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="box">
            <h2  
		
02-jQuery的选择器(一) https://www.cppentry.com/bencandy.php?fid=77&id=250288

首页 上一页 1 2 3 下一页 尾页 1/3/3
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Python学习日记(二十四) 继承 下一篇Python学习之旅:使用Python实现L..