51 jquery 节点操作和 bootstrapt
jquery 和 bootstrapt
1.jquery each 函数
1.each 循环方式一:
可循环对象: var arr =["alex","deng","wang"] 或 var dic ={"name":"deng","age":18}
$.each(可循环对象,function(index,value){})
2.each 循环方式二:
$("选择器").each(function(){})
例子:
$("p").each(function () {
if ($(this).html()=="yuan"){
// return false // 类似break
return // 类似continue
}
//console.log(this.innerHTML); // this 当前循环的dom对象
console.log($(this).html()); // this 当前循环的dom对象
//$(this).html($(this).html()+"!")
})
3.节点操作
1.创建节点
$("<p>")
2.添加节点
$("父节点").append("<p></p>") //可以直接添加标签字符串
$("父节点").append($("<p>"))
3.删除节点
$("p").remove()
4.替换节点
$("旧节点").replaceWith("新节点")
5.克隆节点
$("p").clone()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.3.1.js"></script> </head> <body> <div class="box"> <div class="item"> <button>+</button><input type="text"> </div> </div> <script> $("button").click(function () { var obj = $(this).parent().clone(); //box最后添加一个孩子,在把button中的按钮的加号改为— $(".box").append(obj).children().last().children(":first").html("-").attr("class","rem"); }); $(".box").on("click",".rem",function () { $(this).parent().remove(); }) </script> </body> </html>
4.获取和设置query(input)对象的value值
1. $("input").val() //获取属性值
2. $("input").val("值") //设置属性值
$("td").html("<input type ='text'>") //可以直接 替换的作用,标签替换文本 便签《======》文本
5.轮播图中涉及的知识点:
1.定时器操作:
设置定时器 var ID = setIntval(GO_R,1000); //自动轮播的时候开启定时器
清除定时器 clearInval(ID) // 鼠标悬停在大框上时,清除定时器,移开时又开起定时器
该处用到 .hover 事件,接两个函数,第一个函数为鼠标在其上要进行的操作,第二个函数为鼠标移开时要进行的操作
// 停止定时器 .hover 事件 括号中接两个函数
$(".outer").hover(function(){},function(){})
$(".outer").hover(function () {
console.log(123);// 暂停定时器
clearInterval(ID)
},function () {
ID=setInterval(GO_R,2000);
})
2. 淡入淡出
fadeIn(时间) :淡入
fadeOut(时间):淡出
$("li").stop():表示停下之前的操作,直接跳到当前的操作。主要是防止用户连续点击后,图片跳转不过来
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);//淡入或淡出经过一秒完成
$(".num li").eq(index).addClass("active").siblings().removeClass("active")
3.$(this).index() 获取索引值,鼠标放在li小圈上,可以用
$(".num li").mouseover(function () {
console.log($(this).index());
$(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
$(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active")
index=$(this).index()
})
二.bootstrapt
1.注意事项:
1. bootstrapt 是基于jquery的,所有在导入bootstrapt 文件时,需要先导入jquery
2.bootstrapt 中文文档地址:https://v3.bootcss.com
2.Bootstrapt 尺寸控制
1.宽度的控制
栅格系统 :需要用层div,外层设置class ="row" 属性,内层div 设置class ="col-md-num"属性,内层div装input标签
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>
2.高度
3.大小的控制
-lg , -md ,-sm , -xs
<input type="button" class="btn btn-danger btn-xs" value="anwo">
<input type="button" class="btn btn-danger btn-sm" value="anwo">
<input type="button" class="btn btn-danger btn-md" value="anwo">
<input type="button" class="btn btn-danger btn-lg" value="anwo">
3.颜色控制
文本颜色 text-muted , -primary ,-success ,-info ,-warning, -danger
情境背景色: bg-primary, bg-success, -info,-warning,-danger
按钮色 :btn-primary , ......
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <style> .container .row td{ padding: 10px; } #box{ padding-top:50px; } .add{ margin:20px 0; } td{ width: 15%; } </style> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-10 col-lg-offset-1" id="box" > <div> <button type="button" class="btn btn-success add" data-toggle="modal" data-target="#myModal"> 添加员工信息 </button> </div> <table class="table table-striped"> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>部门</th> <th>薪水</th> <th>操作</th> </tr> <tr> <td>1</td> <td>张三</td> <td>23</td> <td>销售部</td> <td>3000</td> <td> <button class="btn btn-danger btn-sm del">删除</button> <button class="btn btn-info btn-sm edit">编辑</button> <button class="btn btn-primary btn-sm">查看</button> </td> </tr> <tr class="handle"> <td>2</td> <td>李四</td> <td>32</td> <td>保安部</td> <td>5000</td> <td> <button class="btn btn-danger btn-sm del">删除</button> <button class="btn btn-info btn-sm edit">编辑</button> <button class="btn btn-primary btn-sm">查看</button> </td> </tr> </table> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-md-5 col-lg-offset-3"> <form class="add_form edit_form"> <div class="form-group"> <label for="username">姓名</label> <input type="text" class="form-control" id="username" placeholder="username"> </div> <div class="form-group"> <label for="age">年龄</label> <input type="text" class="form-control" id="age" placeholder="age"> </div> <div class="form-group"> <label for="dep">部门</label> <input type="text" id="dep" placeholder="dep" class="form-control"> </div> <div class="form-group"> <label for="salary">薪水</label> <input type="text" class="form-control" id="salary" placeholder="salary"> </div> </form> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary add_save">Save changes</button> <button type="button" class="btn btn-primary edit_save" style="display: none">Save changes</button> </div> </div> </div> </div> <script> // 提炼出一个创建tr的函数 function createTr(){ var $tr=$("<tr>"); var l=$("tr").length; $tr.append("<td>"+l+"</td>") $(".add_form :text").each(function(){ $tr.append($("<td>").html($(this).val())) }); $handle="<td><button class=\"btn btn-danger btn-sm del\">删除</button> <button class=\"btn btn-info btn-sm edit\">编辑</button> <button class=\"btn btn-primary btn-sm\">查看</button></td>" $tr.append($handle); return $tr } // 添加按钮 $(".add_save").click(function(){ $("#myModal").modal("hide"); var $tr=createTr(); $(".table tbody").append($tr); $(".add_form :text").val(""); }); // 删除按钮 $("table").on("click",".del",function(){ $(this).parent().parent().nextAll().children(":first").each(function () { $(this).html(parseInt( $(this).html())-1) }); $(this).parent().parent().remove(); }); //编辑按钮 $("table").on("click",".edit",function(){ $(this).attr("class","btn btn-warning btn-sm keep").html("保存"); console.log($(this).parent().prevAll(":lt(4)")); $(this).parent().prevAll(":lt(4)").each(function () { let val=$("<input type='text' class='edit_input'>").val($(this).html()) $(this).html(val) }) }); /* $("table").on("click",".edit",function(){ var $edit_obj=$(this).parent().parent(); var arr=[]; $(this).parent().siblings().each(function(){ arr.push($(this).text()) }); $(".edit_form :text").each(function(i){ $(this).val(arr[i]) }); $("#myModal").modal("show"); $(".edit_save").show().prev().hide(); $(".edit_save").click(function(){ $("#myModal").modal("hide"); // 创建tr标签 var $tr=createTr(); $edit_obj.replaceWith($tr); $(".edit_save").hide().prev().show(); }); }) */ // 保存事件 $("table").on("click",".keep",function(){ $(this).parent().prevAll(":lt(4)").each(function () { let val=$(this).children("input").val(); $(this).html(val) }); $(this).attr("class","btn btn-info btn-sm edit").html("编辑"); }); /* $("table").on("blur",".edit_input",function(){ console.log(">>>",$(".edit_input").parent()) $(this).parent().parent().find(".keep").attr("class","btn btn-info btn-sm edit").html("编辑"); $(".edit_input").parent().each(function () { let val=$(this).children("input").val(); $(this).html(val) }); }) */ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ margin: 100px auto; width: 70%; } ul{ list-style: none; background-color: gray; height: 40px; line-height: 40px; } ul li{ display: inline-block; width: 80px; margin-left: 40px; } .content{ margin-top: -15px; } .content div{ height: 200px; background-color: lightgoldenrodyellow; } .active{ background-color: #e4393c; color: white; text-align: center; } .hide{ display: none; } </style> </head> <body> <div class="box"> <ul> <li rel="introduce" class="active"> 商品介绍</li> <li rel="after-sale"> 售后</li> <li rel="comment"> 评价</li> </ul> <div class="content"> <div class="introduce">商品介绍....</div> <div class="after-sale hide">售后....</div> <div class="comment hide">评价....</div> </div> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> /* $("ul li").click(function () { $(this).addClass("active").siblings().removeClass("active"); let val=$(this).attr("rel"); $("."+val).removeClass("hide").siblings().addClass("hide"); }); */ // JS版本 let lis=document.getElementsByTagName("li"); for (var i=0;i<lis.length;i++){ lis[i].onclick=function () { this.classList.add("active"); let val=this.getAttribute("rel"); let rel2=document.getElementsByClassName(val)[0]; rel2.classList.remove("hide"); for (var j=0;j<lis.length;j++){ if(lis[j]!=this){ // 去除样式 lis[j].classList.remove("active"); // 隐藏内容 let val=lis[j].getAttribute("rel"); let rel_sib=document.getElementsByClassName(val)[0]; rel_sib.classList.add("hide"); } }; } } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <style> .outer{ margin: 100px auto; width: 590px; height:470px ; border: solid red 1px; position: relative; } .outer ul{ list-style: none; } ul.img li{ position: absolute; top: 0; left: 0; } .num { width: 100%; position: absolute; left: 40px; bottom: 20px; list-style: none; ;} .num li{ display: inline-block; width: 30px; height: 30px; background-color: gray; margin-left: 40px; border-radius: 50%; text-align: center; line-height: 30px; } .btn{ position: absolute; top: 50%; width: 60px; height: 90px; background-color: darkgray; font-size: 36px; text-align: center; line-height: 70px; margin-top: -45px; opacity: 0.4; } .btn:hover{ opacity: 1; } .left{ left:0; } .right{ right:0 } .hide{ display: none; } .active{ background-color: red!important; } </style> </head> <body> <div class="outer"> <ul class="img"> <li><a href=""><img src="img/1.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/2.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/3.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/4.jpg" alt=""></a></li> <li class="hide"><a href=""><img src="img/5.jpg" alt=""></a></li> </ul> <ul class="num"> </ul> <div class="action"> <div class="left btn"> < </div> <div class="right btn"> > </div> </div> </div> <script> // 动态添加num li let img_num=$("ul.img li").length; let s for(var i=0;i<img_num;i++){ if (i==0){ s="<li class='active'></li>" }else{ s="<li></li>" } $(".num").append(s) } // 自动轮播 var ID=setInterval(GO_R,2000); var index=0; function GO_R() { if(index==img_num-1){ index=-1; } index++; $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); $(".num li").eq(index).addClass("active").siblings().removeClass("active") } function GO_L() { if(index==0){ index=img_num; } index--; $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000); $(".num li").eq(index).addClass("active").siblings().removeClass("active") } // 停止定时器 $(".outer").hover(function () { console.log(123)// 暂停定时器 clearInterval(ID) },function () { ID=setInterval(GO_R,2000); }) // 手动轮播 $(".right").click(function () { GO_R() }); $(".left").click(function () { GO_L() }) // 悬浮显示 $(".num li").mouseover(function () { console.log($(this).index()); $(".img li").eq($(this).index()).stop().fadeIn(1000).siblings().stop().fadeOut(1000); $(".num li").eq($(this).index()).addClass("active").siblings().removeClass("active") index=$(this).index() }) </script> </body> </html>
有疑问可以加wx:18179641802,进行探讨