jQuery属性操作
内容选择器
-
empty: 找到既没有文本内容也没有子元素的指定元素
-
parent: 找到有文本内容或有子元素的指定元素
-
contains: 找到包含指定文本内容的指定元素
-
has: 找到包含指定子元素的指定元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>内容选择器</title> <script src="../jquery-3.5.1.js"></script> <style> div{ width: 150px; height: 150px; border: 2px solid black; margin-top: 10px; } </style> <script> $(function(){ // empty var $divEmpty = $("div:empty"); console.log('$divEmpty>>>', $divEmpty); // parent var $divParent = $('div:parent'); console.log('$divParent>>>', $divParent); // contains var $divContains = $('div:contains("第二个div")'); console.log('$divContains>>>', $divContains); // has var $divHas = $('div:has("p")'); console.log('$divHas>>>', $divHas); }) </script> </head> <body> <div></div> <div>第一个div</div> <div>第二个div</div> <div><span>spanspanspan</span></div> <div><p></p></div> </body> </html>
属性和属性节点
-
属性：对象里的变量就是属性
function Dog(){} var dog = new Dog() dog.name = '哈士奇'; // 这里的name就是属性 console.log('name:', dog.name);-
操作属性的方法:
- 通过点
- 设置属性: 对象.属性名 = 值;
- 调用属性: 对象.属性名;
dog.name = '哈士奇'; console.log('name:', dog.name);- 通过[]
- 设置属性: 对象[‘属性名’] = 值;
- 调用属性: 对象[‘属性名’];
dog['age'] = 5; console.log('age:', dog['age']); - 通过点
-
-
属性节点: 在HTML标签中添加的属性就是属性节点
-
如<span name="hello"></span>里的name -
所有的属性节点都保存在DOM的attributes属性中
-
操作属性节点：
- 设置属性节点:
DOM元素.setAttribute('属性名', '值'); - 获取属性节点:
DOM元素.getAttribute('属性名');
var span = document.getElementsByTagName('span')[0]; span.setAttribute('name', 'nonono'); console.log('span>>>',span.getAttribute('name')); - 设置属性节点:
-
-
属性和属性节点的区别：任何对象都有属性，只有DOM对象才有属性节点
一. jQuery的attr方法和removeAttr方法
-
attr(): 获取或设置属性节点的值- 如果传一个参数代表获取属性节点的值，如果传两个参数代表设置属性节点的值
- 获取时: 无论找到多少元素，都只会返回第一个元素的属性节点的值
- 设置时: 找到多少元素就设置多少元素，如果要设置的属性节点不存在，系统会自动新增
<body> <span class="span1" name = 'rpg'></span> <span class="span2" name = 'stg'></span> </body> <script> // 获取 console.log('attr>>>', $('span').attr('class')); // 设置 $('span').attr('class', 'sun'); $('span').attr('age', 66); </script> -
removeAttr(): 删除指定的属性节点 -
会删除所有找到的属性节点
-
如果想删除多个属性节点可用空格隔开
<body>
<span class="span1" name = 'rpg' age="6"></span>
<span class="span2" name = 'stg' age="6"></span>
</body>
<script>
// 删除
$('span').removeAttr('age');
// 删除多个
$('span').removeAttr('class name');
</script>
二. jQuery的prop方法
- prop方法: 操作属性,特点和attr一样
- prop方法不仅能操纵属性，还能操作属性节点
- removeProp: 删除属性特点和reomveAttr一样
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的prop方法</title>
<script src="../jquery-3.5.1.js"></script>
<script>
$(function(){
// prop方法: 操作属性特点和attr一样
$('span').eq(0).prop('demo','233')
$('span').eq(1).prop('ash', '666')
$('span').eq(2).prop('demo', '666')
console.log($('span').prop('demo'))
// removeProp: 删除属性特点和reomveAttr一样
$('span').removeProp('demo')
// 操作属性节点
console.log($('span').prop('class'))
})
</script>
</head>
<body>
<span class="span1" name='rpg'></span>
<span class="span2" name='stg'></span>
<span class="span3" name='stg'></span>
</body>
</html>
-
关于prop()和attr()分别什么时候用：
- 官方推荐在操作属性节点时，具有true 和false 两个属性的属性节点如schecked, selected 或者disabled 使用prop()
- 其他的使用attr ()
三. jQuery操作类相关的方法
-
addClass(): 添加一个类, 添加多个时中间用空格隔开 -
removeClass(): 删除一个类,删除多个用空格隔开 -
toggleClass(): 切换类. 有就删除，没有就添加<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery操作类相关的方法</title> <script src="../jquery-3.5.1.js"></script> <style> .class1{ width: 100px; height: 100px; background: aqua; } .class2{ width: 50px; height: 50px; border: 10px solid greenyellow; } </style> <script> $(function(){ var btns = document.getElementsByTagName('button') // addClass() : 添加一个类 添加多个时中间用空格隔开 btns[0].onclick = function(){ $('div').addClass('class1 class2'); } // removeClass() : 删除一个类 删除多个用空格隔开 btns[1].onclick = function () { $('div').removeClass('class2'); } // toggleClass() : 切换类 有就删除，没有就添加 btns[2].onclick = function () { $('div').toggleClass('class1 class2'); } }) </script> </head> <body> <button>添加</button> <button>删除</button> <button>切换</button> <div></div> </body> </html>
四. jQuery文本值相关的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery文本值相关的方法</title>
<script src="../jquery-3.5.1.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
div{
margin-top: 10px;
width: 100px;
height: 100px;
border: 2px solid black;
}
</style>
<script>
$(function(){
var btns = document.getElementsByTagName('button');
// html: 和原生js里的innerHTML一样
btns[0].onclick = function(){
$("div").html('<p>这是段落<span>内有span</span></p>'); // 设置html
}
btns[1].onclick = function () {
console.log($("div").html()); // 获取html
}
// text: 和原生js里的innerText一样
btns[2].onclick = function () {
$("div").text('<p>这里有一段字符串</p>'); // 设置文本
}
btns[3].onclick = function () {
console.log($("div").text()); // 获取文本
}
// val: 可以返回任意元素的值,包括select。如果多选，将返回一个数组，其包含所选的值。
btns[4].onclick = function () {
$("input").val('请输入文字....'); // 设置值
}
btns[5].onclick = function () {
console.log($("input").val()); // 获取值
}
})
</script>
</head>
<body>
<button>设置html</button>
<button>获取html</button>
<button>设置text</button>
<button>获取text</button>
<button>设置value</button>
<button>获取value</button>
<div></div>
<input type="text">
</body>
</html>
五. jQuery操作css样式的方法
-
css方法设置有三种方式：
-
逐个设置
$('div').css('width', '100px'); $('div').css('height', '100px'); $('div').css('background', 'aqua'); -
链式设置
$('div').css('background', 'aqua').css('width', '50px').css('height', '50px');- 如果设置大于3个，建议分开否则可读性会变差
-
批量设置
$('div').css({ width : '200px', height : '200px', background : 'black' })- 更简单，看上去更直观。推荐使用这种
-
-
获取css样式值
console.log($('div').css('width'));
六. jQuery位置和尺寸的操作方法
-
offset(): 获取或设置元素距离窗口的偏移位
-
获取:
console.log($('.box1').offset().left); -
设置：
$('.box2').offset({ left : 50 })
-
-
position(): 获取元素距离定位元素的偏移位，只能获取不能设置
console.log($('.box2').position().left); -
完整代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery位置和尺寸的操作方法</title> <script src="../jquery-3.5.1.js"></script> <style> *{ margin: 0; padding: 0; } .box1{ width: 150px; height: 150px; background: aquamarine; border: 50px solid rgb(92, 134, 28); margin-left: 100px; position: relative; } .box2{ width: 50px; height: 50px; background: gray; position: absolute; left: 50px; top: 50px; } button{ margin-top: 10px; } </style> <script> $(function(){ var btns = document.getElementsByTagName('button'); btns[0].onclick = function(){ // 获取元素宽度 console.log('width: ', $('.box1').width()) // offset(): 获取或设置元素距离窗口的偏移位 $('input').val($('.box1').offset().left); // 获取元素距离窗口的偏移位 // position(): 获取元素距离定位元素的偏移位，只能获取不能设置 console.log('box2PositionLeft: ', $('.box2').position().left); } btns[1].onclick = function () { // 设置元素距离窗口的偏移位 $('.box2').offset({ left : $('input').val() }) } }) </script> </head> <body> <div class="box1"> <div class="box2"></div> </div> <button>获取</button> <button>设置</button> <input type="text"> </body> </html>
七. jQuery的scrollTop方法
-
获取和设置滚动的偏移位
// 获取滚动的偏移位 console.log($('.text').scrollTop()) // 设置滚动的偏移位 $('.text').scrollTop(300) -
获取和设置网页滚动偏移位
// 为了游览器的兼容，要按以下方式写 // 获取 console.log($('html').scrollTop() + $('body').scrollTop()); // 设置 $('html').scrollTop(300) + $('body').scrollTop(300);
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
