搜索
您的当前位置:首页正文

jquery操作DOM元素(3)

2023-12-01 来源:亿米科技网

.detach()  从DOM 中去掉所匹配的元素。    .detach([selector])      selector 一个选择表达式将需要移除的从匹配的元素中过滤出来。    $("p").detach();

.empty()  从DOM中移除集合中匹配元素的所有子节点。    .empty() 这个方法不接受任何参数。  结构:    <div class="container">      <div class="hello">Hello</div>      <div class="goodbye">Goodbye</div>    </div>

$('.hello').empty();

效果:    <div class="container">      <div class="hello"></div>      <div class="goodbye">Goodbye</div>    </div>

.remove()  将匹配元素从DOM 中删除,同时删除元素上的事件。  .remove([selector])    selector 一个选择器表达式用来过滤将被移除的匹配元素集合。  结构:    <div class="container">      <div class="hello">Hello</div>      <div class="goodbye">Goodbye</div>    </div>

$('.hello').remove();

效果:    <div class="container">      <div class="goodbye">Goodbye</div>    </div>

.unwrap()  将匹配元素集合的父级元素删除,保留自身,(和兄弟元素,如果存在)再原来的位置。  .unwrap()    这个方法不接受任何参数。  结构:    <div class="container">      <div class="hello">Hello</div>      <div class="goodbye">Goodbye</div>    </div>

$('.hello').empty();

效果:    <div class="hello">Hello</div>    <div class="goodbye">Goodbye</div>

.replaceAll()  用集合的匹配元素替换每个目标元素。  .replaceAll(target)    target 一个选择器字符串,对象,DOM元素,或者元素数组,包含哪个元素被替换。    结构:<div class="container">          <div class="inner first">Hello</div>          <div class="inner second">And</div>          <div class="inner third">Goodbye</div>      </div>

$('<h2>New heading</h2>').replaceAll('.inner');    效果:      <div class="container">        <h2>New heading</h2>        <h2>New heading</h2>        <h2>New heading</h2>      </div>

.replaceWith()  用提供的内容替换集合中所匹配的元素并返回删除元素的集合。    .replaceWith(newContent)      newContent 用来插入的内容,可能是HTML字符串,DOM元素,或者对象。      .replaceWith(function)        function 一个函数,返回的内容会替换匹配的元素集合。      结构:<div class="container">          <div class="inner first">Hello</div>          <div class="inner second">And</div>          <div class="inner third">Goodbye</div>         </div>        $('div.second').replaceWith('<h2>New heading</h2>');      效果:<div class="container">            <div class="inner first">Hello</div>            <h2>New heading</h2>            <div class="inner third">Goodbye</div>          </div>

$('div.third').replaceWith($('.first'));         效果:<div class="container">              <div class="inner second">And</div>              <div class="inner first">Hello</div>            </div>

小编还为您整理了以下内容,可能对您也有帮助:

jquery中有哪些dom操作

