Jquery学习(4)-jquery方法

最新推荐文章于 2022-02-11 17:44:53 发布

敏儿啦

最新推荐文章于 2022-02-11 17:44:53 发布

阅读量340

点赞数

分类专栏： Jquery

本文链接：https://blog.csdn.net/xiaomin_er/article/details/106306288

版权

本文详细介绍了jQuery中的核心方法，包括remove()与detach()的区别，ready事件的使用，text()与html()的差异，parents(), closest(), wrap系列方法的运用，clone()的两种模式，add()和slice()的选择性操作，数据串联化的实现，事件触发的细节，以及cookie和ajax、load等常用功能。通过对这些方法的掌握，能够更深入地理解和运用jQuery库。" 116205018,10694236,Python分支结构：根据分数判断等级,"['Python', '编程', '条件语句', '分支逻辑']

摘要由CSDN通过智能技术生成

1.remove detach

remove() 删除元素节点
[注]并不会保留这个元素节点上之前的事件和行为

detach() 删除元素节点
[注]会保留这个元素节点上之前的事件和行为

    <script src="../JS/jquery-1.11.3.js"></script>
    <style>
        #div1{
   width: 100px;height: 100px;background-color: red;}
        #div2{
   width: 200px;height: 200px;border: 1px solid black;}
    </style>
    <script>
        $(function(){
   
            $("#div1").hover(function(){
   
                $(this).css("backgroundColor",'yellow');
            },function(){
   
                $(this).css("backgroundColor",'blue');
            })
        })

         $(function(){
   
             $("button").click(function(){
   
                //  remove 返回值就是我们删除这个节点
                // var node = $("#div1").remove();
                var node = $("#div1").detach();
                node.appendTo($("#div2"));
             })
         })
    </script>
<body>
    <button>删除节点</button>
    <div id="div1" title="hello" class="box"></div>
    <div id="div2"></div>
</body>

2.ready

ready 事件
$(document).ready() 事件触发在当前的documnet加载完成以后执行
window
document加载完毕肯定是在window加载完毕之前。

    <script src="../JS/jquery-1.11.3.js"></script>
    <script>
         window.onload = function(){
   
             alert("我是onload");   //最后执行
         }
         $(function(){
   
            //  相当于window.onload
            alert(1);  //第一个执行
         })
         $(document).ready(function(){
   
            alert(2);  //第二个执行
         })
    </script>

3.text

JQuery 标签间的内容 html() 相当于innerHTML
JQuery 标签间纯文本 text() 相当于innerText

    <script src="../JS/jquery-1.11.3.js"></script>
    <script>
         $(function(){
   
            //  alert($("#div1").html());
            //  alert($("#div1").text());
            // $("#div1").html("<h1>hello world</h1>");
            $("#div1").text("<h1>hello world</h1>");
         })
    </script>
</head>
<body>
    <div id="div1"><em>em</em>div文本<strong>strong</strong></div>
</body>

4.parents closest

parent() 获取父节点
parents() 获取父节点们参数选择器父节点，父节点的父节点…
closest() 必须传入参数，参数也是选择器，只获取第一个符合条件的元素

    <script src="../JS/jquery-1.11.3.js"></script>
    <script>
         $(function(){
   
            // $("#div2").parent().css("backgroundColor",'red');
            // $("#div2").parents('.box').css("backgroundColor",'red');
            $("#div2")