第八章 使用jQuery操作DOM

DOM操作:

  jQuery中提供了一系列操作DOM强有力的方法,它们不仅简化了传统JavaScript操作DOM时繁冗的代码,更加解决了令开发者苦不堪言的跨平台浏览器的兼容。

  它还让有页面元素真正动起来,动态的增减修改数据,令用户与计算机交互更加便捷,交互形式更加多样。

JavaScript操作DOM时分类:

          DOM Core(核心)

          HTML-DOM

          CSS-DOM

样式操作

  设置和获取样式值:

      

  追加样式和移除样式:

      

    addClass():追加样式,即它依旧保存原有的样式,在此基础上追加新样式。

    removeClass():移除样。

  切换样式:

      

    toggleClass()方法模拟了addClass()方法与removeClass()方法实现样式切换的过程,他与toggle()方法切换元素可见状态有着异曲同工之妙,减少了代码量,提高了代码的运行效率

  判断是否含指定的样式:

      

  HTML代码样式:

    $(document).ready(function()){

      $("h1").click(function(){

        var str="<ul><li>买了商品后,查不到物流信息怎么办?</li><li>申请退款后,交易退款成功,钱到哪里?</li></ul>";

        $(".proList").html(str);

      });

      $("span").click(function(){

        $(".proList").hmtl(" ");

      });

    });

  标签内容操作:

    $(document).ready(function(){  

      $("h1").click(function(){

        var str="<ul><li>买了商品后,查不到物流信息怎么办?</li><li>申请退款后,交易退款成功,钱到哪里?</li></ul>";

        $(".proList").text(str);

      });

      $("span").click(function(){

        $(".proList").text(" ");

      });

    });

  html()方法和text()方法的区别:

      html():无参数,用于获取第一个匹配元素的HTML内容或文本内容;

      html(content):content参数为元素的HTML内容,用于设置所有匹配元素的HTML内容或文本内容;

      text():无参数,用于获取所有匹配元素的文本内容;

      text(content):content参数为元素的文本内容,用于设置所有匹配元素的文本内容;

  属性值操作:

     

节点操作

  创建节点:

    

  插入节点:

    

  删除节点:

    

    

    remove():清除整个节点;

    empty():清空节点的内容,位置任然保留;

  替换节点:

    

  复制节点:

    

    true:复制事件处理;

    false:不复制事件处理;

属性操作

  获取与设置元素属性:

    方法一:

    $(".contain img").click(function(){

      alert($(this).attr("alt"));

    })

    方法二:

    $(".contain img").attr({"200",height:"80"});

    注意:在jQuery中,很多方法都是同一个方法实现获取与设置两种功能的,即一个方法实现两个用途,无参数时为获取元素,带参数时为设置元素的文本,属性值等,attr()方法,html()方法,val()方法等。

  删除元素属性:

    $(".contain img").removeAttr("alt");

节点遍历

  遍历子元素:

    

  遍历同辈元素:

    

    next():用于获取紧邻匹配元素之后的元素;

    prev():用于获取紧邻匹配元素之前的元素;

    siblings():用于获取位于匹配元素前面和后面的所有同辈元素;

  遍历前辈元素:

    

    parent():获取当前匹配元素集合中每个元素的父级元素;

    parents():获取当前匹配元素集合中每个元素的祖先元素;

  其他遍历方法:

    each()方法:

        

      each()方法规定为每个匹配元素规定运行的函数;

    end()方法:

        

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

CSS-DOM操作:

    css():设置或返回匹配元素的样式属性;

    height():设置或返回匹配元素的高度,如果没有规定长度单位,则使用默认的px作为单位;

    width():设置返回匹配元素的宽度,如果没有规定长度单位,则使用默认的px作为单位;

    offset():返回以像素为单位的top和left坐标,此方法仅对可见元素有效;

    offsetParent():返回最近的已定位祖先元素,定位元素指定的是元素的CSS position值被设置为relative absolute或fixed的元素;

    position():返回第一个匹配元素相对于父元素的位置;

    scrollLeft():设置或返回匹配元素相对滚动左侧的偏移;

    scrollTop():设置或返回匹配元素相对滚动条顶部的偏移;

    

原文地址:https://www.cnblogs.com/wnwn/p/11045373.html