attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<!-- 引入jquery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="1.jpg" alt="图片">
<script>
//获取属性
$("img").attr("src"); //1.jpg
//设置属性
$("img").attr("src","2.jpg"); //<img src="2.jpg" alt="图片">
$("img").attr({src:"3.jpg",alt:"这是图片"}); //<img src="3.jpg" alt="这是图片">
//回调设置属性
$("img").attr("src",function(){return this.alt}); //<img src="这是图片" alt="这是图片">
</script>
</body>
</html>
removeAttr(name) 从每一个匹配的元素中删除一个属性
<img src="1.jpg"/>
//删除img属性src
$("img").removeAttr("src"); //[ <img /> ]
prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<!-- 引入jquery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" checked>
<input type="checkbox" >
<script>
//获取type='checked'的input标签 的checked属性值
$("input[type='checkbox']").prop("checked"); //true
//禁用页面上的所有复选框。
$("input[type='checkbox']").prop({disabled:true});
//选中所有页面上的复选框。
$("input[type='checkbox']").prop({checked:true});
//回调函数将页面上所有复选框都反选
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
</script>
</body>
</html>
removeProp(name) 用来删除由.prop()方法设置的属性集
<div class="aa">jquery</div>
var $div = $("div[class='aa']");
$div.prop("name", "bbb"); //<div class="aa" name="aa">jquery</div>
$div.append("添加name属性值为", String($div.prop("name")),"。");//<div class="aa" name="aa">jquery我们添加了name属性值为aa。</div>
$div.removeProp("name"); //<div class="aa">jquery我们添加了name属性值为aa。</div>
addClass(class|fn) 为每个匹配的元素添加指定的类名
removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类
<div class="aa">jquery</div>
//addClass(class|fn)
$("div").addClass("bb"); //<div class="aa bb">jquery</div>
$("div").addClass("cc dd"); //<div class="aa bb cc dd">jquery</div>
$('div').addClass(function() {
return 'item-' + $(this).index();
});
//removeClass([class|fn])
$("div").removeClass("bb"); //<div class="aa cc dd">jquery</div>
$("div").removeClass(); //删除匹配元素的所有类
$('div').removeClass(function() {
return 'item-' + $(this).index();
});
toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类
<p class="aa"></p>
$("p").toggleClass("bb"); //<p class="aa bb"></p>
html([val|fn]) 取得第一个匹配元素的html内容
<div>jquery</div>
//获取内容
$('div').html(); //jquery
//设置内容 可设置标签
$("div").html("Hello <b>world</b>!"); //<div>Hello <b>world</b>!</div>
$("div").html(function(index){
return "这个 p 元素的 index 是：" + index;
});
text([val|fn]) 取得所有匹配元素的内容
<div>jquery</div>
//获取内容
$('div').text(); //jquery
//设置内容 可设置标签
$("div").text("Hello world!"); //<div>Hello world!</div>
$("div").text(function(index){
return "这个 p 元素的 index 是：" + index;
});
val([val|fn|arr]) 获得匹配元素的当前值
<input type="text" value="jquery">
$("input").val(); //jquery
$("input").val("hello world!"); //hello world!
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
练习：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery</title>
<!-- 引入jquery -->
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
<script>
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
</script>
</body>
</html>
运行结果如下：
