定义: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,操作更方便哦
![](https://i-blog.csdnimg.cn/blog_migrate/4b5dbd2fbcb434d64a59a646be6ee15f.png)
<!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对象------链式操作
![](https://i-blog.csdnimg.cn/blog_migrate/75e10a9496d7ab44679ed33a99d7f7fa.png)
<!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{
$other