DOM操作的分类
  DOM Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。
  它的用途并非仅限与处理网页,也可以用来处理任何一种使用标记语言编写出来的文档。例如XML
  javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法,这些都是Dom Core的组成部分。
  
  使用DOM Core来获取表单对象的方法
  document.getElementByTagName("from");
  使用DOM Core来获取某元素的src属性的方法:
  element.getAttribute("src");
  
  构建DOM元素
  <body>
  <p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
  <ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
  </ul>
  </body>
  使用jQeruy在文档数上查找节点非常容易,可以通过在第2章介绍的jQuery选择器来完成。
  1.查找元素节点
  获取元素节点并打印出它的文本内容,jQuery代码如下:
  var $li = $("ul li:eq(1)"); 获取<ul>里第2个<li> 节点
  var li_txt=$li.text(); //获取第2个<li>元素节点的文本内容
  alert(li_txt); //打印文本内容,这里会打印出橘子
  
  以上代码获取了<ul>元素里第2个<li>节点,并将它的文本内容"橘子"打印出来
  
  2.查找属性节点
  利用jQuery 选择器查找到需要的元素后,就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字。
  获取属性节点并打印出它的文本内容,jQuery代码如下:
  var $para = $("p"); //获取<p>节点
  var p_txt=$para.attr("title"); //获取<p>元素节点属性title
  alert(p_txt); //打印title属性值
  
  
  创建节点
  在dom 操作中,常常需要动态创建HTML内容,是文档在浏览器里面的呈现效果发生变法,并且达到各种各样的人机交互的目的。
  
  1. 创建元素节点
  例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。
  (1)创建两个<li>新元素。
  (2)将这两个新元素插入文档中。
  第(1)个步骤可以使用jQuery的工厂函数$()来完成。
  $(html);
  $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
  首先创建两个<li>元素,jQuery代码如下:
  $("ul").append($li_1); //添加到<ul>节点中,使之能在网页中显示
  $("ul").append($li_2); //可以采取链式写法:$("ul").append($li_1).append($li_2);
  注意事项:
  (1)动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。
  (2)当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。
  例如创建一个<p> 元素,使用$("<p/>")或者("<p></p>"),但是不要使用$("<p>")或者大写的$("<P/>");
  
  2.创建文档节点
  var $li_1= $("<li>香蕉</li>"); //创建一个<li> 元素,包括元素节点和文本节点,香蕉就是创建的文本节点
  var $li_2 =$("<li>雪梨</li>"); //创建一个<li> 元素,包括元素节点和文本节点,雪梨就是创建的文本节点。
  $("ul").append($li_1); //添加到<ul>节点中,使之能在网页中显示
  $("ul").append($li_2); //添加到<ul>节点中,使之能在网页中显示
  以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将他们添加到文档中就可以了。
  注意事项:
  无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。
  例如$("<li><em>这是</em><b>一个</b><a href='#'>复杂的组合</a></li>");
  
  
  3.创建属性节点
  创建属性及节点与创建文本节点类似,也是直接在创建元素节点时一起创建。
  jQuery代码如下:
  var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素,包含元素节点,文本节点和属性节点 其中title='香蕉'就是创建的属性节点
  var $li_2=$("<li title='雪梨'>雪梨</li>");//创建一个<li>元素 包括元素节点,文本节点和属性节点,其中title=‘雪梨’就是创建的属性节点
  $("ul").append($li_1);
  $("ul").append($li_2); //添加到<ul> 节点中,使之能在网页中显示
  
  插入节点
  动态创建HTML元素并没有世界用处,还需要将新创建的元素插入文档中,将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。
  使用append(),它会在元素内部追加新创建的内容。
  
  jQuery中还有提供了其他几种插入节点的方法。
  
  方法 描述 示例
  append() 向每个匹配的元素内部追加内容 HTML代码
  <p>我想说:</p>
  jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p>
  appendTo() 将所有匹配的元素追加到指定的元素中,
  实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中 HTML 代码 <p>我想说:<p> jQuery代码: $("<b>你好</b>").appendTo("p"); 结果: <p>我想说:<b>你好</b></p>
  
  prepend() 向每个匹配的元素内部前置内容 HTML代码: <p>我想说:</p > jQuery代码: $("p").prepend("<b>你好</b>");结果<p><b>你好</b>我想说:</p>
  
  prependTo() 将所有匹配的元素前置到指定的元素中,实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中。HTML 代码 <p>我想说:</p> jQuery代码: $("<b>你好</b>").prependTo("p"); 结果<p><b>你好</b>我想说<p>
  
  after() 在每个匹配的元素之后插入内容 HTML代码 <p>我想说:<p> jQuery代码: $("p").after("<b>你好<b>"); 结果: <p>我想说:</p><b>你好</b>
  
  insertAfter() 将所有匹配的元素插入到指定元素的后面,与after()颠倒了 HTML代码<p> 我想说</p> jQuery代码:$("<b>你好</b>").insertAfter("p"); 结果<p>我想说:</p><b>你好</b>
  
  before() 将每个匹配的元素之前插入内容 HTML代码 <p>我想说:</p> jQuery 代码:$("p").before("<b>你好</br>"); 结果<b>你好</b>我想说:</p>
  
  insertBefore() 将所有匹配的元素插入到指定的元素的前面,实际上,使用该方法是颠倒了常规的before的操作 $("<b> 你好</b>").insertBefore("p"); 结果:<b>你好</b><p>我想说:</p>
  
  删除节点
  如果文档中某一个元素多余,那么应将其删除,jQuery提供了两种删除节点的方法,即remove() 和empty()
  
  1.remove()方法
  作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式类筛选元素。
  
  例如删除图3-11中<ul>节点中的第2个<li>元素节点,jQuery代码如下:
  $("ul li:eq(1)").remove();//获取第2个<li>元素节后,将它从网页中移除
  当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,这个方法得放回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
  下面的jQuery代码说明元素用remove()方法删除后,还是可以继续使用的。
  var $li = $("ul li:eq(1)").remove();//获取第2个<li>元素节点后,将它从网页中删除
  $li.appendTo("ul");//把刚删除的节点又重新添加到<ul>元素里
  可以直接使用appendTo()方法得特性来简化以上代码:
  $("ul li:eq(1)").appendTo("ul");
  //appendTo()方法也可以用来移动元素
  //移动元素时首先从文档上删除此元素,然后将该元素插入得到文档中的指定节点。
  另外remove()方法也可以通过传递参数来选择性地删除元素
  $("ul li").remove("li[title!='菠萝']"); //将<li>元素属性title不等于"菠萝" 的<li>元素删除。
  
  
  2.empty()方法
  严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后台节点。
  $("ul li:eq(1)").empty(); //获取第2个<li>元素节点后,清空此元素里的内容,注意是元素里面。
  使用firebud查看橘子节点发生变化 <li title='橘子'/>
  
  3.复制节点
  复制节点也是常用的DOM操作之一,例如购入车,用户不仅可以通过单击商品下方的选择按钮购买相应的产品,也可以通过鼠标拖动商品
  并将其放到购物车中,这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到以下购物车的效果
  $("ul li").click(function(){
  $(this).clone().appendTo("ul");//复制当前单击的节点,并将它追加到<ul>元素中
  });
  //在页面中点击"菠萝"后,列表最下方出现新节点"菠萝"。
  $(this).clone(true).appendTo("body");//注意参数true
  在clone()方法传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件,因此该元素的副本也同样具备复制功能。
  
  替换节点
  如果要替换某个节点,jQuery提供了相应的方法,即replaceWith和 replaceAll()
  replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。
  例如要将网页中<p title="选择你最喜欢的水果">你最喜欢的水果是?</p> 替换成<strong> 你最不喜欢的水果是?</strong> 可以使用如下jQuery代码:
  $("p").replaceWith("<strong>你最不喜欢的水果是?");
  也可以使用jQuery中另一个方法repalceAll()来实现,该方法与replaceWith()方法得作用相同,只是颠倒了replaceWith的操作。
  $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
  注意:
  如果在替换之前,已经为元素绑定了事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
  
  4. 包裹节点
  如果要将某个节点用其他标记包裹起来,jQuery提供了相应的方法,wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。
  jQuery代码如下:
  $("strong").wrap("<b></b>");//用<b>标签把<strong> 元素包裹起来
  得到的结果如下:
  <b><strong title="选择你最喜欢的水果"> 你最喜欢的水果是?</strong></b>
  
  1.wrapAll()方法
  该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法,wrap()方法将所有的元素进行单独的包裹。
  $("strong").wrap("<b></b>");
  
  2.wrapinner()方法
  该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来,例如可以使用它来包裹<strong> 标签的子内容:jQuery代码如下:
  $("strong").wrapInner("<b></b>");
  运行代码后,发现<strong>标签内的内容被一对<b>标签包裹了。
  <strong title="选择你最喜欢的水果"><b>你最喜欢的水果是?</b></strong>
  
  属性操作
  在jQuery 中,用attr() 方法来获取和设置元素属性,removeAtt() 方法来删除元素属性。
  1.获取属性和设置属性
  如果要获取<p>元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称。
  var $para=$("p"); //获取<p>节点
  var p_txt=$para.attr("title"); //获取<p>元素节点属性title
  
  如果要设置<p>元素的属性title的值,也可以使用同一个方法,不同的是,需要传递两个参数即属性名称和对应的值。
  jQuery代码如下:
  $("p").attr("title","your title");//设置单个的属性值
  //为同一个元素设置多个属性值
  $("p").attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。
  
  jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,即能设置元素属性的值,也能获取元素属性的值,类似的还有html(),text(),height(),width(),val(),css()等方法。
  
  2.删除属性
  有时候需要删除文档元素的特定属性,可以使用removeAttr()方法
  删除<p>元素的title属性
  $("p").removeAttr("title");
  
  操作样式
  获取样式和设置样式
  HTML代码如下:
  <p class="myclass" title="选择你最喜欢的水果"> 你最喜欢的水果是?</p>
  class 也是<p>元素的属性,因此获取class 和设置class都可以使用attr()方法。
  var p_class = $("p").attr("class");//获取<p>元素的class
  
  可以使用attr()方法来设置<p>元素的class,jquery代码如下:
  $("p").attr("class","high");//设置<p>元素的class为high
  他是将原来的class替换为class,而不是在原来的基础上追加新的class
  
  追加样式
  jQuery提供了专门的addClass()方法来追加样式,为了使例子更为容易理解,首先在<style>标签里添加另一组样式
  <style>
  .high{
  font-weight:bold;
  color:red;
  }
  
  .another{
  font-style:italic;
  color:blue;
  }
  //在网页中追加class类的按钮.
  $("input:eq(2)").click(function(){
  $("p").addClass("another"); //给<p>元素追加"another"类
  })
  
  attr() 和addClass()的区别
  用途 追加样式 设置样式
  对同一个网页元素操作 <p>test</p>
  第一次使用方法 $("p").addClass("high"); $("p").attr("class","high");
  第1次结果 <p class="high">test</p>
  再次使用方法 $("p").addClass("another"); $("p").attr("class","another");
  结果 <p class="high another"> test</p> <p class="another"> test</p>
  
  3移除样式
  如果单击某一个按钮时,删除class的某个值,那么可以使用addClass()方法相反的removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的class
  如下jQuery代码来删除
  
  $("p").removeClass("high");//移除<p>元素中为"high"的class
  //如果要把<p>元素的两个class都删除,就要使用removeClass()
  $("p").removeClass("high").removeClass("another");
  //jquery提供了更简单的方法
  $("p").removeClass("high another");
  另外,还可以使用removeClass()方法得一个特性来完成同样的效果,它不带参数的时候会将 class的值全部删除.
  $("p").removeClass();
  
  切换样式
  $toggleBtn.toggle(function(){
  //3
  },function(){
  //4
  });
  
  toggle()方法此处的作用是交替执行代码3和4两个函数,如果元素原来是显示的,则隐藏它,如果隐藏的,则显示它,此时,toggle()方法主要是控制行为上的重复切换。
  
  判断是否含有某个样式
  hasClass可以用来判断元素中是否有某个class,如果有,则返回true,否则返回false
  $("p").hasClass("another");
  //jQuery内部实际上是调用了is()方法来完成这个功能的,该方法等价于
  $("p").is(".another")
  1.设置和获取HTML,文本和值
  html()方法
  $("P").html();//获取元素的html代码
  
  2.text() 方法
  $("p").text(); //获取<p>元素的文本内容
  //text()可以对文本内容设置内容
  $("p").text("你最喜欢的水果是?"); //设置<p>元素的文本内容
  
  3.val()方法
  val()方法取值
  通过上面的例子可以发现val()方法不仅能设置元素的值,同时也能获取元素的值,另外val() 方法还有另外一个用处,就是它能select(下拉列表框),checkbox(多选框)和radio(单选框) 相应的选项被选中,在表单操作中会经常用到。
  //使用val设置选中项
  $("#single").val("选择2号");
  //如果要使下拉列表的第2项和第3项被选中
  $("#multiple").val(["选择2号","选择3号"]); //以数组的形式赋值
  使多个文本框被选中
  $(":checkbox").val(["check2","check3"]);
  $(":radio").val(["radio2"]);
  
  也可以使用attr()方法来实现同样的功能
  $("#single option:eq(1)").attr("selected",true); //设置属性selected
  $("[value=radio2]:radio").attr("checked",true);
  
  1 children()方法
  该方法用于取得匹配元素的子元素集合
  var $body = $("body") .children();
  var $p=$("p").children();
  var $ul = $("ul").children();
  alert($body.length);
  alert($p.length);
  alert($ul.length);
  
  2.next方法
  该方法用于取得匹配元素后面紧邻的同辈元素。
  从dom树的结构可以知道<p>元素的下一个同辈节点时<ul>,因此可以通过next() 方法来获取<ul> 元素
  var $p1 = $("p").next();//取得紧邻<p>元素后的同辈元素
  <ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
  </ul>
  
  prev()方法
  该方法用于取得匹配元素前面紧邻的同辈元素。
  从DOM树的结构中可以知道<ul>元素的上一个同辈节点时<p>,因此可以通过prev()方法类获取<p>元素
  var $ul = $("ul").prev(); //取得紧邻<ul>元素前得同辈元素
  得到的结果将是:
  <p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
  
  4.siblings()方法
  该方法用于取得匹配元素前后所有的同辈元素。
  在第1章导航栏的例子中有段代码如下:
  $(".has_children").click(function() {
  $(this).addClass("highlight"); //为当前元素增加highlight类
  .children("a").show().end()
  .siblings().removeClass("highlight")
  .children("a").hide();
  })

