jQuery属性操作
样式属性操作
标签的属性操作
DOM对象属性操作
类样式属性操作
对值的操作
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>jQuery标签属性操作</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: yellow;
}
.Box{
width: 200px;
height: 200px;
background-color: red;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<div title = 'alex' class="active"></div>
<img src="" alt="">
<a href="">百度一下</a>
<input type="text" name="" value="我是input的value" placeholder="" id="" >
<input type="text" name="" value="我是input的value" placeholder="" id="" >
<input type="radio" name="sex" checked > 男
<input type="radio" name="sex"> 女
<button id="btn" style="display: block">隐藏</button>
<div class="Box"><h1>哈哈哈</h1></div>
<script type="text/javascript">
$(function () {
// 1.样式属性操作 css
console.log($('.active').css('background-color')); //css('color') 获取值
$('.active').css('background-color','#ff6700'); //css('color','red') 设置单个值
$('.active').css({'background-color':'green',height:'200px'});
//设置多个值 key 驼峰式的时候不需要加引号，但如果key里有特殊字符，如margin-left,需要加引号
// 2. 标签的属性操作 attr removeAttr 如 class type name 等
console.log($("input:eq(0)").attr("type")); // attr(key) 获取属性值
$("input:eq(0)").attr("placeholder","请输入您的名字:"); // attr(key,value) 设置单个值
$("input:eq(0)").attr({type:"password",name:"name"});// attr({key1:value1}); // 设置多个值
console.log($("input:eq(0)").attr("type")); // password
console.log($("input:eq(0)").attr("name")); // name
$("input:eq(0)").removeAttr("name"); // 删除属性
console.log($("input:eq(0)").attr("name")); //undefined
// 3.DOM对象属性操作 prop() removeProp()
console.log($("input[type=radio]").attr('checked')); //获取标签属性的值 checked
console.log($("input[type=radio]").prop('checked')); // 获取dom对象属性的值 true
console.dir(document.getElementsByTagName('input')[1]); //上面等同于dir里的checked对应的值
$("input[type=radio]").prop('aaaa',123456); //设置值
console.log($("input[type=radio]").prop('aaaa')); // 123456
$("input[type=radio]").removeProp('aaaa'); //删除值
console.log($("input[type=radio]").prop('aaaa')); // undefined
// 4.类样式属性操作 addClass() removeClass() toggleClass()
// 如果是操作类样式 一定用这种方法 不能用attr 否则会发生覆盖、删除之前的类样式
var isShow = true;
$('#btn').click(function () {
if(isShow){
$('.Box').addClass('hidden');
// $('#btn').text('显示');
$(this).text("显示");
isShow = false;
}else{
$('.Box').removeClass('hidden'); //.removeClass() 不指定样式key 删除所有样式
// $('#btn').text('隐藏');
$(this).text('隐藏');
isShow = true;
}
});
// 5.对值的操作
// text() html() val() 对应js的 innerText innerHTML value
console.log($('.Box').text().trim()); // 获取a标签内的 文本 且清除前后空格 哈哈哈
$('a').text("千度百下"); // 设置文本内容
console.log($('a').text().trim()); // 千度百下
console.log($('.Box').html()); // 获取标签 的html和文本 <h1>哈哈哈</h1>
$('.Box').html('<h3 style="color:yellow">嘻嘻嘻</h3>'); //设置标签和内容
console.log($('input:eq(1)').val()); // 获取表单空间的值 如input textarea select
$('input:eq(1)').val(''); // 设置input标签的值，这里是清空。一般用户提交后需要清空值。
})
</script>
</body>
</html>
表单控件的值操作
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>表单控件的值操作</title>
</head>
<body>
<form>
男<input type="radio" name="sex" value="man">
女<input type="radio" name="sex" value="male">
<select>
<option>晓钢</option>
<option>小红</option>
<option selected="">小黑</option>
</select>
</form>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
// input 值操作 获取值 val() 原生js onchange jquery change()
var inputObj = $('input[type=radio]');
inputObj.eq(0).prop('checked',true);
inputObj.change(function () {
alert(`您选择了性别"${$(this).val()}"`);
console.log($(this).val());
console.log($('input[type=radio]:checked').val());
});
// select 值操作 text() DOM对象.selectedindex
// 加载页面时 获取select标签选中的值
console.log($('select option:selected').text());
// 加载页面时 获取select标签选中的索引 (先获取DOM对象，再用selectIndex属性)
console.log($('select')[0].selectedindex);
// 获取值 设置选中项
$('select option')[1].selected=true; // 用设置属性selected为true
$('select')[0].selectedindex=0; // selectedindex 是select 对象的属性
console.log($('select option:selected').index()); // index 只读 不可修改值
// select change方法
$('select').change(function () {
console.log($('select option:selected').text());
console.log($('select')[0].selectedindex);
console.log($('select').get(0).selectedindex);
console.log($('select option:selected').index());
})
})
</script>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
