第一节 jQuery初步认知
jQuery概述
-
JQuery概念
-
javascript概念
-
基于Js语言的API和语法组织逻辑，通过内置window和document对象，来操作内存中的DOM元素
-
-
JQuery概念
-
基于javascript的，同上，提高了代码的效率
-
-
-
jQuery是什么:
-
它可以帮我们做什么(有什么优势)
-
如何引入JQuery包
<script type=“text/javascript” src=“”></script>
<script type=“text/javascript”>
$(function(){
alert(“jQuery 你好!”);
});
</script>
-
讲解$(function(){});
-
window.onload与$(document).ready()对比
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等网页中所有内容加载完后(图片)才执行 | 网页中的DOM结构绘制完后就执行,可能DOM元素相关的东西并没有加载完 |
| 编写个数 | 不能同时执行多个 | 能同时执行多个 |
| 简化写法 | 无 | $(document).ready(function(){ //.. }); 推荐写法：$(function(){ }); |
-
jQuery有哪些功能(API)：
-
选择器
-
过滤器
-
事件
-
ajax
-
-
简单的JQuery选择器：
初步了解JQuery
-
JQuery是什么
-
javascript用来干什么的：
-
操作DOM对象
-
动态操作样式css
-
数据访问
-
控制响应事件等
-
-
jQuery作用一样，只是更加快速简洁
-
-
如何引用JQuery
<script type="text/javascript"></script> 写第一个JQUery案例 <script type=“text/javascript” src=“”></script> <script type=“text/javascript”> $(function(){ alert(“jQuery 你好!”); }); </script>
-
$()讲解
function $(id){
return document.getElementById(id);
}
-
$()和document是相等的吗
<div id="a" class="aa"></div>
<div id="b" class="aa"></div>
<div id="c" class="aa"></div>
alert(document.getElementById("id") == $("#aa"));//返回结果为false
alert(document.getElementById("id") == $("#aa").get(0));//返回true
-
代理对象$()
-
对象转换($(element))
-
原生dom对象和jquery代理对象的相互转换
-
$(传入的原生对象);
//原生对象转化成jQuery对象
var nav = document.getElementById("nav");
var $nav = $(nav);
alert($nav.get(0) == nav);//true
-
检索范围的限制（$('字符串',element)）
-
总结： $() jquery核心方法的作用和使用场景
-
代理模式以及代理内存结构
第二节 选择器
-
来回顾一下CSS常用的选择器
| 选择器 | 语法 | 描述 |
|---|---|---|
| 标签选择器 | E{css规则} | 以文档元素作为选择符 |
| ID选择器 | #ID{css规则} | ID作为选择符 |
| 类选择器 | E.className{css规则} | class作为选择符 |
| 群组选择器 | E1,E2,E3{css规则} | 多个选择符应用同样的样式 |
| 后代选择器 | E F{css规则} | 元素E的任意后代元素F |
-
选择器引擎规则($('字符串'))
-
层级选择器:通过DOM的嵌套关系匹配元素
-
jQuery层级选择器----包含选择器、子选择器、相邻选择器、兄弟选择器4种
-
a.包含选择器：$("a b")在给定的祖先元素下匹配所有后代元素。(不受层级限制)
-
b.子选择器：$("parent > child") 在给定的父元素下匹配所有子元素。
-
c.相邻选择器：$("prev + next") 匹配所有紧接在prev元素后的next元素。
-
d.兄弟选择器：$("prev ~ siblings") 匹配prev元素之后的所有sibling元素。
-
过滤选择器
-
基本过滤选择
| 选择器 | 说明 | 返回 |
|---|---|---|
| :first | 匹配找到的第1个元素 | 单个元素 |
| :last | 匹配找到的最后一个元素 | 单个元素 |
| :eq | 匹配一个给定索引值的元素 | 单个元素 |
| :even | 匹配所有索引值为偶数的元素 | 集合元素 |
| : odd | 匹配所有索引值为奇数的元素 | 集合元素 |
| :gt(index) | 匹配所有大于给定索引值的元素 | 集合元素 |
| :lt(index) | 匹配所有小于给定索引值的元素 | 集合元素 |
| :not | 去除所有与给定选择器匹配的元素 | 集合元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 |
| focus | 选取当前正在获取焦点的元素 | 集合元素 |
-
内容过滤选择器
| 选择器 | 描述 | 返回 |
|---|---|---|
| :contains(text) | 选取含有文本内容为text的元素 | 集合元素 |
| :empty | 选取不包含子元素获取文本的空元素 | 集合元素 |
| :has(selector) | 选择含有选择器所匹配的元素的元素 | 集合元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 |
-
可见过滤选择器
| 选择器 | 描述 | 返回 |
|---|---|---|
| :hidden | 选择所有不可见的元素 | 集合元素 |
| :visible | 选取所有可见的元素 | 集合元素 |
-
属性过滤选择器
| 选择器 | 说明 | 返回 |
|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 |
| [attribute=value] | 选取属性值为value值的元素 | 集合元素 |
| [attribue^=value] | 选取属性的值以value开始的元素 | 集合元素 |
| [attribue$=value] | 选取属性的值以value结束的元素 | 集合元素 |
-
子元素过滤选择器
| 选择器 | 说明 | 返回 |
|---|---|---|
| :nth-child(index/even/odd) | 选取每个父元素下的第index个子元素或者奇偶元素（index从1算起） | 集合元素 |
| :first-child | 选取每个元素的第一个子元素 | 集合元素 |
| :last-child | 选取每个元素的最后一个子元素 | 集合元素 |
-
:nth-child()选择器是很常用的子元素过滤选择器，如下
-
:nth-child(even)选择每个父元素下的索引值是偶数的元素
-
:nth-child(odd)选择每个父元素下的索引值是奇数的元素
-
:nth-child(2)选择每个父元素下的索引值是2的元素
-
:nth-child(3n)选择每个父元素下的索引值是3的倍数的元素 (n从1开始)
-
-
表单对象属性过滤选择器
| 选择器 | 说明 | 返回 |
|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 |
| :disabled | 选取所有不可用元素 | 集合元素 |
| :checked | 选取所有被选中的元素（单选框、复选框） | 集合元素 |
| :selected | 选取所有被选中的元素（下拉列表） | 集合元素 |
-
表单选择器
| 选择器 | 说明 |
|---|---|
| :input | 选取所有input textarea select button元素 |
| :text | 选取所有单行文本框 |
| :password | 选取所有密码框 |
| :radio | 选取所有单选框 |
| :checkBox | 选取所有多选框 |
| :submit | 选取所有的提交按钮 |
| :image | 选取所有的图像按钮 |
| :reset | 选取所有的重置按钮 |
| :button | 选取所有的按钮 |
| :file | 选取所有的上传域 |
| :hidden | 选取所有的不可见元素 |
-
特定位置选择器
-
:first
-
:last
-
:eq(index)
-
-
指定范围选择器
-
:even
-
:odd
-
:gt(index)
-
:lt(index)
-
-
排除选择器
-
:not 非
-
第三节 选择器优化
-
使用合适的选择器表达式可以提高性能、增强语义并简化逻辑。常用的选择器中，ID选择器速度最快，其次是类型选择器。
-
多用ID选择器
-
少直接使用class选择器
-
多用父子关系，少用嵌套关系
-
缓存jQuery对象
-
-
使用过滤器
-
查找
-
向下查找后代元素
-
children():取得所有元素的所有子元素集合（子元素）
-
find():搜索所有与指定表达式匹配的元素(所有后代元素中查找)
-
-
查找兄弟元素 siblings()查找当前元素的兄弟
-
第四节 代理对象属性和样式操作
-
代理对象属性和样式操作
-
操作原生DOM的时候用的方式：一次只能操作一个
-
操作jQuery代理对象的时候：批量操作DOM对象(全都是通过方法操作)
-
操作属性：attr()、prop()
-
attr和prop区别：如果属性的值是布尔类型的值 用prop操作 反之attr
-
-
操作样式：css()
-
操作类样式：addClass() removeClass()
-
操作DOM子元素：children()
-
添加子元素：append()
第五节 jQuery中DOM操作
-
DOM是一种与浏览器、平台|语言无关的接口，使用该接口可以轻松的访问 页面中的所有的标准组件
-
DOM操作的分类
-
css-DOM
-
查找节点
-
创建节点
-
$(html)：根据传递的标记字符串，创建DOM对象
-
-
插入节点
| 方法 | 说明 |
|---|---|
| append() | 向每个匹配元素内部追加内容 |
| appendTo() | 颠倒append()的操作 |
| prepend() | 向每个匹配元素的内容内部前置内容 |
| prependTo() | 颠倒prepend()的操作 |
| after() | 向每个匹配元素之后插入内容 |
| insertAfter() | 颠倒after()的操作 |
| before() | 在每个匹配元素之前插入内容 |
| insertBefore() | 颠倒before()的操作 |
-
删除节点
-
detach()
-
和remove()方法一样，也是从DOM中去掉所有匹配的元素，与remove()不同的是，所有绑定的事件、附加的数据等，都会被保留下来
-
-
empty()
-
复制节点
-
替换节点
-
jQuery提供相应的方法 replaceWidth()
-
-
样式操作
-
设置和获取HTML、文本和值
-
遍历节点
CSS DOM操作
第六节 jQuery动画
回顾上节
一、创建节点
-
1.创建元素
-
语法：document.createElement(name);
-
var div = document.createElement("div");
document.body.appendChild(div);
-
$(html)：根据传递的标记字符串，创建DOM对象
-
2.创建文本
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
var $div = = $("<div>DOM</div>");
$(body).append($div);
-
3.设置属性
-
语法：e.setAttrbute(name,value)
-
var div = document.createElement("div");
var txt = document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");
var $div = = $("<div title='盒子'>DOM</div>");
$(body).append($div);
二、插入内容
-
内部插入
-
外部插入
四、克隆内容：创建指定节点副本
五、替换内容
-
-
replaceWith():将所有匹配的元素替换成指定的元素
-
replaceAll():用匹配的元素替换掉指定元素
-
-
注意：两者效果一致，只是语法不同 $A.replaceAll($B) 等效于 $B.replaceWhith($A);
本节新知识
显隐动画
滑动
-
显隐滑动效果
-
slideDown():滑动隐藏
-
slidUp():滑动显示
-
参数:
-
slideDown(speed,callback)
-
slidUp(speed,callback)
-
-
-
显隐切换滑动
-
slidetoggle():显隐滑动切换
-
参数:
-
slidUp(speed,callback)
-
-
渐变：通过改变不透明度
-
淡入淡出
-
fadeIn()
-
fadeOut()
-
参数：
-
fadeIn(speed,callback)
-
fadeOut(speed,callback)
-
-
-
设置淡出透明效果
-
渐变切换:结合fadeIn和fadeOut
-
fadetoggle()
-
参数:
-
fadeOut(speed,callback)
-
-
-
自定义动画：animate()
-
用animate模拟show():
-
show: 表示由透明到不透明
-
toggle: 切换
-
hide:表示由显示到隐藏
-
-
动画方法总结
| 方法名 | 说明 |
|---|---|
| hide()和show() | 同时修改多个样式属性即高度和宽度和不透明度 |
| fadeIn()和fadeOut() | 只改变不透明度 |
| slideUp()和slideDown() | 只改变高度 |
| fadeto() | 只改变不透明度 |
| toggle() | 用来代替show()和hide()方法，所以会同时修改多个属性即高度、宽度和不透明度 |
| slidetoggle() | 用来代替slideUp和slideDown()方法，所以只能改变高度 |
| fadetoggle() | 用来代替fadeIn()和fadeOut方法，只能改变不透明度 |
| animate() | 属于自定义动画，以上各种动画方法都是调用了animate方法。此外，用animate方法还能自定义其他的样式属性，例如：left marginLeft `scrollTop`等 |
第七节 jQuery中的事件
-
事件对象的属性
-
事件冒泡
-
事件捕获
-
bind();绑定
-
绑定特定事件类型方法：
| 页面载入 | ready(fn) | 当DOM载入就绪可以绑定一个要执行的函数 |
| 事件绑定 | blind(type,[data],fn) | 为每个匹配元素的特定事件绑定一个事件处理函数 |
| 事件绑定 | unblind() | 解除绑定 |
| 事件绑定 | on(events,[,selector[,]data],handler) | 在选择元素上绑定一个或者多个事件处理函数 |
| 事件绑定 | off() | 移除on绑定的事件 |
| 事件绑定 | delegate(selector,eventType,handler) | 为所有选择匹配元素附加一个或多个事件处理函数 |
| 事件绑定 | undelegate() | 移除绑定 |
| 事件动态 | live(type,fn) | 对动态生成的元素进行事件绑定 |
| 事件动态 | die(type,fn) | 移除live()绑定的事件 |
| 交互事件 | hover() | 鼠标移入移出 |
| 交互事件 | toggle(fn1,fn2,[fn3],[fn4]) | 每单击后依次调用函数 |
| 交互事件 | blur(fn) | 触发每一个匹配元素的blur事件 |
| 交互事件 | change() | 触发每一个匹配元素的change事件 |
| 交互事件 | click() | 触发每一个匹配元素的click事件 |
| 交互事件 | focus() | 触发每一个匹配元素的focus事件 |
| 交互事件 | submit() | 触发每一个匹配元素的submit事件 |
| 键盘事件 | keydown() | 触发每一个匹配元素的keydown事件 |
| 键盘事件 | keypress() | 触发每一个匹配元素的keypress事件 |
| 键盘事件 | keyup() | 触发每一个匹配元素的keyup事件 |
| 鼠标事件 | mousedown(fn) | 绑定一个处理函数 |
| 鼠标事件 | mouseenter(fn) | 绑定一个处理函数 |
| 键盘事件 | mouseleave(fn) | 绑定一个处理函数 |
| 键盘事件 | mouSEOut(fn) | 绑定一个处理函数 |
| 键盘事件 | mouSEOver(fn) | 绑定一个处理函数 |
| 窗口操作 | resize(fn) | 绑定一个处理函数 |
| 窗口操作 | scroll(fn) | 绑定一个处理函数 |
第八节 jQuery与Ajax
-
Ajax简介 :
-
Asynchronous Javascript And XML （异步的
JavaScript和XML） -
它并不是一种单一的技术，而是有机利用一系列交互式网页应用相关的技术所形成的结合体
-
-
Ajax优势与不足
-
Ajax优势
-
Ajax的不足
-
创建一个Ajax请求
-
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键，发送异步请求、接受响应以及执行回调都是通过它来完成
-
创建ajax对象 var xhr = new XMLHttpRequest();
-
准备发送请求
-
enctype: "application/x-www-form-urlencoded"
-
url
-
是否异步
-
同步(false)：阻塞
-
异步(true)：非阻塞
-
-
正式发送请求
-
ajax请求处理过程
xhr.onreadystatechange = function(){
if (xhr.readyState == 4)
{
alert( xhr.responseText );
}
};
-
onreadystatechange ：当处理过程发生变化的时候执行下面的函数
-
readyState ：ajax处理过程
-
responseText ：请求服务器返回的数据存在该属性里面
-
status : http状态码
-
案例：ajax封装案例
//ajax请求后台数据 var btn = document.getElementsByTagName("input")[0]; btn.onclick = function(){ ajax({//json格式 type:"post", url:"post.PHP", data:"username=poetries&pwd=123456", asyn:true, success:function(data){ document.write(data); } }); } //封装ajax function ajax(aJson){ var ajx = null; var type = aJson.type || "get"; var asyn = aJson.asyn || true; var url = aJson.url; // url 接收 传输位置 var success = aJson.success;// success 接收 传输完成后的回调函数 var data = aJson.data || '';// data 接收需要附带传输的数据 if(window.XMLHttpRequest){//兼容处理 ajx = new XMLHttpRequest();//一般浏览器 }else { ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+ } if (type == "get" && data) { url +="/?"+data+"&"+Math.random(); } //初始化ajax请求 ajx.open( type , url , asyn ); //规定传输数据的格式 ajx.setRequestHeader('content-type','application/x-www-form-urlencoded'); //发送ajax请求（包括post数据的传输） type == "get" ?ajx.send():ajx.send(aJson.data); //处理请求 ajx.onreadystatechange = function(aJson){ if(ajx.readState == 4){ if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码 { //请求成功处理数据 success && success(ajx.responseText); }else{ alert("请求出错"+ajx.status); } } };
jQuery中的Ajax [补充部分--来自锋利的jQuery]
jquery对Ajax操作进行了封装，在jquery中的$.ajax()方法属于最底层的方法，第2层是load()、$.get()、$.post();第3层是$.getScript()、$.getJSON()，第2层使用频率很高
load()方法
$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
//respnoseText 请求返回的内容
//textStatus 请求状态 ：sucess、error、notmodified、timeout
//XMLHttpRequest
})
-
load方法参数
| 参数名称 | 类型 | 说明 |
|---|---|---|
| url | String | 请求HTML页面的URL地址 |
| data(可选) | Object | 发送至服务器的key / value数据 |
| callback(可选) | Function | 请求完成时的回调函数，无论是请求成功还是失败 |
$.get()和$.post()方法
load()方法通常用来从web服务器上获取静态的数据文件。在项目中需要传递一些参数给服务器中的页面，那么可以使用$.get()和$.post()或$.ajax()方法
| 参数 | 类型 | 说明 |
|---|---|---|
| url | String | 请求HTML页的地址 |
| data(可选) | Object | 发送至服务器的key/ value 数据会作为QueryString附加到请求URL中 |
| callback(可选) | Function | 载入成功的回调函数（只有当Response的返回状态是success才调用该方法） |
| type(可选) | String | 服务器返回内容的格式，包括xml、html、script、json、text和_default |
-
$.post()方法
-
它与$.get()方法的结构和使用方式相同，有如下区别
-
-
总结
-
使用load()、$.get()和$.post()方法完成了一些常规的Ajax程序，如果还需要复杂的Ajax程序，就需要用到$.ajax()方式
-
$.ajax()方法
-
$.ajax()方法是jquery最底层的Ajax实现，它的结构为$.ajax(options)
-
该方法只有一个参数，但在这个对象里包含了$.ajax()方式所需要的请求设置以及回调函等信息，参数以key / value存在，所有参数都是可选的
-
$.ajax()方式常用参数解析
| 参数 | 类型 | 说明 |
|---|---|---|
| url | String | (默认为当前页地址)发送请求的地址 |
| type | String | 请求方式（POST或GET）默认为GET |
| timeout | Number | 设置请求超时时间（毫秒） |
| dataType | String | 预期服务器返回的类型。可用的类型如下 xml:返回XML文档，可用jquery处理 html:返回纯文本的HTML信息，包含的script标签也会在插入DOM时执行 script：返回纯文本的javascript代码。不会自动缓存结果，除非设置cache参数。注意：在远程请求时，所有的POST请求都将转为GET请求 json:返回JSON数据 jsonp:JSONP格式，使用jsonp形式调用函数时，例如：myurl?call back=?,jquery将自动替换后一个？为正确的函数名，以执行回调函数 text:返回纯文本字符串 |
| beforeSend | Function | 发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求。XMLHttpRequest对象是唯一的参数 function(XMLHttpRequest){ this;//调用本次Ajax请求时传递的options参数 } |
| complete | Function | 请求完成后的回调函数（请求成功或失败时都调用） 参数：XMLHttpRequest对象和一个描述成功请求类型的字符串 function(XMLHttpRequest,textStatus){ this;//调用本次Ajax请求时传递的options参数 } |
| success | Function | 请求成功后调用的回调函数，有两个参数 (1)由服务器返回，并根据dataTyppe参数进行处理后的数据 (2)描述状态的字符串 function(data,textStatus){ //data可能是xmlDoc、`jsonObj、html、text等<br> this;//调用本次Ajax请求时传递的options`参数 } |
| error | Function | 请求失败时被调用的函数 |
| global | Boolean | 默认为true。表示是否触发全局Ajax事件，设置为false将不会触发。AjaxStart或AjaxStop可用于控制各种Ajax事件 |
第九节 插件
;(function($){
$.fn.plugin=function(options){
var defaults = {
//各种参数 各种属性
}
var options = $.extend(defaults,options);
this.each(function(){
//实现功能的代码
});
return this;
}
})(jQuery);
(function($){
$.extend({
test: function(){
alert("hello plugin");
}
})
})(jQuery);
自定义jQuery命令：
-
形式1：
(function($){
$.fn.extend({
say : function(){
alert("hello plugin");
}
})
})(jQuery);
-
形式2：
(function($){
$.fn.say = function(){
alert("hello plugin");
};
})(jQuery);
附录一 jQuery各个版本新增的一些常用的方法
-
jQuery1.3新增常用的方法
| 方法 | 说明 |
|---|---|
| .closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素 |
| die() | 从元素中删除先前用live()方法绑定的所有的事件 |
| live() | 附加一个事件处理器到符合目前选择器的所有元素匹配 |
-
jQuery1.4新增常用的方法
| 方法 | 说明 |
|---|---|
| .first() | 获取集合中第一个元素 |
| last() | 获取集合中最后一个元素 |
| has(selector) | 保留包含特定后代的元素，去掉那些不含有指定后代的元素 |
| detach() | 从DOM中去掉所有匹配的元素。detach()和remov()一样，除了detach()保存了所有jquery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用 |
| delegate() | 为所有选择器匹配的元素附加一个处理一个或多个事件 |
| undelegate() | 为所有选择器匹配的元素删除一个处理一个或多个事件 |
-
jQuery1.6新增常用的方法
| 方法 | 说明 |
|---|---|
| prop(proptyName) | 获取在匹配元素集合中的第一个元素的属性值 |
| removeProp(proptyName,value) | 为匹配的元素删除设置的属性 |
| :focus | 选择当前获取焦点的元素 |
附录二 jQuery性能优化
-
性能优化
-
-
使用最新版的jQuery类库
-
使用合适的选择器
-
$(#id)
-
$("p") , $("div") , $("input")
-
$(".class")
-
建议有选择性的使用
-
-
$("[attribute=value]")
-
$(":hidden")
-
和上面利用属性定位DOM方式类似，建议尽量不要使用
-
-
注意的地方
-
尽量使用ID选择器
-
尽量给选择器指定上下文
-
-
-
-
缓存对象
-
如果你需要在其他函数中使用jQuery对象，你可以把他们缓存在全局环境中
-
-
数组方式使用jQuery对象
-
事件代理
-
使用join()方法来拼接字符串
-
也许你之前使用+来拼接字符串，现在可以改了。它确实有助于性能优化，尤其是长字符串处理的时候
-
-
合理使用HTML5和Data属性
附录三 常用的jQuery代码片段
附录四 常见CND加速服务
-
Bootstrap中文网开源项目免费 CDN 服务
-
百度静态资源公共库
-
360网站卫士常用前端公共库CDN服务--已停止服务
-
开放静态文件 CDN
-
微软CDN服务
-
阿里云
-
百度开放云平台
-
jQuery CDN
-
jQuery CDN加速
-
新浪CDN
附录五 jQuery的一些资源
扩展阅读
-
jQuery源码分析系列
参考
-
锋利的jQuery
-
本文md源文件
