jquery心得技巧总结.docx
- 文档编号:8519984
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:10
- 大小:24.17KB
jquery心得技巧总结.docx
《jquery心得技巧总结.docx》由会员分享,可在线阅读,更多相关《jquery心得技巧总结.docx(10页珍藏版)》请在冰豆网上搜索。
jquery心得技巧总结
Jquery
1.开始:
$(document).ready(function(){});可缩写成:
$(function(){});
选择器:
引号中可以有多个一起选择
$(“#id”)要求id唯一
$(“.class”)class名对应的元素
$(“HTML标签”)所有标签元素对象
$(“*”)所有元素
$(“ab”)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所有不可见元素
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(“…”)
共同使用$:
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=$(“
”)添加节点:
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(“
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();返回的对象含有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();
也可以用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();
}
});
每次点击具有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])
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).
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对,多个用”,”分隔)
方法三:
1.引入jquery.validate.js脚本库
2.字段都定义一个name属性
3.$(“#form1”).validate({
rules:
{
name1:
{
required:
true,
minlength:
2
}
[,name2:
{…}]
}
})
自定义提示消息:
class=”{
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- jquery 心得 技巧 总结