jquery中的常规选择器（1）

「爱情、让人受尽委屈。」 2023-07-01 03:24 7阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    </head>
    <body>
        <div id="div1">我是东方闪电</div>
        <div class="div1">我是东方闪电2号</div>
        <div class="div1">我是东方闪电2号</div>
        <div id="div2">我是东方闪电2号
            <p>div2我是p标签</p>
            <p>div2我是p标签</p>
            <div>
                <p>我是p标签div</p>
                <p>我是p标签div</p>
            </div>
        </div>
        <div class="div3">我是东方闪电3号</div>
        <div class="div3">我是东方闪电3号</div>
        <div class="div3">我是东方闪电3号</div>
        <p>鸿运当头</p>
        <script>
            // $是jQuery对象的简写；
            $(function(){ // 执行一个匿名函数
                var div1 = $("#div1") // 根据id获取元素 
                div1.css({"height":"100px","width":"100px","background":"blue"})// 使用 .css对象方式设置行内样式
                div1.css("border","1px solid red").css("color","red")  // 链式方式设置样式
            })
            // 延迟的加载模式：js方式：window.onload = function(){}
            // onload 必须要等待网页全部加载完毕包括图片，然后再执行包裹代码；只执行一次；如果执行第二次，那么此一次的会被覆盖
            // jQuery方式：  $(document).ready(function(){})
            // $(document).ready(function(){}) 只需要等待dom加载完毕了就执行包裹的代码
            // 简写方式$(function(){}) 相当于  jQuery(function(){})
    
            // jQuery对象转换成原生对象的方法：  get()   或者 [index]
            var all_id_div1 = $("#div1").get()  // 获取id是div1的元素并转换成 js对象
            var all_class_div1 = $(".div1").get()// 获取class是div1的元素并转换成 js对象;  .get(0) 是获取第一个
            $(".div1")[0] //获取第一个元素
            //  jQuery.noConflict();// 将$所有的权限剔除；
            //  var $$ = jQuery; // 将jQuery对象赋值给 $$;
            
            //jQuery中选择器的使用
            // 1,id选择器
            $('#div2').css("font-size","20px");// 使用id选择器获取元素并设置样式
            // 2，class选择器
            $(".div3").css("color","red");// 使用class选择器获取元素并设置样式
            $(".div3").get(1).style.color = "orange";// 使用class选择器获取元素并设置第二个元素样式（其中get() 让jQuery对象转为js对象）
            $(".div3").get(2).style.fontWeight = 600;// 使用class选择器获取元素并设置第二个元素样式（其中get() 让jQuery对象转为js对象）
            // 3，元素选择器
            $("p").css("background","skyblue");// 使用元素选择器选取元素并设置样式
            // 可以使用jquery中的 length 获取size()查看返回的元素的个数
            // 4,子选择器
            $("#div2 > p").css('color','red');
        </script>
    </body>
    </html>