前端——jQuery
jQuery介绍:
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
- jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。
- 它的宗旨就是：“Write less, do more.“
在使用jQuery时候，需要在body标签的内部后面导入
<script src="jquery-3.2.1.min.js"></script>
SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
jQuery对象和DOM对象之间的转换；
1. jQuery对象转换成DOM对象,用索引取出具体的标签；
2. DOM对象转换成jQuery对象,$(DOM对象)；
jQuery的关键字为$；注意 jQuery对象保存到变量的时候，变量名前面叫上$,方便与DOM区别；
jQuery基础语法
1. 找标签
1. 基本选择器
1. $("ID值")
2. $(".class名")
3. $("标签名")
4. $("*") 找所有
5. $("条件1,条件2") 组合查找
2. 层级选择器
同CSS选择器
1. $("x y");// x的所有后代y（子子孙孙）
2. $("x > y");// x的所有儿子y（儿子）
紧挨和找之后所有的兄弟，都是在同一级的找的;
3. $("x + y")// 找到所有紧挨在x后面的y
4. $("x ~ y")// x之后所有的兄弟y
3. 基本筛选器
1. :first // 第一个
2. :last // 最后一个
3. :eq(index)// 索引等于index的那个元素
4. :even // 匹配所有索引值为偶数的元素，从 0 开始计数
5. :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
6. :gt(index)// 匹配所有大于给定索引值的元素
7. :lt(index)// 匹配所有小于给定索引值的元素
8. :not(元素选择器)// 移除所有满足not条件的标签
9. :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找，也就是往下找)
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
模态框：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
background-color: rgba(0,0,0,0.65);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
}
.modal {
background-color: white;
position: fixed;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin: -200px 0 0 -300px;
z-index: 1000;
}
.hide{
display:none
}
</style>
</head>
<body>
<!--模态框-->
<div class="cover hide"></div>
<div class="modal hide"></div>
<button>点击</button>
<script src="jquery-3.2.1.min.js"></script>
<script src="js_demo.js"></script>
<script>
$("button").on("click",function () {
var $coverElem = $(".cover");
var $modalElem = $(".modal");
$coverElem.removeClass("hide");
$modalElem.removeClass("hide")
})
</script>
</body>
</html>
4. 属性选择器
1. [attribute]
2. [attribute=value] ; 属性等于
3. [attribute!=value]; 属性不等于
5.表单筛选器
:text :password :file :radio :checkbox :submit :reset :button
$(":checkbox") // 找到所有的 type ="checkbox" 的标签
表单对象的属性
:enabled :disabled :checked :selected
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
筛选器方法
1. 上一个
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
2. 下一个
$("#id").next() // 找到下一个
$("#id").nextAll() //找到下面所有的
$("#id").nextUntil("#i2") //往下面找，直到找到id=i2的标签为止；
3. 父元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
4. 儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们， 同一级的
查找(find)
搜索所有与指定表达式 匹配 的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p") //找到div后代有p标签的元素
筛选
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集 中 筛选出 有c1样式类的元素；
.first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
操作标签
样式操作
addClass();// 添加指定的CSS类名。 removeClass();// 移除指定的CSS类名。 hasClass();// 判断样式存不存在 toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
示例：开关灯
2. 直接修改样式
1. 原生DOM .style.color="green"
2. $("div").css("color", "green")
3. 修改多个样式时,传入键值对!!!
.css({},)
3. 位置操作
1. offset --> 获取匹配元素在当前窗口的相对偏移(body，右上角)
2. position --> 获取相对 父标签 的偏移位置
3. scrollTop() 获取匹配元素 相对滚动条顶部 的偏移
4. scrollLeft() 获取匹配元素 相对滚动条左侧 的偏移
例子：
返回顶部示例
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top:200});
});
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
4. 大小
1. height() 内容
2. width()
3. innerHeight() 内容+padding
4. innerWidth()
5. outerHeight() 内容+padding+border
6. outerWidth()
注意:outerHeight()和outerWidth()取得是内容+padding+border
2. 文档操作
1. 操作HTML
.html() --> 类似于 innerHTML ,获取内容和子标签
2. 操作text
.text() --> 类似于 innerText ，获取内容
3. 值
1. val()// 取得第一个匹配元素的当前值，在循环元素 或者 是 元素为数组的话，就只会取到第一个元素；
2. val(val)// 设置 所有匹配元素 的值
3.val([val1, val2]) // 设置多选的checkbox、多选select的值
属性操作:
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio
prop() // 获取属性 removeProp() // 移除属性
$checkboxElem.prop("checked",false); // 设定不选中；
$checkboxElem.prop("checked"）；// 判断是否选中； 选中返回值为true 或者 选不中是false；
对于返回布尔值的比如checkbox、radio和option的是否被选中都用 prop。
文档处理
添加到指定元素内部的后面；
$(A).append(B)// 把B追加到A $(A).appendTo(B)// 把A追加到B
添加到指定元素内部的前面；
$(A).prepend(B)// 把B前置到A $(A).prependTo(B)// 把A前置到B
添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面 $(A).insertAfter(B)// 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B)// 把B放到A的前面 $(A).insertBefore(B)// 把A放到B的前面
清空和移除元素
remove()// 从DOM中删除所有匹配的元素。 empty()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据
克隆
clone() // 参数 // clone方法不加参数true，克隆标签但不克隆标签带的事件 // clone方法加参数true，克隆标签并且克隆标签带的事件
替换
$("p").replaceWith("<b>Hello world!</b>");
//粗体的Hello world! 来替换含有p标签的内容；
$("p").replaceAll("<b>Hello world!</b>");
//含有p标签的内容 来替换 Hello world!；
事件
常用事件：
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件的绑定：
几种所有事情的绑定：
1. 在标签里面写 onclick=foo(this);
2. 原生DOM的JS绑定 DOM对象.onclick=function(){...}
3. jQuery版的绑定事件 jQuery对象.click(function(){...})
今后要用的jQuery绑定事件的方式
jQuery对象.on("click", 选择器（可选的，通过别人来绑定事件的时候，需要填的），function(){...})
1.没有选择器的话，则是jQuery对象触发点击事件后，执行匿名函数；
2.如果有选择器的话，则是该选择器 触发点击事件后，执行 匿名函数，而jQuery对象只是起到了绑定事件的一个作用，例子如下；
$("#t1").on("click", "选择器", function(){...})
适用于 给未来的元素（选择器）(页面生成的时候还没有的标签) 绑定事件 (事件委托)
事件冒泡和事件捕获
利用事件冒泡,给已经存在的标签绑定事件,用来捕获后代标签的事件.
例子：在表格中新添加一行数据，没有绑定相应的事件，所以用已经存在的标签来为这一行数据来绑定事件；
//新增叫的没有绑定编辑和删除的事件，需要通过上级去绑定
var bodyElem = $("body");
bodyElem.on("click", ".edit-btn", function () {...｝
移除事件：
通过off（）方法来 移除 .on()绑定的事件；
bodyElem.off("click", ".edit-btn", function () {...｝
阻止后续事件执行
return false; // 常见阻止表单提交等
页面的载入：
只有当 文档树（DOM树）加载完成后，才能执行jQuery中的对于标签的操作；因此一般把<script>...</script>标签放在body标签的最后面;
DOM执行完后后执行对应的操作；
$(document).ready(function(){
// 写绑定事件的具体操作
});
这样<script>...</script>标签可以放在head里面了；
例子；按住ctrl来批量操作
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>大作业</title>
<style>
.hide {
display: none;
}
#myCover {
top: 0;
right: 0;
left: 0;
bottom: 0;
position: fixed;
background-color: #b0b0b0;
z-index: 999;
}
#myModal {
position: fixed;
width: 400px;
height: 300px;
top: 50%;
left: 50%;
background-color: #f5f5f5;
margin-left: -200px;
margin-top: -150px;
z-index: 1000;
}
.dv1 {
position: absolute;
width: 200px;
height: 200px;
/*定位*/
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
<script src="jquery-3.2.1.min.js"></script>
<script>
<!--整个文档树执行完成后就执行下面的函数-->
$(document).ready(function () {
// 点击 新增按钮时绑定的事件
var $myCover = $("#myCover");
var $myModal = $("#myModal");
var $modalName = $("#modal-name");
var $modalHabit = $("#modal-habit");
var moder;
var $cElem;
var numElen;
//新增
$("#add").on("click", function () {
$myCover.removeClass("hide");
$myModal.removeClass("hide");
moder = 0;
});
//编辑
$(".edit-btn").on("click", function () {
moder = 1;
$myCover.removeClass("hide");
$myModal.removeClass("hide");
var $contenElem = $(this).parent().siblings();
//拿到了含有数据的jQuery对象，用 data 储存起来；
// console.log($contenElem)
var $subElem = $("#modal-submit");
$subElem.data("object", $contenElem);
$cElem = $subElem.data("object");
// console.log($cElem);
for (var i = 0; i < $cElem.length; i++) {
//拿到对应编辑的那一行的编号；
// console.log(moder);
if (i === 1) {
$modalName.val($($cElem[1]).text())
}
if (i === 2) {
$modalHabit.val($($cElem[2]).text())
}
}
});
//删除的操作
$(".delete-btn").on("click", function () {
var $deleteElem = $(this).parent().parent();
numElen = $(this).parent().siblings().first().text();
console.log(numElen);
//找到删除的标签，修改此标签下面的所有标签的序号，都减1，这样删除的时候序号就会自动的变化；
var $nElen = $(this).parent().parent().nextAll();
$nElen.each(function () {
numbElem = $(this).children().first().text();
$(this).children().first().text(parseInt(numbElem)-1);
});
console.log($nElen);
$deleteElem.html("");
});
//模态框的取消按钮绑定事件；
$("#modal-cancel").on("click", function () {
$("#modal-name").val("");
$("#modal-habit").val("");
$myCover.addClass("hide");
$myModal.addClass("hide");
});
//模态框的提交按钮绑定事件；
var $modalElem = $("#modal-submit");
$modalElem.on("click", function () {
var k0Elem = $modalName.val();
var k1Elem = $modalHabit.val();
$modalElem.data({"k0": k0Elem, "k1": k1Elem});
$myCover.addClass("hide");
$myModal.addClass("hide");
//要判断 是新增弹出的模态框，还是 编辑弹出的模态框；
//moder === 0为新增的
if (moder === 0) {
var num = $("tbody tr").siblings().last().find("td").first().text();
console.log(num);
var number = parseInt(num) + 1;
//如果自己不等于他本身返回true的话，则为NAN;
if (number !== number){
number = numElen
}
var name = $modalElem.data("k0");
var hoby = $modalElem.data("k1");
var hrElem = document.createElement("tr");
$(hrElem).html("<td>" + number + "</td> <td>" + name + "</td><td>" + hoby + "</td>" + "<td>\n" +
"<button class=\"edit-btn\">编辑</button>\n" +
"<button class=\"delete-btn\">删除</button>\n" +
"</td>");
$("tbody").append(hrElem)
} else {
//根据存具体的jQuery对象来找到位置修改值；
$($cElem[1]).text(k0Elem);
$($cElem[2]).text(k1Elem)
}
});
//新增叫的没有绑定编辑和删除的事件，需要通过上级去绑定
var bodyElem = $("body");
bodyElem.on("click", ".edit-btn", function () {
moder = 1;
$myCover.removeClass("hide");
$myModal.removeClass("hide");
var $contenElem = $(this).parent().siblings();
//拿到了含有数据的jQuery对象，用 data 储存起来；
// console.log($contenElem)
var $subElem = $("#modal-submit");
$subElem.data("object", $contenElem);
$cElem = $subElem.data("object");
// console.log($cElem);
for (var i = 0; i < $cElem.length; i++) {
//拿到对应编辑的那一行的编号；
// console.log(moder);
if (i === 1) {
$modalName.val($($cElem[1]).text())
}
if (i === 2) {
$modalHabit.val($($cElem[2]).text())
}
}
});
//删除
bodyElem.on("click", ".delete-btn", function () {
var $deleteElem = $(this).parent().siblings().parent();
numElen = $(this).parent().siblings().first().text();
var $nElen = $(this).parent().parent().nextAll();
$nElen.each(function () {
numbElem = $(this).children().first().text();
$(this).children().first().text(parseInt(numbElem)-1);
});
$deleteElem.html("");
$deleteElem.html("")
})
})
</script>
</head>
<body>
<button id="add">新增</button>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>街舞</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>烫头</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
<tr>
<td>3</td>
<td>苑局</td>
<td>日天</td>
<td>
<button class="edit-btn">编辑</button>
<button class="delete-btn">删除</button>
</td>
</tr>
</tbody>
</table>
<div id="myCover" class="cover hide"></div>
<div id="myModal" class="modal hide">
<div class="dv1">
<p>
<label for="modal-name">姓名</label>
<input type="text" id="modal-name">
</p>
<p>
<label for="modal-habit">爱好</label>
<input type="text" id="modal-habit">
</p>
<p>
<button id="modal-submit">提交</button>
<button id="modal-cancel">取消</button>
</p>
</div>
</div>
</body>
</html>
jQuery有一些动画效果（了解）
[s] 为指定动画运行的时间（毫秒数默认400）,[e]为指定什么动画效果,默认为swing,
[fn]是元素显示完毕后需要执行的函数
// 基本 show([s],[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) // 滑动 slideDown([s],[e],[fn]) slideUp([s],[e],[fn]]) slideToggle([s],[e],[fn]) // 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]])
补充：
类型于for循环函数的；
each，一个通用的迭代函数，它可以用来无缝迭代对象和数组
each循环的两种方法：
1. $.each(a1, function(){...})
2. $("div").each(function(){
console.log(this); --> this指的是每次进入循环的标签
})
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//i是索引，v是每次循环的具体元素。
console.log(this); // this 指的是 每一次循环的元素；
})
$("li").each(function(i, v){
console.log(i, v);//i是索引，v是每次循环的具体元素。
})
终止each循环
return false；
.data（）
$("..").data(key, value):
描述：在匹配的元素上存储任意相关数据(按照 键值对的 形似储存起来；)
注意： .data（） 可以用来 存储jQuery对象；数字；字符串
var $subElem = $("#modal-submit");
$subElem.data("object", $contenElem);
$cElem = $subElem.data("object"); //取出键为object的值
.removeData(key):
删除标签上的键为key的值；
$("div").removeData("k"); //移除元素上存放k对应的数据
jQuery相关的插件（点我了解）
