一、操作属性
attr() 方法设置或返回被选元素的属性值;
2.document.write($('div>img').attr('src'));//返回属性值
3.$('span').attr('class','cent');//设置单个类属性，注意，因前面标有class，故在类名那里不要加点号
4.removeAttr()从被选元素中移除属性; 如$('span').removeAttr('id','cent2');
二、添加元素:
1.元素内部添加：
append()在被选元素的结尾插入内容;如$('span').append('插入的内容');
prepend()在被选元素的开头插入内容;如$('.cent1').prepend('元素之前插入的内容');
after()在被选元素之后插入内容; 如$('div').after('被选元素之后插入的内容');
before()在被选元素之前插入内容;如$('div').before('被选元素之前插入的内容');
2.删除元素:
remove() 方法删除被选元素及其子元素;如$('div').remove();
empty() 方法删除被选元素的子元素;如$('span').empty();
三、元素添加删除与操作完整代码如下
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq操作属性、添加元素、删除元素</title>
<style type="text/css">
.cent{
margin: 0 auto;
font-size: 30px;
color: red;
}
#cent{
background: pink;
}
</style>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>
<br class="cent1" id="cent2">
<img src="static/images/1.gif">
<br>
<span><a href="">好好学习，天天向上</a></span>
<br>
</div>
<script type="text/javascript">
//操作属性
$(function(){
//attr() 方法设置或返回被选元素的属性值;
//document.write($('div>img').attr('src'));//返回属性值
//$('span').attr('class','cent');//设置单个类属性，注意，因前面标有class，故在类名那里不要加点号
$('span').attr({'class':'cent1','id':'cent2'})//设置多个类属性，注意，多个选择器添加类，要添加大括号
//removeAttr()从被选元素中移除属性;
$('span').removeAttr('id','cent2');
// 添加元素:
// 元素内部添加：
//append()在被选元素的结尾插入内容;
$('span').append('插入的内容');
//prepend()在被选元素的开头插入内容;
$('.cent1').prepend('元素之前插入的内容');
//after()在被选元素之后插入内容;
$('div').after('被选元素之后插入的内容');
//before()在被选元素之前插入内容;
$('div').before('被选元素之前插入的内容');
//删除元素:
//remove() 方法删除被选元素及其子元素;
//$('div').remove();
// empty() 方法删除被选元素的子元素;
$('span').empty();
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四、评论点赞案例
实例
<!DOCTYPE html>
<html>
<head>
<title>评论功能练习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/style.css">
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="list">
<div class="box clearfix">
<!-- 删除说说按钮 close-->
<a class="close" href="javascript:;">×</a>
<img class="head" src="static/images/1.png" alt="">
<div class="content">
<div class="main">
<p class="txt">
<span class="user">西门大官人: </span>
~ All the luck is for you. ~
</p>
<img class="pic" src="static/images/img1.jpg" alt="">
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<!-- 给说说点赞 praise -->
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>
<!--评论内容-->
<div class="comment-list">
<!-- 每次评论要添加的内容跟标签 -->
<div class="comment-box clearfix" user="self">
<img class="myhead" src="static/images/4.jpg" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">我:</span>你说的都对……</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
<!--添加结束-->
</div>
<!--评论内容结束-->
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
<div class="box clearfix">
<a class="close" href="javascript:;">×</a>
<img class="head" src="static/images/2.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">欧阳克 : </span>三亚的海滩很漂亮。
</p>
<img class="pic" src="static/images/img5.jpg" alt=""/>
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="0" style="display: none;"></div>
<div class="comment-list">
<div class="comment-box clearfix" user="other">
<img class="myhead" src="static/images/3.png" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">韦小宝：</span>我也想去三亚。</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
</div>
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.comment').on('keyup',function(){//on() 方法可以在被选元素及子元素上添加一个或多个事件处理程序; 绑定事件 动态绑定
//完成在评论框输入文字，评论输入框右下角的字数在减少效果
var lenth=$(this).val().length;//这里的this就相当于.comment
$(this).parents('.text-box').find('.length').text(140-lenth);
})
$(document).on('click','.btn',function(){
var val=$(this).parents('.text-box').find('.comment').val();//获取文本框中输入的内容
// var val=$(this).prev().val();
if (val=='') {
alert("请输入内容。。。");
}else{
var date=new Date();
var time=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();//获取时间日期
// var y=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
//添加评论标签
var html='<div class="comment-box clearfix" user="self"><img class="myhead" src="static/images/4.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>'+val+'你说的都对……</p><p class="comment-time">'+time+'<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a><a href="javascript:;" class="comment-operate">删除</a></p></div></div>'
//输出评论内容
$(this).parents('.box').find('.comment-list').append(html);
//清空文本框内容
$(this).parents('.box').find('.comment').val("");
}
})
//删除评论内容
$(document).on('click','.comment-operate',function(){
if (confirm("确定删除")) {//confirm()是一个类似于alert()弹窗提示
$(this).parents('.comment-box').remove();//找到当前删除按钮的父级元素并删除
}
})
//添加点赞个数
$(document).on('click','.comment-praise',function(){
var num=parseInt($(this).parents('.comment-box').find('.comment-praise').attr('total'))+1;//parseInt是把字符串转换为整数
$(this).attr('total',num);//注意num的前面是逗号，不是分号
$(this).html(num+'赞');
})
})
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例