获取设置节点的属性
// attribute
//01 attr("属性名") 获取元素属性的属性值
// 只能获取集合中第一个元素的title属性
console.log( $(".box").attr("title") );
//02 attr("属性名","属性值") 给集合中所有元素设置指定属性的属性值
$(".box").attr("title","我设置的！");
$(".box").attr("myattr","自定义属性");
//03 attr({"属性名1":"属性值1","属性名2":"属性值2"}) 设置多个属性的属性值
$(".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()
// 区分 元素属性与样式表属性
css属性的设置与获取
// css() 获取设置元素的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相关的属性
// 01 offset() 获取元素在可是窗口坐标系中坐标点
console.log( $("#parent").offset() );
console.log( $("#son").offset() );
// 02 position() 获取元素在父节点（非静态定位relative absolute）坐标系中的坐标点
// offsetParent
console.log( $("#parent").position() );
console.log( $("#son").position() );
// 设置offset({left:300,top:300})的值
$("#parent").offset({left:300,top:300});
$("#son").position( );//注意 只可以获取 不能设置
// width() 获取元素的宽度
// height() 获取元素的高度
// 不带单位
console.log( $("#parent").width() );
console.log( $("#parent").height() );
$("#parent").width(300);
// offset({left:XX,top:XX}) 可视窗口坐标系
// position() 父节点坐标系 （只能获取）
// width()
// height()
// CSS()
常用的CSS相关的属性
$("button:eq(0)").click(function(){
// 01 创建元素节点
var $Div = $("<div class='box'></div>");
console.log($Div);
// 02 插入节点
// appendChild() 在所有孩子列表的末尾插入
// parentNode.insertBefore(新，旧)在指定元素的前面插入
// 父节点.append(子节点)
// $("body").append($Div);
// 子节点.appendTo(父节点)
// $Div.appendTo($("body"));
$Div.appendTo("#box");
})
$("button:eq(1)").click(function(){
var $div = $("<div class='box'></div>");
// 父节点.prepend(子节点) 添加到孩子列表的首部
// $("body").prepend($div);
// 子节点.prependTo(父节点)
$div.prependTo("body");
})
$("button:eq(2)").click(function(){
var $p = $("<p>我也是一个p标签</p>");
// 01 旧节点.after(新节点) 添加后面的兄弟节点
// $("#p1").after($p);
// 02 新节点.insertAfter(旧节点)
$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添加点击事件
$(".del").click(function(){
alert("div");
})
$("button:eq(5)").click(function(){
//使用detach()移除div
var ret = $(".del").detach();
ret.appendTo("body");
/*
remove() 与 detach()
remove()移除节点之后，会保存该jQuery对象
detach()移除节点之后，会保存jQuery对象并且保存该对象的上添加的事件
*/
})
$("button:eq(6)").click(function(){
// 清空所有匹配元素的子元素
$(".del").empty();
})