首先,来了解一下jQuery 学习的整体思路
第一节 jQuery初步认知
jQuery概述
-
JQuery 概念
javascript 概念
- 基于
Js 语言的API 和语法组织逻辑,通过内置window 和document 对象,来操作内存中的DOM 元素
JQuery 概念
- 基于
javascript 的,同上,提高了代码的效率
-
jQuery 是什么:
- 是一个
javascript 代码仓库,我们称之为javascript 框架。
- 是一个快速的简洁的
javascript 框架,可以简化查询DOM 对象、处理事件、制作动画、处理Ajax 交互过程。
- 它可以帮我们做什么(有什么优势)
- 轻量级、体积小,使用灵巧(只需引入一个
js 文件)
- 强大的选择器
- 出色的
DOM 操作的封装
- 出色的浏览器兼容性
- 可靠的事件处理机制
- 完善的
Ajax
- 链式操作、隐式迭代
- 方便的选择页面元素(模仿
CSS 选择器更精确、灵活)
- 动态更改页面样式/页面内容(操作
DOM ,动态添加、移除样式)
- 控制响应事件(动态添加响应事件)
- 提供基本网页特效(提供已封装的网页特效方法)
- 快速实现通信(
ajax )
- 易扩展、插件丰富
-
如何引入JQuery 包
1 2 3 4 5 6
|
<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 ):
-
简单的JQuery 选择器:
JQuery 基本选择器(ID 选择器,标签选择器,类选择器,通配选择器和组选择器5 种)
ID 选择器:document.getElementById(id) 与$("#id") 对比(改变文字大小)—id 唯一,返回单个元素
- 标签选择器:
document.getElementsByTagName(tagName) 与$("tagname") 对比—多个标签,返回数组
- 类选择器:
$(".className") –多个classname (改变背景图片)
- 通配选择器:
document.getElementsByTagName("*") 与$("*") 对比—指范围内的所有标签元素
- 组选择器:
$("seletor1,seletor2,seletor3") —-无数量限制,用逗号分割
初步了解JQuery
JQuery 是什么
javascript 用来干什么的:
- 操作
DOM 对象
- 动态操作样式
css
- 数据访问
- 控制响应事件等
jQuery 作用一样,只是更加快速简洁
-
如何引用JQuery
1 2 3 4 5 6 7 8
|
<script type="text/javascript"></script> 写第一个JQUery案例 <script type=“text/javascript” src=“”></script> <script type=“text/javascript”> $(function(){ alert(“jQuery 你好!”); }); </script>
|
-
$()讲解
$ 在JQuery 库中,$ 是JQuery 的别名,$() 等效于就jQuery() .
$() 是JQuery 方法,赞可看作是JQuery 的选择器,与css 选择器相似(可做对比)
var jQuery==$ =function(){} $() 本质就是一个函数也就是 jQuery 的核心函数
- 只要是
jQuery 的对象都这样变量加上一个符号$ 方便识别:var $div = $("#")
1 2 3
|
function $(id){ return document.getElementById(id); }
|
1 2 3 4 5
|
<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
|
-
代理对象$()
jQuery 中返回的是代理对象本身
jQuery 的核心原理是通过选择器找到对应的代理对象
jQuery 全都是通过方法操作
- 样式选择器
$(".className")
$(".aa").css("color","green");
- id选择器(“”)
$("#a").css("background-color","#ff0066");
- 标签选择器
$("p").css("color","#cc3366");
- 组选择器
-
对象转换($(element) )
第二节 选择器
选择器 | 语法 | 描述 |
标签选择器 |
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 |
选取每个元素的最后一个子元素 |
集合元素 |
选择器 | 说明 | 返回 |
:enabled |
选取所有可用元素 |
集合元素 |
:disabled |
选取所有不可用元素 |
集合元素 |
:checked |
选取所有被选中的元素(单选框、复选框) |
集合元素 |
:selected |
选取所有被选中的元素(下拉列表) |
集合元素 |
选择器 | 说明 |
:input |
选取所有input textarea select button 元素 |
:text |
选取所有单行文本框 |
:password |
选取所有密码框 |
:radio |
选取所有单选框 |
:checkbox |
选取所有多选框 |
:submit |
选取所有的提交按钮 |
:image |
选取所有的图像按钮 |
:reset |
选取所有的重置按钮 |
:button |
选取所有的按钮 |
:file |
选取所有的上传域 |
:hidden |
选取所有的不可见元素 |
-
特定位置选择器
-
指定范围选择器
:even
:odd
:gt(index)
:lt(index)
-
排除选择器
第三节 选择器优化
第四节 代理对象属性和样式操作
第五节 jQuery中DOM操作
方法 | 说明 |
append() |
向每个匹配元素内部追加内容 |
appendTo() |
颠倒append() 的操作 |
prepend() |
向每个匹配元素的内容内部前置内容 |
prependTo() |
颠倒prepend() 的操作 |
after() |
向每个匹配元素之后插入内容 |
insertAfter() |
颠倒after() 的操作 |
before() |
在每个匹配元素之前插入内容 |
insertBefore() |
颠倒before() 的操作 |
-
删除节点
- jQuery提供了三种删除节点的方法
remove() detach() empty()
remove()方法
- 当某个节点用此方法删除后,该节点所包含的所有后代节点将同时被删除,用
remove() 方法删除后,还是可以继续使用删除后的引用
detach()
- 和
remove() 方法一样,也是从DOM 中去掉所有匹配的元素,与remove() 不同的是,所有绑定的事件、附加的数据等,都会被保留下来
empty()
empty() 方法并不是删除节点,而是清空节点,它能清空元素中所有后代节点
-
复制节点
- 使用
clone() 方法来完成
- 在
clone() 方法中传递一个参数true ,同时复制元素中所绑定的事件
-
替换节点
jQuery 提供相应的方法 replaceWidth()
-
样式操作
- 获取样式和设置样式
attr()
- 追加样式
addClass()
- 移除样式
removeClass()
- 切换样式
toggle() 方法只要是控制行为上的重复切换(如果元素是显示的,则隐藏;如果元素原来是隐藏的,则显示)
toggleClass() 方法控制样式上的重复切换(如何类名存在,则删除它,如果类名不存在,则添加它)
- 判断是否含有某个样式
hasClass() 可以用来判断元素是否含有某个class ,如有返回true 该方法等价于is()
-
设置和获取HTML、文本和值
html()
- 此方法类似
JavaScript 中innerHTML 属性,可以用来读取和设置某个元素中的HTML 内容
text() 方法
- 此方法类型
JavaScript 中innerHTML ,用来读取和设置某个元素中的文本内容
val() 方法
- 此方法类似
JavaScript 中的value 属性,用来设置获取元素的值。无论是文本框、下拉列表还是单选框,都可以返回元素的值,如果元素多选,返回一个包含所有选择的值的数组
-
遍历节点
children() 方法
- 该方法用来取得匹配元素的子元素集合
childre() 方法只考虑子元素而不考虑其他后代元素
next() 方法
prev() 方法
siblings() 方法
parent() 方法
parents() 方法
CSS DOM操作
CSS DOM 技术简单的来说就是读取和设置style 对象的各种属性
- 用
css() 方法获取元素的样式属性,可以同时设置多个样式属性
CSS DOM 中关于元素定位有几个常用的方法
offset() 方法
- 它的作用是获取元素在当前视窗的相对偏移其中返回的对象包含两个属性,即
top 和left ,他只对可见元素有效
position() 方法
- 获取相对于最近的一个
position() 样式属性设置为relative 或者absolute 的祖父节点的相对偏移,与offset() 一样,他返回的对象也包括两个属性,即top 和left
scrollTop() 方法和scrollLeft 方法
- 这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离
- 一张图总结以上的位置关系(项目中很常用-必须要弄清楚)
第六节 jQuery动画
回顾上节
- 操作DOM
- a.什么是
DOM :Document Object Model 缩写,文档对象模型
- b.理解页面的树形结构
- c.什么是节点:是DOM结构中最小单元,包括元素、属性、文本、文档等。
一、创建节点
- 1.创建元素
- 语法:
document.createElement(name) ;
1 2
|
var div = document.createElement("div"); document.body.appendChild(div);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
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)`
```javascript 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);
|
二、插入内容
-
内部插入
- 向元素最后面插入节点:
append() :向每个匹配的元素内部追加内容
appendTo() :把所有匹配的元素追加到指定元素集合中,$("A").append("B") 等效 $("B").appendTo("A")
- 向元素最前面插入节点:
prepend() :把每个匹配的元素内部前置内容
prependTo() :把所有匹配的元素前置到另一个指定的元素集合中,$("A").prepend("B") 等效 $("B").prependTo("A")
-
外部插入
after() :在每个匹配的元素之后插入内容
before() :在每个匹配想元素之前插入内容
insertAfter() :将所有匹配的元素插入到另一个指定的元素集合后面,$A.insert($B) 等效$B.insertAfter($A);
insertBefore() :将所有匹配的元素插入到另一个指定的元素集合前面 $A.before($B) 等效 $B.insertBefore($A) ;
三、删除内容
- 移除
- 清空
empty() :删除匹配的元素集合中所有子节点内容
四、克隆内容:创建指定节点副本
clone()
- 注意:若
clone(true) 则是包括克隆元素的属性,事件等
五、替换内容
replaceWith() :将所有匹配的元素替换成指定的元素
replaceAll() :用匹配的元素替换掉指定元素
- 注意:两者效果一致,只是语法不同
$A.replaceAll($B) 等效于 $B.replaceWhith($A) ;
本节新知识
JavaScrip t语言本身不支持动画设计,必须通过改变CSS 来实现动画效果
显隐动画
-
show() :显示 hide() :隐藏
- 原理:
hide() 通过改变元素的高度宽度和不透明度,直到这三个属性值到0
show() 从上到下增加元素的高度,从左到右增加元素宽度,从0 到1 增加透明度,直至内容完全可见
- 参数:
show(speed,callback)
speed : 字符串或数字,表示动画将运行多久(slow=0.6 /normal=0.4 /fast=0.2 )
callback : 动画完成时执行的方法
-
显示和隐藏式一对密不可分的动画形式
-
显隐切换
toggle() :切换元素的可见状态
- 原理:匹配元素的宽度、高度以及不透明度,同时进行动画,隐藏动画后将
display 设置为none
- 参数:
toggle(speed)
toggle(speed,callback)
toggle(boolean)
speed : 字符串或数字,表示动画将运行多久(slow=0.6 /normal=0.4 /fast=0.2 )
easing : 使用哪个缓冲函数来过渡的字符串(linear /swing )
callback : 动画完成时执行的方法
boolean :true 为显示 false 为隐藏
滑动
-
显隐滑动效果
slideDown() :滑动隐藏
-
slidUp() :滑动显示
-
参数:
slideDown(speed,callback)
slidUp(speed,callback)
-
显隐切换滑动
渐变:通过改变不透明度
-
淡入淡出
fadeIn()
-
fadeOut()
-
参数:
fadeIn(speed,callback)
fadeOut(speed,callback)
-
设置淡出透明效果
-
fadeTo() ?:以渐进的方式调整到指定透明度
-
参数:
fadeTo(speed,opacity,callback)
-
渐变切换:结合fadeIn 和fadeOut
- 自定义动画:
animate()
- 注意:在使用
animate 方法之前,为了影响该元素的top left bottom right 样式属性,必须先把元素的position 样式设置为relative 或者absolute
- 停止元素的动画
- 很多时候需要停止匹配正在进行的动画,需要使用stop()
stop() 语法结构:stop([clearQueue],[gotoEnd]);
- 都是可选参数,为布尔值
- 如果直接使用
stop() 方法,会立即停止当前正在进行的动画
- 判断元素是否处于动画状态
- 如果不处于动画状态,则为元素添加新的动画,否则不添加
if(!$(element).is(":animated")){ //判断元素是否处于动画状态}
- 这个方法在
animate 动画中经常被用到,需要注意
- 延迟动画
- 在动画执行过程中,如果你想对动画进行延迟操作,那么使用
delay()
-
用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中的事件
-
事件对象的属性
event.type :获取事件的类型
event.target :获取到触发事件的元素
event.preventDefault 方法 阻止默认事件行为
event.stopPropagation() 阻止事件的冒泡
-
keyCode :只针对于keypress 事件,获取键盘键数字 按下回车,13
-
event.pageX / event.pageY 获取到光标相对于页面的x 坐标和y 坐标
- 如果没有
jQuery ,在IE浏览器中用event.x / event.y ;在Firefox 浏览器中用event.pageX / event.pageY 。如果页面上有滚动条还要加上滚动条的宽度和高度
-
event.clientX :光标对于浏览器窗口的水平坐标 浏览器
-
event.clientY :光标对于浏览器窗口的垂直坐标
-
event.screenX :光标对于电脑屏幕的水平坐标 电脑屏幕
event.screenY :光标对于电脑屏幕的水平坐标
event.which 该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键,在键盘事件中的按键 1 代表左键 2 代表中键 3 代表右键
-
事件冒泡
- 什么是冒泡
- 在页面上可以有多个事件,也可以多个元素影响同一个元素
- 从里到外
- 嵌套关系
- 相同事件
- 其中的某一父类没有相同事件时,继续向上查找
- 停止事件冒泡
- 停止事件冒泡可以阻止事件中其他对象的事件处理函数被执行
- 在
jQuery 中提供了stopPropagation() 方法
- 阻止默认行为
- 网页中元素有自己的默认行为,例如:单击超链接后会跳转、单击提交后表单会提交,有时需要阻止元素的默认行为
- 在
jQuery 中提供了preventDefault() 方法来阻止元素的默认行为
- 事件捕获
- 事件捕获和冒泡是相反的过程,事件捕获是从最顶端往下开始触发
- 并非所有的浏览器都支持事件捕获,并且这个缺陷无法通过
JavaScript 来修复。jQuery 不支持事件捕获,如需要用事件捕获,要用原生的JavaScript
-
bind() ;绑定
-
为匹配元素绑定处理方法
-
需要给一个元素添加多个事件 ,事件执行一样时候
one() :只执行一次
分类 | 方法名称 | 说明 |
页面载入 |
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 下最大的有点,能在不刷新整个页面前提下更新数据
- 提高
web 程序的性能
- 与传统模式相比,
Ajax 模式在性能上最大的区别在于传输数据的方式,在传统模式中,数据的提交时通过表单来实现的。Ajax 模式只是通过XMLHttpRequest 对象向服务器提交希望提交的数据,即按需发送
- 减轻服务器和带宽的负担
Ajax 的工作原理相当于在用户和服务器之间加了一个中间层,似用户操作与服务器响应异步化。它在客户端创建Ajax 引擎,把传统方式下的一些服务器负担的工作转移到客户端,便于客户端资源来处理,减轻服务器和带宽的负担
- Ajax的不足
- 浏览器对
XMLHttpRequest 对象的支持度不足
- 破坏浏览器前进、后退按钮的正常功能
- 对搜索引擎的支持的不足
- 开发和调试工具的缺乏
创建一个Ajax请求
1 2 3 4 5 6
|
xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { alert( xhr.responseText ); } };
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
|
|
jQuery中的Ajax [补充部分–来自锋利的jQuery]
jquery 对Ajax 操作进行了封装,在jquery 中的$.ajax() 方法属于最底层的方法,第2 层是load() 、$.get() 、$.post(); 第3 层是$.getScript() 、$.getJSON() ,第2 层使用频率很高
load() 方法
load() 方法是jquery 中最简单和常用的ajax 方法,能载入远程HTML 代码并插入DOM 中 结构为:load(url,[data],[callback])
- 使用
url 参数指定选择符可以加载页面内的某些元素 load 方法中url 语法:url selector 注意:url 和选择器之间有一个空格
- 传递方式
load() 方法的传递方式根据参数data 来自动指定,如果没有参数传递,则采用GET 方式传递,反之,采用POST
- 回调参数
- 必须在加载完成后才执行的操作,该函数有三个参数 分别代表请求返回的内容、请求状态、
XMLHttpRequest 对象
- 只要请求完成,回调函数就会被触发
1 2 3 4 5
|
$("#testTest").load("test.html",function(responseText,textStatus,XMLHttpRequest){
|
参数名称 | 类型 | 说明 |
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() 方法的结构和使用方式相同,有如下区别
GET 请求会将参数跟张乃URL后进行传递,而POST 请求则是作为Http 消息的实体内容发送给web服务器,在ajax 请求中,这种区别对用户不可见
GET 方式对传输数据有大小限制(通常不能大于2KB ),而使用POST 方式传递的数据量要比GET 方式大得多(理论不受限制)
GET 方式请求的数据会被浏览器缓存起来,因此其他人可以从浏览器的历史纪录中读取这些数据,如:账号、密码。在某种情况下,GET 方式会带来严重的安全问题,而POST 相对来说可以避免这些问题
GET 和POST 方式传递的数据在服务端的获取也不相同。在PHP 中,GET 方式用$_GET[] 获取;POST 方式用$_POST[] 获取;两种方式都可用$_REQUEST[] 来获取
-
总结
- 使用
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 事件 |
第九节 插件
-
什么是插件
- 插件(
Plugin )也称为jQuery 的扩展。以jQuery 核心代码为基础编写的符合一定规范的应用程序。通过js 文件的方式引用。
-
插件分为哪几类
UI 类、表单及验证类、输入类、特效类、Ajax 类、滑动类、图形图像类、导航类、综合工具类、动画类等等
- 引入插件的步骤
- 引入
jquery.js 文件,而且在所以插件之前引入
- 引入插件
- 引入插件相关文件,比如皮肤、中文包
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
;(function($){ $.fn.plugin=function(options){ var defaults = {
|
自定义jQuery 函数:
1 2 3 4 5 6 7
|
(function($){ $.extend({ test: function(){ alert("hello plugin"); } }) })(jQuery);
|
自定义jQuery 命令:
1 2 3 4 5 6 7
|
(function($){ $.fn.extend({ say : function(){ alert("hello plugin"); } }) })(jQuery);
|
1 2 3 4 5 6
|
(function($){ $.fn.say = function(){ alert("hello plugin"); }; })(jQuery);
|
附录一 jQuery各个版本新增的一些常用的方法
方法 | 说明 |
.closest() |
从元素本身开始,逐级向上级元素匹配,并返回最先匹配的祖先元素 |
die() |
从元素中删除先前用live() 方法绑定的所有的事件 |
live() |
附加一个事件处理器到符合目前选择器的所有元素匹配 |
方法 | 说明 |
.first() |
获取集合中第一个元素 |
last() |
获取集合中最后一个元素 |
has(selector) |
保留包含特定后代的元素,去掉那些不含有指定后代的元素 |
detach() |
从DOM 中去掉所有匹配的元素。detach() 和remov() 一样,除了detach() 保存了所有jquery 数据和被移走的元素相关联。当需要移走一个元素,不久又将该元素插入DOM 时,这种方法很有用 |
delegate() |
为所有选择器匹配的元素附加一个处理一个或多个事件 |
undelegate() |
为所有选择器匹配的元素删除一个处理一个或多个事件 |
方法 | 说明 |
prop(proptyName) |
获取在匹配元素集合中的第一个元素的属性值 |
removeProp(proptyName,value) |
为匹配的元素删除设置的属性 |
:focus |
选择当前获取焦点的元素 |
附录二 jQuery性能优化
-
性能优化
- 使用最新版的jQuery类库
- 使用合适的选择器
$(#id)
- 使用
id 来定位DOM 元素是最佳的方式,为了提高性能,建议从最近的ID 元素开始往下搜索
$("p") , $("div") , $("input")
- 标签选择器性能也不错,它是性能优化的第二选择。因为
jQuery 将直接调用本地方法document.getElementsByTagName() 来定位DOM 元素
$(".class")
$("[attribute=value]")
- 对这个利用属性定位
DOM 元素,本地JavaScript 并没有直接实现。这种方式性能并不是很理想。建议避免使用。
$(":hidden")
- 和上面利用属性定位
DOM 方式类似,建议尽量不要使用
- 注意的地方
- 缓存对象
- 如果你需要在其他函数中使用
jQuery 对象,你可以把他们缓存在全局环境中
- 数组方式使用
jQuery 对象
- 使用
jQuery 选择器获取的结果是一个jQuery 对象。在性能方面,建议使用for 或while 循环来处理,而不是$.each()
- 事件代理
- 每一个
JavaScript 事件(如:click 、mouseove r)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点很有用。比如,我们要为一个表单绑定这样的行为:点击td后,把背景颜色设置为红色
$("#myTable td").click(function(){$(this).css("background","red");});
- 假设有
100 个td 元素,在使用以上的方式时,绑定了100 个事件,将带来性能影响
- 代替这种多元素的事件监听方法是,你只需向他们的父节点绑定一次事件,然后通过
event.target 获取到点击的当前元素
$("#myTable td").click(function({$(e.target).css("background","red")});
e.target 捕捉到触发的目标
- 在
jQuery1.7 中提供了一个新的方法on() ,来帮助你将整个事件监听封装到一个便利的方法中
$("#myTable td").on("click",‘td‘,function(){$(this).css("background","red");});
- 将你的代码转化成jQuery插件
- 它能够使你的代码有更好的重用性,并且能够有效的帮助你组织代码
-
使用join()方法来拼接字符串
- 也许你之前使用
+ 来拼接字符串,现在可以改了。它确实有助于性能优化,尤其是长字符串处理的时候
-
合理使用HTML5和Data属性
HTML5 的data 属性可以帮助我们插入数据,特别是后端的数据交换。jQuery 的Data() 方法有效利用HTML5 的属性
- 例如:
<div id="dl" data-role="page" data-list-value="43" data-options=‘{"name:""John"}‘>
- 为了读取数据,你需要使用如下代码
$("#dl‘).data("role‘;//page)
$("#dl‘).data("lastValue‘;//43)
$("#dl‘).data("options‘;//john)
-
尽量使用原生的JavaScript方法
- 压缩JavaScript代码
- 一方面使用
Gzip ;另一方面去除JavaScript 文件里面的注释、空白
附录三 常用的jQuery代码片段
1 2 3 4 5
|
$(document).ready(functuion(){ $(document).bind("contextmenu",function(e){ return false; }); });
|
1 2 3 4 5 6 7 8 9 10 11
|
$(document).ready(function(){
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
|
$(document).reday(function(){
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
$(document).ready(function(){ $("input.text1").val("Enter you search text here"); textFill($(‘input.text1‘)); });
function textFill(input){
|
1 2 3 4 5 6
|
$(document).ready(function(){ $(document).mousemove(function(e){ $("#XY").html("X:" + e.pageX+ "| Y" + e.pageY); }); });
|
1 2 3 4 5
|
$(document).ready(function(){ if($("#id").length){
|
1 2 3 4 5 6 7
|
$("div").click(function(){ window.location = $(this).find("a").attr("href"); })
|
1 2 3 4 5 6 7 8 9 10 11
|
$(document).ready(function(){ jQuery.fn.center = function(){ this.css("position","absolute"); this.css("top",($(window).height() - this.lenght()) / 2 +$(window).scrollTop() + "px"); this.css("left",($(window).height() - this.lenght()) / 2 +$(window).scrollLeft() + "px"); return this; }
|
1 2 3
|
$(document).ready(function(){ jQuery.fx.off = true; });
|
1 2 3 4 5
|
$(document).ready(function(){ $("#xy").mousedown(function(e){ alert(e.which);
|
1 2 3 4 5 6 7
|
$(document).ready(function(){ $("input").keyup(function(e){ if(e.which == "13"){ alert("回车提交"); } }) });
|
1 2 3 4 5 6 7 8
|
$("#load").ajaxStart(function(){ showLoading();
|
1 2
|
$("#someElement").find(‘option:selected‘); $("#someElement option:selected");
|
1 2 3 4 5
|
var tog = false; $("button").click(function(){ $("input[type=checkbox]‘).attr("checked",!tog); tog = !tog; });
|
1 2 3 4 5
|
$(document).ready(function(){ $("a[href$=‘pdf‘]").addClass("pdf"); $("a[href$=‘zip‘]").addClass("zip"); $("a[href$=‘psd‘]").addClass("psd"); });
|
1 2 3 4 5 6
|
setTimeOut(function(){ $("div").fadeIn(400); },3000);
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
|
1 2 3 4 5 6 7 8 9 10 11 12
|
(function($) { var cache = [];
|
1 2 3 4 5 6 7 8 9 10 11
|
var scr = document.createElement(‘script‘); scr.setAttribute(‘src‘, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js‘); document.body.appendChild(scr); scr.onload = function(){ $(‘div‘).attr(‘class‘, ‘‘).attr(‘id‘, ‘‘).css({ ‘margin‘ : 0, ‘padding‘ : 0, ‘width‘: ‘100%‘, ‘clear‘:‘both‘ }); };
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
$(window).bind("load", function() {
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
|
var accordion = { init: function(){ var $container = $(‘#accordion‘); $container.find(‘li:not(:first) .details‘).hide(); $container.find(‘li:first‘).addClass(‘active‘); $container.on(‘click‘,‘li a‘,function(e){ e.preventDefault(); var $this = $(this).parents(‘li‘); if($this.hasClass(‘active‘)){ if($(‘.details‘).is(‘:visible‘)) { $this.find(‘.details‘).slideUp(); } else { $this.find(‘.details‘).slideDown(); } } else { $container.find(‘li.active .details‘).slideUp(); $container.find(‘li‘).removeClass(‘active‘); $this.addClass(‘active‘); $this.find(‘.details‘).slideDown(); } }); } };
|
1 2 3 4 5 6 7 8 9 10 11 12 13
|
$(function(){ $("select#ctlJob").change(function(){ $.getJSON("/select.php",{id: $(this).val(), ajax: ‘true‘}, function(j){ var options = ‘‘; for (var i = 0; i < j.length; i++) { options += ‘ ‘ + j[i].optionDisplay + ‘ ‘; } $("select#ctlPerson").html(options); }) }) })
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
|
$(document).ready(function() { $(‘form‘).submit(function() { if(typeof jQuery.data(this, "disabledOnSubmit") == ‘undefined‘) { jQuery.data(this, "disabledOnSubmit", { submited: true }); $(‘input[type=submit], input[type=button]‘, this).each(function() { $(this).attr("disabled", "disabled"); }); return true; } else { return false; } }); });
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
var loading = false; $(window).scroll(function(){ if((($(window).scrollTop()+$(window).height())+250)>=$(document).height()){ if(loading == false){ loading = true; $(‘#loadingbar‘).css("display","block"); $.get("load.php?start="+$(‘#loaded_max‘).val(), function(loaded){ $(‘body‘).append(loaded); $(‘#loaded_max‘).val(parseInt($(‘#loaded_max‘).val())+50); $(‘#loadingbar‘).css("display","none"); loading = false; }); } } }); $(document).ready(function() { $(‘#loaded_max‘).val(50); });
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
<ul id=‘nav‘> <li>导航一</li> <li>导航二</li> <li>导航三</li> </ul>
|
- 解决
jQuery , prototype 共存,$ 全局变量冲突问题
1 2 3 4 5
|
<script src="prototype.js"></script> <script src="http://blogbeta.blueidea.com/jquery.js"></script> <script type="text/javascript"> jQuery.noConflict();</script>
注意:一定要先引入prototype.js 再引入jquery.js,先后顺序不可错
|
1 2 3
|
if ($.browser.msie) {
|
1 2 3
|
var iFrameDOM = $("iframe#someID").contents();
|
- 管理搜索框的值
- 现在各大网站都有搜索框,而搜索框通常都有默认值,当输入框获取焦点时,默认值消失。而一旦输入框失去焦点,而输入框里又没有输入新的值,输入框里的值又会恢复成默认值,如果往输入框里输入了新值,则输入框的值为新输入的值。这种特效用
JQuery 很容易实现
1 2 3 4 5 6 7
|
$("#searchbox") .focus(function(){ $(this).val(‘‘) }) .blur(function(){ var $this = $(this);
|
- 部分页面加载更新
- 为了提高
web 性能,有更新时我们通常不会加载整个页面,而只是仅仅更新部分页面内容,如图片的延迟加载等。页面部分刷新的特效在JQuery 中也很容易实现
1 2 3 4
|
setInterval(function() {
|
- 采配置JQuery与其它库的兼容性
- 如果在项目中使用
JQuery ,$ 是最常用的变量名,但JQuery 并不是唯一一个使用$ 作为变量名的库,为了避免命名冲突,你可以按照下面方式来组织你的代码
- 测试密码的强度
- 在某些网站注册时常常会要求设置密码,网站也会根据输入密码的字符特点给出相应的提示,如密码过短、强度差、强度中等、强度强等。这又是怎么实现的呢?看下面代码:
1
|
<input type="password" name="pass" id="pass" /> <span id="passstrength"></span>
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
|
|
以上是关于转载自网络大神的主要内容,如果未能解决你的问题,请参考以下文章
VSCode自定义代码片段14——Vue的axios网络请求封装
VSCode自定义代码片段14——Vue的axios网络请求封装
VSCode自定义代码片段14——Vue的axios网络请求封装
HTML5 DOM元素类名相关操作API classList简介(转载自张鑫旭大神)
基于SPSS的时间序列分析(转载自某大神)
推荐net开发cad入门阅读代码片段
|