收藏
批改状态：合格
老师批语：属性操作, 有多个方法, 要留意他们之间的区别, 很多情况下可以通用
jQuery获取元素个数从1.8版本使用length属性替代size()方法
attr('属性名','属性值')为dom元素添加新的属性和值，可以随意添加，并不影响。当attr()只写一个参数时，获取dom元素属性值，填两个参数时就是设置属性值。removeAttr()删除一个属性。
prop('属性名','属性值')的用法跟attr()类似。prop()获取属性值时只能获得到通过prop()方法添加的属性
感觉目前attr()和prop()最直观的区别在于，prop()方法添加非dom元素本身属性的话不会显示，而且prop()方法添加的dom元素本身属性使用removeProp()方法删除不了,但是可以使用removeAttr()方法删除
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery学习</title>
</head>
<body>
<p class="p" id="p">id P段落</p>
<p class="p">p段落</p>
<div class="div" id="div">id DIV段落</div>
<div class="div"> 段落</div>
<img alt="" id="img">
<button onclick="attr()">attr添加</button>
<button onclick="removeAttr()">attr移除</button>
<button onclick="prop()">prop添加</button>
<button onclick="removeProp()">prop移除</button>
<script>
//这个位置发现attr添加的固有属性能够移除，
alert($('p').length);
function attr(){
$('#img').attr('src','./im.jpg');
console.log($('#img').attr('src'));
$('#p').attr('flag','旗帜');
console.log($('#p').attr('flag'));
}
function removeAttr(){
$('#img').removeAttr('src');
console.log($('#img').attr('src'));
$('#p').removeAttr('flag','旗帜');
console.log($('#p').attr('flag'));
}
function prop(){
$('#img').prop('src','./im.jpg');
console.log($('#img').prop('src'));
$('#p').prop('flag','旗帜');
console.log($('#p').prop('flag'));
}
function removeProp(){
$('#img').removeProp('src','./im.jpg');
console.log($('#img').prop('src'));
$('#p').removeProp('flag','旗帜');
alert($('#p').prop('flag'));
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
addClass()和removeClass()一看就知道是为dom元素添加类和移除dom元素的类，toggleClass()可以判断有则移除，没有则添加。
text(),当有参数时为修改标签内的文本，没有时是获取标签文本。html()是获取元素内的html文本。
使用setInerval(func,1000)来设置一个定时器,使用clearInerval()清除定时器。不清除的话会一直执行
setTimeOut(func,1000)延迟1000毫秒后执行函数，只执行一次
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>jQuery学习</title>
<style>
.div{
width: 200px;
height:200px;
background-color: #2aabd2;
}
.border{
border:1px solid #008856;
border-radius: 5%;
color:red;
}
</style>
</head>
<body>
<div class="div">这是一个div段落</div>
<button onclick="addClass()">add类样式</button>
<button onclick="removeClass()">remove类样式</button>
<button onclick="toggleClass()">toggle类样式</button>
<!--计时器-->
<button onclick="clickme()" id="clickme">获取验证码</button>
<button onclick="click()" id="click">获取验证码</button>
<script>
function addClass(){
$('.div').addClass('border');
}
function removeClass(){
$('.border').removeClass('border');
}
function toggleClass(){
$('.div').toggleClass('border');
}
/*setTimeout(function(){
clickme();
},1000); // 自动执行方法*/
function clickme(){
if($('#clickme').text()=='获取验证码'){
timer();
}
}
//设置定时器
function timer(){
$('#clickme').attr('disabled',true);
var i=5;
var time=setInterval(function(){
$('#clickme').text(i);
if(i<=0){
$('#clickme').text('获取验证码');
$('#clickme').removeAttr('disabled');
//清除定时器，否则会一直计时下去
clearInterval(time);
}
i--;
},1000);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
val()一般用来获取表单的值。也可以设置表单的值
width()和height() 获取和设置元素宽度和高度，用法和text()类似。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<title>Document</title>
<style>
#div{
width: 200px;
height:200px;
background-color: #2aabd2;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入文本" id="user">
<button onclick="user()">获取</button>
<button onclick="addUser()">添加</button>
<div id="div">这是一个DIV容器</div>
<button onclick="wir()">获取div宽高</button>
<button onclick="wic()">修改div宽高</button>
<script>
function user(){
alert($('#user').val());
}
function addUser(){
$('#user').val('amdin');
}
function wir(){
var width=$('#div').width();
var height=$('#div').height();
alert('div容器的宽度是'+width+'高度是'+height);
}
function wic(){
$('#div').width(500);
$('#div').height(500);
var width=$('#div').width();
var height=$('#div').height();
alert('div容器的宽度是'+width+'高度是'+height);
}
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
