收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.属性与自定义属性操作:attr() 和removeattr()</title>
</head>
<body>
<img src="image/001.jpg" width="300" alt="美女" title="明星" id="pic" data-nation="中国">
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//预备知识:读取器,设置器
//1.有一些函数,可以根据参数的数量不同,执行不周的功能,返回不同的值,类似于功能重载
//2.传入一个参数,读取操作getter,返回该参数的当前值,叫读取器/获得器
//3.传入二个参数执行赋值操作setter,修改当前参数的值,叫:设置器/修改器
//4.这种根据参数个数决定执行操作类型的方法,在JQERY中非常多,大家要留意
//1.attr() :元素属性的获取与设置
//必须传参
//var res=${'img'}.attr()
//单参数为获取:当前属性的值
//var res=$('#pic').attr('src')
//双参数为获取,第一个是属性名,第二个是要设置的新值
$('#pic').attr('src','/image/002.jpg')
$('#pic').attr('style','border-radius:50%;box-shadow:10px 10px 10px #333')
//由此可见, attr()是典型的集读取器与设置器二合一的方法
// attr()可以获取到元素的自定义属性
//HTML5中可以通过data 前缀给标签用户自定义属性
var res=$('#pic').attr('data-nation')
//attr()的属性值 还支持回调函数
//$('#pic').attr('width',function(){ return 100+50})
//注意:回调返回的数值类型,会自动转为字符类型再赋值给WIDTH属性
//var res=$('#pic').attr('width')
//2.removeAttr():删除元素的属性
//删除图片的内联样式属性STYLE
//$('#pic').removeAttr('style')
//可以删除多个属性,多个属性之间用空格分开,返回当前元素的状态
var res=$('#pic').removeAttr('alt title data-nation')
//在控制台查看运行结果
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.元素故有属性的操作: prop()和removeProp()</title>
</head>
<body>
<img src="image/001.jpg" width="300" alt="美女" title="明星" id="pic" data-nation="中国">
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//1.Prop():仅能获取元素的固有属性
//获取固有属性:alt title
var res=$('#pic').prop('alt')
var res=$('#pic').prop('title')
// 获取自定义属性data-nation, 返回undefined 获取不到
var res=$('#pic').prop('data-nation')
//但是如果使用prop()进行动态设置自定义属性后,就可以正常获取到
var res=$('#pic').prop('data-nation','中国山东')
//此时查看元素,发现自定义属性并未发生变化,所以这种设置对元素无影响
//此时再次查看自定义属性值,只是存在于当前脚本的一个临时数据
var res=$('#pic').prop('data-nation')
//2.removeprop()
// 这个方法与removeattr()有两点不同
//1.它不支持空格分隔的属性列表字符串,即每次只能删除一个属性
// var res=$('#pic')removeProp('alt data-nation')
//2.它不支持删除原生属性,如果真要删除,要将值设为false可
//删除原生固有属性
// var res = $('#pic').removeProp('data-nation')
//var res=$('#pic').removeProp('alt')
//用removeAttr()删除原生属性alt, 删除成功
// var res=$('#pic').removeAttr('alt')
//所以,如果要用removeProp()删除原生属性,大多数下将值设为 false即可
//最终由用户脚本自行处理
var res=$('#pic').prop('alt',false)
var res=$('#pic').Prop('alt')
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.在元素中存储数据:data()</title>
</head>
<body>
<img src="../image/001.jpg" width="200" alt="PHP中文网" title="朱老师"
id="pic" data-job="php中文网朱老师">
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//data(): 读取元素中以 data 开始的自定义数据,可以省略 data前缀
//var res=$('#pic').data('job')
//如果用之前的attr()方法必须写出完整的属性名
//var res=$('#pic').attr('data-job')
//data()也是一个自带读取器和设置器的方法
$('#pic').data('data-course','PHP程序开发课程')
//如果是动态设置的自定义属性,省略前缀是获取不到的
//var res=$('#pic').data('course')
//需要加上前缀
var res=$('#pic').data('data-course')
//data()能获取元素上的原生属性吗?无法读取
var res=$('#pic').data('title')
//但是支持动态设置title属性,仅限于脚本中使用,原始值并未发生变化
var res=$('#pic').data('title','hellow')
//现在就可以在脚本中读取title的值,尽管这个值与原生的alt不同
var res=$('#pic').data('title')
//同样, data()也有一个对应的 removeData()用来删除自定义或由它创建的属性
var res=$('#pic').removeData('title')
var res=$('#pic').removeData('data-Course')
var res=$('#pic').data('data-course')
//原始标签自带的自定义属性中删除不了
var res=$('#pic').removeData('data-job')
var res= $('#pic').data('job')
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.设置元素的类样式</title>
<style type="text/css">
.circle{border-radius:50%;}
.shadow{box-shadow:30px 30px 30px #888}
</style>
</head>
<body>
<img src="../image/001.jpg" width="300" id = "pic">
<!--<img src="../image/001.jpg" class="circle" width="300" id = "pic">-->
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
/*设置元素的类样式
//1 设置元素标签的CLASS属性:应用的类样式,样式表中的
//2 直接设置标签元素的STYLE属性,内联样式
//1 AddClass()*/
//$('#pic').addClass('circle')
//$('#pic').addClass('shadow')
$('#pic').addClass('shadow circle')
//2 .removeClass()
//$('#pic').removeClass('circle')
//$('#pic').removeClass('shadow')
$('#pic').removeClass('shadow circle')
//3 样式的自动切换:toggleClass
//如果当前元素没有该样式,就自动添加,如果有,就自动删除
$('#pic').toggleClass('circle shadow')
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.设置内联样式 css()</title>
<style type="text/css">
.box1{
width:300px;
height:300px;
background-color:wheat;
position:relative;
}
.box2{
width:100px;
height:100px;
background-color:lightgreen;
position:absolute;
top:50px;
left:100px;
}
</style>
</head>
<body>
<img src="../image/001.jpg" style="width:200px;" border>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
//css()和attr()类似, 自带getter/setter
//1 设置样式: css(name [,value])
// var res = $('img').css('width',500)
//var res=$('img').css('border-radius','10%')
//var res= $('img').css('box-shadow','30px 30px 30px #888')
// 链式操作
//var res = $('img').css('width',500)
// .css('border-radius','10%')
// .css('box-shadow','30px 30px 30px #888')
// var res=$('img').css({'width':'200px','border-radius':'50%','box-shadow':'5px 5px 5px #888'})
var res=$('img').css({"width":"200px","border-radius":"50%","box-shadow":"5px 5px 5px #888"})
var res=$('img').css('width')
var res=parseInt($('img').css('width'))
res +=200
var res=parseInt($('img').css('width',res+'px'))
// var res=$('img').css('width')
//3.height(),width()
//var res=$('img').width()
var res=$('img').width(200)
//var res=$('img').width('100px')
//var res=$('img').width('+=200')
//4.offset()
var res = $('img').offset()
var res = $('img').offset().top+'px'
var res = $('img').offset().left+'px'
//5.position
var res= $('.box2').position()
var res= $('.box2').position().left
//6.scrollLeft()返回水平滚动条的位置
//scrollTop()返回垂直滚动条的位置
console.log(res)
</script>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
