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>
tab栏 jquery 实现
<!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>
轮播图 定时器 fadeIn/fadeOut