jQuery基础
jQuery概述
解决兼容性问题
jQuery优势
jQuery理念：少写多做（write less ，do more）
主要提供功能：
- 访问和操作DOM元素：封装了大量DOM操作
- 强大的选择器：允许使用CSS1~CSS3所有的选择器
- 可靠的事件处理机制：表现层和功能分离，专注于程序的逻辑设计
- 完善的Ajax操作
- 链式操作方式：在某一对象上产生一系列动作，允许对象连续多次操作
- 完善的文档
搭建jQuery开发环境
官网：http://jquery.com
-
引入jQuery库
不需要安装，只需要放在一个目录中，在页面中通过<srcipt />标签引入即可
<script type="text/javascript" src="ja/jquery-3.4.1.js"></script> -
jQuery简单测试
通过
$()函数来获取页面中的元素，对元素进行定位，效果处理<!doctype html> <html> <head> <meta charset="uts-8"> <title>jQuery测试</title> <script type="text/javascript" scr="js/jquery-3.4.1.js"></script> </head> <body> <div id="myDiv">Hello jQuery!</div> <script type="text/javascript"> $(document).ready(function(e){ // alert(jQuery("#myDiv").html()); alert($("#myDiv").html()); }); </script> </body> </html>window.onload与$(document).ready()的区别区别项 window.onload $(document).ready() 执行时间 必须在页面全部加载完毕（包含图片下载）后才能执行 在页面中所有的DOM结构下载完毕后执行，此时可能DOM元素关联的内容并没有加载完成 执行次数 一个页面只能一个，仅输出最后一个的结果 一个页面可以有多个，结果可相继输出 简化写法 无 可简写$()
DOM对象和jQuery对象
在JavaScript中，通过getElementById()，getElementByClassName()，querySelector()，来获取HTML元素
// 获取DOM元素
var menuDiv=document.getElementById("menuDiv");
var baseSpan=menuDiv.getElementByClassName("baseClass");
var span=document.querySelector("#menuDiv");
jQuery对象：指jQuery库提供的方法来获取的元素对象
-
DOM对象转成jQuery对象
var domObject=document.getElementById("myDiv"); alert(domObect.innerHtml); var jQueryObject=$(domObeject); alert(jQueryObject.html());通过$()方法将DOM对象转换成jQuery对象，调用jQuery对象的方法
-
jQuery对象转成DOM对象
把jQuery对象看作一个数组对象，通过索引[index]或get(index)方法获取DOM对象
var jQueryObject=$("div"); var domObject1=jQueryObject[0]; var domObject2=jQueryObject.get(1); alert("第一个DIV内容是："+domObject1.innerHTML+ "\n第二个DIV内容时："+domObject2.innerHTML);
jQuery选择器
分类：
- 基本选择器
- 层次选择器
- 过滤选择器
- 表单选择器
基本选择器
最常用
| 选择器 | 描述 | 返回 |
|---|---|---|
| #ID | 根据元素的ID属性进行匹配 | 单个jQuery对象 |
| .class | 根据元素的class属性进行匹配 | jQuery对象数组 |
| element | 根据元素的标签名进行匹配 | jQuery对象数组 |
| selector1,selector2,…,selectorN | 将每个选择器匹配的结果合并后一起返回 | jQuery对象数组 |
| * | 匹配页面的所有元素，包含html，head，body | jQuery对象数组 |
层次选择器
通过DOM对象的层次关系来获取特定的元素
| 选择器 | 描述 | 返回 |
|---|---|---|
| $(“ancestor descendant”) | 选取ancestor元素中的所有的子元素 | jQuery对象数组 |
| $(“parent>child”) | 选取parent元素中的直接子元素 | jQuery对象数组 |
| $(“prev+next”) | 选取紧邻prev元素之后的next元素 | jQuery对象数组 |
| $(“prev~siblings”) | 选取prev元素之后的siblings兄弟元素 | jQuery对象数组 |
过滤选择器
- 简单过滤选择器
- 内容过滤选择器
- 可见性过滤选择器
- 属性过滤选择器
- 子元素过滤选择器
- 表单对象属性过滤选择器
-
简单过滤选择器
用的最多，元素的位置，特定的元素
选择器 描述 返回 :first 选取第一个元素 单个jQuery对象 :last 选取最后一个元素 单个jQuery对象 :even 选取所有索引值为偶数的元素，从0开始 jQuery对象数组 :odd 选取所有索引值为奇数的元素，从0开始 jQuery对象数组 :header 选取所有标题元素，如h1，h2，h3 jQuery对象数组 :foucs 选取当前获取焦点的元素 jQuery对象数组 :root 获取文档的根元素 单个jQuery对象 :animated 选取所有正在执行动画效果的元素 jQuery对象数组 :eq(index) 选取索引等于index的元素，从0开始 单个jQuery对象 :gt(index) 选取索引大于index的元素，从0开始 jQuery对象数组 :lt(index) 选取索引小于index的元素，从0开始 jQuery对象数组 :not(selector) 选取selector以外的元素 jQuery对象数组 -
内容过滤选择器
根据元素的文字内容，子元素的特征，进行过滤
选择器 描述 返回 :contain(text) 选取包含text内容的元素 jQuery对象数组 :has(selector) 选取包含有selector所匹配的元素 jQuery对象数组 :empty 选取所有不包含文本或子元素的空元素 jQuery对象数组 :parent 选取含有子元素或文本的元素 jQuery对象数组 -
可见性过滤选择器
根据可见性来筛选元素
选择器 描述 返回 :hidden 选取所有的不可见元素，或type为hidden的元素 jQuery对象数组 :visible 选取所有的可见元素 jQuery对象数组 -
属性过滤选择器
根据元素的属性来筛选元素的选择器
选择器 描述 返回 [attribute] 选取包含给定属性的元素 jQuery对象数组 [attribute=value] 选取属性等于某个特定值的元素 jQuery对象数组 [attribute!=value] 选取属性不等于某个特定值的元素 jQuery对象数组 [attribute^=value] 选取属性以某个值开始的元素 jQuery对象数组 [attribute$=value] 选取属性以某个值结尾的元素 jQuery对象数组 [attribute*=value] 选取属性中包含某个值的元素 jQuery对象数组 [attribute1][attribute2] 复合属性选择器，需要同时满足多个条件使用 jQuery对象数组 -
子元素过滤选择器
选择器 描述 返回 :first-child 选第一个元素 jQuery对象数组 :last-child 选最后一个元素 jQuery对象数组 :only-child 只有一个子元素，则匹配 jQuery对象数组 :nth-child(N|odd|even) 选第N个子元素或奇偶元素：下标从1开始 jQuery对象数组 :first-of-type 选第一个元素（1.9+版本） jQuery对象数组 :last-of-type 选最后一个元素（1.9+版本） jQuery对象数组 :only-of-type 只有一个子元素，则匹配（1.9+版本） jQuery对象数组 first-child 需要考虑结构，first-of-type 不需要考虑结构（直接选择第一次出现的这个标签）
-
表单对象属性过滤器
通过表单对象的属性特征进行筛选
选择器 描述 返回 :enabled 选表单中属性可用的元素 jQuery对象数组 :disabled 选表单中属性不可用的元素 jQuery对象数组 :checked 选表单中被选中的元素（单选按钮，复选框） jQuery对象数组 :selected 选表单中被选中的选项元素（下列列表） jQuery对象数组 -
表单选择器
快速定位到某类表单对象
选择器 描述 返回 :input 选取所有的<input>，<textarea>，<select>，<buttion>元素 jQuery对象数组 :text 选取所有的单行文本框 jQuery对象数组 :password 选取所有的密码框 jQuery对象数组 :radio 选取所有的单选框 jQuery对象数组 :checkbox 选取所以的多选框 jQuery对象数组 :submit 选取所有的提交按钮 jQuery对象数组 :image 选取所有的图片按钮 jQuery对象数组 :button 选取所有的按钮 jQuery对象数组 :file 选取所有的文件域 jQuery对象数组 :hidden 选取所有的不可见元素 jQuery对象数组
jQuery基本操作
属性操作
| 方法（属性操作函数） | 描述 |
|---|---|
| attr(name|pro|key,val|fn) | 获取或设置元素的属性 |
| removeAttr(name) | 删除元素的某一元素 |
| prop(name|pro|key,val|fn) | 获取或设置元素的一个或多个属性 |
| removeProp(name) | 删除有prop()方法设置的属性集 |
当元素属性（checked，selected，disabled）取值为true，false，通过prop()方法对属性进行操作
其他的普通属性通过attr()方法操作
-
attr()方法
获取所匹配元素的集合中第一个元素的属性，或设置所匹配元素的一个或多个属性
attr(name) attr(properties) attr(key,value) attr(key,function(index,oldAttr))-
name，元素的属性名
-
properties，key/value键值对构成的集合，用于设置元素中的1~n个属性
-
key，设置的属性名
-
value，设置的属性值
-
function(index,oldAttr)，使用函数的返回值作为属性的值
index，当前集合中的索引位置
oldAttr，当前元素在修改之前的属性值
$("img").attr("src"); //返回<img>集合中第一个图像的src属性 $("#myImage").attr("src"); //返回ID为myImage图像的src属性值 $("#myImage").attr("src","image/flower2.png"); //设置myImage的src属性 $("#myImage").attr({src:"image/flower2.png",title:"玫瑰花"}); $("#myImage").attr("title",function(){return this.src}); -
-
removeAttr()方法
删除匹配元素的指定属性
removeAttr(name)- name，需要删除的属性名
$("img").removeAttr("title"); //删除所有的img的title属性 -
prop()方法
获取所匹配元素的集合中，第一个元素的属性，或设置所匹配元素的一个或多个属性
多用于boolean类型属性的操作：
例如：checked，selected，disabled
prop(name) prop(properties) prop(key,value) prop(key,function(index,oldAttr))-
name，元素的属性名
-
properties，由key/value键值对构成的集合，可设置元素中1~n个属性
-
key，需要设置的属性名
-
value，需要设置的属性值
-
function(index,oldAttr)，使用函数的返回值作为属性的值
index，当前元素在集合中的索引位置
oldAttr，当前元素在修改之前的属性值
$("input[type="checkbox"]").prop("checked"); //返回第一个复选框的状态 $("input[type="checkbox"]").prop("checked",true); //将所有复选框选中 $("input[type="checkbox"]").prop({disabled:true,checked:true}) $("input[type="checkbox"]").prop("checked", function(index,oldValue){ return !oldValue; } //将所有复选框进行反选 ); -
-
removeProp()方法
删除由prop()方法设置的属性集
removeProp(name)- name，需要被删除的属性名
$("input[type="checkbox"]").removeProp("disabled"); //所有复选框置为可用状态
样式操作
可以使用attr()方法操作元素的class属性，来获取或改变元素的样式
$("#myDiv").attr("class"); //返回myDiv的class的值
$("#myDiv").attr("class","newClass") //设置myDiv的class属性值，如果存在则替换
-
addClass()方法
对一个或多个匹配元素追加样式
addClass(className) addClass(className1 className2...classNameN) addClass(function(index,oldClassName))-
className，需要追加的样式名
-
className1 className2 … classNameN，可以同时追加多个样式，样式名之间用空格隔开
-
function(index,oldClassName)，使用函数 返回值 作为当前位置的样式
index，当前元素在集合中的索引值
oldClassName，当前元素在修改之前的样式名
$("p[title='desc']").addClass("baseClass"); //追加baseClass样式 $("p[title='desc']").addClass("baseClass fontColor"); //追加baseClass和fontColor样式 -
-
removeClass()方法
移除匹配元素的一个或多个样式，也可以一次性移除所有样式
removeClass() removeClass(className) removeClass(className1 className2 ... classNameN)- 无参，移除所有样式
- className，需要移除的样式名
- className1 className2 … classNameN，同时移除多个样式，样式名之间用空格隔开
$(“p”).removeClass(); //移除所有样式
$(“p”).removeClass(“baseClass”); //移除baseClass样式
$(“p”).removeClass(“baseClass fontColor”); //移除baseClass和fontColor样式
3. toggleClass()方法
元素样式之间的重复切换
当元素的指定样式存在时，将该样式移除
否则，添加该样式
toggleClass(className)
toggleClass(className,switch)
* className，需要切换的样式名
* switch，切换样式开关，默认为true，允许切换样式，否则，不切换
```javascript
//ID为userName的元素添加样式，如果存在focusClass样式，则移除，不存在，则添加
$("#userName").toggleClass("focusClass");
$("#saleDept").toggleClass("inverseColor",true); //允许切换样式
-
css()方法
返回第一个匹配的CSS样式，或设置所有的匹配元素的样式
css(attrName) css(key,value) css(properties) css(attrName,function(index,oldValue))-
attrName，要访问的属性名称
-
key、value，设置某元素的某一样式
-
properties，设置元素的某些样式，键值结构
-
function(index,oldValue)，使用函数返回值作为当前元素的属性值，
index，当前元素在集合中的索引位置
oldValue，当前元素在修改之前的属性值
$("img").css("width"); //返回第一幅图片的宽度 $("img").css("width","200px"); //设置图片的宽度为200px $("img").css({backgroundColor:"#CCC",borderColor:"#999"}); $("img").css({ //函数的返回值作为width的值 width:function(index,oldvalue){ return parseFloat(oldvalue)*0.9; } }); -
内容操作
- 操作页面元素的内容：html()，text()
- 操作表单元素的值：val()
方法 没有提供参数：获取匹配元素的内容或值
提供参数：对匹配的元素的内容或值进行修改
-
html()方法
获取第一个匹配元素的HTML内容，或修改匹配元素的HTML内容
html() html(htmlCode) html(function(index,oldHtmlCode))-
无参方法，返回第一个匹配的HTML内容
-
有参方法，设定匹配元素的文本内容
-
htmlCode，将所匹配元素的HTML内容设置为htmlCode
-
function(index,oldHtmlCode)，将函数的返回值作为当前元素的HTML内容
index，当前元素在集合中的索引位置
oldHtmlCode，当前元素在修改之前的HTML内容
//返回#mainContextDiv标签的HTML内容 $("#mainContentDiv").html(); //设置标签的HTML内容 $("#mainContentDiv").html("<h1><font color='red'>漫步时尚广场</font></h1>"); //根据位置不同，设置不同的HTML内容 $("p").html(function(index,oldHtmlCode){ switch(index){ case 0: return "<h1>"+oldHtmlCode+"</h1>"; case 1: return "<h2>"+oldHtmlCode+"</h2>"; } }); -
-
text()方法
读取或设置匹配元素的文本内容
返回纯文本内容
text() text(textContent) text(function(index,oldTextContent))-
无参数，返回第一个匹配元素的文本内容
-
有参数，设定匹配元素的文本内容
-
textContent，将匹配元素的文本内容设置为textConten
-
function(index,oldTextContent)，将函数的返回值作为当前元素的文本内容
index，当前元素在集合中的索引值
oldTextContent，当前元素在修改之前的文本内容
//返回#mainContenDiv标签的文本内容，包含HTML标签 $("#mainContentDiv").text(); //将InputDiscuss输入内容作为newDiscuss的文本内容 $("#newsDiscuss").text("<hr/>评论如下："+$("#inputDiscuss").val()+"<hr/>"); -
-
val()方法
设置或获取表单元素的值，包括文本框，下列列表，单选框和复选框
当元素允许多选时，返回一个包含被选项的数组
val() val(newValue) val(arrayValue) val(function(index,oldValue))-
无参，返回所匹配的表单元素的value
-
有参，设置所匹配的表单元素的value
-
newValue，将匹配的表单元素的value，设置为newValue
-
arrayValue，设置多选表单的选中状态
-
function(index,oldValue)，将函数的返回值赋给当前匹配的表单元素
index，当前元素在匹配集合中的索引位置
oldValue，当前元素在修改之前的value值
var inpuDiscuss=$("#inputDisscuss").val(); -
jQuery事件处理
页面加载事件
$(document).ready()的使用
在DOM元素就绪时，就会进行事件处理，无须等到所欲的图片下载完毕
可多次设置处理事件，事件执行结果会相继输出
$(document).ready(function(){
alert("第一次执行");
});
$(document).ready(function(){
alert("第二次执行");
});
简写形式：
$(function(){
//jQuery处理代码
});
$().ready(function(){
//jQuery处理代码
})
事件绑定
将页面元素的事件类型与事件处理函数关联到一起
-
bind()
对匹配元素，绑定事件
bind(types,[data],fn)-
types，事件类型，一个或多个事件类型构成的字符串，类型之间用空格隔开
鼠标事件：click，submit，mouseover，mouseup
键盘事件：keydown，keyup
-
data，可选，传递给函数的额外数据，通过event.data来获取所传入的额外数据
-
fn，绑定的事件处理函数
$("p").bind("click",function(){ alert($(this).text()); }); $("p").bind("mouseenter mouseleave",function(){ $(this).toggleClass("entered"); }); //为一个对象同时绑定多个事件，且每个事件具有单独的处理函数 $("button").bind({ click:function(){ $("p").slideToggle(); }, mouseover:function(){ $("body").css("background-color","red"); }, mouseout:function(){ $("body").css("background-color","#FFFFFF") } }); //事件处理之前传递一些附加的数据 function handle(event){ alert(event.data.foo); }; $("p").bind("click",{foo:"bar"},handler);简写方法：
$("input[type=button]").click(function(){ $(this).toggleClass("entered"); });$(this)，触发事件的对象本身 -
-
one()方法
对匹配元素的特定事件绑定一个一次性的事件处理函数
one(types,[data],fn)- types，事件类型，一个或多个事件类型构成的字符串，类型之间用空格隔开
- data，可选，传递给函数的额外数据，通过event.data来获得所传入的额外数据
- fn，绑定的事件处理函数
$("p").one("click",function(){ alert($(this).text()); }); -
toggle()方法
模拟鼠标连续单击事件（1.9+版本中，已删除）
toggle(([speed],[easing],[fn1,fn2,fn3,...,fnN]))-
speed，设置元素的隐藏（或显示）速度，默认为0ms，取值为：slow，normal，fast，毫秒数
-
easing，指定动画的切换效果，取值为：swing（默认），linear
swing：更加动态，随着动画的开始逐渐加快，然后逐渐慢下来
linear：稳定，动画的动作比较均匀
-
fn1，fn2，……，fnN，表示1~n个事件处理函数
fn1，第一次单击执行的事件处理函数
fn2，第二次单击执行的事件处理函数
……
fnN，第N次单击执行的事件处理函数
然后从头开始，循环调用
-
同时具有speed，fn时，先以speed速度显示或隐藏，动画完成后，再执行fn事件处理函数
-
-
live()方法
bind()绑定事件只能对页面存在的元素进行绑定，对新增元素没有事件响应
live()方法能够对页面所有匹配元素绑定事件
live(types,fn)- types，事件类型，一个或多个事件类型构成的字符串，类型之间空格隔开
- fn，绑定的事件处理函数
$("div").live("click",function(){ alert($(this).html()); }); -
delegate()方法
在匹配元素的基础上，对其内部符合的元素绑定事件处理函数
delegate(childSelector,[types],[data],fn)- childSelector，选择器字符串，用于筛选触发事件的元素
- types，事件类型，一个或多个事件类型，构成的字符串，类型之间空格隔开
- data，可选，传入的额外数据，通过event.data来获得所传入的额外数据
- fn，绑定的事件处理函数
$("div").delegate("button","click",function(){ $("p").slideToggle(); }); $("div").delegate("#DataBindBtn","click",{msg:"传入额外数据"},function(e){ alert(e.data.msg); });可更加精确的小范围使用事件代理，性能优于live()方法
在1.7+版本中，应**优先使用
on()**方法代替该方法 -
on()方法
1.7+版本新增方法
on(types,[childSelector],[data],fn)- types，事件类型，一个或多个事件类型构成的字符串，类型之间用空格隔开
- childSelector，选择器字符串，筛选触发事件的元素
- data，可选，传递个函数的额外数据，通过event.data来获取
- fn，绑定的事件处理函数
//使用live()方法绑定事件 $("div[id!=leftDiv]").live("click",function(){ //事件处理代码 }); //使用on()方法代替live()方法 $(document).on("click","div[id!=leftDiv]",function(e){ alert(e.data.msg); }); //使用delegate()方法绑定事件 $("div").delegate("#DataBindBtn","click",{msg:"传递额外数据"},function(e){ aler(e.data.msg); }); //使用on()方法代替delegate()方法 $("div").on("click","#DataBindBtn",{msg:"传递额外数据"},function(e){ alert(e.data.msg); }); -
hover()方法
模拟鼠标悬停事件
当鼠标悬停在某元素上，触发第一个函数，鼠标移除，触发第二个函数
hover(overFn,[outFn])- overFn，悬停时，所触发的事件处理函数
- outFn，可选，鼠标移出，所触发的事件处理函数
- 一个参数时，鼠标悬停和移除都会触发该事件处理函数
$("td").hover( function(){ $(this).addClass("hover"); },function(){ $(this).removeClass("hover"); } );
解除事件绑定
不再需要事件时，可以解除绑定的事件
- unbind()，解除bind()方法
- undelegate()，解除delegate()方法
- off()，解除on()，bind()，delegate()方法
$("#bindBtn").bind("click",function(){
$("#rightDiv").text("使用bind()方法绑定事件处理");
});
$("#binBtn").unbind("click")；
//$("#binBtn").unbind(); 解绑所有的绑定事件
$("span").delegate("button","click",function(){
$("div").slideToggle();
});
$("span")undelegate("button","click");
$("#leftDiv").on("click","#binBtn",function(){
alert("使用on()方法绑定事件处理");
});
$("#leftDiv").off("click","#binBtn");
事件对象
进行了封装和扩展，解决浏览器兼容行的问题
| 常见属性 | 描述 |
|---|---|
| pageX | 鼠标相对于文档的左边缘的位置 |
| pageY | 鼠标相对于文档的上边缘的位置 |
| target | 返回触发事件的元素 |
| type | 返回事件的类型 |
| which | 返回在鼠标或键盘事件中被按下的键 |
| data | 用于传递事件之外的额外数据 |
| 常见方法 | 描述 |
|---|---|
| preventDefault() | 阻止元素反生默认的行为 |
| stopPropagation() | 阻止事件的冒泡 |
| isDefaultPrevented() | 根据事件对象中是否调用过preventDefault()方法，返回一个布尔值 |
| isPropagationStopped() | 根据事件对象中是否调用过stopPropagation()方法，返回一个布尔值 |
2495
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
