本文共 4809 字，大约阅读时间需要 16 分钟。

一、操作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('
append方法插入
');	//append()，在元素里面的末尾插入DOM。这个与appendChild的方法是一样的。$('.insideAdd').append($('.insideAdd p'));//剪切插入$('
appendTo方法插入
').appendTo('.insideAdd');	//将匹配的元素插入到目标元素的最后面。这个与append一样，只不过内容和目标的位置相反。append方法里直接写一个标签的字符串，就相当于创建一个DOM对象$('.insideAdd').prepend('
prepend方法插入
');	//prepend()，与append的语法一样，只不过是插入到父级元素的前面$('
prependTo方法插入
').prependTo('.insideAdd');	//prependTo()，与appendTo是一样的，不同的也是插入的位置是在前面

三、插入元素（外部插入，插入为兄弟节点）

$('.outsideAdd h2').after('
after方法添加到h2后面
');	//after()（语法类似于append）$('
insertAfter方法添加到h2后面
').insertAfter('.outsideAdd h2');	//insertAfter()（语法类似于appendTo）$('.outsideAdd h2').before('
before方法添加到h2前面
');	//before()（语法类似于prepend）$('
insertBefore方法添加到h2前面
').insertBefore('.outsideAdd h2');	//insertBefore()（语法类似于prependTo）

四、插入元素，html与text方法。相当于原生的innerHTML、innerText属性

console.log($('.htmlText').html());//获取$('.htmlText').html('
这是html方法添加的标题
这是html方法添加的内容
');//设置console.log($('.htmlText').text());//获取$('.htmlText').text('
这是text方法添加的标题
这是text方法添加的内容
');//设置

五、包裹元素

$('.wrap span').wrap('
');	//wrap()，在每个匹配的元素外层包上一个html元素$('.wrap li').wrapAll('
    
     ');	//wrapAll()，在所有匹配元素外面包一层HTML元素$('.wrap span').wrapInner('
     ');	//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时表示，会把事件也克隆了$('
使用replaceAll方法主动替换
').replaceAll('.clone .replaceAll');//创建一个元素然后用它替换掉其它元素$('.clone .name2').replaceAll('.clone .name1');//使用已有的元素替换掉其它元素（剪切操作）$('.clone .replaceWidth').replaceWith('
使用replaceWidth方法被动替换
');//后面替换掉前面的元素

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

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'});//相对于documentconsole.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);

转载地址：http://watzi.baihongyu.com/