jQuery---- 常用操作
2013-03-26 13:51
393 查看
jQuery的链式操作：
$(this)
.addClass("highlight").children("li").show().end()
.sibilings().removeClass("highlight").children("li").hide();
jQuery对象和DOM对象：
var $cr = $("cr"); // jQuery对象
var cr = $cr[0]; // DOM对象
var dr = $cr.get(0) // DOM对象
var $dr = $(dr) // jQuery对象
jQuery的选择器：
备忘
Query的选择器是和css选择器类似的
$("tt").css("color","red"); 无需判断tt元素是否存在
if($("tt").length>0) …; 判断tt存在
基本选择器
$("#selector")
#(".select")
$("div")
$("*")
$("div,span,p.class")
层次选择器
$("div span") // div下所有的span
$("div > span") // div的span子元素
$(".one + div") // 紧挨class为.one的下一个元素 = $(".one").next("div")
$("#two~div") // id为two后面所有的div元素 = $("#two").nextAll("div") << $("#two").siblings("div")
过滤选择器
基本过滤选择器
$("div:first")
$("div:last")
$("div:not(.one)") or $("div:not(#two)") //not(selector)
$("div:even")
$("div:odd")
$("div:eq(3)") or $("div:gt(3)") or $("div:lt(3)")
$(":header).css("color","red"); //改变所有h1,h2…标题
$("animated") //正在执行动画的元素
内容选择过滤器
$("div:contains('匹配内容')") //含有文本“匹配内容”的div
$("div:empty") //空元素
$("div:has(selector)") // 含有selector的元素
$("div:parent") //匹配div的父元素
可见性过滤选择器
$("div:visible")
$("div:hidden") //包括display : none、input : hidden、visibility : hidden这样的元素
属性过滤器
$("div[title]") //匹配有title的div
$("div[title=test]")
$("div[title!=test]")
$("div[title^=te]") //以te开头的title
$("div[title$=est") //以est收尾的title
$("div[title*=te]") //title包含te
$("div[id][title*=es]") //div中有id属性且title包含es字符
子元素过滤选择器
$("div.one :nth-child(2)") //div（class=one）下第二个子元素
$("div.one :nth-child(even)") or $("div.one :nth-child(odd)") or $("div.one :nth-child(3n)")
$("div.one :first-child") //第一个子元素
$("div.one :last-child") //最后一个子元素
$("div.one :only-child") //div中只有一个子元素才能匹配
表单对象属性过滤选择器
$("#form1 :enabled") //form1中所有可用元素
$("#form1 :disabled") //form1中所有不可用元素
$("input :checked") //单选框、复选框
$("select :selected") //下拉列表
表单选择器
:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden;
分别对应于表单各类元素
选择器的注意事项
选择器中含有*,#,(,[等字符，使用\\双斜线转义：$("id\\#b")转义id#b、$("id\\[1\\]")转义id[1]
$(".test :hidden") 和 $(".test:hidden")是不同的，第一个选择的是class=test元素包含的hidden的子元素，第二个是hidden的class=test的元素。前一个是后代选择器、后一个是过滤选择器
一个生动的选择器的例子： $("ul li:gt(5):not(:last)").hide(); 在一个列表（ul）中隐藏第5个以后，但不包括最后一个（显示更多）的li，这个就是精简显示。
jQuery中的DOM操作：
DOM操作的分类
DOM Core
HTML DOM
CSS DOM
jQuery中的DOM （使用jQuery的选择器）
查找节点
查找元素节点 $("ul li:eq(1)")
查找属性节点 $("p").attr('title')
创建节点
创建元素节点
var $li_1 = $("<li></li>");
$("ul").append($li_1).append($li_2);
创建文本节点
var $li_1 = $("<li>这里的文字就是你创建的文本节点，不能脱离元素节点单独存在</li>");
创建属性节点
var $li_1 = $("<li title="这里是属性节点，同样不能独立存在">文本节点</li>");
插入节点
$("p").append("<b>你好</b>"); //在p内追加内容
$("<b>你好</b>").appendTo("p");
$("p").prepend("<b>你好</b>"); //在p内前置内容
$("<b>你好</b>").prependTo("p");
$("p").after("<b>你好</b>"); //在p后插入内容
$("<b>你好</b>").insertAfter("p");
$("p").before("<b>你好</b>"); //在p前插入内容
$("<b>你好</b>").insertBefore("p");
删除节点
$("ul li:eq(2)").remove();
$li_1 = $("ul li:eq(1)").remove();
$li_1.appendTo("ul");
$("ul li:eq(2)").empty(); //清空选择的li节点
复制节点
$("li:eq(3)").clone(true).appentTo("ul"); //把li节点复制到ul中，clone的参数true表示同时复制元素绑定的事件。留空表示不复制事件
替换节点
$("p").replaceWith("<strong>替换文本</strong>");
$("<strong>替换文本</strong>").replaceAll("p");
节点替换以后，绑定在原来节点上的事件消失
包裹节点
$("strong").wrap("<b></b>"); //把匹配的strong每个用b包裹起来
$("strong").wrapAll("<b></b>"); //同时包裹所有匹配的strong
$("strong").wrapInner("<b></b>"); //把匹配的strong的内容用b包裹起来
属性操作
var p_txt = $("p").attr("title");
$("p").attr("title","设置的标题");
$("p").attr({"title":"设置的标题","name":"设置的名字"});
$("p").removeAttr("title"); // 删除title
样式操作
var p_class = $("p").attr("class");
$("p").attr("class","pclass");
$("p").addClass("otherclass");
合并多个class
最后边出现的相同css内容覆盖前面的
$("p").removeClass(); // 删除p所有的样式
$("p").removeClass("otherclass") // 删除p中的otherclass样式
$("p").addClass("class").toggleClass("otherclass"); // 切换样式
$("p").hasClass("another"); // 是否含有another样式
等价于 $("p").is(".another")
设置和获取html、文本和值
var p_html = $("p").html();
$("p").html("<strong>设置的html的内容</strong>");
html方法可以用于html文档，不适用于xml
var p_text = $("p").text(); // 获取p中的文本内容。和html不同的是，html返回p中的html代码，其中包括文本
$("p").text("你最喜欢的内容是？");
text方法对html和xml都有效
var input_val = $("input").val();
val方法获取文本框，下拉列表，单选框,多选框的值
$("input").val("这里是设置的新值");
遍历节点
var ul_length = $("ul").children().length; // children方法取得匹配元素的子元素集合
var ul_the_next = $("p").next(); // next方法取得和匹配元素紧挨着的下一个同辈元素
var p_the_prev = $("ul").prev(); // prev方法取得和匹配元素紧挨着的前一个同辈元素
var li_the_siblings = $("ul li:eq(1)").siblings(); // 取得匹配元素的同辈元素（不限元素类别）
除此之外jQuery还有很多遍历节点的方法，如closest(), find(), nextAll(), prevAll(), parent(), parents()等。
CSS-DOM方法
var p_color = $("p").css("color");
$("p").css("color","red");
$("p").css({"color":"red","font-size":"14px"});
$("p").css("opacity","0.5");
jQuery已经处理好了透明度的兼容问题，所以在这里这样使用是最为方便快捷的
$("p").css("height") or $("p").height(); // jQuery的css快捷方法
jQuery还有几个经常用的方法：
offset() 方法，获取元素在当前视窗的相对偏移
var p_offset = $("p").offset();
var p_left = p_offset.left;
var p_top = p_offset.top;
position()方法 ， 获取元素相对于最近的被relative或者absolute的父祖级节点的相对偏移
var p_position = $("p").position();
var p_left = p_position.left;
var p_top = p_position.top;
scrollTop()和scrollLeft() , 获取元素的滚动条距顶端的距离和距左侧的距离
var scrollTop = $("p").scrollTop();
var scrollLeft = $("p").scrollLeft();
$("textarea").scrollTop(300); // 设置元素的垂直滚动条滚动到相应的位置
$("textarea").scrollLeft(300); // 设置元素的水平滚动条滚动到相应的位置
jQuery中的事件和动画：
jQuery中的事件
加载DOM
$(document).ready(); // DOM树解析完毕即执行
$(window).load(); // 在所有内容准备好时触发
$(function(){//代码}); // 简写方式 = $(document).ready();
事件绑定
bind(type[,data],fn) //type为jQuery的事件类型，如blur,focus,click,keyup,resize,load,scroll,unload,mousedown,mouse up,change,select等。data可选，作为event.data传给fn。fn为绑定的数据处理函数
$("#panel h5.head").bind("click",function(){$(this).next("div.content").show()}); //点击标题显示下面隐藏的div（class=content）中的内容。
合成事件
hover(enter,leave)
jQuery用于模拟鼠标悬停事件。当移动到元素上面时，触发第一个事件。当移出元素时，触发第二个事件
$(function(){$("#panel h5.head").hover(function(){$(this).next("div.content").show},function(){$(this).next("div.content").hide();});});
toggle(fn1,fn2,fn3,fn4…);
第一次单击触发fn1，第二次单击触发fn2….
toggle()还有个作用是，切换元素的可见状态
事件冒泡
定义冒泡
举例来说，点击了一个span，触发了一个click事件，但这个同时依次触发了span外的div，body的click事件。这就是js定义的事件冒泡。
阻止冒泡
事件对象
$(element).bind("click",function(event){ // event就是事件对象}); //当element单击时，event就被创建了，但是事件处理函数执行完毕后，event即被销毁。
停止事件冒泡
event.stopPropagation(); // 停止事件冒泡
阻止元素的默认行为
event.preventDefault(); // 如果event在button上，则阻止button的submit
return false;更为简洁，但其同时达成2和3。具体情况下要辨证使用。
事件捕获
事件捕获和事件冒泡是刚好完全相反的两个过程 // 顺序是 body -> div -> span
不是所有浏览器都支持事件捕获
jQuery不支持事件捕获
事件对象的属性
event.type()方法获取事件的类型
event.preventDefault()方法阻止事件对象的默认行为
event.stopPropagation()方法阻止事件冒泡
event.target属性 获取到触发事件的元素 // 元素为event.target
event.relatedTarget属性 // 元素为event.relatedTarget
对于mouseout事件，得到的是mouseout后即将进入的元素。对于mouseover，得到的是mouseout后即将离开的元素。
event.pageX , event.pageY 属性
获取到光标相对于整个页面的x坐标和y坐标
event.which属性
在鼠标单击事件中获取鼠标的左中右键，值分别是1，2，3
event.metaKey属性
在键盘事件中获取ctrl按键
event.orginalEvent
指向原始的事件对象
移除事件
event.unbind([type][,data]);移除绑定
$("a.unbind").unbind(); // 移除所有绑定事件
$("a.unbind").unbind("click"); // 移除所有绑定的点击事件
单独移除一个绑定事件
$("a.bind").bind("click",myfun1 = function(){ // 事件处理 });
$("a.bind").unbind("click",myfun1);
$("a.unbind").one();
这个方法适用于只触发一次，之后就要立即解除绑定的情况
one(type[,data],fn) // 和bind的用法一样
模拟操作
jQuery使用trigger()方法完成模拟操作
$("#btn").trigger("click"); // 当页面装载完毕后就会立刻输出想要的结果
$("#btn").trigger("myclick"); // 可以触发自定义事件
$("$btn").triggerHandler("click"); // 不会触发浏览器默认事件
其他用法
绑定多个事件类型
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");});
添加事件命名空间
$("div").bind("click.plugin",function(){.....});
$("div").bind("mouseover.plugin",function(){......});
$("div").bind("dbclick",function(){.......});
$("div").unbind(".plugin"); // 移除plugin命名空间中的事件
相同事件名称，不同命名空间执行方法
$("div").bind("click.plugin",function(){.....});
$("div").bind("click",function(){......});
$("div").trigger("click!"); // 仅执行不包含在命名空间中的方法
$("div").trigger("click"); // 执行所有click事件
jQuery中的动画
show() 和 hide() 方法
要求工作在xhtml标准模式下，否则会引起抖动
show("slow") 和 show(1000) 触发动画事件
同时改变元素的高、宽和不透明度，最后设置display=none
fadeIn() 和 fadeOut() 方法
只改变不透明度，最后设置display=none
同样可以设置动画时间
slideUp() 和 slideDown() 方法
只改变元素的高度，且分别是由下到上隐藏和由上到下显示
slow、normal、fast参数分别代表 0.6、0.4、0.2秒
自定义动画方法animate()
语法： animate(params, speed, callback) params：样式属性和值的映射 speed：速度 callback：回调函数
$("#panel").animate({left:"500px"}, 3000); // panel元素3秒向右移动到距左边界500px的位置
params = {left:"+=50px"} // 表示在当前位置累加或累减
params = {left:"500px",height:"200px"} // 多重动画
$("#panel").animate({left:"500px"},3000).animate({height:"200px"},3000); // 按顺序执行动画
$("#panel").click(function(){$(this).animate({left:"300px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px",300}).fadeOut(300);});
使用动画回调函数对非动画方法进行排队，原因是如果写在动画方法队列里面并不能保证按顺序执行，有可能一开始就执行了。
停止动画和判断是否处于动画状态
stop([clearQueue][,gotoEnd]) // 停止动画的状态
clearQueue 表示清空未执行完的动画队列，gotoEnd表示直接将正在执行的动画跳转到末状态
stop()不带参数会结束当前执行的动画，并立即执行队列中的下一个动画
等同于stop(false,true);
jQuery只能设置正在执行的动画的最终状态，没有提供直接到达未执行动画队列的最终状态的方法
$(element).is(":animated") 元素是否正处于动画状态
其他动画方法
toggle(speed[,callback])
slideToggle(speed[,callback]) 通过元素高度的变化
fadeTo(speed,opacity[,callback])
撒旦发射
<pre></pre>
撒旦法
jQuery对表单、表格的操作：
表单应用
单行文本框应用
$(":input").focus(function(){$(this).addClass("focus")});
多行文本框应用
高度变化
var $comment = $("#comment");
$comment.height($comment.height() +- 50);
if($comment.is(":animated"))
$comment.animate({height : "+=50"},300);
滚动条变化
$comment.animate({scrollTop : "+=50"},400);
复选框应用
// 全选是
$("CheckAll").click(function() {
$("[name=items]:checkbox").attr("checked",true);
});
//反转选择项
$("CheckRev").click(function(){
$("[name=items]:checkbox).each(function(){
$(this).attr("checked",!$(this).attr("checked"));
// 或者也可以这样写
});
});
//输出选中项
//用checkbox控制
下拉框应用
表单验证
// blur , keyup , focus 实现表单实时验证
// 一个表单验证示例（form验证的骨架代码）
表格应用
// 隔行变色
// 单击tr高亮
// 复选框，tr高亮
$('tbody>tr').click(function(){
if($(this).hasClass("highlight")) {
$(this)
.removeClass("highlight")
.find(":checkbox").attr("checked",false);
} else {
$(this)
.addClass("highlight")
.find(":checkbox").attr("checked".true);
}
});
$(this)
.addClass("highlight").children("li").show().end()
.sibilings().removeClass("highlight").children("li").hide();
jQuery对象和DOM对象：
var $cr = $("cr"); // jQuery对象
var cr = $cr[0]; // DOM对象
var dr = $cr.get(0) // DOM对象
var $dr = $(dr) // jQuery对象
jQuery的选择器：
备忘
Query的选择器是和css选择器类似的
$("tt").css("color","red"); 无需判断tt元素是否存在
if($("tt").length>0) …; 判断tt存在
基本选择器
$("#selector")
#(".select")
$("div")
$("*")
$("div,span,p.class")
层次选择器
$("div span") // div下所有的span
$("div > span") // div的span子元素
$(".one + div") // 紧挨class为.one的下一个元素 = $(".one").next("div")
$("#two~div") // id为two后面所有的div元素 = $("#two").nextAll("div") << $("#two").siblings("div")
过滤选择器
基本过滤选择器
$("div:first")
$("div:last")
$("div:not(.one)") or $("div:not(#two)") //not(selector)
$("div:even")
$("div:odd")
$("div:eq(3)") or $("div:gt(3)") or $("div:lt(3)")
$(":header).css("color","red"); //改变所有h1,h2…标题
$("animated") //正在执行动画的元素
内容选择过滤器
$("div:contains('匹配内容')") //含有文本“匹配内容”的div
$("div:empty") //空元素
$("div:has(selector)") // 含有selector的元素
$("div:parent") //匹配div的父元素
可见性过滤选择器
$("div:visible")
$("div:hidden") //包括display : none、input : hidden、visibility : hidden这样的元素
属性过滤器
$("div[title]") //匹配有title的div
$("div[title=test]")
$("div[title!=test]")
$("div[title^=te]") //以te开头的title
$("div[title$=est") //以est收尾的title
$("div[title*=te]") //title包含te
$("div[id][title*=es]") //div中有id属性且title包含es字符
子元素过滤选择器
$("div.one :nth-child(2)") //div（class=one）下第二个子元素
$("div.one :nth-child(even)") or $("div.one :nth-child(odd)") or $("div.one :nth-child(3n)")
$("div.one :first-child") //第一个子元素
$("div.one :last-child") //最后一个子元素
$("div.one :only-child") //div中只有一个子元素才能匹配
表单对象属性过滤选择器
$("#form1 :enabled") //form1中所有可用元素
$("#form1 :disabled") //form1中所有不可用元素
$("input :checked") //单选框、复选框
$("select :selected") //下拉列表
表单选择器
:input、:text、:password、:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden;
分别对应于表单各类元素
选择器的注意事项
选择器中含有*,#,(,[等字符，使用\\双斜线转义：$("id\\#b")转义id#b、$("id\\[1\\]")转义id[1]
$(".test :hidden") 和 $(".test:hidden")是不同的，第一个选择的是class=test元素包含的hidden的子元素，第二个是hidden的class=test的元素。前一个是后代选择器、后一个是过滤选择器
一个生动的选择器的例子： $("ul li:gt(5):not(:last)").hide(); 在一个列表（ul）中隐藏第5个以后，但不包括最后一个（显示更多）的li，这个就是精简显示。
jQuery中的DOM操作：
DOM操作的分类
DOM Core
HTML DOM
CSS DOM
jQuery中的DOM （使用jQuery的选择器）
查找节点
查找元素节点 $("ul li:eq(1)")
查找属性节点 $("p").attr('title')
创建节点
创建元素节点
var $li_1 = $("<li></li>");
$("ul").append($li_1).append($li_2);
创建文本节点
var $li_1 = $("<li>这里的文字就是你创建的文本节点，不能脱离元素节点单独存在</li>");
创建属性节点
var $li_1 = $("<li title="这里是属性节点，同样不能独立存在">文本节点</li>");
插入节点
$("p").append("<b>你好</b>"); //在p内追加内容
$("<b>你好</b>").appendTo("p");
$("p").prepend("<b>你好</b>"); //在p内前置内容
$("<b>你好</b>").prependTo("p");
$("p").after("<b>你好</b>"); //在p后插入内容
$("<b>你好</b>").insertAfter("p");
$("p").before("<b>你好</b>"); //在p前插入内容
$("<b>你好</b>").insertBefore("p");
删除节点
$("ul li:eq(2)").remove();
$li_1 = $("ul li:eq(1)").remove();
$li_1.appendTo("ul");
$("ul li:eq(2)").empty(); //清空选择的li节点
复制节点
$("li:eq(3)").clone(true).appentTo("ul"); //把li节点复制到ul中，clone的参数true表示同时复制元素绑定的事件。留空表示不复制事件
替换节点
$("p").replaceWith("<strong>替换文本</strong>");
$("<strong>替换文本</strong>").replaceAll("p");
节点替换以后，绑定在原来节点上的事件消失
包裹节点
$("strong").wrap("<b></b>"); //把匹配的strong每个用b包裹起来
$("strong").wrapAll("<b></b>"); //同时包裹所有匹配的strong
$("strong").wrapInner("<b></b>"); //把匹配的strong的内容用b包裹起来
属性操作
var p_txt = $("p").attr("title");
$("p").attr("title","设置的标题");
$("p").attr({"title":"设置的标题","name":"设置的名字"});
$("p").removeAttr("title"); // 删除title
样式操作
var p_class = $("p").attr("class");
$("p").attr("class","pclass");
$("p").addClass("otherclass");
合并多个class
最后边出现的相同css内容覆盖前面的
$("p").removeClass(); // 删除p所有的样式
$("p").removeClass("otherclass") // 删除p中的otherclass样式
$("p").addClass("class").toggleClass("otherclass"); // 切换样式
$("p").hasClass("another"); // 是否含有another样式
等价于 $("p").is(".another")
设置和获取html、文本和值
var p_html = $("p").html();
$("p").html("<strong>设置的html的内容</strong>");
html方法可以用于html文档，不适用于xml
var p_text = $("p").text(); // 获取p中的文本内容。和html不同的是，html返回p中的html代码，其中包括文本
$("p").text("你最喜欢的内容是？");
text方法对html和xml都有效
var input_val = $("input").val();
val方法获取文本框，下拉列表，单选框,多选框的值
$("input").val("这里是设置的新值");
遍历节点
var ul_length = $("ul").children().length; // children方法取得匹配元素的子元素集合
var ul_the_next = $("p").next(); // next方法取得和匹配元素紧挨着的下一个同辈元素
var p_the_prev = $("ul").prev(); // prev方法取得和匹配元素紧挨着的前一个同辈元素
var li_the_siblings = $("ul li:eq(1)").siblings(); // 取得匹配元素的同辈元素（不限元素类别）
除此之外jQuery还有很多遍历节点的方法，如closest(), find(), nextAll(), prevAll(), parent(), parents()等。
CSS-DOM方法
var p_color = $("p").css("color");
$("p").css("color","red");
$("p").css({"color":"red","font-size":"14px"});
$("p").css("opacity","0.5");
jQuery已经处理好了透明度的兼容问题，所以在这里这样使用是最为方便快捷的
$("p").css("height") or $("p").height(); // jQuery的css快捷方法
jQuery还有几个经常用的方法：
offset() 方法，获取元素在当前视窗的相对偏移
var p_offset = $("p").offset();
var p_left = p_offset.left;
var p_top = p_offset.top;
position()方法 ， 获取元素相对于最近的被relative或者absolute的父祖级节点的相对偏移
var p_position = $("p").position();
var p_left = p_position.left;
var p_top = p_position.top;
scrollTop()和scrollLeft() , 获取元素的滚动条距顶端的距离和距左侧的距离
var scrollTop = $("p").scrollTop();
var scrollLeft = $("p").scrollLeft();
$("textarea").scrollTop(300); // 设置元素的垂直滚动条滚动到相应的位置
$("textarea").scrollLeft(300); // 设置元素的水平滚动条滚动到相应的位置
jQuery中的事件和动画：
jQuery中的事件
加载DOM
$(document).ready(); // DOM树解析完毕即执行
$(window).load(); // 在所有内容准备好时触发
$(function(){//代码}); // 简写方式 = $(document).ready();
事件绑定
bind(type[,data],fn) //type为jQuery的事件类型，如blur,focus,click,keyup,resize,load,scroll,unload,mousedown,mouse up,change,select等。data可选，作为event.data传给fn。fn为绑定的数据处理函数
$("#panel h5.head").bind("click",function(){$(this).next("div.content").show()}); //点击标题显示下面隐藏的div（class=content）中的内容。
合成事件
hover(enter,leave)
jQuery用于模拟鼠标悬停事件。当移动到元素上面时，触发第一个事件。当移出元素时，触发第二个事件
$(function(){$("#panel h5.head").hover(function(){$(this).next("div.content").show},function(){$(this).next("div.content").hide();});});
toggle(fn1,fn2,fn3,fn4…);
第一次单击触发fn1，第二次单击触发fn2….
toggle()还有个作用是，切换元素的可见状态
事件冒泡
定义冒泡
举例来说，点击了一个span，触发了一个click事件，但这个同时依次触发了span外的div，body的click事件。这就是js定义的事件冒泡。
阻止冒泡
事件对象
$(element).bind("click",function(event){ // event就是事件对象}); //当element单击时，event就被创建了，但是事件处理函数执行完毕后，event即被销毁。
停止事件冒泡
event.stopPropagation(); // 停止事件冒泡
阻止元素的默认行为
event.preventDefault(); // 如果event在button上，则阻止button的submit
return false;更为简洁，但其同时达成2和3。具体情况下要辨证使用。
事件捕获
事件捕获和事件冒泡是刚好完全相反的两个过程 // 顺序是 body -> div -> span
不是所有浏览器都支持事件捕获
jQuery不支持事件捕获
事件对象的属性
event.type()方法获取事件的类型
event.preventDefault()方法阻止事件对象的默认行为
event.stopPropagation()方法阻止事件冒泡
event.target属性 获取到触发事件的元素 // 元素为event.target
event.relatedTarget属性 // 元素为event.relatedTarget
对于mouseout事件，得到的是mouseout后即将进入的元素。对于mouseover，得到的是mouseout后即将离开的元素。
event.pageX , event.pageY 属性
获取到光标相对于整个页面的x坐标和y坐标
event.which属性
在鼠标单击事件中获取鼠标的左中右键，值分别是1，2，3
event.metaKey属性
在键盘事件中获取ctrl按键
event.orginalEvent
指向原始的事件对象
移除事件
event.unbind([type][,data]);移除绑定
$("a.unbind").unbind(); // 移除所有绑定事件
$("a.unbind").unbind("click"); // 移除所有绑定的点击事件
单独移除一个绑定事件
$("a.bind").bind("click",myfun1 = function(){ // 事件处理 });
$("a.bind").unbind("click",myfun1);
$("a.unbind").one();
这个方法适用于只触发一次，之后就要立即解除绑定的情况
one(type[,data],fn) // 和bind的用法一样
模拟操作
jQuery使用trigger()方法完成模拟操作
$("#btn").trigger("click"); // 当页面装载完毕后就会立刻输出想要的结果
$("#btn").trigger("myclick"); // 可以触发自定义事件
$("$btn").triggerHandler("click"); // 不会触发浏览器默认事件
其他用法
绑定多个事件类型
$("div").bind("mouseover mouseout",function(){$(this).toggleClass("over");});
添加事件命名空间
$("div").bind("click.plugin",function(){.....});
$("div").bind("mouseover.plugin",function(){......});
$("div").bind("dbclick",function(){.......});
$("div").unbind(".plugin"); // 移除plugin命名空间中的事件
相同事件名称，不同命名空间执行方法
$("div").bind("click.plugin",function(){.....});
$("div").bind("click",function(){......});
$("div").trigger("click!"); // 仅执行不包含在命名空间中的方法
$("div").trigger("click"); // 执行所有click事件
jQuery中的动画
show() 和 hide() 方法
要求工作在xhtml标准模式下，否则会引起抖动
show("slow") 和 show(1000) 触发动画事件
同时改变元素的高、宽和不透明度，最后设置display=none
fadeIn() 和 fadeOut() 方法
只改变不透明度，最后设置display=none
同样可以设置动画时间
slideUp() 和 slideDown() 方法
只改变元素的高度，且分别是由下到上隐藏和由上到下显示
slow、normal、fast参数分别代表 0.6、0.4、0.2秒
自定义动画方法animate()
语法： animate(params, speed, callback) params：样式属性和值的映射 speed：速度 callback：回调函数
$("#panel").animate({left:"500px"}, 3000); // panel元素3秒向右移动到距左边界500px的位置
params = {left:"+=50px"} // 表示在当前位置累加或累减
params = {left:"500px",height:"200px"} // 多重动画
$("#panel").animate({left:"500px"},3000).animate({height:"200px"},3000); // 按顺序执行动画
$("#panel").click(function(){$(this).animate({left:"300px",height:"200px",opacity:"1"},3000).animate({top:"200px",width:"200px",300}).fadeOut(300);});
使用动画回调函数对非动画方法进行排队，原因是如果写在动画方法队列里面并不能保证按顺序执行，有可能一开始就执行了。
停止动画和判断是否处于动画状态
stop([clearQueue][,gotoEnd]) // 停止动画的状态
clearQueue 表示清空未执行完的动画队列，gotoEnd表示直接将正在执行的动画跳转到末状态
stop()不带参数会结束当前执行的动画，并立即执行队列中的下一个动画
等同于stop(false,true);
jQuery只能设置正在执行的动画的最终状态，没有提供直接到达未执行动画队列的最终状态的方法
$(element).is(":animated") 元素是否正处于动画状态
其他动画方法
toggle(speed[,callback])
slideToggle(speed[,callback]) 通过元素高度的变化
fadeTo(speed,opacity[,callback])
撒旦发射
<pre></pre>
$(
'tbody>tr'
).click(
function
(){if
($(
this
).hasClass(
"highlight"
)) {$(
this
)
.removeClass(
"highlight"
)
.find(
":checkbox"
).attr(
"checked"
,
false
);
}
else
{$(
this
)
.addClass(
"highlight"
)
.find(
":checkbox"
).attr(
"checked"
.
true
);
}
});
撒旦法
jQuery对表单、表格的操作：
表单应用
单行文本框应用
$(":input").focus(function(){$(this).addClass("focus")});
多行文本框应用
高度变化
var $comment = $("#comment");
$comment.height($comment.height() +- 50);
if($comment.is(":animated"))
$comment.animate({height : "+=50"},300);
滚动条变化
$comment.animate({scrollTop : "+=50"},400);
复选框应用
// 全选是
$("CheckAll").click(function() {
$("[name=items]:checkbox").attr("checked",true);
});
//反转选择项
$("CheckRev").click(function(){
$("[name=items]:checkbox).each(function(){
$(this).attr("checked",!$(this).attr("checked"));
// 或者也可以这样写
});
});
| $("CheckRev").click(function() { $("[name=items]:checkbox").each(function(){ $(this).attr("checked",!$(this).attr("checked")); //或者 this.checked != this.checked; }); }); |
| $("#send").click(function() { var str = ''; $("[name=items]:checkbox").each(function() { str += $(this).val(); }); }); |
| $("#checkbox").click(function() { $("[name=items]:checkbox").attr("checked",this.checked); }); |
| var $options = $("#select1 option:selected"); $options.appendTo("#select2"); // 追加和删除可以直接用appendTo完成 |
| $("#select").dblclick(function(){ $("option:selected",this).appendTo("#select2"); }); |
// blur , keyup , focus 实现表单实时验证
| $("form :input").blur(function(){ //处理代码 }).keyup(function(){ $(this).triggerHandler("blur"); }).focus(function(){ $(this).triggerHandler("blur"); }); |
| $("form :input").blur(function(){ var $parent = $(this).parent(); // 用于附加提示信息 if( $(this).is('#username') ) { // 处理代码….. } if( $(this).is('#password') ) { // …….. } }); |
// 隔行变色
| $(function(){ $("tbody>tr:odd").addClass("odd"); $("tbody>tr:even").addClass("even"); }); |
| $(function(){ $("tbody>tr").click(function(){ $(this) .addClass("highlight") .silibings().removeClass("highlight"); }); }); |
| $("tr.parent").click(function(){ $(this) .toggleClass("selected") .sibilings(".child_"+this.id).toggle(); //隐藏用id划分的子行，形成开闭效果。 }); |
if($(this).hasClass("highlight")) {
$(this)
.removeClass("highlight")
.find(":checkbox").attr("checked",false);
} else {
$(this)
.addClass("highlight")
.find(":checkbox").attr("checked".true);
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery常见操作实现和常用函数方法总结
- jquery 常用操作整理 基础入门篇
- 汇总常用的jQuery操作Table tr td方法
- jQuery常用操作【值得收藏】
- jquery所有选择器，dom操作常用方法
- jQuery操作表格（table）的常用方法、技巧汇总
- jquery 常用操作
- jQuery操作表格（table）的常用方法、技巧汇总
- jquery操作数组和对象的一些常用函数
- jquery 常见常用文档操作函数
- Jquery 操作html 不常用元素方法大全
- Jquery操作表单Select元素常用方法
- jQuery随手笔记之常用的jQuery操作DOM事件
- jQuery之表常用操作
- jQuery常用操作部分总结
- JQuery DOM 的常用操作
- 160726、jQuery常用操作
- jquery常用操作小结
- JQuery常用操作归纳