jQuery成功之路——jQuery的DOM操作简单易懂

jQuery的DOM操作

1.jQuery操作内容

jQuery操作内容 1. text() 获取或修改文本内容 类似于 dom.innerText 2. html() 获取或修改html内容 类似 dom.innerHTML

注意: 1. text() 是获取设置所有 2. html() 是获取第一个,设置所有

  
  
  
  


span1
span2
span3
div1

div2

div3

​

​

 

2.jQuery操作属性(掌握)

jQuery操作属性

1. val() 获取或修改表单控件的value值 等于dom.value

2. prop() 获取或修改原生属性值(checked，selected)

3. attr() 获取或修改自定义属性值 等于 dom.setAttribute() dom.getAttribute()

    
        
     
    
     
    
         
        
         

             
北京
             
天津
         
         
         
        
    
    
    

3.jQuery操作样式(掌握)

jQuery操作样式 1. css() 获取或者修改CSS样式 用法 css(样式名) 获取一个样式 等于 dom.style.驼峰样式名 css(样式名,样式值) 设置一个样式 dom.style.驼峰样式名=样式值 css({样式名:样式值,样式名:样式值}) 批量设置样式 dom.style.cssText = 样式名:样式值;样式名:样式值;

1. addClass() 添加一个样式

2. removeClass() 移除一个样式

3. toggleClass() 切换一个样式

  
  
  
  


​

1. 设置一个css样式
2. 批量设置css样式
3. 通过class设置样式
4. 切换class样式

4.jQuery创建和插入对象

• 语法

API方法	解释
append(element)	添加成最后一个子元素，两者之间是父子关系
prepend(element)	添加成第一个子元素，两者之间是父子关系
$("	创建A元素对象,同时可以给对象添加属性和标签体
before(element)	添加到当前元素的前面，两者之间是兄弟关系
after(element)	添加到当前元素的后面，两者之间是兄弟关系

• 代码演示

    
      
      
      
    
    
         

             
北京
             
天津
             
重庆
         
         

             
反恐
             
星际
         
         
Hello1
 
    
    

5.jQuery删除对象

• 语法

API方法	解释
remove()	删除指定元素
empty()	清空指定元素的所有子元素

• 代码演示

  
    
    
    
  
  
    

      
北京
      
天津
      
重庆
    
    
Hello
 how are 
you?
  

  

jQuery综合案例

1 、案例-表格隔行换色

• 效果

• 代码演示

  
    
    
    

    
  
  
    

      

        

      
      

        

        
分类ID
        
分类名称
        
分类描述
        
操作
      
      

        

        
1
        
手机数码
        
手机数码类商品
        
修改|删除
      
      

        

        
2
        
电脑办公
        
电脑办公类商品
        
修改|删除
      
      

        

        
3
        
鞋靴箱包
        
鞋靴箱包类商品
        
修改|删除
      
      

        

        
4
        
家居饰品
        
家居饰品类商品
        
修改|删除
      
    
  

2、案例-复选框全选全不选

• 效果

• 代码演示

  
    
    
    

    
  
  
    

      

        

      
      

        

        
分类ID
        
分类名称
        
分类描述
        
操作
      
      

        

        
1
        
手机数码
        
手机数码类商品
        
修改|删除
      
      

        

        
2
        
电脑办公
        
电脑办公类商品
        
修改|删除
      
      

        

        
3
        
鞋靴箱包
        
鞋靴箱包类商品
        
修改|删除
      
      

        

        
4
        
家居饰品
        
家居饰品类商品
        
修改|删除