jQuery选择器（基础选择器、进阶选择器）

最新推荐文章于 2022-09-15 11:54:37 发布

mustang(野马）

最新推荐文章于 2022-09-15 11:54:37 发布

阅读量203

点赞数

分类专栏： js 知识点

本文链接：https://blog.csdn.net/weixin_45000381/article/details/93537056

版权

js 同时被 2 个专栏收录

32 篇文章 1 订阅

订阅专栏

知识点

27 篇文章 0 订阅

订阅专栏

jQuery选择器，基础选择器、进阶选择器

<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>
    <style>
        div
        {
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <!-- 这个是引入jQuery文件 -->
</head>
<body>
        <div></div>
        <div class="div0"></div>
        <div id="div1"></div>
        <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>
        </ul>
    <script>
        
        // jQuery===$   //等同效用
        // jQuery("div");
        // $("div");

        // $("div"); // document.querySelector("div");  //jQuery与DOM 的写法对比
        //其实先有jquery，才有DOM的存在，所以query selector   类似与jQuery
        //扩展，另外写的$  这个符号，PHP中声明变量的$   可以看出是PHP程序员写的jQuery


// jqury选择器与DOM下面代码的选择方法一样
        // function $(name){
        //     if(name.indexOf("#")===0){//获取的是数组都不是#
        //         return document.getElementById(name.slice(1));
        //     }else if(name.indexOf(".")===0){获取的是数组第一个元素是.的
        //         return document.getElementsByClassName(name.slice(1))[0]; //[从这个类数组中获得第一元素]
        //     }else{
        //         return document.getElementsByTagName(name)[0];//选择的是一个元素列表集
        //     }
        // }

        // $("#div1").textContent="你好"  //这是用dom来编写的内容


            //   标签选择器,id选择器,class选择器
            // $("div").text("你好");   //jQuery中标签选择器方法
            // $("#div1").text("你好");//jQuery中 id选择器方法
            // $(".div0").text("你好");//jQuery中  class选择器法

            // console.log($("div"));//jQuery对象,不是DOM对象,不能使用任何的DOM方法和属性


            // DOM对象和jQuery对象的互转
// 下面是将jQuery对象转为DOM对象
            // jQuery对象就是类数组的对象格式

            // console.log($("#div1")[0]);//jQuery类数组中获取第几个下标的元素就是DOM对象
            // console.log($("div").get(0));//在jQuery类数组中获取第几个DOM对象


            // console.log(Array.from($("div")));//将jQuery转换为DOM数组

            // $("div").text("你好");   //这样是给div添加内容
            // $("div").eq(1).text("你好");//获取jQuery类数组中某个jQuery对象使用（也即是说可以针对性的进行修改）

//下面将DOM转为jQuery对象
            // var div=document.createElement("div");
            // 直接将DOM对象放在$()中,就可以转换为jQuery对象
            // $(div).appendTo("body").text("欢迎");//这样的写法连缀写法

            // $("div").on("click",function(e){//点击div执行function函数方法
            //     // console.log(this);//this是DOM元素
            //     $(this).text("你好");//将this转换为jQuery对象
            // })
            
//补充前知识点点，DOM元素是一个个的，如果要给多个DOM元素添加点击事件就要通过循环遍历给每个
//DOM元素添加点击事件
            // var divs=document.getElementsByTagName("div");//列表集
            // for(var i=0;i<divs.length;i++){//通过循环给每个div添加一个点击事件
            //     divs[i].addEventListener("click",clickHandler);
            // }

            // function clickHandler(e){
            //     this.textContent="你好"//添加的是this是当前点击的元素添加内容
            // }


            // $("div.div0");//所有div标签中class是div0的,(注意区分有空格和没有空格的区别)
//上面讲的都是基础选择器

//进阶选择器
            // $("div,p,span");//群组选择器
            // $("div,#div1,.div0");//群组选择器


            // $("div div");//后代选择器   （空隔隔开）
            // $("div.div0"); $("div .div0");    
            // 前者是所有div标签中class是div0,后者是div标签的所有后代中class是div0

            // 获取ul的所有后代元素
            // console.log($("ul *"));//注意中间有空格隔开着，
            //如果把空格去掉之后，发现只有一个ul，所以可以说是没有空格那么就是所有的ul
            // $("*")//这样写表示所有的，不推荐这样去写，理由是要获取元素太多，慢

            // div的子代div元素
            // console.log($("div>div"));
            // console.log($("ul>li"));
            // console.log($("ul>*"));//ul的所有子代元素


            // console.log($("div+p"));//div的相邻的下一个兄弟标签是p元素
            // console.log($("div+*"));//div的相邻的下一个兄弟元素

 
            // console.log($("div~p"));//div的所有下面的兄弟元素是p标签的
            // console.log($("li~*"));//li下所有的兄弟元素，（注意，不包括最顶上的li）


            // 下面这个是补充跨域的方法的
            // var script=document.createElement("script");
            // script.src="http://10.9.63.202:3005?cb=fn1";
            // document.body.appendChild(script);

            // function fn1(b){
            //     console.log(b);
            // }




    </script>
</body>
</html>

mustang(野马）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器（基础选择器、进阶选择器）

jQuery选择器，基础选择器、进阶选择器<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