jQuery DOM操作
jQuery DOM操作
创建元素
只需要把DOM字符串传入$方法即可返回一个jQuery对象
var obj = $('<div class="test"><p><span>Done</span></p></div>');
添加元素
1..append()
append(content[,content]) / .append(function(index,html))
可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
$( ".p" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );
2..prepend()
.prepend(content[,content]) / .prepend(function(index,html))
向对象头部追加内容，用法和append类似，内容添加到最开始
$( "div" ).prepend( "<p>Test</p>" );
3..before()
.before([content][,content]) / .before(function)
在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );
4.after()
.after([content][,content]) / .after(function（index）)
和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似
$( "divr" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );
删除元素
1.remove()
.remove([selector])
删除被选元素（及其子元素）
$('div').remove('.test');
2..empty()
.empty()
清空被选择元素内所有子元素
$('body').empty();
修改元素
1..html()
html([string])
这是一个读写两用的方法，用于获取/修改元素的innerHTML
当没有传递参数的时候，返回元素的innerHTML
当传递了一个string参数的时候，修改元素的innerHTML为参数值
$('div').html(,<p>123</p>)
$('div').html('123')
2.text()
和html方法类似，操作的是DOM的innerText值
$('div').text('123')
$node.text()和$node.html()有什么区别？
html()读取到的是元素中所有的内容，包括html标签也当成文本一样读取 ,而.text()是只读取其中的文本内容，不包括html标签;
简单点说，html（）里面可以是元素，也可以是文本，text（）只是文本
jQuery 操作属性&CSS
1..val()
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
$('input').val()
$('input').val('Value');
2.attr()
.attr(attributeName)
获取元素特定属性的值
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
3.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
$('div').removeAttr('id');
4..prop()/.removeProp()
这两个方法是用来操作元素的property的
$( div ).prop( "checked" )
5..css()
.css()
这是个和attr非常相似的方法，用来处理元素的css
.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
$( div ).css( "background-color", "yellow" );
6..addClass(className) / .removeClass(className)
.addClass(className) / .addClass(function(index,currentClass))
为元素添加class，不是覆盖原class，是追加，也不会检查重复
$( "p" ).addClass( "myClass yourClass" );
7.removeClass([className]) / ,removeClass(function(index,class))
移除元素单个/多个/所有class
$( "p" ).removeClass( "myClass yourClass" );
8..hasClass(className)
检查元素是否包含某个class，返回true/false
$( "#mydiv" ).hasClass( "foo" )
9.toggleClass(className)
toggle是切换的意思，方法用于切换，有就切换成移除，没有就切换成添加
$( "div" ).toggleClass( "bounce" )
jQuery 对象和原生 Dom 对象有什么区别？如何相互转换？
Dom原生对象和jQuery对象的联系、区别、相互转换：
- 联系：
1、jQuery对象：通过jQuery包装DOM对象后产生的对象；
2、两者之间可以相互转换； - 区别：
1、jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型，两者不等价；
2、jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。
例如：
$("#id").html();
document.getElementById("id").innerHTML;
意思是指：获取ID为id的元素内的html代码。这两段代码结果相同，但中间的取值过程不同。
即：$("#id").innerHTML、document.getElementById("id").html()之类的写法都是错误的。
- 相互转换：
jQuery对象转成DOM对象---两种转换方式：[index]和.get(index)
1、jQuery对象是一个数据对象，通过[index]的方法
如：var $v = $("#v") ; //jQuery对象
var v = $v[0]; //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
2、jQuery本身提供，通过.get(index)方法
如：var $v = $("#v"); //jQuery对象
var v = $v.get(0); //DOM对象
alert(v.checked) //检测这个checkbox是否被选中
DOM对象转成jQuery对象:
对于DOM对象，只需用$()把DOM对象包装起来，就可得到jQuery对象
如：var v=document.getElementById("v"); //DOM对象
var $v=$(v); //jQuery对象
- 需要注意：jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法. 乱用会影响代码执行。
jQuery 方法
1..each()
.each( function(index, Element) )
遍历一个jQuery对象，为每个匹配元素执行一个函数
$( "p" ).each(function( index ) {
console.log( index + ":" + $(this).text() );
});
2.$.extend()
jQuery.extend([deep,] target [, object1 ] [, objectN ] )
当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的
var object1 = {
apple: 0,
banana: { weight: 52, price: 100 },
cherry: 97
};
var object2 = {
banana: { price: 200 },
durian: 100
};
$.extend( object1, object2 )
console.log(object1)
3.clone()
..clone( [withDataAndEvents ] )
.clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点
$('.hello').clone().appendTo('.goodbye');
.4..clone()
index() / .index(selector)/ .index(element)
从给定集合中查找特定元素index
Search for a given element from among the matched elements.
没参数返回第一个元素index
如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
如果参数是选择器，返回第一个匹配元素index，没有找到返回-1
console.log( $( "p" ).index() )
5.ready()
当DOM准备就绪时，指定一个函数来执行。
虽然JavaScript提供了load事件，当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。
在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。
如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
下面两种语法全部是等价的：
$(document).ready(handler)
$(handler)
$(function(){
console.log("hello'');
});
window.onload和$(document).ready有什么区别？document.onDOMContentLoaded呢?
window.onload和$(document).ready都是页面加载时我们就去执行一个函数或者动作，具体细节上还是有区别的
最基本区别
- 1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后再去执行。
$(document).ready()时DOM结构回执完毕后就执行，不必等到加载完毕。 - 2.编写个数不同
window.onload不同同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且可以得到执行 - 3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});
$(document).ready()方法和window.onload方法有相似的功能，但是在执行时机方面是有区别的。window.onload方法是在网页中所有的元素（包括元素的关联文件）完全加载到浏览器后才执行，即JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，可以在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这并不意味着这些元素关联的文件都已经下载完毕。
document.onDOMContentLoaded
在页面中触发[DOMContentLoaded]事件时触发。此时，文档被加载和解析，并且DOM被完全构造，但链接的资源（例如图像，样式表和子帧）可能尚未被加载。
范例：
点击 icon 后会切换播放和暂停两种状态
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_448304_47new50n1nabgldi.css">
<style>
.iconfont {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<span class="play-pause">
<i class="iconfont icon-pause "></i></span>
<script>
$('.play-pause').on('click', function(){
var $iconfont =$(this).find('.iconfont')
$iconfont.toggleClass('icon-pause').toggleClass('icon-play')
})
</script>
</body>
</html>
比起原生js的实现简化了很多
作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