jquery中有哪些dom操作

DOM操作的分类
  DOM Core 并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它。
  它的用途并非仅限与处理网页,也可以用来处理任何一种使用标记语言编写出来的文档。例如XML
  javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()等方法,这些都是Dom Core的组成部分。
  
  使用DOM Core来获取表单对象的方法
  document.getElementByTagName("from");
  使用DOM Core来获取某元素的src属性的方法:
  element.getAttribute("src");
  
  构建DOM元素
  <body>
  <p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
  <ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
  </ul>
  </body>
  使用jQeruy在文档数上查找节点非常容易,可以通过在第2章介绍的jQuery选择器来完成。
  1.查找元素节点
  获取元素节点并打印出它的文本内容,jQuery代码如下:
  var $li = $("ul li:eq(1)"); 获取<ul>里第2个<li> 节点
  var li_txt=$li.text(); //获取第2个<li>元素节点的文本内容
  alert(li_txt); //打印文本内容,这里会打印出橘子
  
  以上代码获取了<ul>元素里第2个<li>节点,并将它的文本内容"橘子"打印出来
  
  2.查找属性节点
  利用jQuery 选择器查找到需要的元素后,就可以使用attr()方法来获取它的各种属性的值.attr()方法得参数可以是一个,也可以是两个。当参数是一个时,则是要查询的属性的名字。
  获取属性节点并打印出它的文本内容,jQuery代码如下:
  var $para = $("p"); //获取<p>节点
  var p_txt=$para.attr("title"); //获取<p>元素节点属性title
  alert(p_txt); //打印title属性值
  
  
  创建节点
  在dom 操作中,常常需要动态创建HTML内容,是文档在浏览器里面的呈现效果发生变法,并且达到各种各样的人机交互的目的。
  
  1. 创建元素节点
  例如要创建两个<li>元素节点,并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上。
  (1)创建两个<li>新元素。
  (2)将这两个新元素插入文档中。
  第(1)个步骤可以使用jQuery的工厂函数$()来完成。
  $(html);
  $(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
  首先创建两个<li>元素,jQuery代码如下:
  $("ul").append($li_1); //添加到<ul>节点中,使之能在网页中显示
  $("ul").append($li_2); //可以采取链式写法:$("ul").append($li_1).append($li_2);
  注意事项:
  (1)动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。
  (2)当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。
  例如创建一个<p> 元素,使用$("<p/>")或者("<p></p>"),但是不要使用$("<p>")或者大写的$("<P/>");
  
  2.创建文档节点
  var $li_1= $("<li>香蕉</li>"); //创建一个<li> 元素,包括元素节点和文本节点,香蕉就是创建的文本节点
  var $li_2 =$("<li>雪梨</li>"); //创建一个<li> 元素,包括元素节点和文本节点,雪梨就是创建的文本节点。
  $("ul").append($li_1); //添加到<ul>节点中,使之能在网页中显示
  $("ul").append($li_2); //添加到<ul>节点中,使之能在网页中显示
  以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将他们添加到文档中就可以了。
  注意事项:
  无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。
  例如$("<li><em>这是</em><b>一个</b><a href='#'>复杂的组合</a></li>");
  
  
  3.创建属性节点
  创建属性及节点与创建文本节点类似,也是直接在创建元素节点时一起创建。
  jQuery代码如下:
  var $li_1=$("<li title='香蕉'>香蕉</li>");//创建一个<li>元素,包含元素节点,文本节点和属性节点 其中title='香蕉'就是创建的属性节点
  var $li_2=$("<li title='雪梨'>雪梨</li>");//创建一个<li>元素 包括元素节点,文本节点和属性节点,其中title=‘雪梨’就是创建的属性节点
  $("ul").append($li_1);
  $("ul").append($li_2); //添加到<ul> 节点中,使之能在网页中显示
  
  插入节点
  动态创建HTML元素并没有世界用处,还需要将新创建的元素插入文档中,将新创建的节点插入文档最简单的办法是,让它成为这个文档的某个节点的子节点。
  使用append(),它会在元素内部追加新创建的内容。
  
  jQuery中还有提供了其他几种插入节点的方法。
  
  方法 描述 示例
  append() 向每个匹配的元素内部追加内容 HTML代码
  <p>我想说:</p>
  jQuery代码: $("p").append("<b>你好</b>"); 结果: <p>我想说:<b>你好</b></p>
  appendTo() 将所有匹配的元素追加到指定的元素中,
  实际上,使用该方法是颠倒了常规的$(A).append(B)的操作,即不是将B追加到A中,而是将A追加到B中 HTML 代码 <p>我想说:<p> jQuery代码: $("<b>你好</b>").appendTo("p"); 结果: <p>我想说:<b>你好</b></p>
  
  prepend() 向每个匹配的元素内部前置内容 HTML代码: <p>我想说:</p > jQuery代码: $("p").prepend("<b>你好</b>");结果<p><b>你好</b>我想说:</p>
  
  prependTo() 将所有匹配的元素前置到指定的元素中,实际上,使用该方法是颠倒了常规的$(A).prepend(B)的操作,即不是将B前置到A中,而是将A前置到B中。HTML 代码 <p>我想说:</p> jQuery代码: $("<b>你好</b>").prependTo("p"); 结果<p><b>你好</b>我想说<p>
  
  after() 在每个匹配的元素之后插入内容 HTML代码 <p>我想说:<p> jQuery代码: $("p").after("<b>你好<b>"); 结果: <p>我想说:</p><b>你好</b>
  
  insertAfter() 将所有匹配的元素插入到指定元素的后面,与after()颠倒了 HTML代码<p> 我想说</p> jQuery代码:$("<b>你好</b>").insertAfter("p"); 结果<p>我想说:</p><b>你好</b>
  
  before() 将每个匹配的元素之前插入内容 HTML代码 <p>我想说:</p> jQuery 代码:$("p").before("<b>你好</br>"); 结果<b>你好</b>我想说:</p>
  
  insertBefore() 将所有匹配的元素插入到指定的元素的前面,实际上,使用该方法是颠倒了常规的before的操作 $("<b> 你好</b>").insertBefore("p"); 结果:<b>你好</b><p>我想说:</p>
  
  删除节点
  如果文档中某一个元素多余,那么应将其删除,jQuery提供了两种删除节点的方法,即remove() 和empty()
  
  1.remove()方法
  作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式类筛选元素。
  
  例如删除图3-11中<ul>节点中的第2个<li>元素节点,jQuery代码如下:
  $("ul li:eq(1)").remove();//获取第2个<li>元素节后,将它从网页中移除
  当某个节点用remove()方法删除后,该节点所包含的所有后代节点将同时被删除,这个方法得放回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
  下面的jQuery代码说明元素用remove()方法删除后,还是可以继续使用的。
  var $li = $("ul li:eq(1)").remove();//获取第2个<li>元素节点后,将它从网页中删除
  $li.appendTo("ul");//把刚删除的节点又重新添加到<ul>元素里
  可以直接使用appendTo()方法得特性来简化以上代码:
  $("ul li:eq(1)").appendTo("ul");
  //appendTo()方法也可以用来移动元素
  //移动元素时首先从文档上删除此元素,然后将该元素插入得到文档中的指定节点。
  另外remove()方法也可以通过传递参数来选择性地删除元素
  $("ul li").remove("li[title!='菠萝']"); //将<li>元素属性title不等于"菠萝" 的<li>元素删除。
  
  
  2.empty()方法
  严格来讲,empty()方法并不是删除节点,而是清空节点,它能清空元素中的所有后台节点。
  $("ul li:eq(1)").empty(); //获取第2个<li>元素节点后,清空此元素里的内容,注意是元素里面。
  使用firebud查看橘子节点发生变化 <li title='橘子'/>
  
  3.复制节点
  复制节点也是常用的DOM操作之一,例如购入车,用户不仅可以通过单击商品下方的选择按钮购买相应的产品,也可以通过鼠标拖动商品
  并将其放到购物车中,这个商品拖动功能就是用的复制节点,将用户选择的商品所处的节点元素复制一次,并将其跟随鼠标移动,从而达到以下购物车的效果
  $("ul li").click(function(){
  $(this).clone().appendTo("ul");//复制当前单击的节点,并将它追加到<ul>元素中
  });
  //在页面中点击"菠萝"后,列表最下方出现新节点"菠萝"。
  $(this).clone(true).appendTo("body");//注意参数true
  在clone()方法传递了一个参数true,它的含义是复制元素的同时复制元素中所绑定的事件,因此该元素的副本也同样具备复制功能。
  
  替换节点
  如果要替换某个节点,jQuery提供了相应的方法,即replaceWith和 replaceAll()
  replaceWith()方法得做哟偶那个是将所有匹配的元素都替换成指定的HTML或者DOM元素。
  例如要将网页中<p title="选择你最喜欢的水果">你最喜欢的水果是?</p> 替换成<strong> 你最不喜欢的水果是?</strong> 可以使用如下jQuery代码:
  $("p").replaceWith("<strong>你最不喜欢的水果是?");
  也可以使用jQuery中另一个方法repalceAll()来实现,该方法与replaceWith()方法得作用相同,只是颠倒了replaceWith的操作。
  $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
  注意:
  如果在替换之前,已经为元素绑定了事件,替换后原先绑定的事件将会与被替换的元素一起消失,需要在新元素上重新绑定事件。
  
  4. 包裹节点
  如果要将某个节点用其他标记包裹起来,jQuery提供了相应的方法,wrap(),该方法对于需要在文档中插入额外的结构化标记非常有用,而且不会破坏原始文档的语义。
  jQuery代码如下:
  $("strong").wrap("<b></b>");//用<b>标签把<strong> 元素包裹起来
  得到的结果如下:
  <b><strong title="选择你最喜欢的水果"> 你最喜欢的水果是?</strong></b>
  
  1.wrapAll()方法
  该方法将会将所有匹配的元素用一个元素包裹。它不同于wrap()方法,wrap()方法将所有的元素进行单独的包裹。
  $("strong").wrap("<b></b>");
  
  2.wrapinner()方法
  该方法将每一个匹配的元素的子内容(包括文本节点) 用其他结构化的标记包裹起来,例如可以使用它来包裹<strong> 标签的子内容:jQuery代码如下:
  $("strong").wrapInner("<b></b>");
  运行代码后,发现<strong>标签内的内容被一对<b>标签包裹了。
  <strong title="选择你最喜欢的水果"><b>你最喜欢的水果是?</b></strong>
  
  属性操作
  在jQuery 中,用attr() 方法来获取和设置元素属性,removeAtt() 方法来删除元素属性。
  1.获取属性和设置属性
  如果要获取<p>元素的属性title,那么只需要给attr()方法传递一个参数,即属性名称。
  var $para=$("p"); //获取<p>节点
  var p_txt=$para.attr("title"); //获取<p>元素节点属性title
  
  如果要设置<p>元素的属性title的值,也可以使用同一个方法,不同的是,需要传递两个参数即属性名称和对应的值。
  jQuery代码如下:
  $("p").attr("title","your title");//设置单个的属性值
  //为同一个元素设置多个属性值
  $("p").attr({"title":"your title","name":"test"});//将一个 "名值" 形式的对象设置为匹配元素的属性。
  
  jQuery中的很多方法都是同一个函数实现获取(getter)和设置(setter)的,例如上面的attr()方法,即能设置元素属性的值,也能获取元素属性的值,类似的还有html(),text(),height(),width(),val(),css()等方法。
  
  2.删除属性
  有时候需要删除文档元素的特定属性,可以使用removeAttr()方法
  删除<p>元素的title属性
  $("p").removeAttr("title");
  
  操作样式
  获取样式和设置样式
  HTML代码如下:
  <p class="myclass" title="选择你最喜欢的水果"> 你最喜欢的水果是?</p>
  class 也是<p>元素的属性,因此获取class 和设置class都可以使用attr()方法。
  var p_class = $("p").attr("class");//获取<p>元素的class
  
  可以使用attr()方法来设置<p>元素的class,jquery代码如下:
  $("p").attr("class","high");//设置<p>元素的class为high
  他是将原来的class替换为class,而不是在原来的基础上追加新的class
  
  追加样式
  jQuery提供了专门的addClass()方法来追加样式,为了使例子更为容易理解,首先在<style>标签里添加另一组样式
  <style>
  .high{
  font-weight:bold;
  color:red;
  }
  
  .another{
  font-style:italic;
  color:blue;
  }
  //在网页中追加class类的按钮.
  $("input:eq(2)").click(function(){
  $("p").addClass("another"); //给<p>元素追加"another"类
  })
  
  attr() 和addClass()的区别
  用途 追加样式 设置样式
  对同一个网页元素操作 <p>test</p>
  第一次使用方法 $("p").addClass("high"); $("p").attr("class","high");
  第1次结果 <p class="high">test</p>
  再次使用方法 $("p").addClass("another"); $("p").attr("class","another");
  结果 <p class="high another"> test</p> <p class="another"> test</p>
  
  3移除样式
  如果单击某一个按钮时,删除class的某个值,那么可以使用addClass()方法相反的removeClass()方法来完成,它的作用是从匹配的元素中删除全部或者指定的class
  如下jQuery代码来删除
  
  $("p").removeClass("high");//移除<p>元素中为"high"的class
  //如果要把<p>元素的两个class都删除,就要使用removeClass()
  $("p").removeClass("high").removeClass("another");
  //jquery提供了更简单的方法
  $("p").removeClass("high another");
  另外,还可以使用removeClass()方法得一个特性来完成同样的效果,它不带参数的时候会将 class的值全部删除.
  $("p").removeClass();
  
  切换样式
  $toggleBtn.toggle(function(){
  //3
  },function(){
  //4
  });
  
  toggle()方法此处的作用是交替执行代码3和4两个函数,如果元素原来是显示的,则隐藏它,如果隐藏的,则显示它,此时,toggle()方法主要是控制行为上的重复切换。
  
  判断是否含有某个样式
  hasClass可以用来判断元素中是否有某个class,如果有,则返回true,否则返回false
  $("p").hasClass("another");
  //jQuery内部实际上是调用了is()方法来完成这个功能的,该方法等价于
  $("p").is(".another")
  1.设置和获取HTML,文本和值
  html()方法
  $("P").html();//获取元素的html代码
  
  2.text() 方法
  $("p").text(); //获取<p>元素的文本内容
  //text()可以对文本内容设置内容
  $("p").text("你最喜欢的水果是?"); //设置<p>元素的文本内容
  
  3.val()方法
  val()方法取值
  通过上面的例子可以发现val()方法不仅能设置元素的值,同时也能获取元素的值,另外val() 方法还有另外一个用处,就是它能select(下拉列表框),checkbox(多选框)和radio(单选框) 相应的选项被选中,在表单操作中会经常用到。
  //使用val设置选中项
  $("#single").val("选择2号");
  //如果要使下拉列表的第2项和第3项被选中
  $("#multiple").val(["选择2号","选择3号"]); //以数组的形式赋值
  使多个文本框被选中
  $(":checkbox").val(["check2","check3"]);
  $(":radio").val(["radio2"]);
  
  也可以使用attr()方法来实现同样的功能
  $("#single option:eq(1)").attr("selected",true); //设置属性selected
  $("[value=radio2]:radio").attr("checked",true);
  
  1 children()方法
  该方法用于取得匹配元素的子元素集合
  var $body = $("body") .children();
  var $p=$("p").children();
  var $ul = $("ul").children();
  alert($body.length);
  alert($p.length);
  alert($ul.length);
  
  2.next方法
  该方法用于取得匹配元素后面紧邻的同辈元素。
  从dom树的结构可以知道<p>元素的下一个同辈节点时<ul>,因此可以通过next() 方法来获取<ul> 元素
  var $p1 = $("p").next();//取得紧邻<p>元素后的同辈元素
  <ul>
  <li title='苹果'>苹果</li>
  <li title='橘子'>橘子</li>
  <li title='菠萝'>菠萝</li>
  </ul>
  
  prev()方法
  该方法用于取得匹配元素前面紧邻的同辈元素。
  从DOM树的结构中可以知道<ul>元素的上一个同辈节点时<p>,因此可以通过prev()方法类获取<p>元素
  var $ul = $("ul").prev(); //取得紧邻<ul>元素前得同辈元素
  得到的结果将是:
  <p title="选择你最喜欢的水果">你最喜欢的水果是?</p>
  
  4.siblings()方法
  该方法用于取得匹配元素前后所有的同辈元素。
  在第1章导航栏的例子中有段代码如下:
  $(".has_children").click(function() {
  $(this).addClass("highlight"); //为当前元素增加highlight类
  .children("a").show().end()
  .siblings().removeClass("highlight")
  .children("a").hide();
  })

怎样进行JQuery元素查找与操作

这次给大家带来怎样进行JQuery元素查找与操作,JQuery元素查找与操作的注意事项有哪些,下面就是实战案例,一起来看一下。

第一步:sizzle选择器

基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素,简单的说是基于css选择器,除此之外还有一些特定的选择器。

第二步:查询祖先

parent()

返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历

parents()

可以使用可选参数来过滤对父元素的搜索

返回被选元素的所有祖先元素,它一路向上直到文档的根元素

parentsUntil()

返回介于两个给定元素之间的所有祖先元素,下面是例子:

$(document).ready(function(){

//会返回span开始到p为止的祖先元素

$("span").parentsUntil("p");

});第三步:查询子孙

children()

可以使用可选参数来过滤对子元素的搜索

返回被选元素的所有直接子元素,该方法只会向下一级对 DOM 树进行遍历

find()

可以使用可选参数来过滤对元素的搜索

返回被选元素的后代元素,一路向下直到最后一个后代

第四步:查询同胞

siblings()

返回被选元素的所有同胞元素

next()

返回被选元素的下一个同胞元素

nextAll()

返回被选元素的之后的全部同胞元素

nextUntil()

返回介于两个给定参数之间的所有跟随的同胞元素

$(document).ready(function(){

//返回介于 <h2>与<h6>元素之间的所有同胞元素

$("h2").nextUntil("h6");

});prev()、prevAll() 和 prevUntil()

prev()、prevAll()以及prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。

第五步:查询时添加过滤

first()

返回选择的元素中的首个元素

last()

返回选择的元素中的最后一个元素

eq()

返回被选元素中带有指定索引号的元素,这个很容易理解,举例就是:$(element[flag])和element.eq(flag)结果一样

filter()

对查询结果进行过滤,和下面not()类似,作用相反

not()

返回不匹配标准的所有元素

$(document).ready(function(){

//返回不带有类名"target"的所有p元素

$("p").not(".target");

});元素找到以后,接着我们需要根据需求来对查找到的结点进行操作。

第六步:text()、html()、val()以及attr()

text()、html()、val()以及attr(),拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串

1.text() - 设置或返回所选元素的文本内容

2.html() - 设置或返回所选元素的内容(包括 HTML 标记)

3.val() - 设置或返回表单字段的值

4.attr() - 设置或返回属性值

$("#btn1").click(function(){

$("#test1").text(function(i,origText){

return "旧文本: " + origText + " 新文本: index: " + i;

});

});第七步:添加元素

append() - 在被选元素的内部结尾插入内容

prepend() - 在被选元素的内部开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

第八步:删除元素

remove()可接受一个参数,允许你对被删元素进行过滤,empty()不可以

remove() - 删除被选元素(及其子元素)

empty() - 从被选元素中删除子元素

//等同于$("p.target").remove();

$("p").remove(".target");第九步:替换元素

replaceAll()和replaceWith()功能类似,但是目标和源相反

replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

replaceAll() - 用集合的匹配元素替换每个目标元素

第十步:class操作

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

hasClass() - 判断一个元素是否存在该class

第十一步:css()方法

设置或返回被选元素的一个或多个样式属性

css("propertyname"); - 返回propertyname属性的值

css("propertyname","value"); - 设置propertyname属性的值

css({"propertyname":"value","propertyname":"value",...}); - 设置多个值

第十二步:元素尺寸

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)

