jq之DOM對象操作

一、操作class

$('.setClass li:first').addClass('red');//添加class
$('.setClass li:eq(1)').removeClass('green');//移除class(不給參數，移除所有class)

console.log(//是否包含某個class
$('.setClass li:last').hasClass('green'),//true
$('.setClass li:last').hasClass('orange'),//false
);

//toggleClass 切換class。在添加、刪除間切換
$('.setClass p').click(function(){
	$(this).toggleClass();
});

二、插入元素（內部插入）

$('.insideAdd').append('<h2>append方法插入</h2>');	//append()，在元素裏面的末尾插入DOM。這個與appendChild的方法是一樣的。

$('.insideAdd').append($('.insideAdd p'));//剪切插入

$('<h2>appendTo方法插入</h2>').appendTo('.insideAdd');	//將匹配的元素插入到目標元素的最後面。這個與append一樣，只不過內容和目標的位置相反。append方法裏直接寫一個標籤的字符串，就相當於創建一個DOM對象

$('.insideAdd').prepend('<h2>prepend方法插入</h2>');	//prepend()，與append的語法一樣，只不過是插入到父級元素的前面

$('<h2>prependTo方法插入</h2>').prependTo('.insideAdd');	//prependTo()，與appendTo是一樣的，不同的也是插入的位置是在前面

三、插入元素（外部插入，插入爲兄弟節點）

$('.outsideAdd h2').after('<p>after方法添加到h2後面</p>');	//after()（語法類似於append）

$('<p>insertAfter方法添加到h2後面</p>').insertAfter('.outsideAdd h2');	//insertAfter()（語法類似於appendTo）

$('.outsideAdd h2').before('<p>before方法添加到h2前面</p>');	//before()（語法類似於prepend）

$('<p>insertBefore方法添加到h2前面</p>').insertBefore('.outsideAdd h2');	//insertBefore()（語法類似於prependTo） 

四、插入元素，html與text方法。相當於原生的innerHTML、innerText屬性

console.log($('.htmlText').html());//獲取

$('.htmlText').html('<h2>這是html方法添加的標題</h2><p>這是html方法添加的內容</p>');//設置

console.log($('.htmlText').text());//獲取

$('.htmlText').text('<h2>這是text方法添加的標題</h2><p>這是<em>text</em>方法添加的內容</p>');//設置

五、包裹元素

$('.wrap span').wrap('<li>');	//wrap()，在每個匹配的元素外層包上一個html元素

$('.wrap li').wrapAll('<ul>');	//wrapAll()，在所有匹配元素外面包一層HTML元素

$('.wrap span').wrapInner('<strong>');	//wrapInner()，在匹配元素裏的內容外包一層結構

$('.wrap li').unwrap();	//.unwrap()，將匹配到的元素的父級刪除

六、刪除元素

//$('.del .title').remove();	//remove()，移除自己
$('div').remove('.title');	//也可以添加參數。從div中移除一個.title的div

$('.del ul').empty();	//empty()，清空子元素

$('.del .end').click(function(){
	alert(1);
});

//detach()，與remove()一樣，這兩個方法都有一個返回值，返回被刪除的DOM。它們的區別就在這個返回值身上
var end=$('.del .end').detach();	//再次添加後是有事件的

//var end=$('.del .end').remove();	//再次添加後沒有事件

setTimeout(function(){
	$('.del').append(end);	//1s後，被刪除的那個元素會被重新添加上
},1000);

七、克隆與替換元素

$('.clone p').click(function(){
	alert(2);
});
//$('.clone p').clone().appendTo('.clone');
$('.clone p').clone(true).appendTo('.clone');	//clone的參數爲true時表示，會把事件也克隆了

$('<h3>使用replaceAll方法主動替換</h3>').replaceAll('.clone .replaceAll');//創建一個元素然後用它替換掉其它元素

$('.clone .name2').replaceAll('.clone .name1');//使用已有的元素替換掉其它元素（剪切操作）

$('.clone .replaceWidth').replaceWith('<h3>使用replaceWidth方法被動替換</h3>');//後面替換掉前面的元素

八、屬性操作-通用屬性操作

console.log($('.attr img').attr('src'));	//images/img_01.jpg（如果有多個img的話，它返回的是第一個img的src值）

$('.attr img').attr('title','這是一張美食圖片');	//如果有多個img的話，設置的是所有的img

$('.attr img').attr({	//同時設置多個屬性
	class:'delicious',
	alt:'美食'
});

console.log($('.attr img').prop('src'));

console.log(
	$('.attr img').attr('kaivon'),	//liu
	$('.attr img').prop('kaivon'),	//undefined
);

$('.attr img').prop({
	id:'food',
	kaivon:'liuliu',	//自定義的屬性prop並沒有添加到DOM標籤身上，但是它會添加到DOM對象身上	
		});
		
$('.attr img').attr('kaivon','liuliuliu');//可以設置到標籤身上

$('.attr img').removeAttr('kaivon');

$('.attr img').removeProp('id');	//刪除的是DOM對象身上的屬性，並不是DOM標籤身上的屬性

$('.attr img').prop('index',5);

console.log($('.attr img').prop('index'));	//5 這條屬性是添加在DOM對象身上

$('.attr img').removeProp('index');

console.log($('.attr img').prop('index'));	//undefined removeProp是刪除DOM對象身上的屬性

console.log($('.attr input').val());	//這是一個正經的輸入框//修改value的值

$('.attr input').val('這不是一個輸入框');

九、屬性操作-css類屬性操作

console.log(
$('.css').css('border'),	//2px solid rgb(0, 0, 0)
$('.css').css('height'),	//19.9125px
);

$('.cssh2').css('width','200px').css('height','100px').css('background','#cc').text('插入一個標題');
$('.css h2').css({
	color:'green',
	fontSize:'30px',
	'line-height':'100px',
});
$('.css p').css({
	width:'200px',
	height:'200px',
	padding:'20px',
	margin:'20px auto',
	border:'2px solid #f00',
});
console.log(
	$('.css p').width(),	//200
	$('.css p').height(),	//200
	$('.css p').innerWidth(),	//240	獲取包含padding的寬度（clientWidth）
	$('.css p').innerHeight(),	//240
	$('.css p').outerWidth(),	//244	獲取包含padding,border的寬度（offsetWidth）
	$('.css p').outerHeight(),	//244
);
$('.css p').width(300).height(100).innerWidth(400).outerWidth(500);	//給width與給innerWidth設置的都是width屬性的值。但是innerWidth與outerWidth都會動態的算出一個寬度值，賦給width屬性

$('.css').css('position','relative');	//先把父級設置成相對定位
$('.css div').css({
	width:'100px',
	height:'100px',
	background:'green',
	position:'absolute',
	left:'100px',
	top:'200px'
});
//相對於document
console.log(
	$('.css div').offset().left,	//110//距離頁面最左邊的距離
	$('.css div').offset().top,		//1648.3499755859375//距離頁面最頂部的距離
//此方法沒有.right與.bottom
);
$('.css div').offset({
	left:200,
	top:1800,
});

//獲取相對於有定位的父級的位置信息
console.log(
	$('.css div').position().left,
	$('.css div').position().top,
);

console.log(
	$(document).scrollTop(),//滾動條距離上方的位置
	$(document).scrollLeft(),//滾動條距離左方的位置
);
setTimeout(function(){
	$(document).scrollTop(300);
},2000);