jquery心得、技巧、总结

Jquery

1         . 开始:
$(document).ready(function() {}); 可缩写成:$(function(){});

选择器:引号中可以有多个一起选择
$(“#id”)要求id唯一
$(“.class”) class名对应的元素
$(“HTML标签”)所有标签元素对象
$(“*”)所有元素
$(“a b”)a元素下的所有子孙b元素
$(“a>b”)a元素下的所有子b元素
$(“a+b”)a元素后的下一个b元素 等价于 $(“a”).next(“b”);
$(“a~b”)a元素后的所有b元素 等价于 $(“a”).nextAll(“b”);
$(“#a”).siblings(“div”)#a元素的所有同辈div元素

过滤选择器:
:first 第一个元素
:last 最后一个元素
:not(selector) 除selector选择器对应的之外的所有元素
:even 索引为偶数的所有元素(索引从0开始)
 dd 索引为奇数的所有元素
:eq(index) 索引等于index的元素
:gt(index) 索引大于index的元素
:lt(index) 索引小于index的元素
:header 所有标题元素(h1~h6)
:animated 正在执行动画的所有元素
:contains(text) 含有文本内容为text的元素
:empty 不包含子元素或文本的空元素
:has(selector) 含有selector选择器所匹配的元素的元素
:parent 含有子元素或者文本的元素
:hidden 所有不可见元素
:visible 所有可见元素

属性过滤选择器:多个可合并
[att] 拥有此属性的元素
[att=val] 属性值为val的元素
[att!=val] 属性值不等于val的元素
[att^=val] 属性值以val开始的元素
[att$=val] 属性值以val结束的元素
[att*=val] 属性值含有val的元素

子元素过滤选择器
:nth-child(index/even/odd/equation)每个父元素下的第index个子元素或者奇偶元素index从1开始也可以是2n…代表2的倍数
:first-child每个父元素的第一个子元素
:last-child每个父元素的最后一个子元素
 nly-child每个父元素中只有一个子元素的子元素

表单对象属性过滤选择器
:enabled 所有可用元素
:disabled 所有不可用元素
:checked 所有选中元素(单选、复选)
:selected 所有选中元素(下拉列表)

表单选择器
:input 所有imput,textarea,select,button
:text 所有单行文本框
:password 所有密码框
:radio 所有单选框
:checkbox 所有多选框
:submit 所有提交按钮
:image 所有图像按钮
:reset 所有重置按钮
:button 所有按钮
:file 所有上传域
:hidden 所有不可见元素

2         Object.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]) time ms时间显示Object对应的元素(宽高和透明度同时)
Object.hide([time]) time ms时间隐藏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对象 var XXX=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(“…”)
共同使用$:
jQuery.noConflict();
(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>”)结果为:<ul><li></li></ul><ul><li></li></ul>
Object.wrapAll(Object2);将Object2所有元素用一个Object包裹起来。例$(“li”).wrapAll(“<ul></ul>”)结果为:<ul><li></li><li></li></ul>。若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下的最后一个列表项:$(“#list li: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();返回的对象含有top和left两属性
获取元素的滚动条距顶端和左侧的距离: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();
也可以用return false来取代上面两个或一个
得到事件类型: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时事件名后加!则代表匹配所有不包含命名空间中的事件,不加!则匹配所有绑定的事件

15     Object.slice(n);截取Object,n为负数则是从倒数第|n|个开始截取

$(“#list”).find(“li”).each(function(i) {
$(this).html( $(this).html() + ” BAM! ” + i );
});
$(“#list).find(“li”) == $(“#list li”)

16     ID为form1的表单reset:$(“#form1″)[0].reset()

17     所有表单reset:$(“form”).each(function() {
this.reset();
});

18     设置css:Object.css(“border”,”1px solid black”);

19     选择了所有的li元素,然后去除了有ul子元素的li元素:
$(“li”).not(“:has(ul)”)
$(“li”).not(“[ul]“)

20     选择所有的带有name属性的链接: $(“a[name]“)

21     选择一个有特点href属性的链接: $(“a[href*=http://www.jshuwei.org.cn]“)

问答模式(点击收缩):
$(/”#faq/”).find(/”dd/”).hide().end().find(/”dt/”).click(function() {
var answer = $(this).next();
if (answer.is(/”:visible/”)) {
answer.slideUp();
} else {
answer.slideDown();
}
});
<dl id=”faq”>
<dt>q1.……?</dt>
<dd>a1.…….</dd>
<dt>q2.……?</dt>
<dd>a2.…….</dd>
</dl>

每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后执行一次:
$(function() {
var addClickHandlers = function() {
$(“a.clickMeToLoadContent”).click(function() {
$(“#target”).load(this.href, addClickHandlers);
});
};
addClickHandlers();
});

22     得到复选框:$(/”input:checkbox/”)

23     $each(数组/对象,function(key/index,value){…})遍历数组或对象,return false即可退出循环

Ajax
 

23     Object.load(url[,data][,callback]):载入远程HTML代码并插入DOM中,并且当前DOM中定义的文档样式可直接应用到载入的HTML代码上
url:String,请求的URL,同时可以指定选择器加载其中的部分内容。格式为:url selector
data:Object,发送至服务器的key/value数据
callback:Function,回调函数,无论请求是否成功:function(responseText, textStatus,XMLHttpRequest){}参数分别为:请求返回的内容,请求状态(success,error,notmodified,timeout),XMLHttpRequest对象

23     $.get(url[,data][,callback][,type])
url:String,请求的URL
data:Object,发送至服务器的key/value数据
callback: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形式的一串参数
url:String,默认为当前页地址,发送请求的地址
type:String,请求方式(GET/POST,默认为GET。PUT/Delete也可以使用,但不一定支持)
timeout:Number,请求超时时间(ms).将覆盖$.ajaxSetup()方法的全局设置
data:Object/String,参数数据(url形式或Object形式)
dataType:String,预期服务器返回的数据类型(xml/html/script/json/jsonp/text)。
beforeSend:Function,发送请求前处理函数。function(XMLHttpRequest){this;//调用本次请求的options参数}
complete:Function,请求完成后回调函数(无论成功失败)。function(XMLHttpRequest,textStatus){ this;//调用本次请求的options参数}
success:Function,请求成功后回调函数。function(data,textStatus){this; //调用本次请求的options参数}
error:Function,请求失败后回调函数。function(XMLHttpRequest,textStatus,errorThrown){//通常后两个参数只有一个含有信息。this; //调用本次请求的options参数}
global:Boolean,是否触发全局Ajax事件(true/false:触发/不触发,默认为true).

24     Object.serialize();将对象的值序列化成字符串,表单中可以$(“#form1”).serialize();即可作为$.get()的data参数传递值

25     Object.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插件::
 

27     Validation表单验证(提示信息全是英文,若要中文则引入脚本库: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对,多个用”,”分隔)
方法三:
1. 引入jquery.validate.js脚本库
2. 字段都定义一个name属性
3. $(“#form1”).validate({
rules:{
name1:{
required:true,
minlength:2
}
[,name2:{…}]
}
})
自定义提示消息:
class=”{validate:{required:true,minlength:2,messages:{required:’请输入用户名’,minlength:’请至少输入两个字符’}}}”
提示消息美化:
1. css部分em.error{…} em.success{…}
2. jQuery部分(与rules并列)
errorElement:”em”,//同css中定义的一样
success:function(label){ //label指向上面那个错误提示信息标签em
label. addClass(“success”);
}

27     自定义验证规则
1. $validator.addMethod(
“formula”,//验证方法名称
function(value,element,param){//验证规则
return value == eval(param);
},
“请正确输入验证信息”//验证提示信息
);
2. 调用的时候:name1:{formula:”7+9”}

27     Form表单插件(使表单模拟ajax提交)
1. 引入jquery.form.js脚本库
2. $(“#form1”).ajaxForm(function(){…});或者
$(“#form1”).submit(function(){
$(this).ajaxSubmit(function(){…});
return false;
});
参数可以不紧紧是一个回调函数,可以是一个对象:
{target:”id”,//服务器返回的内容放入id的元素中
beforeSubmit:Fn1,//提交前回调函数
success:Fn2,//提交后的回调函数
url:url,//默认是form的action,若写则会覆盖action的
type:type,//默认是form的method, 若写则会覆盖action的
dataType:dt,//接受服务器返回的类型:xml/script/json
clearForm:Boolean,//成功提交后,是否清楚所有表单元素的值
resetForm:Boolean,//成功提交后,是否重置所有表单元素的值
timeout:time//限制请求超时时间,单位ms
}
提交前回调函数(Fn1):function(formData,jqForm,options){
formData//数组对象(提交的表单数据,可以用$.param(formData)将其转换成字符串)
jqForm//一个jQuery对象,封装了表单的元素
options//构造时的ajaxForm/ajaxSubmit参数
return flase时表单不提交可用作表单验证
}
提交后回调函数(Fn2):function(responseText,statusText){
statusText//请求的状态(success/error……)
responseText//请求返回的内容
}

27     livequery动态绑定事件插件(可以给元素绑定事件同时包括后来动态加载进来的元素)
1. 引入jquery.livequery.js脚本库
2. Object.livequery(“事件名称”,function(){…})

27     Cookie插件
写入cookie:$.cookie(“name”,”val”[,opts]);
读取cookie:$cookie(“name”);
删除cookie:$cookie(“name”,null);
opts:
{
expires:Number/Date //(number天)有效期
path:String //cookie的路径,默认是创建该Cookie的页面路径
domain:String //cookie的域名,默认是创建该Cookie的页面域名
secure:Boolean //true则该Cookie的传输要求一个安全协议(如https)
}

相关推荐