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

1. 属性操作

设置属性（prop）

• 语法：$("div").prop(属性名,属性值);

// 给 div 元素添加一个 id 属性，值是 box$('div').prop('id', 'box')

获取属性（prop）

• 语法：$("div").prop(属性名);

// 获取 div 的 id 属性console.log($('div').prop('id'))

设置自定义属性（attr）

• 语法：$("div").attr(属性名,属性值);

// 给 div 添加一个 index 属性，值是 1$('div').attr('index', 1)

获取自定义属性（attr）

• 语法：$("div").attr(属性名);

// 获取 div 的 index 属性console.log($('div').attr('index'))

删除属性：（removeProp，removeAttr）

• 语法1：$("div").removeProp(属性名);
• 语法2：$("div").removeAttr(属性名);

// 移除元素自己本身的属性$('div').removeProp('id')// 移除元素的自定义属性$('div').removeAttr('index')

案例：全选反选

• js写法

	商品1
	商品2
	商品3
	商品4
	商品5
	商品6
	全选反选取消
	删除

• jquery写法：

$(".all").click(function(){   	$("input[type='checkbox']").prop("checked",true);});$(".reverse").click(function(){   	if($("input[type='checkbox']").prop("checked")){   		$("input[type='checkbox']").prop("checked",false);	}else{   		$("input[type='checkbox']").prop("checked",true);	}});$(".allNot").click(function(){   	$("input[type='checkbox']").prop("checked",false);});

• 当操作jquery对象的时候，不需要遍历操作每一个，直接操作的就是每一个元素。因为在jquery内部自带遍历操作。
  这就是隐形迭代。

2. 样式操作

设置单个样式

• 语法：$("div").css(css属性名,值);

// 给元素设置一个 css 样式$('div').css('width', '100px')

设置多个样式

• 语法：$("div").css({ css属性名:值, css属性名:值 })

// 给元素设置一组样式$('div').css({       width: '100px',    height: '200px'})

获取样式：

• 语法：$("div").css(css属性名);

// 获取元素的某一个样式$('div').css('width')

3. 类名操作

$("div").addClass(类名); // 添加类名$("div").removeClass(类名); // 删除类名$("div").toggleClass(类名); // 在添加和删除之间切换$("div").hasClass(类名); // 判断元素是否有这个类名，有是true，没有是false

• 案例：选项卡

   
	
    
		
     红色		
     蓝色		
     绿色	
    
	
    
		
     
1
		
     
2
		
     
3
	
    
   

• 补充知识点：

$(this) 是将this关键字转为jquery对象$(this).index() // index方法是获取元素的下标

• 链式编程在这里体现的淋漓尽致。

4. 内容操作

$("div").text(); // 获取元素内容 === 相当于 div.innerText$("div").text("盒子"); // 设置元素内容 === 相当于 div.innerText = "盒子"$("div").html(); // 获取元素代标签的内容 === 相当于 div.innerHTML$("div").html("文字"); // 设置元素带标签的内容 === 相当于 div.innerHTML = "文字"$("input").val(); // 获取表单元素的值 === 相当于 input.value$("input").val("请输入用户名"); // 设置表单元素的内容 === 相当于 input.value = "请输入用户名"

5. 节点操作

创建元素

• 语法：$("标签和内容") // 创建一个标签并给里面放内容

