jquery中的常规选择器（1）

最新推荐文章于 2020-04-08 16:57:59 发布

汉武大帝·

最新推荐文章于 2020-04-08 16:57:59 发布

阅读量113

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/yinge0508/article/details/104034401

版权

jquery 专栏收录该内容

2 篇文章 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>