jq操作属性，添加删除元素，两个案例（购物车案例完善，说说文本框字数倒数及添加评论），作业（说说点赞删除功能）2019年1月23日22时 - 作业

Home > List of blog posts > jq操作属性，添加删除元素，两个案例（购物车案例完善，说说文本框字数倒数及添加评论），作业（说说点赞删除功能）2019年1月23日22时

Blogger Information

Blog 42

fans 2

comment 0

visits 53949

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE HTML>
<html>
<head>
<title>脚本</title>
<meta charset="utf-8"/>
<link rel="icon" type="image/x-icon" href="images/2.png"> 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
* {margin: 0px auto;padding: 0px;}
.top {width: 402px;height: 35px;line-height: 35px;text-align:center;margin-top: 50px;background: #C40000;color:#fff;}
.main {width: 400px;height: 400px;border: 1px solid #C40000;}
p {width: 400px;height: 26px;margin-top:10px;}
b {width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;border: 1px solid #ccc;   
   float: left;margin-left: 5px;}
span {width: 90px;height: 26px;line-height: 26px;text-align: center;font-size: 12px;color:#838383;border: 1px solid #ccc;
	 display: block;float: left;margin-left: 5px;}
span:hover {cursor: pointer;}
button {width: 120px;height: 35px;background: #C40000;color: white;border: 0px;}
button:hover {cursor: pointer;}
.notice{border:0px;}
.select {width: 88px;height: 24px;
	line-height: 24px;
	border : 2px solid #ff0000;
	color: red;
}
</style>
</head>
<body>
	<div class="top">请选择信息后加入购物车</div>
	<div class="main">
		<p class="item" name="version">
			<b class="notice">版本</b>
			<span>ONE A2001</span>
			<span>ONE A0001</span>
			<span>ONE A1001</span>
		</p>
		<p class="item" name="color">
			<b class="notice">机身颜色</b>
			<span>白色</span>
			<span>黑色</span>
			<span>金色</span>
		</p>
		<p class="item" name="type">
			<b class="notice">套餐类型</b>
			<span>标配</span>
			<span>套餐一</span>
			<span>套餐二</span>
		</p>
		<p class="item" name="ram">
			<b class="notice">运行内存</b>
			<span>2GB</span>
			<span>3GB</span>
			<span>4GB</span>
		</p>
		<p class="item" name="rom">
			<b class="notice">机身内存</b>
			<span>16GB</span>
			<span>32GB</span>
			<span>64GB</span>
		</p>
		<p class="item" name="location">
			<b class="notice">产地</b>
			<span>中国大陆</span>
			<span>港澳台</span>
		</p>
		<p class="item" name="price">
			<b class="notice">价格</b>
			<span>999元抢购</span>
		</p>
		<p class="item1" name="num">
			<b class="notice">数量</b>
			<input type="number" value="1" style="width:40px;height:26px;">
		</p>

		<p style="margin-top:30px;margin-left:95px;">
			<button class="bu1" id='sub'>加入购物车</button>
		</p>
	</div>
	<script type="text/javascript">
	$(function(){
		$("span").click(function(){
     	 	if($(this).hasClass("select")){// 匹配span中是否带有class为select
     	 		$(this).removeClass("select");//含有就清除
     	 	}else {
     	 		$(this).addClass("select").siblings("span").removeClass("select");
     	 	}//没有就添加上select的class名，同时匹配同级span，清除同级其他span中的选中样式
	     });
         
         $('#sub').click(function(){
            let form={}//创建一个对象, 用来存选中的数据的
            let flag=true //能不能加入购物车
			let flag1 = true;
            // 判断是否每个选项都选中; 没选中则弹窗警告; 选中了则添加至需要发送的表单数据里面
			let msg = [];
           $('.item').each(function(){//each() 方法规定为每个匹配元素规定运行的函数
           	  if($(this).children('span.select').length!=1){
           	  	// alert($(this).find('.notice').html()+'未选中')
           	  	flag=false;
				msg += $(this).children('.notice').text() + ',';
           	  }else{
                 let key=$(this).attr('name');//获取当前p标签的 name属性值 不同的p属性名不一样
                 let value=$(this).children('span.select').html()//获得被选中的商品类型
                 form[key]=value//将键值对一一对应
           	  }

           })
           //判断数量最少为1
           // val()设置或返回表单字段的值
            if($('.item1 input').val()<=0){
            	
            	flag1=false;
            }else{
            	//将用户输入商品件数放进form中
            	form['num']=$('.item1 input').val()
            	console.log(form)
            }
            if(flag && flag1) {
            	alert('可以加入购物车了')
            } else if (flag == false && flag1 == true) {
				alert(msg+'没有填');
			} else if (flag == true && flag1 == false) {
				alert('数量最少为1');
			} else {
				alert(msg+'没有填  '+'|'+'  数量最少为1');
			}
         })








	});
</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">
</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 src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
    // 评论框里输入  下面的字数减少的效果
    $(function(){
        // 在文本框comment上添加动态绑定on  绑定keyup事件
        $('.comment').on('keyup', function(){
            // 把当前文本框的value值的字数赋给 len
            var len = $(this).val().length;
            // 找到文本框的父级然后在find下面的.length，他的内容就是140-输入框的字数
            $(this).parent().find('.length').text(140-len);

        });

        // 给document下所有的.tbn绑定点击事件
        $(document).on('click', '.btn', function(){
            // 获取评论框（.btn的向上相邻兄弟）里输入的内容 
            var val = $(this).prev().val();
            // 获取当前时间 设置成指定的格式
            var d = new Date();
            var timetxt = d.getFullYear()+'-'+d.getMonth()+'-'+d.getDay()+'    '+ d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
            // 将添加留言的html放在变量里
            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">'+ timetxt +'<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>';

            // 先判断里面内容是否为空
            if (val =='') {
                alert('输入内容不能为空');
            } else {
                // 找到在.btn .comment-list之上的父元素.content 然后在.content之下的.comment-list插入要评论的html
                $(this).parents('.content').find('.comment-list').append(html);
                // 回复以后 文本框内容清空  字数清零
                $(this).prev().val('');
                $(this).parents('.content').find('.length').text('0');
                // 文本框也应该便会原来的高度
                $(this).prev().height(20);
            }           
        });

        // 文本框点击时应该变高
        $('.comment').on('click', function(){
                $(this).height(80);
        });

        // 点赞变亮
        $('.info>a').on('click', function(){
            // 第一种方法
            // if ($(this).hasClass('praise')) {
            //     $(this).removeClass('praise');
            //     $(this).addClass('praise_2');
                
            // } else {
            //     $(this).removeClass('praise_2');
            //     $(this).addClass('praise');
            // }
            // 第二种方法
            $(this).toggleClass('praise');
            $(this).toggleClass('praise_2');
            
        });

        // 点赞+1
        $('.comment-praise').on('click', function(){
            var count = parseInt(($(this).text()));
            count ++;
            $(this).text(count+'赞');
            
        });

       
        // // 删除评论
        // $(document).on('click', '.comment-operate', function(){
        //     $(this).parents('.comment-box').remove();
        // });
        // // 整个用户界面删除
        // $(document).on('click', '.close', function(){
        //     $(this).parents('.box').remove();
        // });

        // 删除通用方法
        function del(tar, par){
            $(document).on('click', tar, function(){
                $(this).parents(par).remove();
            });
        }
        del('.close', '.box');
        del('.comment-operate', '.comment-box')
    })
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结：

1、attr()操作的时元素内置的属性，不是css的样式属性

2、添加元素有指定元素内外之分；

3、remove和empty删除元素有区别，一个删除元素里面的包括子元素，一个只是删除里面的子元素

4、购物车的完善案例，如同昨天想的，老师代码比较简洁，思路清晰，这里用到了each变量，通过遍历item，然后找的每个item下面没有select样式的就给一个“开关”变量false，有select的item就把name值和span的value值通过一个对象form[key]=value保存起来，然后接着判断商品数量小于1给开关”变量false弹出数量不能小于1，最后一个if判断，如果有false 那么就弹出完善参数，如果没问题就把所有参数添加购物车输出form；

5、作业购物车完善多个未选参数及手机数量小于1的清空一起弹出，我是这样做的，先再给一个“开关”变量flag1，和一个把所有参数名称存放在一起的变量txt，然后针对未选的参数就通过each循环里if($(this).children('span.select').length!=1)下通过+=把参数的名称存在txt中，然后在数量小于1的判断中去掉弹窗给新开关”变量flag1一个false值，最后在通过if多分枝判断输出出现的各种情况

6、说说案例，主要时文本框keyup click 和回复按钮的click时间，这里学到了on动态绑定事件，给$(document)添加on事件实际上就是给了一个范围，意思就是在doucument下所有的.btn都有绑定的事件和规定好的处理方法，而开始的没有$(document)的动态绑定on，我做作业实验中得出结论他对通过jq或者js新生成的相同的元素不起作用，所有这就是他们的区别；

7、作业说说的点赞删除，首先时点赞点亮图标，他的选择器要通过.info>a找到元素，而且用新学的toggleClass方法，实际上这个方法就是加上判断的增加移除class的简写；点按数目自增需要找到点赞按钮的文本值然后取整在自增；最后的删除方法，我是通过做完两个删除按钮后，把重复的代码封装在一起得出的统一的删除方法，这里需要注意的就是，通过上面事件新增的评论内容如果只是通过单纯的在删除按钮上添加删除事件，那么新增的评论内容是不起作用的，所有我仿照老师的做法在doucument上绑定动态事件，结果就成功了。

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html文档结构、css选择器和盒模型初探（html文档结构说明，常用的标签，常用的css选择器及优先级，盒模型内外边距边框线）2019年1月14日22时45分

2019-01-15 17:40:32