小强的HTML5移动开发之路（36）——jQuery中的DOM操作

1、查询

利用选择器查找节点

使用 html() / text() / attr() 输出节点文本和属性值。

注意：下拉列表使用 val()

  
      
          
          
          
      
      
        
hello
  
        
  
            
item1
  
            
item2
  
            
item3
  
        
  
          
      

2、创建

立即学习“前端免费学习笔记（深入）”；

$(html)

3、插入节点

append();

prepend();

after();

before();

  
      
          
          
          
      
      
        
hello
  
        
  
            
item1
  
            
item2
  
            
item3
  
        
  
          
      

4、删除节点

remove();

remove(selector);

empty();清空内容

$('#b1').click(function(){  
    //$('ul li:eq(1)').remove();  
    $('ul li').remove('li[id=i1]');  
            $('ul li:eq(1)').empty();  
});

5、复制节点

clone();

clone(true); 使复制的节点也具有行为

6、属性操作

读取：attr(' ');

设置：attr(' ', ' ');

Winston AI

强大的AI内容检测解决方案

下载

或者一次设置多个属性attr({" ", " "});

删除：removeAttr(' ');

$('#b1').click(function(){  
    $('#d1').attr({"class":"s1","style":"font-size:40pt"});  
});

7、样式操作

获取和设置：attr("class", " ");

追加：addClass(' ', ' ');

切换样式：toggleClass(' ', ' ');

是否有某个样式hasClass(' ');

css('  ', '  ');

css({ '  ': '  ',  '   ': '  '});

$('#b1').click(function(){  
    $('div:first').addClass('s1 s2');  
    $('div:first').removeClass('s2');  
    $('div:first').toggleClass('s1');  
});

8、设置和获取html,文本和值

html() / html('  ')

text() /  text('  ')

val() ;  设置和读取元素的值

9、遍历

children()

next();

prive();

siblings():所有兄弟

10、综合实例

  
      
  
  
  
    
hello
  
    
  
        
item1
  
        
item2
  
        
item3
  
    
  
    
hello
  
      
    
  
    male:  
    female:  
    fishing:  
    cookinng:  
    sleeping:  
      
        beijing  
        shanghai  
        tianjing  
      

以上就是 小强的HTML5移动开发之路（36）——jQuery中的DOM操作的内容，更多相关内容请关注PHP中文网（www.php.cn）！