var box = $("
   
    div盒子");console.log(box);
   

添加元素

• 给父元素追加子元素
• 语法：父元素.append(子元素)

   
    
    span标签
   

• 给父元素最前面添加子元素
• 语法：父元素.prepend(子元素);

   
    
    span标签
   

• 将子元素添加到父元素中
• 语法：

// 将子元素追加到父元素中子元素.appendTo(父元素);// 将子元素添加到父元素最前面子元素.prependTo(父元素);

• 添加下一个兄弟元素
• 语法：元素.after(下一个兄弟元素);

   
    
    span标签
   

• 添加上一个兄弟元素
• 语法：元素.before(上一个兄弟元素);

   
    
    span标签
   

• 将元素添加到某个元素的前面或后面：

// 将元素添加到某个元素前面要添加的元素.insertBefore(元素);// 将元素添加到某个元素后面要添加的元素.insertAfter(元素);

替换元素

• 使用新元素替换某个元素：
• 语法：某个元素.replaceWith(新元素)

   
    
    span标签
   

• 用新元素替换掉某个元素：
• 语法：新元素.replaceAll(某个元素)

删除元素

• 删除元素内部所有标签和内容，让自己变成一个空标签
• 语法：元素.empty()

   
    
    span标签
   

• 将当前标签从页面中删除
• 语法：元素.remove() // 删除自己和自己内部所有内容

   
    
    span标签
   

复制元素

元素.clone([是否复制自身的事件],[是否复制子元素的事件])

• 使用说明：

• jqueyr中的复制元素是深复制，复制标签结构和内容

• 这个方法接收两个参数，参数1代表是否把元素的事件也克隆出来，默认为false；参数2代表是否把元素的子元素的事件克隆出来，默认跟随第一个参数的值。

• 如果不复制父元素的事件，子元素的事件也不能复制

• 节点操作案例：qq菜单

   
   
    
    
        
我的好友
        
     
            
      
张三
            
      
李四
            
      
王五
        
     
    
    
    
        
我的坏友
        
     
            
      
张小三
            
      
李小四
            
      
王小五
        
     
    
    
    
        
黑名单
        
     
            
      
张大三
            
      
李大四
            
      
王大五
        
     
    
   

6. 元素尺寸

1. 元素内容区域尺寸操作

• 语法：

元素.height(); // 获取元素内容区域高度元素.height(高度); // 设置元素内容区域高度元素.width(); // 获取元素内容区域宽度元素.width(宽度); // 设置元素内容区域宽度

• 使用：

// 获取 div 元素内容位置的高，不包含 padding 和 border$('div').height()// 设置 div 内容位置的高为 200px$('div').height(200)// 获取 div 元素内容位置的宽，不包含 padding 和 border$('div').width()// 设置 div 内容位置的宽为 200px$('div').width(200)

2. 获取元素内部区域尺寸

• 语法：

元素.innerHeight(); // 获取元素内部的高度，包含padding，但不包含border元素.innerWidth(); // 获取元素内部的宽度，包含padding，但不包含border

• 使用：

// 获取 div 元素内容位置的高，包含 padding 不包含 border$('div').innerHeight()// 获取 div 元素内容位置的宽，包含 padding 不包含 border$('div').innerWidth()

3. 获取元素占据页面的尺寸

• 语法：

元素.outHeight(); // 获取元素占据的高度，包含padding和border，不包含margin元素.outHeight(true); // 获取元素占据的高度，包含padding和border，包含margin元素.outWidth(); // 获取元素占据的宽度，包含padding和border，不包含margin元素.outWidth(true); // 获取元素占据的宽度，包含padding和border，包含margin

• 使用：

// 获取 div 元素内容位置的高，包含 padding 和 border$('div').outerHeight()// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin$('div').outerHeight(true)// 获取 div 元素内容位置的宽，包含 padding 和 border$('div').outerWidth()// 获取 div 元素内容位置的高，包含 padding 和 border 和 margin$('div').outerWidth(true)

7. 元素位置

元素相对页面的位置

• 语法：

元素.offset(); // 获取到元素在页面中的位置，包含left值和top值，返回一个对象元素.offset({   left:值,top:值}); // 将元素设定到指定的位置，使用relative

• 使用：

// 获取 div 相对页面的位置$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }// 给 div 设置相对页面的位置$('div').offset({    left: 100, top: 100 })// 获取定位到一个距离页面左上角 100 100 的位置

• 语法：

元素相对父元素的的偏移量

• 语法：

元素.position(); // 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top

• 使用：

// 获取 div 相对于父元素的偏移量（定位的值）$('div').position()

获取元素滚动过的距离

$(window).scrollTop(); // 获取元素滚动过的高度$(window).scrollLeft(); // 获取元素滚动过的宽度$(window).scrollTop(值); // 设置元素滚动过的高度$(window).scrollLeft(值); // 设置元素滚动过的宽度

• 使用：

window.onscroll = function () {       // 获取浏览器卷去的高度    console.log($(window).scrollTop())}window.onscroll = function () {       // 获取浏览器卷去的宽度    console.log($(window).scrollLeft())}