jQuery常用方法，初级入门

最新推荐文章于 2020-05-15 16:29:56 发布

原创最新推荐文章于 2020-05-15 16:29:56 发布 · 300 阅读

0 ·

CC 4.0 BY-SA版权

前端的尘封往事专栏收录该内容

29 篇文章

订阅专栏

本文介绍了jQuery中常用的选择器及元素操作方法，包括通过类名、ID选择元素，进行样式修改，事件绑定等。同时涵盖了过滤、遍历、查找等高级用法，帮助开发者快速掌握jQuery的核心功能。


<script type="text/javascript" src="../jquery-3.2.1.min.js"></script>
<body>
    <!--1
     <div id="div1" class="box">div</div>
    <span class="box">span</span>

    <script type="text/javascript">
    $('.box').css('background','green');
    </script>       每个class类样式相同，与原生的JS代码像比较，省的循环-->



    <!-- 2
    <ul>
        <li></li>
        <li></li>
    </ul>
    <script type="text/javascript">
    // $('li:first').css('background','#999');
    // $('li:eq(0)').css('background','#999');//以上两个效果相同
    </script> -->


    <!-- 3
    <div id="div1">div</div>

    <script type="text/javascript">
    // window.onload=function(){
    //  var oDiv=document.getElementById('div1');
    //  oDiv.onclick=function(){
    //      alert(this.innerHTML);
    //  };
    // };

    // $(function(){
    //  var oDiv=$('#div1');
    //  oDiv.click(function(){
    //      alert($(this).html());
    //  })
    // });//与上面的代码实现的结果是相同的   原生的JS中innerHTML与jQuery中的html()效果相同
    </script> -->


    <!--4
     <div id="div1">div1</div>
    <div>div2</div>
    <div>div3</div>
    <script type="text/javascript">
        var oDiv=document.getElementById("div1");
        $(function(){
            // oDiv.innerHTML="hello";//js赋值
            // alert(oDiv.innerHTML);//js取值

                $("div").html("hello");//jquery赋值
                alert($("div").html());//取值,当一组元素的时候，取值的是元素中的第一个。
        })
    </script> -->


    <!-- 5
    <div title="123">123</div>
    <script type="text/javascript">
    $(function(){
    alert($('div').attr('title'));//123
    alert($('div').attr('title','456'));//将title的属性值改成了456；
})
    </script> -->




    filter:过滤
    not：filter的反义词 
    has:包含，只有存在包含的关系，才可以使用


    <!-- <script type="text/javascript">
    $(function(){
        // $('div').css('background','red'); //两个div都是红色背景
        //$('div').filter('.box').css('background','red');//不满足条件的将会被过滤，只有div1背景是红色 
        //$('div').not('.box').css('background','red');//只有div2背景是红色
        $('div').has('span').css('background','red');//只有div中包含span标签的，背景才会是红色，div1
    })
    </script>

    <div class="box">div1<span>hello</span></div>
    <div>div2</div> -->



    next():下一个节点
    prev():上一个节点
    find(元素名):找到特定的节点,可以在包含关系的下面找
    eq(n):n代表数字，指的是下标
    index():索引，就是当前元素在所有兄弟节点中的位置

    <script type="text/javascript">
        $(function(){
            $('#div1').next().css('background','#999');//div 的下一个节点就是span节点，背景会变成红色
            $('div').find('h2').css('background','red');//只有div下的h2 才会背景颜色变为红色
            $('div').find('h2').eq(2).css('background','yellow');//div下的h2,下标为2的h2,背景会变成黄色
            alert($('#h').index());//2
        })
    </script>

    <div id="div1">div</div>
    <span>span</span>
    <p>p</p>
    <div>
        <h2>2</h2>
        <h3>3</h3>
        <h4 id="h">4</h4>
        <h2>22</h2>
        <h2>222</h2>
    </div>
    <h2>h2</h2>
</body>
</html>