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)
}
且确实可以很轻松地做出许多复杂的效果虽然jQuery上手简单比其他库容易学会但是要全面掌握却不轻松因为它涉及到网页开发的方方面面提…
jQuery学习总结因为项目需要同时也因为兴趣在近一段时间研究和使用了jQuery它真的是太强大了代码非常的优雅和简洁好后悔现在才…
Jquery开始documentreadyfunction可缩写成function选择器引号中可以有多个一起选择id要求id唯一c…
一选择网页元素jQuery的基本设计和主要用法就是quot选择某个网页元素然后对其进行某种操作quot这是它区别于其他函数库的根本…
jQuery总结与注意事项刚开始学了JQuqery众多的get等等符号早已把我搞晕了暂时就放弃了后来学习ASPNETAJAX在微软…
一简介11概述随着WEB20及ajax思想在互联网上的快速发展传播陆续出现了一些优秀的Js框架其中比较著名的有PrototypeY…
一选择网页元素jQuery的基本设计和主要用法就是quot选择某个网页元素然后对其进行某种操作quot这是它区别于其他函数库的根本…
jQuery操作Table学习总结jQuery在客户端操作Table学习不过有很多很多的不足还需要学习掌握ltstyletypeq…
jQuery学习总结因为项目需要同时也因为兴趣在近一段时间研究和使用了jQuery它真的是太强大了代码非常的优雅和简洁好后悔现在才…
1、$(p).html(Hello$(p).text(Hellobworld/b!);bworld/b!);Html和text的区…