jquery之属性操作

jQuery之属性操作

相信属性这个词对大家都不陌生。今天我就给大家简单地介绍一下JQuery一些属性的操作

属性一共分三大类

一.基本属性

1.attr

2.removeAttr

3.prop

4.removeprop

html代码

菜单

123

456

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代码

jQuery代码

//为每个匹配的元素添加指定的类名。
$("p").addClass("selected");

//一个或多个要添加到元素中的CSS类名请用空格分开
$("p").addClass("selected1 selected2");

//从所有匹配的元素中删除全部或者指定的类。
$("p").removeClass("selected");

//如果存在（不存在）就删除（添加）一个类。
$("p").toggleClass("selected");

三.HTML代码/文本/值

1.html

2.text

1.val

hHTML代码

123

jQuery代码

//取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
console.log($("p").html());

//取得所有匹配元素的内容。
console.log($("p").text());

//获得匹配元素的当前值。
console.log($("input").val());

上面这些代码大家直接用就可以查看效果，希望对大家有所帮助。