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()

注意大小写,我试验时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>
      记住,只会清空内容,不会请空属性;
原文出自: http://blog.163.com/ganlanfei@126/blog/static/1218198712010118115844618/

jquery:after append appendTo三个函数的区别的更多相关文章

  1. jquery after append appendTo三个函数的区别

    jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html> & ...

  2. after、append和appendTo三个函数的区别

    jq文档的说明是 1.after函数 定义和用法: after() 方法在被选元素后插入指定的内容. 语法: $(selector).after(content) 实例: <html>&l ...

  3. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  4. jQuery height()、innerHeight()、outerHeight()函数的区别详解

    参考来源:http://www.jb51.net/article/84897.htm 代码示例(可复制到编辑器直接打开): <!DOCTYPE html> <html lang=&q ...

  5. jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

    jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...

  6. jquery源码分析(三)——工具函数

    jQuery.extend({ expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "&quo ...

  7. jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  8. (转)jQuery中append(),prepend()与after(),before()的区别

    在jQuery中,添加元素有append(),prepend和 after(),before()两种共四个. 根据字面意思我们可以看出他们分别是追加,添加和之前,之后,意思相近.同时他们又都有添加元素 ...

  9. jq查找父类元素三个函数的区别

    parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...

随机推荐

  1. SYZOJ 186 [额]你猜是不是DP(哈希+二分答案+二分搜索)

      题目描述 现在给两个仅包含小写字母的字符串a,b ,求a 与b的最长公共连续子串的长度. 输入格式 两个字符串 输出格式 一个整数,为输入的两个字符串的最长公共连续子串的长度 测试样例 输入 qa ...

  2. webpack命令

    webpack // 执行一次开发的编译 webpack -p // 针对发布环境编译(压缩代码) webpack -w(或--watch) // 进行开发过程持续的增量编译(飞快地!) webpac ...

  3. 三叉神经树 ( neuron )

    三叉神经树 ( neuron ) 题目描述 计算神经学作为新兴的交叉学科近些年来一直是学术界的热点.一种叫做SHOI 的神经组织因为其和近日发现的化合物SHTSC 的密切联系引起了人们的极大关注. S ...

  4. bzoj4380[POI2015]Myjnie dp

    [POI2015]Myjnie Time Limit: 40 Sec  Memory Limit: 256 MBSec  Special JudgeSubmit: 368  Solved: 185[S ...

  5. 四个简单易用的demo,关于iOS定时器和延时的,非常好用。

    1,延时执行(不可重复) 效果我直接截取控制台的日志了,就不做UI了. 2,用NSTimer执行定时和延时(可重复) [objc] view plain copy /** ** timer 可重复 * ...

  6. ClassLoader 提供了两个方法用于从装载的类路径中取得资源:

    转:http://cheneyph.iteye.com/blog/831721 ClassLoader 提供了两个方法用于从装载的类路径中取得资源: public URL  getResource ( ...

  7. Eclipse SVN冲突详细解决方案

         大家一起开发,难免有时会同时修改同一个文件,这样就要学会解决冲突.当大家更新代码,发现以下情况的时候,就说明你的修改的文件和服务器的文件产生了冲突(一般是别人也改了同一个文件). 1)和服务 ...

  8. spring rest 请求怎样添加Basic Auth请求頭

    请自行揣摩代码 package com.hudai.platform.manager.util; import java.net.URI; import java.net.URISyntaxExcep ...

  9. Repeater的使用及其鼠标特效,行链接的使用

    原文发布时间为:2009-04-22 -- 来源于本人的百度文章 [由搬家工具导入] <asp:Repeater ID="rpt" runat="server&qu ...

  10. 【剑指offer】数组中重复的数字

    题目描述 在一个长度为n的数组里的所有数字都在0到n-1的范围内. 数组中某些数字是重复的,但不知道有几个数字是重复的.也不知道每个数字重复几次.请找出数组中任意一个重复的数字. 例如,如果输入长度为 ...