jQuery-两次基础了解总结-引入-选择器-选择集转移

最新推荐文章于 2024-07-05 14:21:58 发布

芝士小熊饼干

最新推荐文章于 2024-07-05 14:21:58 发布

阅读量82

点赞数

文章标签： jquery 前端 html

本文链接：https://blog.csdn.net/weixin_74711824/article/details/131253744

版权

🐻作者：芝士小熊饼干
📖 系列专栏：数据结构-蓝桥杯-算法⭐

💪坚持天数：17天🤖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery使用</title>


    <!-- 引入 jQuery文件 -->
    <script src="js/jquery-3.7.0.min.js"></script>

    <script>
        // 第一种使用原生js来作为程序入口
        window.onload=function(){
            var d=document.getElementById('d1');
            alert(d);
        }

        // 第二种 使用jquery的ready 函数做为程序入口
        // $(document).ready(function(){

        //     // 在jquery中如果获取到标签对像时，前缀使用$
        //       var $d=$('#d1');
        //       alert('juqery'+$d); 
        // });//第二种方式更快

        //入口简化形式
        $(function(){
            var $div =$('#d1');
            alert('juqeryasd'+$d); 

        });

        //
       $(function(){
         // 标签选择器
         var $mk1=$('p');
         $mk1.css({background:'red'});

        //类选择器
        var $mk2=$('.mp');
        $mk2.css({color:'blue'});


        //id选择器
       //-使用引号

        var $mk3=$('#d1');
        //层级选择器
        var $mk4=$('div.a');

        //属性选择器
        var $mk5=$('input[type=text]');
        $mk5.css({background:'blue'});

       });
       ///
       //选择集过滤
       var $div=$('div').has('mytext') ;
       var $mk2=$divs.first();//获取集合中第一个标签 相反lsat（）；同理
       var $mk2=$divs.eq(1);;
       
    </script>




</head>


<body>
    <div id="d1">AAAA</div>
    <h1>AAAAAAAAAA</h1>
    <p class="mp">BBBBBBBBBBB</p>
    <div id="d1">ccccccccccc </div>
    <div><a href="#"></a></div>

    <input type="text" name="" id="" value="XXXX">
    <input type="password" name="" id="" value="XXXX">
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择集转移</title>
    <!-- 包含jquery文件 -->
    <script src="js/jquery-3.7.0.min.js"></script>
</head>
<script>
    $(function(){
        //取到参考标签
        var $mkp=$('p');
        //当前参考标签的上一个
        var $prev=$mkp.prev();
        // 当前标签的所有上一级标签
        var $priva =$mkp.prevAll();
        // 当前标签的下一个标签
        var $next=$mkp.next();
        //  当前标签的下面的所有标签
        var $nexta=$mkp.nextAll();
        //除当前标签以外的所有同级标签
        var $sibl=$mkp.siblings()
        $sibl.css({background:'red'});

        //当前的标签父标签
        var $mkpp=$mkp.parent();
        //当前标签的所有子标签
        var $cmkp=$mkp.children();


        //找到当前标签中类名为指定选择器的标签
        var $fp=$mkp.find('#s');
        var $fp=$mkp.find('.sn');

    });


</script>
<body>
    <div>

        <h1>1号标签</h1>
        <h2>2号标签</h2>
        <h3>3号标签</h3>

        <p> <span>惨</span><span>kao</span><span>biao</span><span>qian</span> 参考标签</p>
        
        <h3>四号标签</h3>
        <h2>五号标签</h2>

        <h1>六号标签</h1>
    </div>
    
</body>
</html>