jquery复习之路---DOM操作-原创手记-慕课网

一,添加属性attr()和删除属性removeAttr()

$(document).ready(function(){
      //添加属性
         $("selector").attr("src","images/2.jpg");
         //或者   
          $("selector").attr( {"src:"images/2.jpg","title":"这是一张图"} );
          $("selector").attr("src",function(index){
           //index为$("selector")的索引
           return "images/"+Math.floor(Math.random()*10)+".jpg";
            })
       //删除属性
         $("selector").removeAttr("title");
})

二，获取元素内容的操作html()和text()

$("selector").text();
$("selector").html();

三, val是获取input元素的value值

$('input[type="text"]').val();

四，设置css样式

$(selector).css("color"."#fff")
//或者
$(selector).addClass(".w1");
$(selector).removeClass(".w1");
//或者
$(selector).toggleClass(".w1");

五，动态创建元素节点

 var div= $("<div class='add'  id='add' >动态添加的元素节点</div>");

 $(".w1").append(div);//在.w1内添加div元素

//给动态添加的节点元素添加事件,用
//$(selector).delegate("selectorChild","event",function(){
//$(this)//代表的是selectorChild
//} );

 $(".w1").delegate("#add","click",function(){
        $(this)..css("display","none");
})

六，内部插入节点

//使用append()
var $div = $("<div class='add'>动态创建的元素</div>");
$(selector).append($div);//在$(selector)子代最前面添加$div
//或者是
$(selector).append(function( ){
    return $div
})

//使用appendTo()方法
$div.appendTo( $(selector) );

//使用prepend()
$(selector).prepend($div);//在$(selector)子代最前面添加$div
$(selector).prepend(funciton(){
 return $div;
})

七，外部插入节点

//格式                                 参数                                 功能描述
$(selector).after(content)        content为插入目标元素外部后面的内容        向所选的元素外部的后面插入内容
$(selector).after(function(){})通过function返回插入目标元素外部后面的内容     向所选的元素外部的后面插入function函数返回的内容
$(selector).before(content)       content为插入目标元素外部前面的内容        向所选的元素外部的前面插入内容
$(selector).before(function(){})通过function返回插入目标元素外部前面的内容    向所选的元素外部的前面插入function函数返回的内容
$(selector).insetAfter(content)   content为插入目标元素外部后面的内容        将所选的元素插入另一个指定的元素的外部的后面
$(selector).insetBefore(content)  content为插入目标元素外部前面的内容        将所选的元素插入另一个指定的元素的外部的前面

八, 复制元素节点clone()和替换元素节点replaceWith()/replaceAll()，删除元素节点remove()/empty()

//复制节点
$(selector).clone() 
//该方法就是复制元素本身，不复制该元素的任何事件行为，若要复制该元素的行为，则clone(true)

//替换元素节点
 var $div = $("<div>将所有选择的元素替换成HTML或者DOM元素</div>")
 $("p").replaceWith($div);
$(selector).replaceWith(content)//将所有选择的元素替换成HTML或者DOM元素，content为被选元素替换的内容
$("divContent").replaceAll(selector)//将所有选择的元素替换成指定selector的元素，selector为需要被替换的元素

//删除元素节点remove([express])
$("li").remove( "li[class='li2']");
//若有参数express,该参数为刷选元素的jQuery表达式，通过该表达式获取指定元素,并进行删除
empty()
//清空所选元素的页面元素或所有的后代元素,但是他还是会占据空间;

九，DOM元素遍历

$(“img”).each(function(index){
    this.title  = "第"+index+"幅图片"+this.alt;
})
//元素遍历each(function(index)) ,index为当前的DOM元素的索引