innerWidth() 方法返回元素的宽度(包括内边距)

innerHeight() 方法返回元素的高度(包括内边距)

outerWidth() 方法返回元素的宽度(包括内边距和边框)

outerHeight() 方法返回元素的高度(包括内边距和边框)

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

如何使用jquery layui弹出层

怎样使用JS调用模式与this关键字绑定

亿米科技网还为您提供以下相关内容希望对您有帮助:

怎样进行JQuery元素查找与操作

第一步:sizzle选择器基于元素的id、类、类型、属性、属性值等"查找"(或选择)HTML元素,简单的说是基于css选择器,除此之外还有一些特定的选择器。第二步:查询祖先parent()返回被选元素的直接父元素,该方法只会向上一...

怎样使用jQuery中元素选择器

元素选择器的使用方法如下:$("element");其中,element为要查询元素的标记名。例如,要查询全部p元素,可以使用下面的jQuery代码:$("p");二、应用在页面中添加两个标记和一个按钮,通过单击按钮来获取这两个,并修改它们...

jquery中有哪些dom操作

作用是从DOM中删除所有匹配的元素,传入的参数用于根据jQuery表达式类筛选元素。 例如删除图3-11中节点中的第2个元素节点,jQuery代码如下: $("ul li:eq(1)").remove();//获取第2个元素节后,将它从网页中移除 当某个节点用remove(...

