锋利的jQuery读书笔记(三)

淡淡的烟草味﹌ 2022-02-26 04:26 249阅读 0赞

第三章 jQuery中的DOM操作  
1 查找节点  
var $para = $(“p”);  
var p\_txt = $para.attr(“title”);

2 创建节点  
var  l i 1 = li\_1= li1=("

*  
 *  ");//创建第一个
 *  元素  
    var  l i 2 = li\_2= li2=("
 *  
 *  ");//创建第二个
 *  元素  
     ( " u l " ) . a p p e n d ( ("ul").append( ("ul").append(li\_1); //添加到ul节点中  
     ( " u l " ) . a p p e n d ( ("ul").append( ("ul").append(li\_2);  
    等价写法： ( " u l " ) . a p p e n d ( ("ul").append( ("ul").append(li\_1).append($li\_2);
 *  3 插入节点的方法  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 1]  
    4 删除节点  
    1)var $li = $(“ul li:eq(1)”).remove();  
    $li.appendTo(“ul”);  
    当某个节点用remove删除后，该节点的子节点都会被删除。该方法返回值是一个指向已被删除节点的引用，因此可以在以后使用这些元素  
    2) var $li = $(ul li:eq(1)).detach();//删除元素  
    $li.appendTo(“ul”);//重新追加此元素，发现之前绑定的事件还在，如果使用remove()方法删除的话，那么之前的绑定将会失效  
    3) empty方法  
    $(“ul li:eq(1)”).empty();//获取第二个li元素后，清空此元素里的内容不包括元素本身
    
    5 复制节点  
    $(“ul li”).click(function()\{  
    $(this).clone(true).appendTo(“ul”);//复制单击的节点，并将他追加到
    
     *  元素中  
        \})
    
    $(this).clone(true).appendTo(“ul”);  
    在clone方法中传递了一个参数true，它的含义是复制元素的同时复制元素中的绑定事件，因此该元素的副本也具有复制功能
    
    6 替换节点  
    $(“p”).replaceWith(“**你最不喜欢的水果是？**”);  
    等价写法：  
    $(“**你最不喜欢的水果是？**”).replaceAll(“p”);
    
    7 包裹节点  
    $(“strong”).wrap("");
    
    示例代码：  
    **你最不喜欢的水果是？**  
    **你最不喜欢的水果是？**
    
    $(“strong”).wrap("");  
    结果：  
    **你最不喜欢的水果是？**  
    **你最不喜欢的水果是？**
    
    $(“strong”).wrapAll("");  
    结果：  
    **你最不喜欢的水果是？  
    你最不喜欢的水果是？**  
    注意：如果被包裹的多个元素中有其他元素，其他元素会被放到包裹元素之后
    
    $(“strong”).wrapInner("");  
    结果：**你最不喜欢的水果是？**
    
    8 属性操作  
    1）获取属性与设置属性  
    var p\_txt = $(“p”).attr(“title”);  
    var p\_txt = $(“p”).attr(“title”,“aaa”);  
    2）删除属性  
    $(“p”).removeAttr(“title”);
    
    9 样式操作
    
    1.  获取样式与设置样式  
        var p\_class = $(“p”).attr(“class”);  
        $(“p”).attr(“class”,“myclass”);  
        2)追加样式  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 2]  
        3)移除样式  
         ( " p " ) . r e m o v e C l a s s ( " h i g h " ) . r e m o v e C l a s s ( " a n o t h e r " ) ; 等 价 于 ： ("p").removeClass("high").removeClass("another"); 等价于： ("p").removeClass("high").removeClass("another");等价于：(“p”).removeClass(“high another”);  
        $(“p”).removeClass(“high another”);//移除p元素的所有class  
        4）切换样式  
        $toggleBtn.toggle(function()\{  
        //显示元素  
        \},function()\{  
        //隐藏元素  
        \})  
        示例代码：
    
    aaaaaaaa
    
    $("p").toggleClass("another")；//class的值会在myClass和myClass another中重复切换 5）判断是否含有某个样式 $("p").hasClass("another")；
    
    10 设置和获取HTML、文本和值  
    1)var p\_html = $(“div”).html();  
    $(“div”).html(“
    
    aaa
    
    ”);  
    2)var p\_text = $(“p”).text();  
    $(“p”).text(“aaa”);  
    3)val()的用法  
    示例代码：  
    选择一号 选择二号 选择三号 选择1号 选择2号 选择3号 选择4号 操作： $("\#single").val("选择二号"); $("\#muliple").val("选择2号","选择3号"); $(":checkbox").val(\["check2","check3"\]); $(":radio").val(\["radio2"\]); 等价写法： $("\#single option:eq(1)").attr("selected",true); $("\[value=radio2\]:radio").attr("checked",true);
    
    11遍历节点  
    1）children()方法只考虑子元素而不考虑其它后代元素  
    2）var $p1 = $(“p”).next();//取出紧邻
    
    元素后的同辈元素，包括该元素的子元素  
    3）var $ul = $(“ul”).prev();//取出紧邻
    
     *  元素前的同辈元素  
        4）siblings()用于取得元素前后所有的同辈元素  
        5）closest()用于取得最近的匹配元素  
         ( e . t a r g e t ) . c l o s e s t ( " l i " ) . c s s ( " c o l o r " , " r e d " ) ; 6 ） p a r e n t ( ) , p a r e n t s ( ) , c l o s e s ( ) 的 区 别 ! \[ 在 这 里 插 入 图 片 描 述 \] ( h t t p s : / / i m g − b l o g . c s d n i m g . c n / 20190328233517625. p n g ? x − o s s − p r o c e s s = i m a g e / w a t e r m a r k , t y p e Z m F u Z 3 p o Z W 5 n a G V p d G k , s h a d o w 1 0 , t e x t a H R 0 c H M 6 L y 9 i b G 9 n L m N z Z G 4 u b m V 0 L 211 c 2 l f b Q = = , s i z e 1 6 , c o l o r F F F F F F , t 7 0 ) 12 c s s d o m 操 作 1 ） (e.target).closest("li").css("color","red"); 6）parent(),parents(),closes()的区别 !\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20190328233517625.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ==,size\_16,color\_FFFFFF,t\_70) 12 css\_dom操作 1） (e.target).closest("li").css("color","red");6）parent(),parents(),closes()的区别!\[在这里插入图片描述\](https://img−blog.csdnimg.cn/20190328233517625.png?x−oss−process=image/watermark,typeZmFuZ3poZW5naGVpdGk,shadow10,textaHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ==,size16,colorFFFFFF,t70)12cssdom操作1）(“p”).css(“color”);  
        $(“p”).css(“color”，“red”);  
         ( " p " ) . c s s ( " c o l o r " : “ r e d ” , " f o n t S i z e " : " 30 p x " ) ; 2 ） ("p").css(\{"color":“red”,"fontSize":"30px"\}); 2） ("p").css("color":“red”,"fontSize":"30px");2）(“p”).height();  
        $(“p”).height(100);  
        $(“p”).height(“10em”);  
        与height对应的方法有width()  
        13 CSS\_DOM常用的方法  
        1） offset(),获取元素在当前窗口的相对偏移，其中返回的对象包含两个属性,即top和left  
        var offset = $(“p”).offset();  
        var left = offset.left;  
        vat top = offset.top;  
        2）position()方法  
        var position =  ( " p " ) . p o s i t i o n ( ) ; v a r l e f t = p o s i t i o n . l e f t ; v a r t o p = p o s i t i o n . t o p ; 3 ） ("p").position(); var left = position.left; var top = position.top; 3） ("p").position();varleft=position.left;vartop=position.top;3）(“p”).scrollTop();//获取元素的滚动条距顶端的距离  
        $(“p”).scrollLeft();//获取元素的滚动条距左侧的距离  
        //滚动到指定位置  
        $(“p”).scrollTop();  
        $(“p”).scrollLeft();

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70]: /images/20220226/37c15660cacf4501a1e3749d5ece618c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 1]: /images/20220226/d312c60ae04848d687e80127bc1ef418.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 2]: /images/20220226/1e6fada8438843a09d46e77be89c4e23.png