jQuery的DOM操作

一、创建节点

以HTML创建新元素

var txt1="<p>Text.</p>";

以jQuery创建新元素

var txt2=$('<p></p>').text('text.');

以DOM创建新元素

var txt3=document.createElement("p");       
txt3.innerHTML="Text.";

二、插入节点

通过js的DOM操作只能插入插入jsDOM创建出来的标签，不能插入字符串类型和jq创建出来的标签。
操作函数有：append(),appendTo(),prepend(),after(),before():

//A.append(B):把B标签拼接在A标签内部结尾的位置。
                //参数可以传递任意多个标签参数，会按照参数的传递顺序把标签拼接进文档流中。
                //jq中的标签拼接方法，可以把字符串类型、jq对象类型、DOM节点类型的标签拼接进文档流中。
//              $(document.body).append(pTag1);
            
                //A.appendTo(B):把A标签添加到B标签中（把A拼接进B的内部结尾位置）;
                //A必须是jq对象类型，B可以是DOM节点，JQ对象，标签字符串类型，但是避免
                //标签字符串参数，因为向字符串中拼接标签，标签会拼接失败。
                
                //A.prepend(B):在A标签内部的开始位置拼接B标签
                $(document.body).prepend(pTag1);
//              $(document.body).prepend(pTag2);
//              $(document.body).prepend(pTag3);
                
                //A.after(B):在A标签之后拼接B标签（AB是兄弟标签）
                $('p').after(pTag2);
                //A.before(B):在A标签之前拼接B标签（AB是兄弟标签）
                $('p').before(pTag3);
                
                $('p').each(function(index,elem){
                    console.log(index);
                    console.log(elem);
                });

三、包裹节点操作

//A.wrap(B):让B标签当做A标签的父级；如果A标签有多个，则每一个A标签都会有一个独立的父级B
//              $('li').wrap('<ul></ul>');
                
                //A.wrapAll(B):让B标签当做A标签的父级；如果A标签有多个，则每一个A标签都会有一个公用的
                //父级B；如果A的DOM结构中混入了其他标签，会先把其他标签移在所有的A标签之后，然后再用B包裹。
                $('li').wrapAll('<ul></ul>');
                
                //A.wrapInner(B):在A标签内部，添加B标签，让B标签当做A标签原来子标签的父级；A是爷爷级、
                //B是父级、原来A的子级变成孙子级。

四、其他类型节点操作

删除节点(remove()和detach())：

//remove():删除调用该方法的标签，并且会把该标签保存下来，以备后期拼接使用
                var tag=$('p').remove();
                console.log(tag);               
                $('button').click(function(){
                    alert('hehhehehe');
                });
                //var btn=$('button').remove();
                //删除有事件函数的标签
                var btn=$('button').detach();
                //把删除的增加回来
                $(document.body).append(btn);               
                //remove()和detach()删除标签的区别：
                //remove()如果删除具备事件函数的标签，则标签额事件函数会一同解除绑定，
把标签添加回来时，就没有对应的事件函数了
                //detach()如果删除具备事件函数的标签，则只是在DOM结构中把标签移除，
该标签绑定的事件函数不会移除，把标签添加回来
                //事件函数照样触发。

复制节点（clone（））：

//复制DOM树中的标签，然后在添加在DOM树中
//A.clone():拷贝DOM树中的A节点，如果A节点有事件函数，而且需要一起拷贝，则需要传参:true
                var btns=$('button').clone();

清空节点（empty（））：

//清空节点操作
                $('div').empty();

替换节点（replaceWith(）和repalceAll（）)：

//替换节点
                $('a').replaceWith('<a>三生三世</a>');
                //A.repalceWith(B):用B标签替换A标签（页面上显示的是B标签）
                //A.repalceAll(B):用A标签替换B标签（页面上显示的是A标签）

五、属性操作

用attr()获取和设置元素属性 ，removeAttr()来删除元素属性。
1、获取属性和设置属性

