jquery心得技巧总结Word文件下载.docx
《jquery心得技巧总结Word文件下载.docx》由会员分享，可在线阅读，更多相关《jquery心得技巧总结Word文件下载.docx（10页珍藏版）》请在冰豆网上搜索。
first-child每个父元素的第一个子元素
last-child每个父元素的最后一个子元素
nly-child每个父元素中只有一个子元素的子元素
表单对象属性过滤选择器
enabled所有可用元素
disabled所有不可用元素
checked所有选中元素（单选、复选）
selected所有选中元素（下拉列表）
表单选择器
input所有imput，textarea，select，button
text所有单行文本框
password所有密码框
radio所有单选框
checkbox所有多选框
submit所有提交按钮
image所有图像按钮
reset所有重置按钮
button所有按钮
file所有上传域
2Object.filter（exp）筛选出与exp匹配的元素集合。
exp可以是多个选择器的组合
交互处理:
两个function中来回切换调用
Object.hover（enter,leave）:
鼠标移上，移出事件
Object.toggle（fn1,fn2,…fnN）:
多次点击事件
例如：
Object.toggle（function（）{
//显示元素代码
},function（）{
//隐藏元素代码
}）
3交互使用class样式：
Object.toggleClass（“className”）重复交替使用class
Object.show（[time]）timems时间显示Object对应的元素（宽高和透明度同时）
Object.hide（[time]）timems时间隐藏Ojbect对应的元素（宽高和透明度同时）
若无时间则瞬间
Object.fadeIn（）;
增加不透明度使显示，只改变元素的不透明度
Object.fadeOut（）;
降低不透明度
Object.slideUp（）;
元素由下到上缩短隐藏
Object.slideDown（）;
元素由上至下延伸显示
都可以指定三种参数：
”slow”,”normal”,”fast”分别是600,400,200ms，都可以设定一个回调函数
自定义动画：
Object.animate（params,speed[,callback]）;
params:
key/val的键值对，speed:
速度，callback:
动画完成执行函数.例如：
$（“div”）.animate（{left:
”+=500px”},3000）;
3s内向右移动500px.其中的值可以是数字，+=代码原来基础上向右500，也可以-=，也可500px
控制滚动条用scrollTop属性
停止动画：
stop（[clearQueue][,gotoEnd]）,两参数都可选同为boolean值，第一个代表是否清空未执行完的动画队列，第二个代表是否直接将正在执行的动画跳转到末状态。
默认都为false
判断元素是否正处于动画状态：
Object.is（“:
animated”）
Object.toggle（）;
交替显示/隐藏元素（可见性）。
Object.slideToggle（）;
交替显示/隐藏元素（元素高度）。
Object.fadeTo（）;
交替显示/隐藏元素（元素不透明度）。
可含参数：
时间，不透明度
var$XXX=jQuery对象varXXX=DOM对象
13.jQuery对象和DOM对象间方法不可混用，可将jQuery对象转换成DOM对象后使用原本DOM对象的方法：
$XXX[0]或者$XXX.get（0）;
将DOM对象转换成jQuery对象：
var$XXX=$（XXX），可将XXX的DOM对象转换成jQuery对象
14.判断复选框是否选中：
$XXX.is（“:
checked”）
解决和其他js框架的冲突：
①后导入jQuery库
一开始调用方法：
jQuery.noConflict（）;
使用：
其他的可以用$，jQuery的只能用jQuery（“…”）
或者开始定义：
var$j=jQuery.noConflict（）;
然后其他的用$，jQuery的用$j（“…”）
共同使用$：
（function（$）{
$（function（）{
//jQuery代码可以使用$（“…”）
}）;
}）（jQuery）;
//其他js框架使用$（“…”）
②先导入jQuery库：
不需要调用jQuery.noConflict（）;
其他一样使用
判断元素是否存在：
if（$（“#id”）.length>
0）或者if（$（“#id”）[0]）而不能用if（$（“#id”））
获取对象的属性：
Object.attr（“属性的key”）
设置对象的属性：
Object.attr（“属性的key”,”属性的val”）或者Object.attr（{key:
val,key:
val…}）
删除对象的属性：
Object.removeAttr（“属性的key”）
追加样式：
Object.addClass（）;
修改样式：
可用attr来做
移除样式：
Object.removeClass（）;
多个之间用空格分隔
4创建HTML,DOM：
$（“HTML标签”）例创建一个li：
var$li1=$（“<
li>
<
/li>
”）
添加节点：
Object.append（Object2）;
在Object中追加Object2。
例$（“ul”）.append（$li1）;
Object.appendTo（Object2）;
与上一个相反，将Object追加到Object2中。
$li1.appendTo（“ul”）
Object.prepend（Object2）;
在Object前追加Object2。
Object.prependTo（Object2）;
与上一个相反
Object.after（Object2）;
在Object后增加Object节点。
Object.insertAfter（Object2）;
与上一个相反
Object.before（Object2）;
在Object前增加Object节点。
Object.insertBefore（Object2）;
删除节点：
Object.remove（）;
删除Object匹配的节点（包括其子孙后代），返回值为该被删除的Object
Object.empty（）;
删除Object的子孙后代节点并将自身的内容清空
复制节点：
Object.clone（）;
得到一个Object节点
Object.clone（true）;
得到一个Object节点且该节点（包含原有绑定的所有事件）
替换节点：
Object.replaceWith（Object2）;
用Object2替换所有Object匹配的节点
Object.replaceAll（Object2）;
注：
原来节点所绑定的事件都没有了，需要重新绑定。
包裹节点：
Object.wrap（Object2）;
用Object2把Object元素包裹起来。
例$（“li”）.wrap（“<
ul>
/ul>
”）结果为：
Object.wrapAll（Object2）;
将Object2所有元素用一个Object包裹起来。
例$（“li”）.wrapAll（“<
。
若Object中隔有其他元素则将其他元素放在整体之后显示
Object.wrapInner（Object2）;
用Object2包裹Object元素里面的内容
5点击事件：
Object.click（function（）{…}）
6鼠标移上去事件：
Object.hover（function（）{…}）
7增加样式：
Object.addClass（“className”）
8删除样式：
Object.removeClass（“className”）
9判断是否有某个样式：
Object.hasClass（“className”）
10文档中ID为list下的列表项：
$（“#list>
li”）
11文档中ID为list下的最后一个列表项：
$（“#listli:
last”）
12获取对象的HTML代码：
Object.html（）;
设置对象的HTML代码：
Object.html（“HTML代码”）
13获取对象的文本内容：
Object.text（）;
设置对象的文本内容：
Object.text（“文本内容”）;
获取/设置对象的值：
Object.val（）;
若对象是下拉框/单复选框：
单复选框只匹配value
O.val（“值”）：
从最后一个选项倒着读取选项，选项中value或text任意一个匹配则选中
多选：
O.val（[“值1”,”值2”,…]）
14当前对象的默认值：
Object.defaultValue;
遍历节点：
匹配元素的子元素集合：
Objecet.children（）;
匹配元素后面紧邻的同辈元素：
Object.next（）;
匹配元素前面紧邻的同辈元素：
Object.prev（）;
匹配元素的所有同辈元素：
Object.siblings（）;
Object.closest（）:
匹配最近的匹配元素：
若当前元素匹配则返回当前元素，否则向上查找父元素，逐级向上知道找到匹配元素，若全无则返回一个空jQuery对象
获取对象的CSS：
Object.css（“css的key”）
设置对象的CSS：
Object.css（“css的key”,”css的val”）多个用json数组
获取元素在当前视窗的相对偏移量（只对可见元素有效）：
Object.offset（）;
返回的对象含有top和left两属性
获取元素相对于最近一个position样式属性设置为relative或absolute的祖父节点的相对偏移：
Object.position（）;
获取元素的滚动条距顶端和左侧的距离：
Object.scrollTop（）;
Object.scrollLeft（）;
若有int型参数则控制滚动条到指定位置
对象绑定事件：
Object.bind（type[,data],fn）;
第一个为事件类型（如click等，就是js的事件去了on）也可以自定义类型，第二个作为event.data属性值传递给事件对象的额外数据对象，第三个为处理函数。
等价于Object.事件类型（function（）{}）;
取消事件绑定：
Object.unbind（[type][,data]）;
第一个为事件类型，第二个是将要移除的函数，若无参数则删除所有事件
只执行一次就删除的事件：
Object.one（type[,data],fn）;
模拟触发事件：
Object.trigger（type[,data]）;
系统定义事件可以：
Object.事件（）;
例：
$（“#btn”）.click（）;
data是数组的参数，赋值给事件的fn:
function（event,data…）.若是流量器默认事件则用Object.triggerHandler（type[,data]）则只触发绑定的事件
停止事件的冒泡处理：
event.stopPropagation（）;
绑定事件时的fn需要一个参数event
阻止元素的默认行为（如表单提交，连接跳转）：
event.preventDefault（）;
也可以用returnfalse来取代上面两个或一个
得到事件类型:
event.type;
触发事件的元素：
event.target;
触发事件的相关元素：
event.relatedTarget;
获取光标相对于页面的x/y坐标：
event.pageX/event.pageY
获取鼠标的左中右键：
event.which;
（1/2/3?
左/中/右）
键盘中Ctrl按键：
event.metaKey;
指向原始事件对象：
event.originalEvent
事件命名空间：
事件名.命名空间名;
click.a
同名不同命名空间下的方法trigger时事件名后加！
则代表匹配所有不包含命名空间中的事件，不加！
则匹配所有绑定的事件
15Object.slice（n）;
截取Object，n为负数则是从倒数第|n|个开始截取
$（“#list”）.find（“li”）.each（function（i）{
$（this）.html（$（this）.html（）+”BAM!
”+i）;
$（“#list）.find（“li”）==$（“#listli”）
16ID为form1的表单reset：
$（“#form1″）[0].reset（）
17所有表单reset：
$（“form”）.each（function（）{
this.reset（）;
18设置css：
Object.css（“border”,”1pxsolidblack”）;
19选择了所有的li元素，然后去除了有ul子元素的li元素:
$（“li”）.not（“:
has（ul）”）
$（“li”）.not（“[ul]“）
20选择所有的带有name属性的链接:
$（“a[name]“）
21选择一个有特点href属性的链接:
$（“a[href*=]“）
问答模式（点击收缩）：
$（/”#faq/”）.find（/”dd/”）.hide（）.end（）.find（/”dt/”）.click（function（）{
varanswer=$（this）.next（）;
if（answer.is（/”:
visible/”））{
answer.slideUp（）;
}else{
answer.slideDown（）;
}
dlid=”faq”>
dt>
q1.……?
/dt>
dd>
a1.…….<
/dd>
q2.……?
a2.…….<
/dl>
每次点击具有clickMeToLoadContent这个样式的链接并且内容加载完成后执行一次:
$（function（）{
varaddClickHandlers=function（）{
$（“a.clickMeToLoadContent”）.click（function（）{
$（“#target”）.load（this.href,addClickHandlers）;
};
addClickHandlers（）;
22得到复选框：
$（/”input:
checkbox/”）
23$each（数组/对象,function（key/index,value）{…}）遍历数组或对象,returnfalse即可退出循环
Ajax
23Object.load（url[,data][,callback]）:
载入远程HTML代码并插入DOM中，并且当前DOM中定义的文档样式可直接应用到载入的HTML代码上
url:
String,请求的URL，同时可以指定选择器加载其中的部分内容。
格式为：
urlselector
data:
Object,发送至服务器的key/value数据
callback:
Function,回调函数，无论请求是否成功:
function（responseText,textStatus,XMLHttpRequest）{}参数分别为：
请求返回的内容，请求状态（success,error,notmodified,timeout），XMLHttpRequest对象
23$.get（url[,data][,callback][,type]）
String,请求的URL
Function,回调函数，只当成功时回调:
function（data,textStatus）{}参数分别为：
请求返回的内容，请求状态（同上）
type:
String,服务器返回内容的格式（xml,html,script,json,text,_default）
23$.post（url[,data][,callback][,type]）同$.get（）
23$.getScript（js_url[,function（）{…}]）加载js文件并且自动执行
23$.getJSON（json_url,function（data）{…}）加载json文件，data为返回的数据
23$.ajax（options）:
options是以key/value形式的一串参数
String,默认为当前页地址，发送请求的地址
String,请求方式（GET/POST,默认为GET。
PUT/Delete也可以使用，但不一定支持）
timeout:
Number,请求超时时间（ms）.将覆盖$.ajaxSetup（）方法的全局设置
Object/String,参数数据（url形式或Object形式）
dataType:
String,预期服务器返回的数据类型（xml/html/script/json/jsonp/text）。
beforeSend:
Function,发送请求前处理函数。
function（XMLHttpRequest）{this;
//调用本次请求的options参数}
complete:
Function,请求完成后回调函数（无论成功失败）。
function（XMLHttpRequest,textStatus）{this;
success:
Function,请求成功后回调函数。
function（data,textStatus）{this;
//调用本次请求的options参数}
error:
Function,请求失败后回调函数。
function（XMLHttpRequest,textStatus,errorThrown）{//通常后两个参数只有一个含有信息。
this;
global:
Boolean,是否触发全局Ajax事件（true/false:
触发/不触发，默认为true）.
24Object.serialize（）;
将对象的值序列化成字符串，表单中可以$（“#form1”）.serialize（）;
即可作为$.get（）的data参数传递值
25Object.serializeArray（）;
将对象的值序列化成json格式的数据
26$.param（Object/Array）;
将对象或数组按照key/value进行序列化
Ajax全局事件：
1）ajaxStart（）:
Ajax请求开始时触发
2）ajaxStop（）:
Ajax请求结束后触发
3）ajaxComplete（）:
Ajax请求完成时执行的函数
4）ajaxError（）:
Ajax请求发生错误时执行的函数，捕捉到的错误可以作为最后一个参数传递
5）ajaxSend（）:
Ajax请求发送前执行的函数
6）ajaxSuccess（）:
Ajax请求成功时执行的函数
$（“#loading”）.ajaxStart（function（）{
$（this）.show（）;
}）.ajaxStop（function（）{
$（this）.hide（）;
//所有Ajax请求在请求阶段都会显示id为loading的元素
27$（“status”,xml）:
在xml文档中查找status标签。
.text（）获取标签的值
jQuery插件：
：
27Validation表单验证（提示信息全是英文，若要中文则引入脚本库：
jquery.validate.messages_cn.js）
方法一：
1.引入jquery.validate.js脚本库
2.$（“#form1”）.validate（）;
3.字段设置class=”…”.（…为验证规则如：
required/email/url等）
4.长度验证设置字段的minlength,maxlength属性
方法二：
1.引入jquery.validate.js及jquery.metadata.js脚本库
2.$（“#form1”）.validate（{meta:
”validate”}）;
3.字段设置class=”{validate:
{…}}”.（…为key:
value对，多个用”,”分隔）
方法三：
2.字段都定义一个name属性
3.$（“#form1”）.validate（{
rules:
{
name1:
required:
true,
minlength:
2
[,name2:
{…}]
自定义提示消息：
class=”{
升级会员 