jQuery操作dom元素
1.操作元素的属性
attr(),prop() 获取或者设置元素的属性值
attr():
$("input[type='button']").attr("value","按钮1");//设置button的value值为按钮1
console.log( $("input[type='button']").attr("value"));//获取button的value值
prop():
$("input[type='button']").prop("value","按钮1");//设置button的value值为按钮1
console.log( $("input[type='button']").prop("value"));//获取button的value值
区别:在对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。
而对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。
官方建议使用:
删除元素的属性
$("input[type='button']").removeAttr("data-src");
$("input[type='button']").removeProp("data-src");//只能删除自定义属性
console.log(btn.attr("data-src"));
元素内容的操作
$("#block").html("热");//设置文本内容
$("#block").text("热");//设置其中所有内容,相当于设置了innerHTML
console.log($("#block").html());//获取它的html
console.log($("#block").text());//获取它的文本值
操作表单元素的值val()
$("#txt").val("12345");//设置值
console.log($("#txt").val());//获取值
操作dom元素的css css()
$("#txt").css("borderColor", "#090a0a");//设置css样式
var color = $("#txt").css("borderColor");//获取样式,输出的颜色值,一般为16进制
颜色名称和16进制的转换
var col = (function (c) {
var a = c.split(",");
var r = parseInt(a[0].split("(")[1]);
var g = parseInt(a[1]);
var b = parseInt(a[2].split(")")[0]);
//#690a0a 16位置 rgb r:69 g:0a b:0a
return "#" + ((r << 16) + (g << 8) + b).toString(16);
})(color);
console.log(col);
同时设置多个css样式
$("#txt").css({
width: "",
height: ""
});
类名称的添加,追加名称
$("#btn").addClass("btninfo");
$("#btn").addClass("btninfo btnlist"); /*添加多个类*/
$("#btn").removeClass("btndata btnlist"); /*移除类名称*/
$("#btn").removeClass(); /*全部移除*/
$("#btn").toggleClass("btndata"); /*类的切换 toggleClass() 从有到无,从无到有*/
jquery操作子父节点的问题
console.log($("ul").children()[0]);//后面加方括号,可转换为dom方法
console.log($("ul>li").first());//第一个
console.log($("ul>li").last());//最后一个
console.log($("ul>li").eq(0));
console.log($("ul>li").first().siblings(".lilist")); /*找同胞元素*/
console.log($("ul>li").eq(1).prev());//找当前元素的前一个元素
console.log($("ul>li").eq(2).prevAll("li"));//前面的所有
console.log($("ul>li").eq(1).next()); //找当前元素的下一个元素
console.log($("ul>li").eq(1).nextAll("span"));
console.log($("ul>li").filter(".lidata")) /*filter() 过滤元素*/
console.log($("ul>li").eq(0).is(".lilist")); /*is() 判断当前对象是不是*/
尺寸问题
console.log($("body").width());//可视区域
console.log($("body").innerWidth());//可视区域和内边距 padding
console.log($("body").outerWidth());//内边框和边框