var $para=$("p");
var para_txt=$para.attr("title");//获取属性title的值
$("p").attr("title","your title");//设置属性title的值为your title
$("p").attr({"title":"your title","name":"your name"})；//为一个元素设置多个属性

注意： jQuery中很多方法都是同一个函数实现获取和设置的，例如 attr() 技能获取属性的值，也能设置属性的值。类似的还有html()、text()、height()、width()、val()、css()等方法。
2、删除属性

$("p").removeAttr("title");

removeProp()函数用于移除在当前jQuery对象所匹配的每一个元素上指定的属性。
window对象或DOM元素的一些内置属性是不允许删除的，如果试图删除这些属性，将会导致浏览器产生一个错误。jQuery首先会将该属性的值赋为undefined，并忽略掉浏览器生成的任何错误信息。

一般情况下，你最好使用该函数来删除一些自定义的属性，而不是内置属性。

请不要使用本函数来删除DOM元素的本地属性checked、selected和disabled。这将彻底删除对应的属性，并且，一旦删除之后，你无法再向该DOM元素重新添加对应的属性。请使用prop()函数将其设为false即可，例如：jQueryObject.prop(“checked”, false)。

jQuery中attr和pop的区别：

在jQuery中，attr()函数和prop()函数都用于设置或获取指定的属性，它们的参数和用法也几乎完全相同。

但不得不说的是，这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别。
[解析来自网络，点击查看](http://www.365mini.com/page/jquery-attr-vs-prop.htm)

1、操作对象不同

很明显，attr和prop分别是单词attribute和property的缩写，并且它们均表示"属性"的意思。

不过，在jQuery中，attribute和property却是两个不同的概念。attribute表示HTML文档节点的属性，property表示JS对象的属性。

<!-- 这里的id、class、data_id均是该元素文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// 这里的name、age、url均是obj的property
var obj = { name: "CodePlayer", age: 18, url: "http://www.365mini.com/" };
</script>
在jQuery中，prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)；attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。

<!-- attr()函数针对的是该文档节点的attribute -->
<div id="message" class="test" data_id="123"></div>

<script type="text/javascript">
// prop()函数针对的是该DOM元素(msg)自身的property
var msg = document.getElementById("message");
var $msg = $(msg);
</script>
当然，在jQuery的底层实现中，函数attr()和prop()的功能都是通过JS原生的Element对象(如上述代码中的msg)实现的。attr()函数主要依赖的是Element对象的getAttribute()和setAttribute()两个方法。prop()函数主要依赖的则是JS中原生的对象属性获取和设置方式。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

/* *** attr()依赖的是Element对象的element.getAttribute( attribute ) 和 element.setAttribute( attribute, value ) *** */

// 相当于 msg.setAttribute("data_id", 145);
$msg.attr("data_id", 145);

// 相当于 msg.getAttribute("data_id");
var dataId = $msg.attr("data_id"); // 145



/* *** prop()依赖的是JS原生的 element[property] 和 element[property] = value; *** */

// 相当于 msg["pid"] = "pid值";
$msg.prop("pid", "pid值");

// 相当于 msg["pid"];
var testProp = $msg.prop("pid"); // pid值
</script>
当然，jQuery对这些操作方式进行了封装，使我们操作起来更加方便(比如以对象形式同时设置多个属性)，并且实现了跨浏览器兼容。

此外，虽然prop()针对的是DOM元素的property，而不是元素节点的attribute。不过DOM元素某些属性的更改也会影响到元素节点上对应的属性。例如，property的id对应attribute的id，property的className对应attribute的class。

<div id="message" class="test" data_id="123"></div>
<script type="text/javascript">
var msg = document.getElementById("message");
var $msg = $(msg);

document.writeln( $msg.attr("class") ); // test
$msg.prop("className", "newTest");
// 修改className(property)导致class(attitude)也随之更改
document.writeln( $msg.attr("class") ); // newTest
</script>
2、应用版本不同

attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。

3、用于设置的属性值类型不同

由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。

prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

4、其他细节问题

