本节内容:
1、jQuery的each循环
2、jQuery的节点操作
3、jquery命令查看css尺寸
4、jQuery的扩展方法
5、bootstrap的介绍
6、bootstrap的格栅
7、boostrap的样式
一、jQuery相关操作(2)
1、each循环(jquery支持两种循环方式:)
我们知道,
$("p").css("color","red")
是将css操作加到所有的标签上,内部维持一个循环;
但如果对于选中标签进行不同处理,这时就需要对所有标签数组进行循环遍历啦
1、each方式一
格式:$.each(obj,fn)
// each循环方式1:($.each(obj,fn):通过类方法)
let arr=["111", "222","333"]; // 创建数组对象
let obj={"name":"shuying","age":18}; // 创建object对象
for (var i=0;i<arr.length;i++){
console.log(i); // for循环的话我们无法直接拿到值
}
$.each(arr,function (i,j) {
console.log(i,j) // each循环可以直接拿到索引和值
});
$.each(obj,function (i,j) {
if (j=="shuying"){
console.log("真溜")
}
console.log(j) // 直接可以拿到值
});
Js
Copy
2、each方式二
格式:$("").each(fn)
// each循环的方式2:($("").each():对象方法)
$("p").each(function () {
if ($(this).html()=="yuan"){
// return false // 类似break,each循环内会识别
return // 类似continue
}
// console.log(this.innerHTML); // 这时循环拿到的this是DOM对象,不是jQuery对象
console.log($(this).html()); // this转换成jQuery对象,使用jQuery方法
// 给标签文本赋值,$("").html("新内容")
// $(this).html($(this).html()+"!")
Js
Copy
3、each扩展
关于each循环的跳出循环,和跳出本次循环。
return false // 类似break,each循环内会识别
return // 类似continue
代码示例
/*
function f(){
for(var i=0;i<4;i++){
if (i==2){
return
}
console.log(i)
}
}
f(); // 这个例子大家应该不会有问题吧!!!
//-----------------------------------------------------------------------
li=[11,22,33,44];
$.each(li,function(i,v){
if (v==33){
return ; // ===试一试 return false会怎样?
}
console.log(v)
});
//------------------------------------------
// 大家再考虑: function里的return只是结束了当前的函数,并不会影响后面函数的执行
//本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了,
//希望后面的函数也不再执行了!基于此,jquery在$.each里又加了一步:
for(var i in obj){
ret=func(i,obj[i]) ;
if(ret==false){
return ;
}
}
// 这样就很灵活了:
// <1>如果你想return后下面循环函数继续执行,那么就直接写return或return true
// <2>如果你不想return后下面循环函数继续执行,那么就直接写return false
// ---------------------------------------------------------------------
Js
Copy
2、jQuery的文档节点处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
Js
Copy
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script> // 本地jQuery文件
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"> // 本地bootstrap.css文件
</head>
<body>
<h3>员工表格</h3>
<div class="container">
<button class="add_btn btn btn-primary">添加</button>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>1</td>
<td>张三</td>
<td>23</td>
<td>保安</td>
<td>2000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>23</td>
<td>保安</td>
<td>2000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
</tbody>
</table>
<div class="add hide">
<hr>
<form id="form">
<div>
姓名:
<input type="text">
</div>
<div>
年龄:
<input type="text">
</div>
<div>
部门:
<input type="text">
</div>
<div>
薪水:
<input type="text">
</div>
提交
<input type="button" value="submit" class="submit_btn edit_btn">
</form>
</div>
</div>
<script>
// 绑定添加的事件按钮
$(".add_btn").click(function () {
$(".add").removeClass("hide"); // 显示添加输入框
});
// 绑定提交事件
$(".submit_btn").click(function () {
// 创建jquery对象(将内容放入tr标签,最后添加到tbody里就行了)
let $tr=$("<tr>"); // 创建一个tr标签的jQuery对象
// 使ID自增
let ID=$(".tbody tr:last td:first").html(); // 拿到最后一个ID值,自增ID
ID=parseInt(ID)+1; // 把字符串ID转换成int,加一
let $td1=$("<td>"+ID+"</td>"); // 创建td标签ID文本的jQuery对象
$tr.append($td1); // 将td1对象添加到tr标签内作为子标签
// 构建动态的td数据(获取到输入的内容(值),添加到tr标签里,)
$("#form :text").each(function () {
let val=$(this).val(); // jquery对象拿值,$("").val()
let $td_temp=$("<td>"+val+"</td>"); // 创建td标签,把值放入td中
// console.log($td_temp);
$tr.append($td_temp); // 把td标签添加到tr标签中
// 清空已取值的文本框(输入框)
// $(this).val(); // 这样是取值
$(this).val(""); // 这样才是清空,赋值为空
});
// 构建删除按钮标签、编辑标签
$tr.append('<td><button class="del btn btn-danger btn-sm">删除</button> ' +
'<button class="edit btn btn-info btn-sm">编辑</button></td>'); // 注意子标签间空格
// 将tr标签添加到tbody标签中
// console.log($tr.html())
$(".tbody").append($tr); // append参数可以使jQuery对象,也可以是标签,字符串
// $(".tbody").prepend($tr); // 添加到父节点的第一个,最为大儿子
// $(".tbody").appendTo($tr); // 反过来添加,将前面的节点添加到后面节点
// 提交后,隐藏输入框
$(".add").addClass("hide"); // 添加一个class属性,hide
});
// 删除事件
// $(".del").click(function () { // 这样只有原先的有删除事件,新添加的没有,要用事件委派
// $(this).parent().parent().remove();
// })
// 删除事件委派(保证所有的删除事件都可以触发)
$("tbody").on("click","button.del",function () { // 记住类是.类名,不是:类名
$(this).parent().parent().remove();
// 删除后动态改变ID
let ID1=0;
$("tbody tr").each(function () {
ID1=ID1+1;
$(this).children().first().text(ID1); // 重新给ID赋值
})
});
// 编辑事件委派
</script>
</body>
</html>
HTML
Copy
3、动画效果
fe1:显示隐藏
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
$("#hide").click(function () {
$("p").hide(1000);
});
$("#show").click(function () {
$("p").show(1000);
});
//用于切换被选元素的 hide() 与 show() 方法。
$("#toggle").click(function () {
$("p").toggle();
});
})
</script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<p>hello</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
</body>
</html>
HTML
Copy
fe2:滑动
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#slideDown").click(function(){
$("#content").slideDown(1000);
});
$("#slideUp").click(function(){
$("#content").slideUp(1000);
});
$("#slideToggle").click(function(){
$("#content").slideToggle(1000);
})
});
</script>
<style>
#content{
text-align: center;
background-color: lightblue;
border:solid 1px red;
display: none;
padding: 50px;
}
</style>
</head>
<body>
<div id="slideDown">出现</div>
<div id="slideUp">隐藏</div>
<div id="slideToggle">toggle</div>
<div id="content">helloworld</div>
</body>
</html>
HTML
Copy
fe3:淡入淡出
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function(){
$("#in").click(function(){
$("#id1").fadeIn(1000);
});
$("#out").click(function(){
$("#id1").fadeOut(1000);
});
$("#toggle").click(function(){
$("#id1").fadeToggle(1000);
});
$("#fadeto").click(function(){
$("#id1").fadeTo(1000,0.4);
});
});
</script>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
</body>
</html>
HTML
Copy
fe4:回调函数
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-2.1.4.min.js"></script>
</head>
<body>
<button>hide</button>
<p>helloworld helloworld helloworld</p>
<script>
$("button").click(function(){
$("p").hide(1000,function(){
alert($(this).html())
})
})
</script>
</body>
</html>
HTML
Copy
4、css操作
1、css位置操作
("").offset([coordinates]) ("").position()
("").scrollTop([val]) ("").scrollLeft([val])
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test1{
width: 200px;
height: 200px;
background-color: wheat;
}
</style>
</head>
<body>
<h1>this is offset</h1>
<div class="test1"></div>
<p></p>
<button>change</button>
</body>
<script src="jquery-3.1.1.js"></script>
<script>
var $offset=$(".test1").offset();
var lefts=$offset.left;
var tops=$offset.top;
$("p").text("Top:"+tops+" Left:"+lefts);
$("button").click(function(){
$(".test1").offset({left:200,top:400})
})
</script>
</html>
HTML
Copy
2、css尺寸操作
("").height([val|fn]) ("").width([val|fn])
("").innerHeight() ("").innerWidth()
("").outerHeight([soptions]) ("").outerWidth([options])
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function(){
console.log($(".c1").height()); // 内边距
console.log($(".c1").width()); // 内边距
console.log($(".c1").innerHeight()); // 内边距+padding
console.log($(".c1").outerHeight()) // 内边距 + padding + border
});
</script>
<style>
.c1{
width: 200px;
height: 200px;
background-color: skyblue;
padding: 50px;
border:30px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
HTML
Copy
5、扩展方法 (插件机制)
1、jQuery.extend(object)
扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:
<script>
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); // => 2
jQuery.max(4,5); // => 5
</script>
Js
Copy
2、jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)
增加两个插件方法:
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<script src="jquery.min.js"></script>
<script>
jQuery.fn.extend({
check: function() {
$(this).attr("checked",true);
},
uncheck: function() {
$(this).attr("checked",false);
}
});
$(":checkbox:gt(0)").check()
</script>
</body>
Js
Copy
二、bootstrap的介绍
Bootstrap,将一些css样式封装好在模块了,我们引入模块后
使用其命名好的class类的类名,就可以直接使用其定义好的css样式。
从而达到快速开发的目的。
1、bootstrap的格栅
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.3.1.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<style>
.item {
border: 1px solid red; // 设置边框线,方便查看
}
</style>
</head>
<body>
<div class="container-fluid">
<h3>栅格系统</h3>
<div class="row">
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
<div class="col-md-1 item">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8 item">.col-md-8</div>
<div class="col-md-4 item">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4 item">.col-md-4</div>
<div class="col-md-4 item">.col-md-4</div>
<div class="col-md-4 item">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-8 item">.col-md-6</div>
<div class="col-md-6 col-sm-4 item">.col-md-6</div>
</div>
</div>
<hr>
<h4> 列偏移</h4>
<div class="row ">
<div class="col-md-3 item col-md-offset-3">Yuan</div>
</div>
<h4>嵌套列</h4>
<div class="row">
<div class="col-md-6 item">666</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6 item">123</div>
<div class="col-md-6 item">234</div>
</div>
</div>
</div>
<h4>列排序</h4>
<div class="row"> <!-- 定义一行 -->
<div class="col-md-9 item col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 item col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
<hr>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<button class="btn btn-primary add_btn"> 添加</button>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>部门</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="danger">
<td>1</td>
<td>张三</td>
<td>23</td>
<td>保安</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
<tr class="success">
<td>2</td>
<td>李四</td>
<td>23</td>
<td>保安</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>24</td>
<td>销售</td>
<td>20000</td>
<td>
<button class="del btn btn-danger btn-sm">删除</button>
<button class="edit btn btn-info btn-sm">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
HTML
Copy