前言------ 努力奋斗，经过两天的总结，终于写完，加油
jquery的简介
jquery就是一个javascript代码库，或者说是javascript框架，提供一种简单便利的javascript设计模式
宗旨：Write less，Do more
jquery的作用
1、用更少的代码，做更多的事情
2、把网页中的js代码 与 html 分离开
jquery的引入
使用jquery，必须引入jquery.js 文件
<script src="jquery---.js"></script>jquery语法：
jquery(document).ready(function(){ }); //第一种写法
$(document).ready(function(){ }); //第二种写法
$(function(){ }) //第三种写法，最简单，最推荐
jquery的开发步骤（将js代码与html分离）：
1、引入jquery相关文件：jquery-3.3.1.min.js等
2、当文档加载完成触发事件：$(function(){ })
3、在文档加载完成的事件里面：a：进行元素的一系列操作 b：绑定事件
3、在 b 事件发生触发函数
4、在函数中对元素进行一系列的操作
jquery为什么能够使js代码与html代码分离？
因为：<script type="text/javascript">
jquery(document).ready(function(){ }); //第一种写法
$(document).ready(function(){ }); //第二种写法
$(function(){ }) //第三种写法，最简单，最推荐
</script>
表示文档加载完毕触发该事件，相当于javascript中的onload事件，这样的话，就不用再html标签中再写onclick事件了，所以 就使js代码与html代码分离开了。所以要想分离，就必有相当于js的onlode事件，而如果不用jquery的话onclick事件可以根据 需求而定。
而使用js的写法为window.onload=function(){ alert(11); } window.onload=function(){ alert(22); } 运行的时候至上而下， 只显示222，因为window.onload表示window对象的一个onload属性，写两个的话表示属性值改变了。
代码如下：
<script>
//js文档加载完成的事件
window.onload = function(){
alert("window.onload 111");
}
window.onload = function(){
alert("window.onload 222");
}
/*文档加载完成的事件*/
jQuery(document).ready(function(){
alert("jQuery(document).ready(function()");
});
/*
jQuery 简写成 $
*/
$(document).ready(function(){
alert("$(document).ready(function()");
});
/*
最简单的写法
*/
$(function(){
alert("$(function(){");
});
</script>jquery的选择器（用于jquery查找元素，与css中的选择器类似）
ID选择器：$("#id名") //相当远js中document.getElementById("id名"); 推荐
类选择器：$(".class名")
属性选择器：$("a[href]") $("a[href='#']") $("a[href$='com'][title]") 选择器[属性='属性值']
通配符选择器：$("*") //匹配所有的元素
选择器，选择器：选择器,选择器 //同时根据两个选择器找出元素中间为逗号（相当于并集）如果没有逗号
例如：$("p.haha") //表示<p></p>标签中含有 类名class="haha" 的
层次选择器：
子元素选择器：选择器1 > 选择器2
后代选择器： 选择器1 选择器2 //注意：选择器1和选择器2中间以空格隔开
兄弟选择器： 选择器1+选择器2 //找出紧挨着的选择器1的兄弟选择器
所有兄弟选择器：选择器1 + 选择器2 //找出所有选择器1的兄弟选择器
<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//找出body下面的子div
$("#btn1").click(function(){
$("body > div").css("background-color","palegreen");
});
//找出body下面的所有div
$("#btn2").click(function(){
$("body div").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("#one+div").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("#two~div").css("background-color","palegreen");
});
});
</script>基本过滤器：
选择器1：过滤器 //表示在所有的选择器1中过滤出满足条件（过滤器）的选择器
<script>
$(function(){
/<script>
//文档加载事件,页面初始化的操作
$(function(){
//初始化操作: 给按钮绑定事件
//过滤出所有div中第一个元素
$("#btn1").click(function(){
$("div:first").css("background-color","palegreen");
});
//过滤出所有div中偶数位的div
$("#btn2").click(function(){
$("div:even").css("background-color","palegreen");
});
$("#btn3").click(function(){
$("div:odd").css("background-color","palegreen");
});
$("#btn4").click(function(){
$("div:gt(2)").css("background-color","palegreen");
});
});
</script>表单过滤器：
以 冒号 : 开头 注意与基本过滤器用法的区别 冒号前面没有东西
<script>
//1.文档加载事件
$(function(){
$(":text").css("background-color","pink");
});
</script>对象属性过滤器：
:selected //下拉列表选中
:checked //复选框选中状态
其他选择器：
$("p.haha") //表示<p></p>标签中含有 类名class="haha" 的
$("ul li:first") //表示无序列表中第一项元素
$("ul li:last") //表示无序列表中最后一项元素
jquery与javascript的对象转换
js对象只能调用js方法和属性
jquery对象只能调用jquery的方法和属性
知识点： 事件：$("#btn2").click()：表示给元素绑定事件
$("#btn2").click(function(){ }) ：表示给元素绑定事件的同时，添加了触发事件调用的函数
$("div1")：根据id获取的div元素是一个jquery的Object对象，使用get()方法才能得到javascript的元素(div)对象
既$("div1").get()；
<script src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
function checkOne() {
var text = document.getElementById("div1");
//text.innerHTML="我用js替换了你";
//js对象转换成jquery对象
$(text).html("我用js对象转换成jquery对象替换了你");
}
$(function () {
//首先给元素绑定事件----1、先找到元素 2、绑定事件 3、并让事件触发函数
$("#btn2").click(function () {
//$("#div1").html("我用jquery替换了你");
//jquery对象转换成js对象
var aa = $("#div1").get(0);
aa.innerHTML="我用jquery对象转换成js对象替换了你";
});
});
</script>
<input type="button" value="js替换内容" onclick="checkOne()">
<input type="button" value="jquery替换内容" id="btn2">
<div id="div1">
哈哈哈，我是你！
</div>jquery的动画效果
1、show() 显示 hide() 隐藏 Toggle() 显示隐藏来回切换
2、fadeIn() 淡入 fadeOut() 淡出 fadeToggle() 淡入淡出来回切换 fadeTo() 可以规定淡入淡出的透明度
3、slideDown() 向下滑动 slideUp() 向上滑动 slideToggle() 向上滑动向下滑动来回切换
4、animate() 自定义动画 $("#imga").animate({width:'300px', opacity:0.5},5000);
参数：slow：慢 fast：快 毫秒值使用jquery完成定时广告弹出
需求分析：通js完成一样
项目步骤：
1、引入jquery相关的文件
2、jquery文档加载完成事件
3、启动定时器
4、编写显示广告的函数
5、在显示广告的函数中再写一个定时器
6、编写隐藏广告的函数
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时广告弹出</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
setTimeout("startDime()",5000);
});
function startDime() {
$("#imga").slideDown("slow");
setTimeout("stopDime()",3000);
}
function stopDime() {
$("#imga").slideUp("slow");
}
</script>
</head>
<body>
<img src="./img/美女.jpg" id="imga" width="700px" style="display: none">
</body>
</html>使用jquery完成表单的隔行换色
注意：<table>标签不能使用子元素选择器找到<tr>标签
<script type="text/javascript">
$(function () {
$("#tab tr:even").css("background-color","#CCCCCC");
$("#tab tr:odd").css("background-color" , "chartreuse");
// $("#tab tr").css("background-color" , "blue");
})
</script>使用jquery完成复选框全选全不选案例
需求分析：
商品分类界面中，当我们点击全选框的时候，我们希望选中所有的商品，当我们取消掉的时候，我们希望不选中所 有的商品
jquery代码步骤：
1，引入jquery相关文件
2、当文档加载完毕发生事件$(function(){ })
3、给元素绑定事件 $("#checks").click(function(){ this.checked }); ,并定义事件发生触发的函数
5、在函数中对元素进行处理
获得选中的状态：1.this.checked 这是相当于用js方法，对象.属性 this表示当前函数拥有者
2、$("#checks").prop("checked"); 使用的jquery的prop()
3、找出其他复选框，使用jquery选择器$("input[type='checked']:gt(0)")
注意：prop() 和 attr()方法的区别：prop()返回true和false ，并随着checked选中的状态改变而改变
attr()返回的是checked属性的值，与状态无关，前提必须在元素中写上了 checked的属性才可以
代码实现：
<script type="text/javascript">
$(function () {
//给元素绑定事件
$("#checks").click(
function () {
//获得选中元素的状态 this表示当前函数的所拥有者
//alert(this.checked); 第一种方法
var status = $("#checks").prop("checked"); //第二种方法,用attr()时，返回undefind，因为元素没有写checked属性
//$("input[type='checkbox']:gt(0)").prop("checked",this.checked);
//$("input[type='checkbox']:gt(0)").attr("checked",this.checked);
$("table input:gt(0)").prop("checked",status);
}
);
});
</script>使用jquery完成省市联动案例
代码步骤：
1、导入jquery相关文件
2、进行文档jia加载完成发生的事件
3、给元素绑定事件，并触发相应的函数
4、在函数中进行对元素的操作
获得选中的元素得到省份，根据省份的到相对应的城市
遍历得到的城市，并把城市添加到显得select中
删除元素：$("select2").empty();
jquery遍历：each(function(idex,遍历对象的每一项的值){
$("#select2").append($("<option>"+n+"</option>"))
})
遍历原理：
<script type="text/javascript">
var city = ["北京","上海","杭州"];
//转换成jquery才能使用empry()
$(city).ampty();
//自己写遍历
function bianli(city,callback){
for(var i = 0; i<city.length; i++){
alert(city[i]);
var att = city[i];
callback(i,att);
}
}
function callback(i,n){
console.log("123===="+i+n);
}
//调用
bianli(city,callback)
</script>
代码实现：
<script type="text/javascript">
var citys = [["济南","济宁","泰安","日照"],["杭州","丽水","青田","宁波"],["北京","上海","郑州"]];
$(function () {
//给元素绑定事件
$("#selects").change(function () {
var cityss = citys[this.value];
var aa = $("#selects2");
aa.empty();
/* for (var i = 0; i<cityss.length; i++){
var city = cityss[i];
aa.append("<option>"+city+"</option>");
}*/
$(cityss).each(function (i,n) {
aa.append("<option>"+n+"</option");
})
});
});
</script>使用jquery完成商品的左右选择
需求分析：
在我们的分类管理中， 我们能够分类管理我们的信息，当点击修改时，进入一个可以编辑的页面，进行我们商品的 分类的修改。
代码步骤：
1. 导入JQ的文件
2. 文档加载函数 :页面初始化
3.确定事件 : 点击事件 onclick
4. 事件触发函数
5 移动被选中的那一项到右边
代码实现：
<script type="text/javascript">
$(function () {
$("#a1").click(function () {
var a = $("#leftSelect:selected");
$("#rightSelect").append(a);
});
$("#b1").click(function () {
var b = $("#leftSelect option");
$("#rightSelect").append(b);
});
});
</script>使用jquery完成表单校验
项目需求：
注册页面的用户名密码等，当输入的格式不规范时，进行一个校验。
注册页面：一般我们都是 浏览器 发出请求到服务器，然后服务器进行用户名密码的校验，但是如果每个用户都直 接请求到服务器去处理的话，用户百万级，显然服务器的压力会非常大，为解决这样的现象，在客户单 进行一个校验，然后可以的话再在服务器端进行一次校验（共两次）
技术分析：
1 加载jquery相关的包
2.文档加载完毕事件：动态的添加小红点
3 给元素绑定事件:blur, click, keyup
4事件发生时触发函数，并在函数中添加元素
$.trigger("事件名blur等"): 触发blur事件,并默认执行blur事件（类似于浏览器将鼠标移动到文本域触发的事件一样）， 当jquery对象是数组时候，会每个对象都触发一遍blur事件
triggerHandle("事件名"): 仅仅只会触发事件。当jquery是数组的时候，只会第一个对象触发一遍事件。
$.is("选择器"): jquery遍历中，表示jquery对象$是否是选择器找到的对象,是返回true
链接式写法：$(".bixuan").blur(function () { }).focus(function () { }).keyup(function () { });
只有返回是jquery的时候才能这样写。
$.remove() :删除调用该方法的对象元素
$.empty(): 删除该对象元素的子元素
$.find("选择器"): jquery遍历，向下寻找，寻找对象后代中选择器选中的对象
$.parent(): 寻找该对象的第一个父类元素
$.parents(): 寻找所有的父类，知道html根
代码实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery表单校验</title>
<script src="./js/jquery-3.3.1.min.js"></script>
<style type="text/css" rel="stylesheet">
#ss{
color: red;
}
.onTrue{
background:#E9FBEB url(./img/reg4.gif) no-repeat 0 center;
padding-left:25px;
}
.onFalse{
background:#FFE0E9 url(./img/reg3.gif) no-repeat 0 center;
padding-left:25px;
}
</style>
<script type="text/javascript">
/*
* 运用trigger("事件")函数：调用某个事件，调用同时执行事件的默认行为，返回事件处理函数的jquery对象
* triggleHandler("事件") ：调用某个事件，但不会执行事件的默认行为，只影响第一个元素，返回事件处理函数的返回值
* */
$(function () {
//动态添加小红点
$(".bixuan").after("<font size='2' color='red'>*</font>");
//给元素绑定事件
$(".bixuan").blur(function () {
//获取文本内容
var value = this.value;
//删除多余的font标签
$(this).parent().find(".ff").remove();
//判断是哪个jquery对象
if($(this).is("#username")){
if (value.length<6){//进行用户名校验
$(this).parent().append("<font color='red'class='ff onFalse' >用户名不行</font>");
}else {
$(this).parent().append("<font color='red'class='ff onTrue'>用户名够用</font>");
}
}
//进行密码校验
if($(this).is("#password")){
if (value.length < 3){ //进行密码校验
$(this).parent().append("<font color='red'class='ff onFalse'>密码长度不够</font>");
} else {
$(this).parent().append("<font color='red'class='ff onTrue'>密码够用</font>");
}
}
}).focus(function () {
$(this).triggerHandler("blur");
}).keyup(function () {
$(this).triggerHandler("blur");
});
//只有返回的是jquery才可以调用
//$(".bixuan").blur(function () { }).focus(function () { }).keyup(function () { });
$("#tijiao").click(function () {
//必选框进行校验
$(".bixuan").trigger("blur");
//判断如果输入错误时，不让他提交 这个this代表的form表单
if($(".onFalse").is(".onFalse")){
return false;
}
return true;
});
});
</script>
</head>
<body>
<form action="index.html">
<div>用户名：<input type="text" class="bixuan" id="username"></div>
<div>密码：<input type="password" class="bixuan" id="password"></div>
<div>手机号：<input type="tel"></div>
<div><input type="submit" id="tijiao"></div>
</form>
</body>
</html>