在jQuery 1.6之前，只有attr()函数可用，该函数不仅承担了attribute的设置和获取工作，还同时承担了property的设置和获取工作。例如：在jQuery 1.6之前，attr()也可以设置或获取tagName、className、nodeName、nodeType等DOM元素的property。

直到jQuery 1.6新增prop()函数，并用来承担property的设置或获取工作之后，attr()才只用来负责attribute的设置和获取工作。

此外，对于表单元素的checked、selected、disabled等属性，在jQuery 1.6之前，attr()获取这些属性的返回值为Boolean类型：如果被选中(或禁用)就返回true，否则返回false。

但是从1.6开始，使用attr()获取这些属性的返回值为String类型，如果被选中(或禁用)就返回checked、selected或disabled，否则(即元素节点没有该属性)返回undefined。并且，在某些版本中，这些属性值表示文档加载时的初始状态值，即使之后更改了这些元素的选中(或禁用)状态，对应的属性值也不会发生改变。

因为jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。

因此，在jQuery 1.6及以后版本中，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。

<input id="uid" type="checkbox" checked="checked" value="1">

<script type="text/javascript">
// 当前jQuery版本为1.11.1
var uid = document.getElementById("uid");
var $uid = $(uid);

document.writeln( $uid.attr("checked") ); // checked
document.writeln( $uid.prop("checked") ); // true

// 取消复选框uid的选中(将其设为false即可)
// 相当于 uid.checked = false;
$uid.prop("checked", false);

// attr()获取的是初始状态的值，即使取消了选中，也不会改变
document.writeln( $uid.attr("checked") ); // checked
// prop()获取的值已经发生变化
document.writeln( $uid.prop("checked") ); // false
</script>

六、样式操作

1、追加样式
addClass()
首先在<style>标签里添加另一组样式：

<style>
.high{
    font-weight:bold;
    color:red;
    }
.another{
        font-style:italic;/*斜体*/
        color:blue;
        }
</style>

原本代码：<p class="high" title="">abc</p>
执行：$("p").addClass("another");
此时 p的class为“high　 another”
如果给一个元素添加了多个class值，那么就相当于合并了他们的样式；如果有不同的class设定了同一个样式属性，则后者覆盖前者。

2、移除样式

$("p").removeClass("high");

或者两个都删除：

`$("p").removeClass("high").removeClass("another");`
$("p").removeClass("high 　another")；

移除所有class：$("p").removeClass();

3、切换样式
toggleClass()控制样式的重复切换，如果类名存在就删除，类名不在就添加
若本来<p class="myclass"></p>,
jQuery语句为：$("p").toggleClass("another");
点击切换样式按钮，则变成<p class="myclass another"></p>,
再点击一次切换按钮 ，则又变成<p class="myclass"></p>
不断点击他就会在这两种情况中来回切换。

4.判断是否含有某个样式
hasClass()判断是否含有某个class 有返回true 没有返回false
$("p").hasClass("another")；

七、设置和获取HTML、文本和值

1.html() 用来读取或设置 某个元素中的HTML内容，可用于XHTML文档，不能用于XML文档
示例：<p><strong>q</strong></p>
jQuery:$("p").html()
获得的结果是:<strong>q</strong>
设置p元素的html代码：$("p").html("<strong>p</strong>")

2.text() 用来读取或设置某个元素的文本内容

获取内容：$("p").text()
设置内容：$("p").text("你最喜欢的水果是？")

3.val()方法 用来获取或设置元素的值

$("p").val();
$("p").val("aaa");
另外，如果this是当前的文本框，则this.defaltValue是当前选中文本框的默认值
$("p").value(this.defaultValue);

另外，val()能使select（下拉列表框）、checkbox（多选框）和radio(单选框)相应的选项被选中，这在表单操作中经常会用到。

HTML代码：
 <select id="multiple" multiple="multiple" style="height:120px">
  <option selected="selected">选择1号</option>
  <option >选择2号</option>
  <option >选择3号</option>
  <option >选择4号</option>
  <option selected="selected">选择5号</option>
  </select>