vue操控dom

1、jQuery操作dom(推荐指数:★☆☆☆):只要拿jQuery的选择器,选中相应的dom进行操作就可以了,但是大家都知道jQuery获取元素是查找页面所有,相当于“循环”所有元素直至找到需要的dom,但是vue是单页面的,jQuery获取dom并...

jquery新增dome,并动态赋值

带一个jquery对象参数,动态添加dom元素,车。1,先动态创建($(‘’‘’)) 2.将创建的span添加到body上,在span里面动态创建img($(‘’

jquery如何遍历dom对象

jQuery中用$()方法获取的DOM元素都会返回数组 并且jQuery中有隐形迭代,有些操作你无须去刻意循环它们,例如:$("div").text("hello");那么就会在所有的DIV中都加上hello. 若果硬要循环它们以进行某些处理 你可以使用...

Angular如何正确的操作DOM

那么如何优雅的使用Angular的方式来操作DOM呢?获取元素1、ElementRef --- A wrapper around a native element inside of a View.在组件的 constructor中注入ElementRef,可以获取到整个组件元素的包裹。@Component({ selector:...

jquery中如何获取当前DOM对象里的子元素?

jquery中获取当前dom元素的子元素的方法有很多,常见的方法是使用children()方法或者fand()方法都是可以获取到某个元素的子元素的,children() 方法返回匹配元素集合中每个元素的子元素,find()方法获得当前元素集合中每个元素的...

如何使用jQuery将元素移动到另一个元素中?

jQuery的append()方法用于在所选元素的末尾插入一些内容。语法:参数: 此方法接受上述两个参数 ● content:它是必需参数,用于指定要在所选元素末尾插入的内容。content的可能值是HTML元素,jQuery对象和DOM元素。● function...

关于DOM(查找)

(selector).find(filter) 返回被选元素的后代元素。该方法沿着 DOM 元素的后代向下遍历,直至最后一个后代的所有路径() filter: 必需 。过滤搜索后代条件的选择器表达式、元素或 jQuery 对象。如需返回多个后代,请...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

热门图文

  • 衙门排晓戟的下一句是什么

    衙门排晓戟的下一句:铃阁开朝锁。诗词名称:《郡斋暇日辱常州陈郎中使君早春晚坐水西馆书事诗…酬之》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 风摇白梅朵的下一句是什么

    风摇白梅朵的下一句:衙门排晓戟。诗词名称:《郡斋暇日辱常州陈郎中使君早春晚坐水西馆书事诗…酬之》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 波拂黄柳梢的下一句是什么

    波拂黄柳梢的下一句:风摇白梅朵。诗词名称:《郡斋暇日辱常州陈郎中使君早春晚坐水西馆书事诗…酬之》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 春深物袅娜的下一句是什么

    春深物袅娜的下一句:波拂黄柳梢。诗词名称:《郡斋暇日辱常州陈郎中使君早春晚坐水西馆书事诗…酬之》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

  • 遥思毗陵馆的下一句是什么

    遥思毗陵馆的下一句:春深物袅娜。诗词名称:《郡斋暇日辱常州陈郎中使君早春晚坐水西馆书事诗…酬之》。本名:白居易。别称:诗王、诗魔。字号:字乐天号香山居士,又号醉吟先生。所处时代:唐代。民族族群:汉族。出生地:河南新郑。出生时间:772年2月28日。去世时间:846年9月8日。主要作品:《直中书省》《新亭病后独坐招李侍郎公垂》《忆江南》《家园三绝》《赋得古原草送别》等。主要成就:新乐府运动主要倡导者、写下了不少反映人民疾苦的诗篇。

Top