zoukankan      html  css  js  c++  java
  • Jquery DOM操作

     

    常用方法
       1.查找元素节点
         var $li = $("ul li:eq(0)");//获取ul标记下的第一个li,也可以写成 $("#ulID li:eq(0)");
     
       2.查找元素属性
       利用jquery的attr()方法来获取元素的各种属性的值,attr()方法的参数可以是一个,也可以是两个。
             当参数是一个时,则是要查询的属性名称。
             当参数是两个时,则可以设置属性的值。
          alert($("#id").attr("title")); //输出元素的title属性.一个参数
          $("#id").attr("title","改变title值"); //改变元素的title属性值.二个参数
     
       3.添加元素节点
          $(html) 简单说明一下$(html)方法会根据传入的html标记字符串创建一个dom对象,并将这个dom对象包装成一个jquery对象返回,总之就是把标记所有html代码都放到$()工厂里面就行了!
          例: 
             var $htmlLi = $("  <li title='香蕉'>香蕉</li>");  //创建DOM对象
             var $ul = $("ul");   //获取UL对象
             $ul.append($htmlLi); //将$htmlLi追加到$ul元素的li列表
     
          下面列出部分插入节点的方法

    Append()

    向每个匹配的元素内追加内容

    HTML代码

    <ul></ul>

    JQuery代码

    $(“ul”).append(“<li>AA</li>”);

    结果

    <ul>

    <li>AA</li>

    </ul>

     

    appendTo()

    该方法和Append()相反,a.Append(b)是将b追加到a中,而appendTo()是将b追求到a

    HTML代码

    <ul></ul>

    JQuery代码

    $ (“<li>AA</li>”).appendTo (“ul”).;

    结果

    <ul>

    <li>AA</li>

    </ul>

     

    Prepend()

    向每个匹配的元素内部前置内容

    HTML代码

    <p>哈哈</p>

    JQuery代码

    $(“p”).prepend(“<b>ABC</b>”);

    结果

    <p><b>ABC</b>哈哈</p>

    prependTo()

    该方法和Prepend()相反,a. Prepend (b)是将b前置到a中,而prependTo ()是将b前置到a

    HTML代码

    <p>哈哈</p>

    JQuery代码

    $(“<b>ABC</b>”).prependTo.(“p”);

    结果

    <p><b>ABC</b>哈哈</p>

    After()

    在每个匹配的元素之后插入内容,是之后

    HTML代码

    <p>AAA</p>

    JQuery代码

    $(“p”).After(“<b>cc</b>”);

    结果

    <p>AAA</p><b>cc</b>

    insertAfter()

    After()相反

    HTML代码

    <p>AAA</p>

    JQuery代码

    $ (“<b>cc</b>”).After(“p”);

    结果

    <p>AAA</p><b>cc</b>

    Before()

    在每个匹配的元素之前插入内容

    HTML代码

    <p>AAA</p>

    JQuery代码

    $(“p”). Before (“<b>cc</b>”);

    结果

    <b>cc</b><p>AAA</p>

    insertBefore()

    Before()相反

    HTML代码

    <p>AAA</p>

    JQuery代码

    $ (“<b>cc</b>”). insertBefore (“p”);

    结果

    <b>cc</b><p>AAA</p>

     

    4.删除元素节点

     

       由于我们需要经常动态去改变DOM元素,因此Jquery提供了两种删除节点的方法,即remove()和empty();

     

        4.1 remove()方法

     

         $("p").remove();//    我们可以获取到要删除的元素,然后调用remove()方法

     

         $("ul li:eq(0)").remove().appendTo("ul");// 删除ul下面的第一个li标记,然后再把删除的li标记重新加到ul里面,remove()方法返回删除元素的引用,这时你可以继续使用

     

         $("ul li").remove("li[title!=ABC]");//remove可以接受通过参数来选择性的删除符合条件的元素;

     

       4.2 empty()方法

     

         严格来讲,empty()方法并不是删除元素,而是清空

     

         例:

     

          HTML代码

     

           <ul>

     

              <li title="AAA">AAA</li>

     

           </ul>

     

          JQuery代码

     

           $("ul li:eq(0)").empty();

     

          结果

     

          <ul>

     

              <li title="AAA"></li>

     

           </ul>

     

          记住,只会清空内容,不会请空属性;

     

  • 相关阅读:
    【leetcode】1295. Find Numbers with Even Number of Digits
    【leetcode】427. Construct Quad Tree
    【leetcode】1240. Tiling a Rectangle with the Fewest Squares
    【leetcode】1292. Maximum Side Length of a Square with Sum Less than or Equal to Threshold
    【leetcode】1291. Sequential Digits
    【leetcode】1290. Convert Binary Number in a Linked List to Integer
    【leetcode】1269. Number of Ways to Stay in the Same Place After Some Steps
    【leetcode】1289. Minimum Falling Path Sum II
    【leetcode】1288. Remove Covered Intervals
    【leetcode】1287. Element Appearing More Than 25% In Sorted Array
  • 原文地址:https://www.cnblogs.com/Greenzgz/p/4491995.html
Copyright © 2011-2022 走看看