八、遍历节点

1.children() 取得匹配元素的子元素集合，此方法只考虑子元素，不考虑其他后代元素。
示例HTML代码：

<body>
  <p></p>
  <ul>
    <li></li>
    <li></li>
  </ul>
</body>

jQuery求子元素个数：

var $body=$("body").children;
alert($body.length);//得到2

2.next() 取得匹配元素后紧邻的同辈元素
根据上个html例子

$("p").next()得到的结果是：
<ul>
  <li></li>
  <li></li>
</ul>

3.prev() 得到匹配元素前面紧邻的同辈元素

$("ul").prev()//得到结果为<p></p>

4.siblings() 取得匹配元素前后所有同辈元素

$("p").siblings()
//得到结果为：
<ul>
 <li></li>
 <li></li>
</ul>

6.closest() 取得最近的匹配元素

首先检查当前元素是否匹配，如果匹配则直接返回元素本身 ，如果不匹配则向上查找父元素，逐级向上查找匹配选择器的元素，如果什么都没有则返回一个空的jQuery对象（只返回匹配的第一个元素节点，从自身的节点找起）

给点击目标最近的li元素添加红色：

$(document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
})

7.parent（） 获得每个匹配元素的父级元素，从指定类型的直接父节点开始查找，返回一个元素节点

8.parents() 获得每个匹配元素的祖先元素 返回多个父节点

九、css操作

读取和设置style对象的各种属性
css()获取元素的样式属性：$("p").css("color");
css()设置元素的单个样式：$("p").css("color","red")
css(0设置元素多个样式:
$("p").css({"fontsize":"30px","backgroundColor":"red"})
透明度设置为半透明$("p").css("opacity","0.5")
获取元素高度：$("p").css("height")或者$("p").height()
设置元素高度：$("p").height(100)//如果是数字会自动转化为px
注意：css()获取的高度值与样式的设置有关，可能得到“auto”，也可能得到“10px”之类，但是height获取的高度值是元素在页面中的实际高度，而且不带单位，与样式的设置无关。
类似的还有width()

十、元素定位

1.offset() 　获取元素在当前视窗的相对偏移，其中返回的对象包含top和left两个属性，向右为正，向下为正，只对可见元素有效,返回值 为object类型。

var offset=$("p").offset();
var left=offset.left;
var top=offset.top;

2.position() 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回对象有两个属性 top与left。

var position =$("p").position();
var left=position.left;
var top=position.top;

3.scrollTop()和scrollLeft()
获取滚动条距离左端的距离和顶端的距离

var scrollTop=$("p").scrollTop();
var scrollLeft=$("p").scrollLeft();

也可以指定参数

$("textarea").scrollTop(300);
$("textarea").scrollLeft(300);
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,271评论 5赞 476
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,275评论 2赞 380
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,151评论 0赞 336
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,550评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,553评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,559评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,924评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,580评论 0赞 257
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,826评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2赞 320
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,363评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,940评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2赞 342

推荐阅读更多精彩内容

  • 《锋利的jQuery》三、jQuery的DOM操作
    title: 《锋利的jQuery》三、jQuery的DOM操作date: 2017-07-03 09:23:54...
    Gary23阅读 375评论 0赞 1
  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,350评论 0赞 44
  • jQuery基础——样式篇
    第一章 jQuery简介 1-1 jQuery简介 1.简介 2.优势 3.特性与工具方法 1-2 环境搭建 进入...
    mo默22阅读 1,573评论 0赞 11
  • jQuery基础入门
    jQuery基础（一）——样式篇 1-2环境搭建 1-3 jQuery HelloWorld体验 $(docume...
    croyance0601阅读 1,075评论 0赞 8
  • 我们耿耿不于怀
    1. 阿泽是我的一个学弟，很喜欢跳舞的一个男生。长得很瘦是我对他的第一印象，而且说实话他挺有喜感的，是那种说话声音...
    蒋十二呀阅读 499评论 4赞 2