獲取設(shè)置節(jié)點(diǎn)的屬性
// attribute
//01 attr("屬性名") 獲取元素屬性的屬性值
// 只能獲取集合中第一個元素的title屬性
console.log( $(".box").attr("title") );
//02 attr("屬性名","屬性值") 給集合中所有元素設(shè)置指定屬性的屬性值
$(".box").attr("title","我設(shè)置的铃将！");
$(".box").attr("myattr","自定義屬性");
//03 attr({"屬性名1":"屬性值1","屬性名2":"屬性值2"}) 設(shè)置多個屬性的屬性值
$(".box").attr({"title":"1111","my2":"222"});
console.log( $(":checkbox").attr("checked") );//undefined
console.log( $(":checkbox").prop("checked") );//false
// $(":checkbox").attr("checked","checked");
$(":checkbox").prop("checked",true);
// 04 移除屬性
$(".box").removeAttr("my2");
// prop() -- 獲取 checked seleted readOnly
$("button")[0].onclick = function(){
$(":checkbox").prop("checked",true)
}
$("button")[1].onclick = function(){
$(":checkbox").prop("checked",false)
}
$("button")[2].onclick = function(){
$(":checkbox").each(function(){
if (this.checked) {
this.checked = false;
}else{
this.checked = true;
}
// this.checked = !this.checked
})
}
each()
$(".box").each(function(){ //不傳參
console.log( $(this).attr("title") );
console.log(this);//this代表是DOM對象
})
$(".box").each(function(index,element){ // 傳參
console.log(index,element);
// element 是DOM對象
})
常用的屬性
// attr()
// prop()
// html()
// text()
// val()
// 區(qū)分 元素屬性與樣式表屬性
css屬性的設(shè)置與獲取
// css() 獲取設(shè)置元素的css屬性的屬性值
$("#box").click(function(){
// $(this).css("background-color","red");
// 方法二 改變class屬性的屬性值
// $(this).attr("class","box2");
// addClass(class屬性值)追加一個class屬性值
// $(this).addClass("box2");
// removeClass("className")移除指定的class的屬性值
// $(this).removeClass("left");
// toggleClass(className) 切換言秸；如果沒有該class值則追加上性置，如果有該class值則移除掉
$(this).toggleClass("box2");
})
// hasClass(class值) 判斷元素是否有指定的class飞盆，沒有沦零，返回false 有 返回true
console.log( $("#box").hasClass("box100") );
常用的CSS相關(guān)的屬性
// 01 offset() 獲取元素在可是窗口坐標(biāo)系中坐標(biāo)點(diǎn)
console.log( $("#parent").offset() );
console.log( $("#son").offset() );
// 02 position() 獲取元素在父節(jié)點(diǎn)（非靜態(tài)定位relative absolute）坐標(biāo)系中的坐標(biāo)點(diǎn)
// offsetParent
console.log( $("#parent").position() );
console.log( $("#son").position() );
// 設(shè)置offset({left:300,top:300})的值
$("#parent").offset({left:300,top:300});
$("#son").position( );//注意 只可以獲取 不能設(shè)置
// width() 獲取元素的寬度
// height() 獲取元素的高度
// 不帶單位
console.log( $("#parent").width() );
console.log( $("#parent").height() );
$("#parent").width(300);
// offset({left:XX,top:XX}) 可視窗口坐標(biāo)系
// position() 父節(jié)點(diǎn)坐標(biāo)系 （只能獲染弧）
// width()
// height()
// CSS()
常用的CSS相關(guān)的屬性
$("button:eq(0)").click(function(){
// 01 創(chuàng)建元素節(jié)點(diǎn)
var $Div = $("<div class='box'></div>");
console.log($Div);
// 02 插入節(jié)點(diǎn)
// appendChild() 在所有孩子列表的末尾插入
// parentNode.insertBefore(新舰褪，舊)在指定元素的前面插入
// 父節(jié)點(diǎn).append(子節(jié)點(diǎn))
// $("body").append($Div);
// 子節(jié)點(diǎn).appendTo(父節(jié)點(diǎn))
// $Div.appendTo($("body"));
$Div.appendTo("#box");
})
$("button:eq(1)").click(function(){
var $div = $("<div class='box'></div>");
// 父節(jié)點(diǎn).prepend(子節(jié)點(diǎn)) 添加到孩子列表的首部
// $("body").prepend($div);
// 子節(jié)點(diǎn).prependTo(父節(jié)點(diǎn))
$div.prependTo("body");
})
$("button:eq(2)").click(function(){
var $p = $("<p>我也是一個p標(biāo)簽</p>");
// 01 舊節(jié)點(diǎn).after(新節(jié)點(diǎn)) 添加后面的兄弟節(jié)點(diǎn)
// $("#p1").after($p);
// 02 新節(jié)點(diǎn).insertAfter(舊節(jié)點(diǎn))
$p.insertAfter($("#p1"));
})
$("button:eq(3)").click(function(){
// before(string|jQuery對象)
// $("#p1").before( "<p>pppppppppppp</p>" )
// insertBefore()
$("<p>pppppppppppp</p>").insertBefore("#p1");
})
// 移除
$("button:eq(4)").click(function(){
// 把所有class為del的元素移除掉
var ret = $(".del").remove();
console.log(ret);//返回值 所有被移除的元素
ret.appendTo("body");
// 找出class為del的元素急黎，然后篩選出id為d2的元素把其移除
// $(".del").remove("#d2");
})
//給div添加點(diǎn)擊事件
$(".del").click(function(){
alert("div");
})
$("button:eq(5)").click(function(){
//使用detach()移除div
var ret = $(".del").detach();
ret.appendTo("body");
/*
remove() 與 detach()
remove()移除節(jié)點(diǎn)之后健提，會保存該jQuery對象
detach()移除節(jié)點(diǎn)之后琳猫，會保存jQuery對象并且保存該對象的上添加的事件
*/
})
$("button:eq(6)").click(function(){
// 清空所有匹配元素的子元素
$(".del").empty();
})