jQuery

作者: 壹枕星河 | 来源:发表于2019-03-28 15:58 被阅读2次

    jQuery 语法

    jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
    基础语法: $(selector).action()

    美元符号定义 jQuery
    选择符(selector)"查询"和"查找" HTML 元素
    jQuery 的 action() 执行对元素的操作
    jQuery 中所有选择器都以美元符号开头:$()

    文档就绪事件

    $(document).ready(function(){
     
       // 开始写 jQuery 代码...
     
    });
    
    简洁写法(与以上写法效果相同):
    $(function(){
     
       // 开始写 jQuery 代码...
     
    });
    

    这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作

    <body>
        <div>123</div>
        <div class="div1">456</div>
        <div id="div2">789</div>
        <p class="p1">qeq</p>
        <p>xxx</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <script>
            var div = $("div");
            console.log(div);   
            // console.log(jQuery);
            console.log($("div").eq(1));//选择第一个div
            console.log($("div:eq(2)"));//选择第二个div
            console.log($("div").html());//div的内容
            console.log($("*"));//查找所有的元素
            console.log($(this));//选取当前的HTML元素
            console.log($("p.p1"));//选择class="p1"的p标签
            console.log($("p:first"));//选择第一个p标签
            console.log($("ul li:first"));//选择ul下的第一个li
            $("p:first").dblclick(function(){
                alert("双击!");
            })
            console.log($("div")[0]);//转换为原生js
            console.log($("div").get(0));转换为原生js
            $("div").eq(1).html("我QQ(#`O′)").addClass("box1").css("color","red");
            var div2 = document.querySelector("#div2");
            console.log($("div2"));//转换为jQuery
            console.log($("ul").children(".two"));//ul下class="two"的li
            console.log($("ul").find(".two"));//ul下的class="two"的所有元素
        </script>
    
    jQuery选择器.png

    jQuery事件

    jQuery事件.png

    相关文章

      网友评论

        本文标题:jQuery

        本文链接:https://www.haomeiwen.com/subject/jemqbqtx.html