jquery

文档就绪事件

$(document).ready(function(){

//内容....

})
*--简写--*
$(function(){

//内容....

});

选择器

ID $("#id") 　　类名 $(".class") 　　标签名 $("tag")

通过关系查找

$('.class').siblings(); 查找同辈的所有元素

$('.class').children();查找子元素

$('.class').next();查找同辈的下一个元素

$('.class').next()All();该元素之后所有的同辈元素

$('.class').prev();查找同辈的上一个元素

$('.class').parent();查找元素的父辈

样式操作

<body>
    <div id="addClass"></div>
    <div id="removeClass"></div>
    <div id="toggleClass"></div>
    <div id="css"></div>
    <script src="jquery-3.1.0.min.js"></script>//外部jQuery文件
    <script>
    $(function(){
        $("#addClass").addClass("I-am");//添加
        $("#removeClass").removeClass("I-am");//删除
        $("#toggleClass").toggleClass("I-am");//存在就删除，不存在就添加
        $("#css").css("color","pink");
        console.log($("#css").css("color"));
        $("#css").css({
            30,
            height:30,
            border:"1px solid #000"
        });

    });
    </script>
</body>

属性操作

<body>
    <ul class="list">
        <li>
            <a href=""></a>
            <img src="" alt="">
        </li>
        <li>
            <a href=""></a>
            <img src="" alt="">
        </li>
        <li>
            <a href=""></a>
            <img src="" alt="">
        </li>
    </ul>
    <script src="jquery-3.1.0.min.js"></script>
    <script>
        $(function(){

            $("a").attr({href:"attr.html",title:"I am a link"})
            $("img").attr({src:"img.png",alt:"I am a image"});
            $("img").attr("src",function(index,attr){
                this.src="img"+(index+1)+".png";
            })

        })
    </script>

</body>

内容操作

<body>
    <div id="remove"></div>
    <ul id="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script src="jquery-3.1.0.min.js"></script>
    <script>
        // $(function(){
            
        //     $("#remove").remove();　　//将元素整个删掉
        //     $("#list").empty();　　//将该元素的子元素删掉

        // });
　　　　　　//触发
        // $(function(){
        //     $("li").click(function(){　　　　　　
        //         $(this).hide();
        //     });
        // })

　　　　　　　　//mouseover事件
        // $(function(){
        //     $("li").mouseover(function(){
        //         $("li").css("background-color","pink");
        //     });

        // });
　　　　　　
　　　　　　//mouseout事件
        $(function(){
            $("li").mouseout(function(){
                $("li").css({background:"blue",border:"1px solid #000"});
            });
        })
    </script>
</body>

修改内容

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="jquery-3.1.0.min.js"></script>
    <script>
        $(function(){
            $("li").html(function(index,html){
                this.innerHTML="这里是第"+(index+1)+"行列表"
            })
        })
    </script>
</body>