一.标签属性操作
attr() 设置属性值,或返回被选元素的属性值 (//getAttrbute() setAttrbute()) 路径的相对地址
removeAttr() 移除属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="./xiaohua.jpg" alt="" >
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
//attr
//获取值
console.log($('img').attr('src')); //./xiaohua.jpg
//设置值
$('img').attr('alt','美女'); //./xiaohua.jpg
//设置多个标签属性值
$('img').attr({
'aaa':'美女',
'bbbb':'个哈哈哈'
});
//移除 removeAttr()
setTimeout(()=>{
//移除单个属性
// $('img').removeAttr('alt');
//移除多个属性
$('img').removeAttr('alt aaa bbbb');
},3000)
})
</script>
</body>
</html>代码实例
注意: 不要使用attr() 或者prop()来设置类名
二.对象属性操作
prop() 设置(// oDiv,id)
removeProp() 删除(// oDiv.id = '')
方法设置或返回被选元素的属性和值.
当方法用于返回属性值时,返回第一个匹配元素的值
当方法用于设置属性时, 则为匹配元素集合设置一个或多个属性/值对.
语法:
返回属性的值>>
$(selector).prop(property)
设置属性和值>>
$(selector).prop(property,value)
设置多个属性和值>>
$(selector).prop({property:value, property:value,...})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.active{
border: 1px solid red;
}
</style>
</head>
<body>
<img src="./xiaohua.jpg" alt="" class="box">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
//获取值
console.log($('img').prop('src'));
$('img').prop('aaaa','美女');
$('img').prop({
'bbb':'哈哈',
'aa':'嘿嘿'
});
//移除 removeProp() 删除一个属性
$('img').removeProp('aa');
$('img').removeProp('bbb');
console.log($('img'));
setTimeout(()=>{
},3000)
})
</script>
</body>
</html>代码案例
三.类的操作
addClass() 添加类
removeClass() 移除类
toggleClass() 添加/移除类 如果存在（不存在）就删除（添加）一个类。
$('div').addClass("box");//追加一个类名到原有的类名
$('div').addClass("box box2");//追加多个类名
$('div').removeClass('box')；//移除指定的类（一个或多个）
$('div').removeClass(); //移除全部的类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
display: none;
}
div.active{
display: block;
}
</style>
</head>
<body>
<button>显示</button>
<div class="box"></div>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
var isHide = true;
$('button').click(function () {
/*
if (isHide){
$('.box').addClass('active aa vbbb addad');
isHide = false;
}else{
$('.box').removeClass('active aa vbbb');
isHide = true;
}
*/
$('.box').toggleClass('active');
})
})
</script>
</body>
</html>代码实例
四.值得操作
text() 设置文本的内容 (//innerText)
html() 设置文本又设置标签 (//innerHTML)
val() 用于表单控件中获取设置值，比如input textarea select等等(//value)
注意: 如果不传参,表示获取值 如果传参数,表示设置值.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
display: none;
}
div.active {
display: block;
}
.ac{
font-size: 24px;
}
</style>
</head>
<body>
<button id="show">显示</button>
<button id="del">移除标签</button>
<div class="box">
</div>
<input type="text" value="嘿嘿嘿">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function () {
var isHide = true;
$('#show').click(function () {
if (isHide) {
$('.box').addClass('active aa vbbb addad');
isHide = false;
//获取文本的值
console.log($(this).text());
//只设置文本
var name = 'alex2333'
$(this).text('隐藏');
$('.box').html(`<ul>
<li id="" class="ac"><a href="">哈哈哈</a></li>
<li>${name}</li>
<li>alex</li>
<li>alex</li>
</ul>`)
} else {
$('.box').removeClass('active aa vbbb');
isHide = true;
$(this).text('显示');
}
})
$('#del').mouseenter(function () {
$('.box').html('');
})
//获取值
console.log( $('input[type=text]').val());
//设置值
$('input[type=text]').val('alex');
console.log( $('input[type=text]').val());
})
</script>
</body>
</html>代码案例
五.样式属性操作
$(selector).css()
如果有一个参数,参数是字符串表示获取值,参数是对象,表示设置多个值
如果有两个参数, 表示设置值
六.操作input中value的值(重点)
$(selector).val() 设置和获取值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112"/>男
<!-- 设置cheked属性表示选中当前选项 -->
<input type="radio" name="sex" value="11" checked=""/>女
<input type="radio" name="sex" value="11"/>gay
<input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b"/>睡觉
<input type="checkbox" value="c" checked=""/>打豆豆
<!-- 下拉列表 option标签内设置selected属性 表示选中当前
总结: 如果option中没有value 设置当前的值 通过标签的文本设置
如果有值通过value
-->
<select name="timespan" id="timespan" class="Wdate" multiple="multiple">
<option selected>alex</option>
<option selected="">wusir</option>
<option>wulaoban</option>
<!--<option selected="selected">Multiple</option>-->
<!--<option>Multiple2</option>-->
<!--<option selected="selected">Multiple3</option>-->
</select>
<select name="" id="fruit">
<option>香蕉</option>
<option>苹果</option>
</select>
</select>
<input type="text" name="" id="" value="111"/>
</form>
<script type="text/javascript" src="./libs/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// 一、获取值
//1.获取单选框被选中的value值
console.log($('input[type=radio]:checked').val())
//
// //2.复选框被选中的value,获取的是第一个被选中的值
console.log($('input[type=checkbox]:checked').eq(1).val())
//
// //3.下拉列表被选中的值
//
var obj = $("#timespan option:selected");
// // 获取被选中的值
var time = obj.val();
console.log(time);
// // 获取文本
var time_text = obj.text();
console.log("val:" + time + " text" + time_text);
//4.获取文本框的value值
// console.log($("input[type=text]").val())//获取文本框中的值
// 二.设置值
//1.设置单选按钮和多选按钮被选中项
// $('input[type=radio]').val(['112']);
$('input[type=checkbox]').val(['a', 'b']);
//2.设置下拉列表框的选中值，必须使用select
/*因为option只能设置单个值，当给select标签设置multiple。
那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
*/
// $('select').val(['2','3'])
// $('select').val([ "Multiple2", "Multiple3" ]);
// $('select').val([ "alex", "wulaoban" ]);
//3.设置文本框的value值
// $('input[type=text]').val('试试就试试')
// $('#fruit').val('苹果');
// $('#fruit').val(['苹果','哈哈哈']);
})
</script>
</body>
</html>代码示例
关于下拉列表:
<select name="timespan" id="timespan" class="Wdate" multiple="multiple" >
<option value ='1' selected>alex</option>
<option value = '2' selected="">wusir</option>
<option value = '3'>wulaoban</option>
</select>
总结:
1.如果option中的属性有value,优先使用value设置
$('#timespan').val(['1','3']);//选中1 和3选项
2.如果没有value,那么使用标签的文本内容设置
$('#timespan').val(['alex','wulaobnan']) //选中1 和 3 选项
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
