jQuery之属性操作
相信属性这个词对大家都不陌生。今天我就给大家简单地介绍一下JQuery一些属性的操作
属性一共分三大类
一.基本属性
1.attr
2.removeAttr
3.prop
4.removeprop
html代码
<div id="box1">菜单</div>
<div id="box2" class="hezi">123</div>
<input type="checkbox" >
<p class="p1">456</p>
css代码
#box1{
width: 100px;
height: 100px;
background: red;
}
#box2{
width: 100px;
height: 100px;
background: blue;
}
jQuery代码
//设置或返回被选元素的属性值。
console.log($("#box1").attr("id"));
//从每一个匹配的元素中删除一个属性
console.log($("#box2").removeAttr("class"));
//选中复选框为true,没选中为false
$("input[type='checkbox']").prop("checked");
$("p").prop("class","p1");
//用来删除由.prop()方法设置的属性集
$("p").removeProp("class");
二.css类
1.addClass
2.removeClass
1.toggleClass
html代码
<p></p>
jQuery代码
//为每个匹配的元素添加指定的类名。
$("p").addClass("selected");
//一个或多个要添加到元素中的CSS类名请用空格分开
$("p").addClass("selected1 selected2");
//从所有匹配的元素中删除全部或者指定的类。
$("p").removeClass("selected");
//如果存在(不存在)就删除(添加)一个类。
$("p").toggleClass("selected");
三.HTML代码/文本/值
1.html
2.text
1.val
hHTML代码
<p>1<span>2</span>3</p>
<input type="text" value="abc"/>
jQuery代码
//取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
console.log($("p").html());
//取得所有匹配元素的内容。
console.log($("p").text());
//获得匹配元素的当前值。
console.log($("input").val());
上面这些代码大家直接用就可以查看效果,希望对大家有所帮助。