jQuery操作Dom

作者: 琴匣自鸣 | 来源:发表于2018-06-04 15:25 被阅读19次

    1.操作Class
    (1)添加class 元素.addClass(“.a”) 或 元素.addClass(".a  .dv  .col")
      (2)  删除class 元素.removeClass(".a") 或 元素.removerClass(".a .dv .col")
      (3)  切换class,如果已存在那么删除class,如果不存在那么添加 class
        元素.toggleClass("一个或多个元素");
    (4)判断是否含有某个class,返回布尔值 元素.hasClass("一个或多class"); 

    2.html代码及文本操作
        元素.html("<div class='a'></div>"); 如果html()内有html代码则为在元素内写入对应html代码。
        元素.html();如果html()内无任何内容则为获取该元素内所有html代码
        元素.text("添加文本内容给"),text()内有任何文本或代码,都被认为是在元素内写入的文本。
        元素.text(), text()内无任何内容则为获取该元素内的文本内容,注意只获取文本不获取html代码。

    3. 属性值操作
        元素.val(), val()内无内容为获取该元素的value值
        元素.val("value值"),val()内有值则为设置该元素的value值  

    4.获取创建节点
        $(selector):通过选择器获取节点,例:$(".a")
        $(element):把DOM节点转化成jQuery节点,例 $(p1) p1为Dom节点,将p1转化为jQuery节点并返回。 
        $(html):使用HTML字符串创建jQuery节点,例 $("<div class='a'></div>"),创建class为a的div的jQuery节点并返回。

    5.插入节点

    6.删除节点
        元素.remove(),删除整个元素节点,及节点,同时删除相关jQuery数据例如,绑定的方法等,注意行内的方法属于js,行外的jQuery绑定才是属于jQuery数据。
        元素.empty(),删除元素子节点,不包括元素本身
        元素.detach(), 删除元素,但保留相关数据及绑定事件
    var a=$().remove(); var b=$().detach(); 获取删除的元素
    var c=$().empty();注意此方法获取的是删除子元素后的父级元素。

    7.替换节点
    replaceWith()和replaceAll()用于替换某个节点
    var $newNode1=$("你喜欢哪些冬季运动项目?");
    $("旧节点").replaceWith($newNode1);
    $("$newNode1").replaceAll("旧节点");

    8.复制节点
    var a=$().clone(".a");

    9.属性操作
    $("p").attr("name"), 获取p标签的name属性的属性值。
    $("p").attr({width:"100px",color:"blue"}),设置p标签的多个属性值
    $("p").removeAttr("id"),删除p标签的id属性,说白了删除的是属性值 

    10.节点遍历
    $().children();获取该元素下所有子元素
    $().next();用于获取紧邻匹配元素之后的元素
    $().prev();用于获取紧邻匹配元素之前的元素
    $().slibings();用于获取位于匹配元素前面和后面的所有同辈元素
    $().parent();获取父级元素
    $().parents();获取祖先级元素

    find():法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选
    例:$("p").find("span").css('color','red');搜索所有段落中的后代 span 元素,并将其颜色设置为红色:

    filter(): 方法将匹配元素集合缩减为匹配指定选择器的元素。
    例:$("div").css("background", "#c8ebcc").filter(".middle").css("border-color", "red");改变所有 div 的颜色,然后向类名为 "middle" 的类添加边框:

    $(selector).each(function(index,element)) ; 循环匹配的所有元素
    index:选择器位置,类似于下标
    element:当前元素  

    $("li").each(function(){
     var str=$(this).text()+"";     //this代表当前元素  
     $("section").append(str);      })

    end( ):结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态

    11.Dom操作

    相关文章

      网友评论

        本文标题:jQuery操作Dom

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