基础知识 | jquery axjx 跨域
定义：jquery是第三方开发的*（先下载，再使用），执行DOM操作的，极简化的函数库（jquery使用函数解决一切问题，没有属性）。（第一方：自己写 第二方：浏览器自带）好处：简单，解决了大部分浏览器兼容性问题。问题：简化的不彻底，只是简化了语句，没有减少步骤。只有pc端，没有移动端。jq下载官网：jquery.com版本 1.x支出旧浏览器（IE8）版本，不支持ES6语法。2.x不再支持旧浏览
定义：jquery是第三方开发的*（先下载，再使用），执行DOM操作的，极简化的函数库（jquery使用函数解决一切问题，没有属性）。（第一方：自己写 第二方：浏览器自带）
好处：简单，解决了大部分浏览器兼容性问题。
问题：简化的不彻底，只是简化了语句，没有减少步骤。
只有pc端，没有移动端。
链接：https://pan.baidu.com/s/1RUTeACBjnAWuLvn--t2Y5A
提取码：9ksz
复制这段内容后打开百度网盘手机App，操作更方便哦
jq下载
官网：jquery.com
版本 1.x支出旧浏览器（IE8）版本，不支持ES6语法。
2.x不再支持旧浏览器，也不支持ES6
3.X 不再支持旧浏览器。但是已经支持ES6
压缩版和未压缩版
使用jquery
引入jquery.
方式一：将jq.js文件下载到项目本地文件夹用相对路径引入jq。
问题：如果将jq.js文件下载到服务器本地，则只能保存在一个地区。距离较远的地区的用户，访问就会很慢。
方式二：引入CDN网络中的共享Jquery.js文件。
CDN网络：内容分发网络。分布在全球各地的多台服务器组成的一个智能网络。可以自动将一个文件同步到全球各地的所有服务器上保存。当用户向CDN网络请求下载一个文件时，CDN网络会自动判断当前用户距离哪一台服务器网络状况最佳，就从哪台服务器下载文件副本。
优点：身处不同地区的用户，访问同一个文件时，下载速度几乎一样。
如何：只要去jq官网，找到官方提供的CDN网址即可
<script src="cdn地址">
点击数字增加
图里的js文件：链接：https://pan.baidu.com/s/1zIV-r5RR8ujDN6j7W3fcRA
提取码：1111
复制这段内容后打开百度网盘手机App，操作更方便哦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn">click me(0)</button>
</body>
<script>
//DOM写法
var btn=document.getElementById("btn");
btn.onclick=function(){
//先取出当前按钮（）内的数字，转为整数
var n=parseInt(
this.innerHTML.slice(9,-1)
)
//单击一次，加一次
n++;
//将整数再拼接回当前按钮的内容中
this.innerHTML=`click me(${n})`;
}
</script>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn1">click me(0)</button>
</body>
<!-- 引入js文件 -->
<script src="js/jquery-1.11.3.js"></script>
<script>
// jquery做法
var $btn1=$("#btn1");
$btn1.click(function(){
var $this=$(this);
var n=parseInt(
//html==innerHTML
$this.html().slice(9,-1)
)
n++;
$this.html(`click me(${n})`);
}
)
</script>
</html>
jquery原理
当引入<script src="js/jquery-1.11.3.js">时，会在内存中添加一种新的类型，由两部分组成：构造函数、原型对象
构造函数：function JQuery（选择器或Dom 元素）{......}
创建jquery家的子对象
只有jquery家的子对象才能调用jquery原型对象中的简化版函数。
原型对象：JQuery.prototype，专门替所有jQuery家子对象保存简化版函数。
今后只要想调用Jquery家简化版函数，第一步都是要先创建jQuery家子对象。
标准：var jq=new Jquery(选择器或DOM元素)
但是，这样写比较麻烦，所以作者把new Jquery（）保存到了jqueyr的构造函数内部；
function jquery(选择器或Dom元素){
return new Jquery(选择器或Dom元素)
}
从此调用jquery，等于new Jquery(),省略了new.
每次创建Jquery对象都要写jQuery（），太麻烦
因此，作者定义了 $=jquery ,之后，$=jquery()=new jquery(),用$就行。
问题：使用jquery主要是想操作DOM元素
解决：$()中 2种：
可以放一个选择器：$("选择器")做两件事：查找DOM元素，创建jq对象
还可以直接放一个DOM元素：$(DOM元素对象)只做一件事，无需查找，直接创建jq对象保存当前DOM元素对象
问题·：Jquery 对象毕竟和DOM元素不能通用！DOM家的函数不能用jquery家的函数。jquery家的元素也不能用Dom家的属性和方法。如何区分一个对象是DOM家还是JQ家
解决：行业内约定俗称：所有jquery家的变量都要以$开头
var $btn1=$("#btn1");
用jquery对象，调用jquery家简化版函数，操作封装的Dom元素
对jquery对象，调用简化版函数时，其实底层会被自动翻译为原生的DOM属性和方法，最终作用到jquery对象中保存的Dom元素上
eg:$btn.html ====btn.innerHTML
$btn.click(function(){....}) ======btn.οnclick=function(){......}
问题：jquery中事件处理函数里的this指谁
因为jquery简化版函数最终都会被翻译成原生的DOM属性和方法，所以，jquery的事件处理函数，最终还是会被保存到DOM元素身上的事件属性上。所以，Jquery中事件处理函数中的this,和DOM中事件处理函数中的this完全一样，指向当前正在触发事件的DOM元素对象
问题：this如果指向DOM元素对象，则无法继续调用jq简化版函数
今后在jq中事件处理函数中使用this,都必须用$(this),将this转化为一个jquery子对象，才能用${this},继续调用jq简化版函数。
问题：如果$()中的选择器，选择了多个DOM元素，会怎样
$()创建的Jquery对象其实就是一个类数组对象。如果选择器只找到一个DOM元素，则类数组对象就是一个只有一个元素，length为1的类数组对象
如果选择器找到多个DOM元素，则类数组对象中包含多个DOM元素对象，有下标，也有length属性。
问题：如果想操作类数组对象中的DOM元素，是否需要自己用[下标]取出DOM元素后操作？
不用，对jquery对象调用简化版函数，会自动翻译为原生的DOM方法和属性，自动作用到内部的DOM元素身上。不用我们自己写下标。
强烈建议：因为DOM和jquery的方法和属性不通用，所以，尽量避免DOM和jquery混搭。如果决定用jquery，应该一用到底。
jquery简化版函数三大特点
自带for循环遍历：如果jquery对象查找到多个DOM元素，集中保存在jquery对象中。只要对整个jquery对象调用简化版函数，jquery对象就会自动遍历内部每个DOM元素对象，将简化版函数翻译后，自动应用到每个DOM元素对象上。
一个函数两用：经常出现在修改相关的函数上，通过重载方式实现：
如果调用函数时，没有给任何新值，则函数默认执行获取旧值的操作。
如果调用函数时，给了新值，则函数自动切换为执行修改值的操作。
eg:$btn.html() //获取按钮的内容
$btn.html("*") //修改按钮的内容
多数函数都会返回当前正在操作的.前的jq对象------链式操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="btn1">click me(0)</button>
<button id="btn2">click me(0)</button>
<button id="btn3">click me(0)</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//为三个按钮绑定单击事件，记录单击次数
var $btns=$("button");
console.log($btns);
$btns.click(function(){
var $this=$(this);
var n=parseInt(
$this.html().slice(9,-1)
)
n++;
$this.html(`click me(${n})`);
})
</script>
</body>
</html>jquery也跟dom一样 增删查找
查找
jquery查找支持按各种选择器查找元素。即支持css3自带的选择器，同时又扩展了个别仅jquery中可用的选择器
1.子元素过滤选择器：按照元素在其父元素下的相对位置选择。
：first-child 选择作为其父元素下第一个儿子的子元素
：only-child:选择作为其父元素下唯一一个儿子的子元素
.......
注意：css中的位置下标从1开始
注意：dom中 元素.style.css属性值=属性值 ---------- 在jq中 $元素.css("css属性"，“属性值”)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
height:30px;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>child1-basic0</li>
<li>child2-basic1</li>
<li>child3-basic2</li>
</ul>
<ul>
<li>child1-basic3</li>
<li>child2-basic4</li>
<li>child3-basic5</li>
</ul>
<ul>
<li>child1-basic6</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("div").css("width","200px");
$("div").css("backgroundColor","red");
//查找每个ul中第一个li
$("ul>li:first-child").css("border","2px solid green");
//查找每个ul中最后一个li
$("ul>li:last-child").css("box-shadow","0 0 5px gold");
//查找每个ul中处于偶数位置的
$("ul>li:nth-child(2n)").css("background-color","pink");
//查找每个ul中第二个li
$("ul>li:nth-child(2)").css("color","red");
//查找作为ul下唯一子元素的li
$("ul>li:only-child").css("padding","10px");
</script>
</body>
</html>
2基本过滤选择器 jquery独有，css没有
定义：先将所有符合要求的元素查询出来集中放在一个大的集合中，按元素在大集合中的下标位置选择元素
注意：因为jquery中独有的选择器底层是用js程序模拟出来的，不是css原装的选择器。所有下标和程序习惯一样，都是从0开始
：first/:last 选择查找结果中排在第一个/最后一个位置的元素
：gt(i) greater than 大于 选择在查找结果中下标位置>i位置的元素
:lt(i) less than 小于 选择在查找结果中下标位置<i位置的元素
:eq(i) equal 等于 选择早查找结果中下标位置=i位置的元素
：even 选择在查找结果中下标为偶数位置的元素
：odd 选择在查找结果中下标为奇数位置的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>child1-basic0</li>
<li>child2-basic1</li>
<li>child3-basic2</li>
</ul>
<ul>
<li>child1-basic3</li>
<li>child2-basic4</li>
<li>child3-basic5</li>
</ul>
<ul>
<li>child1-basic6</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//查找第一个li
$("ul>li:first").css("border","2px solid hotpink");
//查找最后一个li
$("ul>li:last").css("box-shadow","0 0 5px skyblue");
//查找处于偶数位置的li
$("ul>li:odd").css("background-color","brown");
//查找第2个li
$("ul>li:eq(1)").css("color","coral");
</script>
</body>
</html>
内容过滤 jq独有，css没有
按元素的内容不同选择元素
：contains（关键字） 选择元素内容中包含指定关键词的元素
：has(另一个选择器) 选择包含符合选择器要求的子元素的上级父元素
：parent 选择所有内容不为空的元素
：empty 选择所有内容为空的元素
：has(另一个选择器) 选择包含符合选择器要求的子元素的上级父元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width:1000px;
height:30px;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery中的选择器——内容过滤选择器</h1>
<button>提交订单</button>
<button>Submit注册信息</button>
<button>马上提交</button>
<button>清空重填</button>
<br/><br/>
<div class="alert"></div>
<div class="alert">
<span class="close">×</span>
</div>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//<!-- 选择包含 提交 两字的按钮，变为绿色按钮 -->
$("button:contains(提交)").css("background-color","green");
//<!-- 选中包含.close按钮的.alert元素，让他们变为金黄色的警告框 -->
$(".alert:not(:has(.close))").css("background-color","hotpink");
$(".alert:has(.close)").css("background-color","gold");
//<!--选中不包含.close按钮的.alert元素，让他们变为粉红色的警告框 -->
$(".alert:not(:has(.close))").css("background-color","hotpink");
//选择内容为空的.alert元素，加阴影
$(".alert:empty").css("box-shadow","0 0 10px brown");
// 选择内容不为空的.alert元素，加蓝色阴影
$(".alert:parent").css("box-shadow","0 0 5px blue");
</script>
</body>
</html>
可见性过滤
根据元素是否可见来选择元素
：visible 选择可见的元素
：hidden 选择不可见的元素
注意：css和html中，隐藏的方式有4种，但：hidden只能选择其中两种，diaplay:nonne <input type="hidden">
display:none opacity:0 <input type="hidden"> visibility:hidden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="container">
<h1>可见性选择器</h1>
<div id="d1" style="display: none">lorem</div>
<div id="d2" style="visibility: hidden">lorem</div>
<div id="d3" style="opacity: 0">lorem</div>
<input id="d4" type="hidden" name="aa" value="bb"/>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
console.log($('.container>:hidden'))
</script>
</body>
</html>
表单元素过滤器 jq独有，css没有
根据表单元素的特征来选择不同的表单元素
：input 选择所有四大类（input /textarea/button/select）表单元素。
input元素的每种type属性值，都有一个对应的选择器
：text 选择type="text"的文本框
：password 选择type="password"的密码框
：radio 选择type="radio"的单选按钮
：checkbox 选择type="checkbox"的复选框
.........
css中的input是元素选择器，只能选择input元素，不能选择其他表单元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
用户名:<input disabled></br>
密码:<input type="password" disabled></br>
<input type="checkbox">我同意本站的使用条款<br>
<input type="submit" value="提交注册信息" disabled />
</form>
<script src="js/jquery-1.11.3.js"></script>
<script>
//jquery步骤与dom的步骤差不多，jq只是简化了
//var $chb=$("input:checkbox");
//直接简化
$("input:checkbox").click(function(){
//选择除了checkbox之外的其余所有表单元素
var $others=$(":input:not(:checkbox)");
//如果选中checkbox，其他元素可用，未选中，禁用其他元素
var $this=$(this);
//prop获取属性 获取当前chb的checked属性==true
if($this.prop("checked")==true){
$others.prop("disabled",false);//启用
}else{
$others.prop("disabled",true);
}
})
</script>
</body>
</html>
修改
jq中所有获取和修改相关的函数都一个函数两用，没给新值就获取，给了新值就修改
获取和修改元素的内容
获取和修改元素开始标签到结束标签之间的原始的html内容
DOM 元素.innerHTML
JQ $元素.html("新html内容')
获取和修改元素开始标签到结束标签之间的纯文本内容
DOM 元素.textContent
JQ $元素.text
获取和修改表单元素的值
DOM 元素.value
JQ $元素.val("新值")
之后补图片地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>操作元素的内容和值</h1>
<form action="">
用户名:<input name="uname">
<span></span><br>
密码:<input type="password" name="upwd">
<span></span><br>
<input type="submit" value="提交注册信息">
</form>
<script src="js/jquery-1.11.3.js"></script>
<script>
//先找到元素，再跟剧要做的事写
//blur 失去焦点 没写type的一般都是文本类型
$(":text").blur(function(){
//dom var span=this.nextElementSibling;
//jq nextElementSibling简写为next
var $this=$(this);
var $span=$this.next();
//如果当前1姓名文本框的值的长度>=3且<=9
if($this.val().length>=3&&$this.val().length<=9){
//验证通过，span就有√，失败就提示
$span.html(`<img src='img/ok.png'>`)
}else{
$span.html(`<img src='img/err.png'>用户名必须介于3-9位之间！`)
}
})
</script>
</body>
</html>获取或修改元素的属性
字符串类型的HTML标准属性
DOM 旧的核心DOM2个 元素.getAttribute("属性名') 元素.setAttribute("属性名"，“属性值”)
HTMLDOM简写 元素.属性名
JQ $元素.attr("属性名"，“属性值”) 不写属性值等于getAttribute ，写属性值等于setAttribute .attr函数统一并替代了核心DOM的两个函数
$元素.prop("属性名"，“属性值”) .prop函数代替了html dom的操作
修改相关函数的简写：其实可以同时修改一个元素的多个属性：
$元素.attr/prop/css({
属性名：“属性值”，
属性名：“属性值”
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>图片切换</h1>
<img src="img/1.jpg" alt="1">
<!-- -->
<script src="js/jquery-1.11.3.js"></script>
<script>
// 查找元素绑定事件
$("img").click(function(){
var $this=$(this);
//用alt属性来临时保存正在看第几张图片的序号
//获取img元素的alt属性值，转为整数，整数<4加1，否则整数==4，值为=1
//alt是字符串类型的html标准属性，所有attr prop都可用
var i=parseInt($this.attr("alt"));
if(i<4){
i++;
}else{
i=1;
}
//将整数拼接成一个图片路径，设置到当前图片的src属性
//src是字符串类型的html标准属性，所有attr prop都可用
//$this.attr("src",`img/${i}.jpg`);
//将赠送设置到当前图片的alt属性上，为下次点击做准备
//$this.attr("attr",i);
//简写为
$this.attr({
src:`img/${i}.jpg`,
alt:i
})
})
</script>
</body>
</html>bool类型的HTML标准属性
定义：只用放在元素的开始标签中就起作用，不用写属性值的属性。
eg:disabled checked selected
DOM 用HTML DOM修改
JQ $元素.prop("属性名"，true/false)
自定义扩展属性
DOM 旧核心 元素.getAttribute() 元素.setAttribute()
html dom 元素.dataset.自定义属性名
JQ $元素.attr("data-自定义属性名"，“新值”) html5标准出现的比jq晚，所以jq中不支持html5标准中的一些做法。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h3>点击小图片切换大图片</h3>
<img src="img/1.jpg" data-target="img/1-l.jpg" class="my-small">
<img src="img/2.jpg" data-target="img/2-l.jpg" class="my-small">
<img src="img/3.jpg" data-target="img/3-l.jpg" class="my-small">
<img src="img/4.jpg" data-target="img/4-l.jpg" class="my-small">
<hr/>
<img src="img/1-l.jpg" class="my-big">
<script src="js/jquery-1.11.3.js"></script>
<script>
$(".my-small").click(function(){
//修改src属性,把值改为当前img的datta-target属性
$(".my-big").attr("src",$(this).attr("data-target"))
})
</script>
</body>
</html>修改样式
DOM 修改样式：元素.style.css属性=新值
获取样式 getComputedStyle()
JQ $元素.css("属性名"，“属性值”) 将获取和修改样式统一为一个函数
原理：当给了新属性值时，.css自动执行.style.css属性=新值的操作
当没给新值时，.css自动执行getCompuitedStyle()
批量修改一个元素的多个css属性
DOM
元素.className="class名"
注意：如果一个元素上同时被多个class名修改，就很不便于只修改其中某一个class.因为ClassName是以覆盖的方式修改class属性值
JQ
为class添加了四个函数
添加class:$元素.addClass("class名")
移除class:$元素.removeClass("class名")
判断是否包含某个class:$元素.hasClass("class名")
在有和没有一个class之间来回切换：$元素.toggleClass("class名")
原理：toggleClass中封装的就是一个if else结构
if($元素.hasClass()){
$元素.removeClass()
}else{
$元素.addClass()
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn {
padding: 5px 10px;
border-radius: 3px;
border: 1px solid #aaa;
outline: none;
}
.up {
background: #fff;
color: #333;
}
.down {
background: #ddd;
color: #fff;
}
</style>
</head>
<body>
<h3>双态按钮</h3>
<button class="btn up">双态按钮</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
// 前三个做的
$("button").click(function(){
var $this=$(this);
//如果当前按钮是class down
if($this.hasClass("down")){
$this.removeClass("down")
}else{
//就添加class down
$this.addClass("down")
}
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn {
padding: 5px 10px;
border-radius: 3px;
border: 1px solid #aaa;
outline: none;
}
.up {
background: #fff;
color: #333;
}
.down {
background: #ddd;
color: #fff;
}
</style>
</head>
<body>
<h3>双态按钮</h3>
<button class="btn up">双态按钮</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("button").click(function(){
//超级简单的做法
$(this).toggleClass("down");
})
</script>
</body>
</html>按节点关系查找
DOM 父子关系
获得父元素 元素.parentElement
获得直接子元素 元素.children
获得第一个直接子元素 元素.firstElementChild
获得最后一个直接子元素 元素.lastElementChild
兄弟关系
获得前一个相邻的兄弟关系 元素.previousElementSibling
获得后一个相邻的兄弟元素 元素.nextElementSibling
JQ
父子关系
获得父元素 $元素.parent()
获得所有直接子元素 $元素.children("选择器")
注意：children只能选择直接子元素，无法选择所有后代元素
因此，新增了 $元素.find("选择器") 在所有后代中查找符合选择器要求的元素
DOM中的children只能获得所有直接子元素，无法筛选个别符合个别条件的。
因此，jq允许children和find添加选择器参数，只选择那些符合条件的个别元素
获得第一个直接子元素： 在jq中没有直接对应的函数，可以通过变通实现 $元素.children(":first-child")
获得最后一个直接子元素 在jq中没有直接对应的函数，可以通过变通实现 $元素.children(":last-child")
兄弟关系
只获得相邻的前一个兄弟 $元素.prev();
但是prev只能选择前一个元素，无法选择之前所有元素，因此
jq新增了 $元素.preAll("选择器")； 之前所有
只获得相邻的后一个兄弟 $元素.next();
但是next只能选择后一个元素，无法选择之前所有元素，因此
jq新增了 $元素.nextAll("选择器") 之后所有兄弟
问题：前面四个函数，要么只能选择之前的，要么只能选择之后的。无法选择出自己之外所有的。
解决： $元素.siblings("选择器") 选择除当前元素之外的其他兄弟
.is（）函数 判断一个元素是否符合某种选择器的条件要求
$元素.is("选择器" )
例子好好想
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.tabs{ list-style:none; padding:0 }
.tabs a{
text-decoration:none;
color:#000;
padding:6px 12px;
display:inline-block;
}
.tabs>li{
float:left;
border-bottom:1px solid #000;
}
.tabs>.active{
border:1px solid #000;
border-bottom:0;
}
</style>
</head>
<body>
<h1>使用属性选择器实现标签页头的切换</h1>
<ul class="tabs">
<li class="active">
<a data-toggle="tab" href="#">十元套餐</a>
</li>
<li>
<a data-toggle="tab" href="#">二十元套餐</a>
</li>
<li>
<a data-toggle="tab" href="#">三十元套餐</a>
</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//因为所有都可以点击，当点击一个之后，其他效果就要取消，所有用事件委托进行优化，事件应该只绑定一份在ul上
$(".tabs").click(function(e){
//用e.target代替this
var $tar=$(e.target);
//判断e.target是不是想要的
if($tar.is("a")){
//给当前a的爹添加clas ACtive 再给当前a的爹li的其余兄弟移除class
$tar.parent().addClass("active");
$tar.parent().siblings().removeClass("active");
}
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.tabs{ list-style:none; padding:0 }
.tabs a{
text-decoration:none;
color:#000;
padding:6px 12px;
display:inline-block;
}
.tabs>li{
float:left;
border-bottom:1px solid #000;
}
.tabs>.active{
border:1px solid #000;
border-bottom:0;
}
</style>
</head>
<body>
<h1>使用属性选择器实现标签页头的切换</h1>
<ul class="tabs">
<li class="active">
<a data-toggle="tab" href="#">十元套餐</a>
</li>
<li>
<a data-toggle="tab" href="#">二十元套餐</a>
</li>
<li>
<a data-toggle="tab" href="#">三十元套餐</a>
</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
//因为所有都可以点击，当点击一个之后，其他效果就要取消，所有用事件委托进行优化，事件应该只绑定一份在ul上
$(".tabs").click(function(e){
//用e.target代替this
var $tar=$(e.target);
//判断e.target是不是想要的
if($tar.is("a")){
//给当前a的爹添加clas ACtive 再给当前a的爹li的其余兄弟移除class
//进阶版链式操作，只要前一个函数的返回值和后一个函数所需的.前主语相同，就可以直接将后一个函数直接连在前一个函数之后
//.parent返回的是当前a元素的li，.assclass返回的也是li，下一个需要的也是li
$tar.parent().addClass("active").siblings().removeClass("active");
}
})
</script>
</body>
</html>
添加/删除/替换/克隆
添加新元素
DOM 创建新元素对象
设置关键属性
将新元素添加到DOM树上
在父元素下所有子元素末尾追加新元素：元素.appendChild(新元素)
插入到父元素下某个现有子元素之前： 父元素.insertBefore(新元素，现有元素)
替换父元素下一个现有子元素 父元素.replaceChild(新元素，现有元素)
JQ 用html代码片段创建新元素
var $新元素=$(`html片段`)； 我们在$()内写什么样的html片段，$()就可以将html片段创建什么样的元素对象
将新元素添加到DOM树
在父元素下所有子元素末尾追加新元素：
$父元素.append($新元素) 返回父元素，后续可接对父元素执行的操作
$新元素.appendTo（$父元素）
在父元素下所有子元素开头插入新元素：
$父元素.prepend($新元素)
插入到一个现有元素之前： $现有元素.before($新元素)
插入到一个现有元素之后： $现有元素.after($新元素)
替换现有子元素 $现有元素.replaceWith($新元素)
克隆元素
$元素.clone()
例子好好想
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
border: 1px solid #aaa; overflow:hidden;
}
.block {
float: left; margin: 10px;
border: 1px solid #aaa;
background: #faa;
width: 150px; height: 150px;
}
.block:hover{ box-shadow:0 5px 6px #000; }
.close {
float:right; padding:5px;
font-weight:bold; opacity:.2; cursor: pointer;
}
.close:hover { opacity: .5; }
</style>
</head>
<body>
<h1>添加/删除节点</h1>
<button id="add-block">添加区块</button>
<div class="container">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("#add-block").click(function(){
//所有新方块都要放在class为container的div下
var $div=$(".container");
//创建新方块
var $block=$(`
<div class="block">
<span class="close">×</span>
</div>
`);
//设置新方块背景为随机颜色
$block.css("background-color",`rgb(${parseInt(Math.random()*256)},
${
parseInt(Math.random()*256)
},${
parseInt(Math.random()*256)
})`)
//将新方块插入到div开头
$div.prepend($block);
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
border: 1px solid #aaa; overflow:hidden;
}
.block {
float: left; margin: 10px;
border: 1px solid #aaa;
background: #faa;
width: 150px; height: 150px;
}
.block:hover{ box-shadow:0 5px 6px #000; }
.close {
float:right; padding:5px;
font-weight:bold; opacity:.2; cursor: pointer;
}
.close:hover { opacity: .5; }
</style>
</head>
<body>
<h1>添加/删除节点</h1>
<button id="add-block">添加区块</button>
<div class="container">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
// 链式操作
$("#add-block").click(function(){
$(`<div class="block">
<span class="close">×</span>
</div> `)
.css("background-color",`rgb(${parseInt(Math.random()*256)},
${
parseInt(Math.random()*256)
},${
parseInt(Math.random()*256)
})`)
.prependTo(".container"); //只要提供选择器，jq自动帮我们查找父元素
})
</script>
</body>
</html>
删除功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.container {
border: 1px solid #aaa; overflow:hidden;
}
.block {
float: left; margin: 10px;
border: 1px solid #aaa;
background: #faa;
width: 150px; height: 150px;
}
.block:hover{ box-shadow:0 5px 6px #000; }
.close {
float:right; padding:5px;
font-weight:bold; opacity:.2; cursor: pointer;
}
.close:hover { opacity: .5; }
</style>
</head>
<body>
<h1>添加/删除节点</h1>
<button id="add-block">添加区块</button>
<div class="container">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
// 链式操作
$("#add-block").click(function(){
$(`<div class="block">
<span class="close">×</span>
</div> `)
.css("background-color",`rgb(${parseInt(Math.random()*256)},
${
parseInt(Math.random()*256)
},${
parseInt(Math.random()*256)
})`)
.prependTo(".container"); //只要提供选择器，jq自动帮我们查找父元素
})
//删除方块
//因为多个x号都可点击，所有用事件委托优化，事件绑定在最外层的div上一份
$(".container").click(function(e){
//用e.target代替this
var $tar=$(e.target);
//点在span上才执行操作,删除的是他爹不是它本身
if($tar.is("span")){
$tar.parent().remove();
}
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1>替换节点</h1>
<div id="chosen">
<img src="img/p0.png">
</div>
<hr />
<div id="list">
<img src="img/p3.png">
<img src="img/p4.png">
<img src="img/p5.png">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//因为三个飞机都可以点，所有，事件委托，绑定咋父元素di上一份即可
$("#list").click(function(e){
//用e.target代替this
var $tar=$(e.target);
//判断，只有点在img元素上，才执行操作
if($tar.is("img")){
//用当前图片代替chosen下的img ，这种效果不行
//$("#chosen>img").replaceWith($tar); 两种写法一样效果
//$tar.replaceAll("#chosen>img");
//应该是制造两张图片，一张放上去，一张在原位,也就是说将先前图片复制一个副本，再用副本去代替id为chosen下的img
$tar.clone().replaceAll("#chosen>img");
}
})
</script>
</body>
</html>事件绑定
DOM
JS 赋值 元素.on事件名=function(){ ............}
添加事件监听 元素.addEventListener("事件名"，事件处理函数)
元素.removeEventListener("事件名”，原事件处理函数)
JQ
标准写法： $元素.on（“事件名”，事件处理函数） ====== 元素.addEventListene
$元素.off("事件名"，原事件处理函数）==========元素.removeEventListener(
可简写 $元素.事件名(事件处理函数) 条件是绑定的事件属于常用事件列表eg$元素.click(事件处理函数)
它的底层是addEventLister,不是onclick
移除事件监听：
和dom一样，必须使用有名称的事件处理函数才能移除。
和dom不一样在于jq中，即时使用有名称的函数，也可添加多个相同的事件监听对象。移除时，因为添加的多个同名函数都是同一个函数，所以移除时，所有同名函数一起移除。
常用事件列表
blur 失去焦点 change 下来列表选中项改变
click 单击 dblclick 双击
focus 获得焦点
keydown 键盘按键按下 keyup 键盘按键抬起
mousedowm 鼠标按键按下
mouseenter 鼠标 进入 jq mouseleave 鼠标移出jq
mousemove 鼠标移动
mouseout 鼠标移出 mouseover鼠标进入
mouseup 鼠标按键抬起
resize 窗口大小改变 scroll网页滚动
load 加载完成
子弹案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>事件绑定</h1>
<button id="btn1">发射子弹</button>
<button id="btn2">获得奖励</button>
<button id="btn3">失去奖励</button>
<script src="js/jquery-1.11.3.js"></script>
<!-- jquery -->
<script>
//点击btn1，发射子弹
$("#btn1").click(function(){
console.log(`发射子弹.....`)
})
//点击btn2，不发射任何子弹，为btn1添加新子弹
// $("#btn2").click(function(){
// $("#btn1").click(function(){
// console.log(`增加新的子弹======`)
// })
// })
function shoot2(){
console.log(`增加新的子弹======`)
}
$("#btn2").click(function(){
$("#btn1").click(shoot2)
})
//点击btn3，移除新子弹，需要原事件处理函数
// $("#btn3").click(function(){
// $("#btn1").off("click",function(){
// console.log(`发射新子弹======`)
// })
// })
//移除成功
$("#btn3").click(function(){
$("#btn1").off("click",shoot2)
})
</script>
</body>
</html>
事件委托
jquery提供了一种独特的简化版事件委托方式，但这个方式只适合于jq使用，其他框架用不了
今后，其他框架用事件委托，还有用DOM标准的事件委托3步
步骤：
事件绑定在父元素上一份
不需要用e.target代替this,this重新指向当前点击的目标元素
不需要if判断目标元素的特征，而是，在on函数上增加了第二个参数--选择器，由on自动用选择器判断是否有必要继续执行操作
$父元素.on("事件名"，“选择器”。function(){\
........
})
小飞机案列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
text-align: center;
}
</style>
</head>
<body>
<h1>替换节点</h1>
<div id="chosen">
<img src="img/p0.png">
</div>
<hr />
<div id="list">
<img src="img/p3.png">
<img src="img/p4.png">
<img src="img/p5.png">
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("#list").on("click","img",function(){
$(this).clone().replaceAll("#chosen>img");
})
</script>
</body>
</html>页面加载后自动执行
问题：将来多数情况下，很多页面初始化操作（事件绑定/ajax请求）都需要在页面加载完成后，才自动执行。这些代码写在哪
解决：如果直接在页面中写js代码，必须写在body结尾的<script>标签中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<button id="btn1">click me</button>
<button id="btn1">click me</button>
<script>
$("#btn1").click(function(){
alert("11");
})
</script>
</body>
</html>问题：在html中，不应该包含任何js代码。所有js代码都要放在独立的js文件中，再通过<script src="">引入到页面中执行。但是，有人喜欢把script放在head中引入，有人在body中引入。如何保证无论在哪引入scriptl.页面初始化代码注定只能在页面加载后才能自动执行？
解决：网页所有内容加载完成后，会自动触发一个内部事件window.onlaod.所以，我可以提前将页面初始代码绑定到window.onload事件上，暂不执行。等到事件触发时再执行。
引入自己创建的js页面 案列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
//html页面代码
<button id="btn1">click me</button>
<button id="btn2">click me</button>
<script src="alert1.js"></script>
</body>
</html>//js代码
$("#btn1").click(function(){
alert("1111");
})引入自己创建绑定页面初始代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
<script src="alert1.js"></script>
</head>
<body>
//html页面代码
<button id="btn1">click me</button>
<button id="btn2">click me</button>
</body>
</html>
//js代码
window.onload=function(){
$("#btn1").click(function(){
alert("1111");
})
}
问题：开发中一般都是多人协作开发，有多个js文件，如果每个js文件都有window.οnlοad=function(){....},后定义的window.οnlοad=function(){....}会覆盖之前定义的window.οnlοad=function(){ ......}
解决：DOM window.addEventListener("load",function(){.....})
JQ $(window).load(function(){ ....})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
<script src="alert1.js"></script>
<script src="divr1.js"></script>
</head>
<body>
<!-- html页面 -->
<button id="btn1">click me</button>
<button id="btn2">kiss me</button>
</body>
</html>//alert1.js页面
$(window).load(function(){
$("#btn1").click(function(){
alert("1111");
})
})//divr1js页面
$(window).load(function(){
$("#btn2").click(function(){
alert("我不知道我是谁")
alert( $("#btn1").html());
})
})提升页面加载速度
问题·：window.onload必须等待所有网页内容（html+js+css+图片）都加载完才自动执行，----太慢了。有些着急的操作（抢票），用户根本不关心样式和图片，只求第一时间就能立刻点击按钮执行功能
解决：其实，网页在加载过程中，有两次加载完成事件：
DOM 先将DOM内容（html+js）加载完，提前触发DOMContentLoaded事件，然后才将所有网页内容（html+js+css+图片）都加载完 ，触发onload事件
今后，只要将页面初始化操作，绑定在DOMContentLoaded事件中，就可比window.onload提前很多执行。
DOM document.addEventListener("DOMContentLoaded",function(){
............})
JQ
标准：$(document).ready(function(){......})
简写：$().ready(function(){ .......})
$(function(){.......}) //后面不加（），因为这里只是绑定事件，不是立刻执行
$(()=>{ ......}) //ES6
今后，几乎所有jq页面初始化代码（事件绑定，ajax请求），都要放在$(function(){ ......})
页面加载速度案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
<script>
window.onload=function(){
alert("onload主页面，我是第几个出来呢")
}
</script>
<script src="alert1.js"></script>
<script src="divr1.js"></script>
</head>
<body>
<!-- html页面 -->
<button id="btn1">click me</button>
<button id="btn2">kiss me</button>
</body>
</html>//alert1 js页面
document.addEventListener("DOMContentLoaded",function(){
alert("addEvent...先加载")
$("#btn1").click(function(){
alert("1111");
})
})//divr1 js页面
document.addEventListener("DOMContentLoaded",function(){
alert("我来啦");
$("#btn2").click(function(){
alert("222222")
alert( $("#btn1").html());
})
})
事件
鼠标事件
DOM mouseover 当鼠标进入元素范围内，自动触发
mouseout 当鼠标离开元素范围内，自动触发
问题：如果反复进出子元素，也会返回触发父元素上的鼠标进入和移除事件。
解决：今后，如果不希望反复进出子元素，也反复触发父元素上的事件时，都用mouseenter 和mouseleave代替mouseover、mouseout
简写：仅仅限于jq ,同时绑定mouseenter和mouseleave，可简写为
$元素.hover(
function(){......}, function(){ ....}
)
更简化
将mouseenter和mouseleave两个函数修改为完全一样的函数，则可以简化为
$元素.hover(
function(){....} //即给mouseenter 又给mouseleave
)
鼠标移入移除事件案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#d1 #d2 #d3 {
cursor: pointer
}
#d1 {
background-color: green;
position: relative;
width: 150px;
height: 150px;
text-align: center;
cursor: pointer;
}
#d2 {
background-color: blue;
position: absolute;
top: 25px;
left: 25px;
width: 100px;
height: 100px;
}
#d3 {
background-color: red;
position: absolute;
top: 25px;
left: 25px;
width: 50px;
height: 50px;
line-height: 50px;
}
</style>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="d1">
<div id="d2">
<div id="d3">
</div>
</div>
</div>
<script>
//效果错误
// $("#d1").mouseover(function(){
// console.log(`进入d1`);
// })
// .mouseout(function(){
// console.log(`离开d1`);
// })
//用下面单词不会产生这样的问题
$("#d1").mouseenter(function(){
console.log(`进入d1`);
})
.mouseleave(function(){
console.log(`离开d1`);
})
</script>
</body>
</html>
鼠标移除移入简化案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#target {
border: 1px solid #eee;
border-radius: 6px;
padding: 10px;
transition: all .5s linear;
}
#target.hover {
border: 1px solid #aaa;
box-shadow: 0 0 6px #aaa;
background-color:red;
color:#fff;
}
</style>
</head>
<body>
<h1>使用hover(fn,fn)</h1>
<h3>鼠标悬停在div上方，则突出显示；移出则取消突出显示</h3>
<div id="target">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi neque quae voluptatum ducimus culpa itaque maxime distinctio soluta cum cupiditate esse tenetur deserunt fuga perferendis sed veritatis asperiores. Numquam officia.</p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
$("#target").hover(
function(){$(this).addClass("hover")},
function(){$(this).removeClass("hover")}
)
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#target {
border: 1px solid #eee;
border-radius: 6px;
padding: 10px;
transition: all .5s linear;
}
#target.hover {
border: 1px solid #aaa;
box-shadow: 0 0 6px #aaa;
background-color:red;
color:#fff;
}
</style>
</head>
<body>
<h1>使用hover(fn,fn)</h1>
<h3>鼠标悬停在div上方，则突出显示；移出则取消突出显示</h3>
<div id="target">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi neque quae voluptatum ducimus culpa itaque maxime distinctio soluta cum cupiditate esse tenetur deserunt fuga perferendis sed veritatis asperiores. Numquam officia.</p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//更简化写法
$("#target").hover(
function(){$(this).toggleClass("hover")}
)
</script>
</body>
</html>
模拟触发
定义：即时没有点到这个按钮，也能触发到这个按钮上的单击事件
$元素.triggle("事件名") 触发一个元素身上指定的
简写：如果模拟触发事件属于常用事件列表中，简写 $元素.事件名（）
模拟事件案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<!-- 功能：点击百度按钮搜索
文本框按回车搜索
文本框一边输入一边搜索-->
<input><button>百度一下</button>
<script>
//百度按钮功能实现
$("button").click(function(){
//获得文本框的内容，去掉开头结尾空字符
var str=$(":text").val().trim();
if(str!==""){
console.log(`搜索${str}相关的内容.....`)
}
})
//110.31
//文本框回车搜索 模拟触发
//keydown keyup区别 为防止用户恶意一直按键
// $(":text").keyup(function(e){
// //按键的序号已经保存到了事件e中的keyCode属性中
// if(e.keyCode==13){
// $("button").trigger("click");
// }
// })
//第二种方式简写
$(":text").keyup(function(e){
//按键的序号已经保存到了事件e中的keyCode属性中
if(e.keyCode==13){
$("button").click();
}
})
//文本框一边输入一边搜索 input只要输入了内容就自动触发,但input不属于常用事件
$(":text").on("input",function(){
//找到按钮，触发按钮的单击事件
$("button").trigger("click");
})
</script>
</body>
</html>动画
简单动画
显示隐藏
.show（） 让元素显示出来
.hide() 让元素隐藏
.toggle() 让元素在显示和隐藏之间切换
问题：如果不带参数，相当于display:none,不带动画效果瞬间显示隐藏
解决：在（）中添加毫秒数就可以了
上滑下滑
.slideUp() 元素上滑
.slideDown() 元素下滑
.slideToggle() 元素在上滑和下滑之间来回切换
淡入淡出
.fadeIn() 让元素淡入
.fadeOut() 让元素淡出
.fadeToggle() 在淡入淡出之间来回切换
存在问题：底层都是封装好的jq代码，极其不便于维护
底层使用DOM操作+定时器，模拟实现的动画效果，效率不如css
解决：今后，实现简单动画效果，首先css的transition和animation
推荐使用show()、hide()、toggle()这三个函数在不加毫秒数时，等效于display:none和display：block.
动画案列一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0; padding:0;}
#target{
border-radius:10px;
background:#eee;
}
.fade{/*动画起始状态*/
height:104px; width:970px; opacity:1;
padding: 10px; overflow:hidden;
border: 1px solid #aaa;
}
.out{/*动画结束状态*/
}
</style>
</head>
<body>
<button id="btn1">显示/隐藏div</button>
<div id="target">
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore debitis animi sint iste sequi sunt ad excepturi error labore molestiae est expedita eos nisi placeat provident dolorem quos facilis! Sapiente!</span><span>Accusamus neque id reprehenderit! Voluptatem in deleniti laboriosam commodi facere magnam impedit minima corrupti distinctio culpa amet optio natus esse. Inventore incidunt ab id perspiciatis atque minus magnam tempore harum.</span></p>
</div>
<script src="js/jquery-1.11.3.js"></script>
<script>
//一瞬间显示隐藏效果
// $("#btn1").click(function(){
// var $div=$("#target");
// //如果div是隐藏的，就显示出来
// if($div.css("display")=="none"){
// $div.show();
// }else{
// $div.hide();
// }
// })
//有过程的显示隐藏效果
//$("#btn1").click(function(){
//var $div=$("#target");
//如果div是隐藏的，就显示出来
//if($div.css("display")=="none"){
// $div.show(2000);
//}else{
// $div.hide(2000);
//}
//})
//显示隐藏简化
// $("#btn1").click(function(){
// $("#target").toggle(2000);
// })
//上滑下滑简化
//$("#btn1").click(function(){
//$("#target").slideToggle(2000);
// })
//淡入淡出简化
$("#btn1").click(function(){
$("#target").fadeToggle(2000);
})
</script>
</body>
</html>显示隐藏动画案例2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body {
text-align: center;
}
ul {
list-style: none;
}
li {
margin: 0;
padding: 0;
display: inline-block;
width: 30%;
}
</style>
</head>
<body>
<ul id="list">
<li>0尼康(234)</li>
<li>1佳能(22)</li>
<li>2索尼(932)</li>
<li>3宾得(11)</li>
<li>4爱国者(3234)</li>
<li>5欧巴(32)</li>
<li>6海鸥(2334)</li>
<li>7卡西欧(334)</li>
<li>8三星(834)</li>
<li>9松下(234)</li>
<li>10其它品牌(2343)</li>
</ul>
<button data-toggle="brandlist">精简显示品牌</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//查找触发事件的元素,绑定事件处理函数
$("button").click(function(){
//需要隐藏的是欧巴到松下
$("ul>li:gt(4):not(:last-child)").toggle();
//按钮内容修改功能
var $btn=$(this);
if($btn.html()=="精简显示品牌"){
$btn.html("显示所有品牌");
}else{
$btn.html("精简显示品牌")
}
})
</script>
</body>
</html>
万能动画
定义:可以对各种css属性应用动画效果
$元素.animate({
css属性：目标值，
...........:...：.....
} ， 动画持续时间毫秒数)
强调：animate()内部只需要写CSS属性的目标值即可，不用写现在的启始值.
animate()会自动根据css属性当前的起始值和我们提供的目标值，相减获得差值，在自动安排动画播放效果。
但是，animate()只能对单个数值的css属性，应用动画效果
缺点：不如transition强大，它不支持颜色动画，css变换。
排队和并发
并发：多个css属性，同时变化。eg:一个animate()中有多个css属性，它同时执行
排队：多个css属性按顺序依次执行。
eg:对同一个元素，发复调用多个animate（）函数，多个animate()内的css属性是排队变化的。
原理：jq中，每个元素身上都有一个动画队列
animate()函数并不是立刻执行动画的意思，而是将动画加入到元素的动画队列中
如果队列中之前还有正在播放的动画效果，则后加入的animate()暂时等待
如果队列中之前没有正在播放的动画效果了，则后加入的animate()才能开始执行。
停止动画 -----还有问题，自己看例子找到问题（自己）
$元素.stop();
坑：stop（）默认只能停止当前正在播放的一个动画效果。队列中后续的动画依然继续执行
$元素.stop(true)既能停止当前动画，又能清空队列
选择器：（jq）独有 ：animated 专门匹配正在播放jq动画的元素
动画结束后，自动执行一项任务：
问题：因为animate()底层是定时器，是异步的，所以，放在动画之后的代码，不会等待动画播放完了，就提前执行了
解决：今后，只要希望在动画结束后才自动执行的代码，比如放在animate()函数的第三个函数中---回调函数参数
$元素.animate({
css属性：目标值
}，动画持续时间毫秒数，
function(){
这段函数在动画播放完后执行
}
)
星星动画案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
img {
position: relative;
}
</style>
</head>
<body>
<img id="s1" src="img/star.png"><br />
<img id="s2" src="img/star.png"><br />
<img id="s3" src="img/star.png"><br />
<img id="s4" src="img/star.png"><br />
<script src="js/jquery-1.11.3.js"></script>
<script>
//第一个星星向右移动
// $("#s1").click(function(){
// $(this).animate({
// left:300
// },3000)
// })
//第一个星星向右移动，并增加单击实现暂停 移动功能
$("#s1").click(function(){
var $this=$(this);
//如果星星在播放动画，停止动画
if($this.is(":animated")){
$this.stop();
}else{
$(this).animate({
left:800
},9000)
}
})
//第二个星星先向右，再向下
//这里注意并发和排队知识
// $("#s2").click(function(){
// $(this).animate({
// left:300
// },3000)
// .animate({
// top:300
// },3000)
// })
//第二个星星先向右，再向下 加上停止移除动画功能
$("#s2").click(function(){
var $this=$(this);
//如果当前星星正在播放动画，停止动画
if($this.is(":animated")){
$this.stop(true);
}else{
$this.animate({
left:300
},3000)
.animate({
top:600
},3000)
}
})
//第三个星星从左上角往右下角方向移动
$("#s3").click(function(){
$(this).animate({
left:300,
top:300
},3000)
})
//第四个星星变大变淡直到消失
// //注意：opacity虽然让星星看不到，但是位置还在那，所以点击它，还是可以看到alert的消息
// $("#s4").click(function(){
// alert("我会出现2次");
// $(this).animate({
// width:200,
// height:200,
// opacity:0
// },3000)
// })
//让星星直接消消，加上.hide()，但是点击后直接消失了
// $("#s4").click(function(){
// alert("我会出现2次");
// $(this).animate({
// width:200,
// height:200,
// opacity:0
// },3000)
// .hide()
// })
// 第四个星星变大变淡直到消失，并且位置也消失了
$("#s4").click(function(){
alert("我只能出现1次");
$(this).animate({
width:200,
height:200,
opacity:0
},3000,
function(){
$(this).hide()
})
})
</script>
</body>
</html>类数组对象
遍历
数组家：
arr.forEach(function(当前元素值，当前下标位置，当前数组){
.........
})
JQ家
$查找结果.each(function(当前下标位置，当前DOM元素){
对查找结果中每个DOM元素执行相同的操作
}）
强调：从jq查找结果中，遍历出的每个东西都是DOM元素对象
想对each遍历出的每个DOM元素继续使用简化版函数，必要用$()重新包装一下
遍历案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id="list">
<li>98</li>
<li>85</li>
<li>33</li>
<li>99</li>
<li>52</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
var arr=["郁郁","赵赵","陈陈"];
arr.forEach(function(i){
console.log(`${i}一夜成名`)
})
//请把身家在60亿以下的+10亿，并将身家超过90亿的用pink标出来。
$("ul>li").each(function(i,money){
var $li=$(money);
//获取保存在li里的身家
var rich=parseInt($li.html());
//如果身家小于60，就加10亿
if(rich<60){
$li.html(score+10)
}else if(rich>=90){
$li.css("background-color","pink")
}
})
</script>
</body>
</html>查找
数组家
var 下标位置=arr.indexOf(要找的元素值)
返回值 如果找到要找元素，返回元素所在的下标位置，如果没找到，返回-1
JQ家
var 下标位置=$查找结果.index（要找的DOM元素）
返回值：找到返回元素下标，找不到返回-1
打分案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.score {
list-style: none;
margin: 0;
padding: 0;
}
.score li {
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid #f00;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<h3>请打分</h3>
<ul class="score">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
// var arr=[1,2,3,4,5];
// //找到数字3的下标位置
// var i=arr.indexOf(3);
// console.log(i);
//jq
//单击li的时候，li及它之前的颜色都变为一种颜色，他之后的是另一种颜色
//查找触发事件元素 事件委托
$("ul").click(function(e){
//用e.target代替this
var $tar=$(e.target);
//判断只有点在li上才能触发事件
if($tar.is("li")){
//先获得当前点击的li在所有li中的下标位置
var i=$("ul>li").index($tar);
//让<i+1位置所有li背景为黄色
//注意：这是反引号
$(`ul>li:lt(${i+1})`).css("background-color","yellow");
//让>i位置的所有li背景变为白色
$(`ul>li:gt(${i})`).css("background-color","#fff");
}
})
</script>
</body>
</html>添加自定义函数
问题:如果项目中经常使用的一项功能，jq没有提供简化版函数，怎么办？
解决：可以自定义一个函数，放入jquery的原型对象中。这样当前项目中所有jquery子对象都可以使用原型对象中的自定义共有方法
Juery.prototype.自定义函数=function(){
.........
}
强调：JQuery原型对象中共有方法中的this指向将来调用这个共有方法的.前的某个jq对象
因为this已经指向将来的某个jq对象了，所有不用$(this)包裹
自定义函数案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>85</li>
<li>91</li>
<li>73</li>
<li>59</li>
</ul>
<script src="js/jquery-1.11.3.js"></script>
<script>
<!-- 假设，在项目中经常需要对找到的元素求和 -->
jQuery.prototype.sum=function(){
//数组求和
//定义一个变量，准备临时保存和
var result=0;
//遍历数组中的元素，不确定，不能写死，each做一样
// for(var i=0;i<this.length;i++){
//this指向将来调用这个sum函数的.前的jq对象
//因为已经指向jq对象，所有不用$(this)
// //每遍历一个DOM元素，就取出DOM元素的内容，累加到result上
// result+=parseFloat(this[i].innerHTML)
// }
this.each(function(i,money){
result+=parseFloat(money.innerHTML);
})
//遍历结束，返回result
return result;
}
console.log($("ul>li").sum());
</script>
</body>
</html>封装自定义插件
什么是插件/组件：拥有专属的html+css+js的可重用的页面独立功能区域。
为什么使用它：重用！
jQ官方
提供了一套插件库jquery ui
官网：jqueryui.com
注意：它有两个文件，js文件夹里有一个js，css里有一个ui js
如何使用：
1 ：引用文件
<link rel="stylesheet" href="css/jquery-ui/css">
<script src="js/jquery-1.11.3.js">
<script src="js/jquery-ui.js">
2：写好编写html结构和内容，不用加任何的class
3：在自定义脚本<script>中，用$()找到插件父元素，调用jquery-ui提供的插件函数
问题：它将所有的交互和样式定义，都封装在了插件函数内，导致程序员维护起来非常困难
只有pc端，没有移动端，没有响应式
自定义插件
前提：已经用传统的jquery+css实现了插件的效果，只不过，插件的代码是和网页中其他代码混在一起，不便于重用而已。
重用步骤：
将插件相关的css代码，复制黏贴到一个独立的css文件中
在一个独立的js文件中，定义插件函数，添加到jquery的原型对象中。自定义插件函数做两件事，在css文件为html添加css样式，在js文件为指定元素绑定事件处理函数
在html页面内引用官方的js文件和自己定义的css、js文件。
jquery ui 官方提供的手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/jquery-ui.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<body>
<h2>jquery ui 手风琴效果</h2>
<div id="my-accordion">
<div>《西游记》简介</div>
<div>一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi? </div>
<div>《水浒传》简介</div>
<div>105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
<div>《红楼梦》简介</div>
<div>一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
</div>
<script>
$("#my-accordion").accordion();
</script>
</body>
</html>自己自定义插件实现手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="my-ui/my-ui.css">
<script src="js/jquery-1.11.3.js"></script>
<script src="my-ui/my-ui.js"></script>
</head>
<body>
<div id="my-accordion">
<div>《西游记》简介</div>
<div>一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi? </div>
<div>《水浒传》简介</div>
<div>105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
<div>《红楼梦》简介</div>
<div>一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
</div>
<script>
$("#my-accordion").myAccordion();
</script>
</body>
</html>.accordion{width:80%; margin:0 auto;}
.accordion>.title{
background:#eee; border:1px soild #aaa;
padding:6px; font-size:1.5em;
font-weight:bold; cursor:pointer;
}
.accordion>.content{
border-left:1px solid #eee;
border-right:1px solid #eee;
}
.accordion>:last-child{
border-bottom:1px solid #eee;
}
.fade{
height:0;
opacity:0;
overflow:hidden;
transition:all .5s linear;
}
.in{
height:84px;
opacity:1;
}
.h2{
font-size:1000px;
color:red;
}jQuery.prototype.myAccordion=function(){
//自动为插件对应的元素添加class
//为当前父元素自己加class accordion
this.addClass("accordion")
//为当前父元素下所有奇数位置的元素加class title
.children(":nth-child(2n+1)")
.addClass("title")
//return 所有奇数位置的元素
//为所有奇数位置的元素的下一个兄弟加class content fade
.next().addClass("content fade")
//return 所有偶数位置的元素
.first().addClass("in");
//自动为插件对应的元素绑定事件
$(".accordion").on("click",".title",e=>
$(e.target).next(".content")
.toggleClass("in")
.siblings(".content").removeClass("in")
);
}ajax
ajax:从今天起。今后所以的函数库和框架中发送ajax请求，永远只要一句话即可。
$.ajax({
url:"服务器端接口地址"，
type:"get/post",
data:{变量名：变量值， //发给服务器端的参数值，如果不带参数，data可省略
.............
}，
dataType:"json"， //服务器返回的几乎都是json字符串，它必须经过json.parse()解析，才能使用，datatType:"json"就是自动调用JSON.parse()
success:function(result){ //请求响应成功后，自动调用。result自动接住服务器返回的结果
}
})
东哥新浪云服务器 http://xzserver.applinzi.com
测试各个页面是能登上 浏览器页面输入 http://xzserver.applinzi.com/index
http://xzserver.applinzi.com/details?lid=5
注意：登录这个页面用的方式必须是vscode 浏览器的live server服务器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="js/jquery-1.11.3.js"></script>
<script>
//从东哥新浪云服务器请求首页的6个商品组成的数组
$.ajax({
url:"http://xzserver.applinzi.com/index",
type:"get",
dataType:"json",
success:function(result){
console.log(result);
}
})
//从东哥新浪云服务器请求5号商品的详细信息对象
$.ajax({
url:"http://xzserver.applinzi.com/details",
type:"get",
data:{lid:5},
dataType:"json",
success:function(result){
console.log(result);
}
})
//去东哥新浪云服务器进行登录验证
$.ajax({
url:"http://xzserver.applinzi.com/users/signin",
type:"post",
data:{uname:"dingding",upwd:"123456"},
dataType:"json",
success:function(result){
console.log(result);
}
})
</script>
</body>
</html>
跨域
定义：一个域名下的网站，要使用另一个域名下的资源
eg:<img src="别的网站的图片地址'>
<link rel="stylesheet" href="别的网站的css文件">
<script src="别的网站的js">
<iframe src="别的网站的网页片段">
<a href="别的网站的页面">
$.ajax({“别的网站的服务器端接口”，.......})
.........
跨域包括：
域名不一样 http://www.a.com www.b.com
子域名不同 http://oa.tedu.cn hr.tedu.cn
端口号不同 http://localhost:5500 localhost:3000
协议不同 http://12306.cn https://12306.cn
即时是本级内网站访问自己的资源，如果域名向ip名发送请求，也算跨域：
http://127.0.0.1:5500 (127.0.0.1 ip名) http://localhost:5500 (localhost 域名)
问题：常见错误：重复打开服务器端，关掉它。
每编写过js文件，就要重新保存，并ctrl+c,然后重新运行一次
问题：如果使用ajax发送跨域请求，会报一个经典的跨域错误：
浏览器都有同源策略（cors策略）
什么是：浏览器只允许和当前网页所在域名来源相同的数据进入浏览器被使用.如果请求回来的数据来源，与当前网页所在的地址不一致！则浏览器禁止程序使用请求回来的数据
同源策略只限制ajax xhr请求，不限制其他link img script等请求。
解决方法：3种
cors方式：简单，单靠服务器端就可跨域
原理：请服务器端修改“寄件人地址”，与客户端网页所在地址保持一致。这样就可以骗过浏览器的同源策略
方法：修改服务器端
res.writeHead(200,{
"Access-Control-Allow-Origin":"http://客户端域名：端口号"，
.....:.......
})
"Access-Control-Allow-Origin":属性后的地址，会替换响应结果上响应头中的寄件人地址。如果寄件人地址和网页所在的网址完全相同，就可以骗过浏览器cors策略检查，进入程序中使用。
//服务器端代码 ，所以，如果不会，一点关系都没有
const http=require("http");
http.createServer(function(req,res){
var weather="北京 小学 -9-0";
res.writeHead(200,{
//解决ajax的同源策略问题
"Access-Control-Allow-Origin":"http://127.0.0.1:5500",
"Content-type":"text/plain;charset=utf8"
});
res.write(weather);
res.end();
}).listen(3000);
//运行用终端<!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.0">
<title>Document</title>
</head>
<body>
<script src="js/jquery-1.11.3.js"></script>
<script>
//直接浏览器运行 live server 请求服务器端3000的数据
$.ajax({
url:"http://127.0.0.1:3000",
success:function(result){
document.write(`<h2>${result}</h2>`)
}
})
</script>
</body>
</html>
jsonp方式：补充，在其他视频 小程序
代理方式 vue 第5天
案例
倒计时 记得补上视频
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h3>距离2021年劳动节还有:<span id="timeSpan"></span></h3>
<script src="js/jquery-1.11.3.js"></script>
<script>
function ts(){
//获取现在时间
var now=new Date();
//2021年劳动节
var target=new Date(2021,5,1,1);
//还差时间
var s=(target-now)/1000;
if(s>0){
//天数
var d=parseInt(s/3600/24);
//小时
var h=parseInt((s%(3600*24))/3600);
//分钟
var m=parseInt((s%3600)/60);
//秒
var S=parseInt(s%60);
var str=`${d}天${h}小时${m}分${S}秒`;
$("#timeSpan").html(str);
}
else if(s=0){
$("#timeSpan").html(`过节啦`).css("color","red");
// 停止计时
clearInterval(timer);
}
if(s<0){
$("#timeSpan").html(`节日已过啦`).css("color","green");
}
}
//每隔一秒钟计算一次
var timer=setInterval(ts,1000);
</script>
</body>
</html>
魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)