jQuery对元素属性的操作
设置或获取元素的固有属性prop()
固有属性就是元素自带的属性,比如<a>元素里的href <img>的 src <input>的type
获取属性语法:
prop('属性')
设置属性语法:
prop('属性','属性值')
设置或获取元素的自定义属性attr()
固有属性就是元素自带的属性,比如给div添加 index = '1'
获取属性语法:
attr('属性') // 类似原生 getAttribute()
设置属性语法:
attr('属性','属性值') // 类似原生 setAttribute()
数据缓存data()
data()方法可以 在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除
附加缓存数据语法
data("name","value") // 向被选元素附加数据
获取缓存数据语法
data("name")// 向被选元素获取数据
获取元素内部文本
<div>
<span>123</span>
</div>
<input type="text" value="这里填写你的年龄">
获取元素内部html文本
console.log($('div').html()); // <span>123</span>
获取元素内部纯文本
console.log($('div').text()) // 123
修改元素内步html文本
$('div').html('<p>546</p>')
修改元素内部纯文本
$('div').text('456')
获取输入框的内容
console.log($('input').val()) // 这里填写你的年龄
修改输入框的内容
$('input').val('789')
jQuery each方法
each 主要是进行遍历 对元素进行创建、添加、删除元素等操作。
jQuery隐式迭代是对同一类元素做了同样的操作。如果要给同一类元素做不同的操作,就需要用到遍历。
each() 方法遍历匹配每一个元素主要用DOM处理 each每一个
里面的回调函数有2个参数:index是每个元素的索引号,domEle 是每个DOM元素对象,不是jquery对象
使用jquery方法 需要给这个dom元素转换为jquery对象$(domEle)
语法1
$("div").each(function(index,domEle){xxxx})
语法2 主要用来遍历数据
$.each(object,function(index,element){xxxx})
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
let colorArr = ['#41a124','#f35','#457ca4','#a5b7a4','#845123'],
uuj = {
'名字':'方硕',
'年龄':'19',
'身高':'191cm',
},
sum = 0;
$('div').each(function (i,ele) {
console.log(i)
$(ele).css('color',colorArr[i])
sum += parseFloat($(ele).text())
})
sum.toFixed(2)
console.log(sum);
// 处理数组 i 是索引值 ele是对应内容
$.each(colorArr,function (i,ele) {
console.log(ele)
})
// 处理对象 i 是key ele是 value
$.each(uuj,function (i,ele) {
console.log(ele)
console.log(i);
})
</script>
jQuery对元素的动态操作
创建元素
let abc = $("<li></li>")
添加到页面中
内部添加元素
$("ul").append(abc) // 内部添加并且放到内容的最后面
$("ul").prepend(abc) // 内部添加并且放到内容的最前面
外部添加元素
$("ul").after("内容") // 把内容放入元素后面
$("ul").before("内容") // 把内容放入元素前面
内部添加元素,生成之后它们是父子关系
外部添加元素,生成之后它们是兄弟关系
删除元素:
$('div').remove()//删除匹配的元素(自身)
$('div').empty()//删除元素内部所有的子节点
$('div').html('')// 清空匹配的元素内容
发布信息的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0.js"></script>
<link rel="stylesheet" href="../Double%20thread/initialize.css">
<style>
#weobo{
width: 720px;
height: auto;
padding: 24px;
margin: 0 auto;
border: 1px solid #cccccc;
position: relative;
}
.txt{
width: 100%;
}
button{
position: absolute;
right: 32px;
top: 200px;
}
ul{
transition: all 0.2s ease;
}
li{
padding: 6px 12px;
display: none;
position: relative;
}
li a{
position: absolute;
right: 0;
top: 4px;
}
a{
cursor: pointer;
}
</style>
</head>
<body>
<div id="weobo">
<p>发布微博</p>
<textarea name="" id="" cols="30" rows="10" class="txt"></textarea>
<button>发布</button>
<ul></ul>
<script>
$('button').on({
click:function () {
let vall = $('.txt').val()
if (vall == '') {
alert("空的不能发布")
return false
} else {
let li = $('<li>' + vall + ' <a>删除</a></li>')
$('ul').prepend(li)
$('li').slideDown(200)
$('.txt').val('')
}
}
})
$('ul').on('click','a',function () {
$(this).parent().slideUp(200,function(){
$(this).remove()
})
})
</script>
</div>
</body>
</html>