- 浏览: 300752 次
- 性别:
- 来自: 山西太原
文章分类
最新评论
-
A741841403:
core-renderer-CN.jar这个包是怎么引入的啊, ...
flying saucer 中文不显示、以及中文换行的问题解决 -
A741841403:
您好,能提供下,中文字体换行包的jar文件吗
flying saucer 中文不显示、以及中文换行的问题解决 -
nightw13h:
楼主 我也遇到了这个问题 照你的套路也把问题解决了 当时没 ...
maven 单元测试 Absent Code attribute in method that is not native or abstract in cl -
devilyard:
借地请教个问题:fatal: open /dev/null o ...
msysGit 安装后的配置 -
tiancai2:
如果在action中定义不是string类型的,而是一个Per ...
Struts2 、jquery之ajaxfileupload异步上传插件
据说是一本不错的JQuery书,看完后感觉总体也不错,介绍的挺全面的,列举了大量的例子,比较易懂。
加上之前学过一点CSS方面的知识,所以在看选择器这部分也比较容易理解(很多都是CSS的写法)。
总体感觉,JQuery大置分成了几大块:选择器、DOM操作、事件、动画、AJAX。
本书都一一的介绍了,特别是选择器,几乎每种选择器都列举了一个例子,很容易看懂。
此文为读本书的过程中,记录的一些笔记,例子不是书里面的,只是觉得自己比较容易理解,就随便写了个。
如果有出错的地方,麻烦指正。 ^_^
[javascript] view plaincopy
- // 锋利的JQuery 学习笔记
- // dier
- // 2009-10-17 至 2009-11-22
- //------------------------- 第一章 认识JQuery -------------------------
- ·页面加载事件(可以写多个ready())
- $(document).ready(function(){
- alert("hello world");
- })
- ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素、父元素等
- //选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式
- $("#myDiv").addClass("css1").children("a").removeClass("css2");
- ·JQuery中获得一个对象的所有子元素内容
- $("#myDiv").html()
- ·JQuery中的变量 与 DOM中的变量
- var $myVar = "";
- var myVar = "";
- ·DOM对象 转换成 JQuery对象
- var obj = documnet.getElementById("myDiv");
- var $obj = $(obj);
- ·JQuery对象 转换成 DOM对象
- var $obj = $("#myDiv");
- var obj = $obj.get(0); //或者var obj = $obj[0];
- ·释放JQuery对$符号的控制权
- JQuery.noConflict();
- //---------------------------- 第二章 JQuery选择器 -------------------------------
- ·JQuery完善的处理机制
- document.getElementById("test").style.color = "red"; //如果test不存在,则页面出现异常
- $("#test").css("color","red"); //哪怕页面没有名称为test的元素,也不会报错。它是一个JQuery对象
- ·判断页面是否选择的对象
- if( $(".class").length > 0 ){
- // todo something
- }
- ·基本选择器
- $("#myDiv") //根据给定的ID选择匹配的元素,返回:单个元素
- $(".myClass") //根据给定的样式名称选择匹配的元素,返回:集合元素
- $("div") //根据给定的元素名称选择匹配的元素,返回:集合元素
- $("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素,返回:集合元素
- $("*") //选择页面所有元素,返回:集合元素
- ·层次选择器
- $("div span") //选择所有DIV元素下的所有SPAN元素(所有后代元素),返回:集合元素
- $("div>span") //选择所有DIV元素下的SPAN子元素(仅子元素),返回:集合元素
- $(".myClass+div") //选择样式名称为myClass的下一个DIV元素,返回:集合元素
- $(".myClass+div") //等价于 $(".myClass").next("div");
- $(".myClass~div") //选择样式名称为myClass之后的所有DIV元素,返回:集合元素
- $(".myClass~div") //等价于 $(".myClass").nextAll();
- $(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素(无论前后),返回集合元素
- ·过滤选择器(index从0开始)
- $("div:first") //选择所有DIV元素下的第一个DIV元素,返回:单个元素
- $("div:last") //选择所有DIV元素下的最后一个DIV元素,返回:单个元素
- $("div:not(.myClass)") //选择所有样式不包括myClass的DIV元素,返回:集合元素
- $("div:even") //选择所有索引是偶数的DIV元素,返回:集合元素
- $("div:odd") //选择所有索引是奇数的DIV元素,返回:集合元素
- $("div:eq(index)") //选择所有索引等于index的DIV元素,返回:集合元素
- $("div:gt(index)") //选择所有索引大于index的DIV元素,返回:集合元素
- $("div:lt(index)") //选择所有索引小于index的DIV元素,返回:集合元素
- $(":header") //选择所有标题元素(h1,h2,h3),返回:集合元素
- $("div:animated") //选择所有正在执行去画的DIV元素,返回:集合元素
- ·子元素过滤选择器(index从1开始)
- $(":nth-child(index/even/odd)") //选择每个父元素下的第index/偶数/奇数个子元素,返回:集合元素
- $(":first-child") //选择每个父元素下的第一个子元素,返回:集合元素
- $(":last-child") //选择每个父元素下的最后一个子元素,返回:集合元素
- $("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素,返回:集合元素
- ·内容过滤选择器
- $(":contains(text)") //选择所有内容包含text的元素,返回:集合元素
- $("div:empty") //选择所有内容为空的DIV元素,返回:集合元素
- $("div:has(span)") //选择所有含有SPAN子元素的DIV元素,返回:集合元素
- $("div:parent") //选择所有含有子元素的DIV元素,返回:集合元素
- ·可见性选择器
- $(":hidden") //选择所有不可见的元素(type="hidden" style="display:none" style="visibility:none"),返回:集合元素
- $(":visible") //选择所有可见的元素,返回:集合元素
- ·属性过滤选择器
- $("[id]") //选择所有含有id属性的元素,返回:集合元素
- $("[class=myClass]") //选择所有class属性值是myClass的元素,返回:集合元素
- $("[class!=myClass]") //选择所有class属性值不是myClass的元素,返回:集合元素
- $("[alt^=begin]") //选择所有alt属性值以begin开始的元素,返回:集合元素
- $("[alt^=end]") //选择所有alt属性值以end结束的元素,返回:集合元素
- $("[alt*=some]") //选择所有alt属性值含有some的元素,返回:集合元素
- $("div[id][class=myClass]") //选择所有含有id属性的并且class属性值是myClass的元素,返回:集合元素
- ·表单对象属性选择器
- $("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素,返回:集合元素
- $("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素,返回:集合元素
- $("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素,返回:集合元素
- $("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素,返回:集合元素
- ·表单选择器
- $(":input") //选择所有<input> <select> <button> <textarea>元素,返回:集合元素
- $(":text") //选择所有单行文本框元素,返回:集合元素
- $(":password") //选择所有密码框元素,返回:集合元素
- $(":radio") //选择所有单选框元素,返回:集合元素
- $(":checkbox") //选择所有复选框元素,返回:集合元素
- $(":submit") //选择所有提交按钮元素,返回:集合元素
- $(":image") //选择所有图片按钮元素,返回:集合元素
- $(":reset") //选择所有重置按钮元素,返回:集合元素
- $(":button") //选择所有按钮元素,返回:集合元素
- $(":file") //选择所有上传域元素,返回:集合元素
- $(":hidden") //选择所有不可见域元素,返回:集合元素
- $(":text") //选择所有单选文本框元素,返回:集合元素
- //---------------------------- 第三章 JQuery中的DOM操作 -------------------------------
- ·查找元素节点
- var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>
- alert(str); //结果:123
- ·查找属性节点
- var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>
- alert(str); //结果:hello
- ·创建元素节点
- var $li1 = $("<span></span>"); //传入元素标记,自动包装并创建第一个li元素对象
- var $li2 = $("<span></span>"); //第二个,创建时需要遵循XHTML规则(闭合、小写)
- $("#myDiv").append($li1); //往id为myDiv的元素中添加一个元素
- $("#myDiv").append($li2); //结果:<div id="myDiv"><span></span><span></span></div>
- $("#myDIv").append($li1).append($li2); //客串:传说中的链式写法,省一行代码 ^_^
- ·创建文本节点
- var $li1 = $("<span>first</span>");
- var $li2 = $("<span>second</span>");
- $("#myDIv").append($li1).append($li2);
- //结果:<div id="myDiv"><span>first</span><span>second</span></div>
- ·创建属性节点
- var $li1 = $("<span title="111">first</span>");
- var $li2 = $("<span title="222">second</span>");
- $("#myDIv").append($li1).append($li2);
- //结果:<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>
- ·插入节点
- $("#myDiv").append("<span></span>"); //往id为myDiv的元素插入span元素
- $("<span></span>").appendTo("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素
- $("#myDiv").prepend("<span></span>"); //往id为myDiv的元素内最前面插入span元素
- $("<span></span>").prependTo("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素内的最前面
- $("#myDiv").after("<span></span>"); //往id为myDiv的元素后面插入span元素(同级,不是子元素)
- $("<span></span>").insertAfter("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素后面(同级,不是子元素)
- $("#myDiv").before("<span></span>"); //往id为myDiv的元素前面插入span元素(同级,不是子元素)
- $("<span></span>").insertBefore("#myDiv"); //倒过来,将span元素插入到id为myDiv的元素前面(同级,不是子元素)
- ·删除节点
- $("#myDiv").remove(); //将id为myDiv的元素移除
- ·清空节点
- $("#myDiv").remove("span"); //将id为myDiv的元素内的所有span元素移除
- ·复制节点
- $("#myDiv span").click( function(){ //点击id为myDiv的元素内的span元素,触发click事件
- $(this).clone().appendTo("#myDiv"); //将span元素克隆,然后再添加到id为myDiv的元素内
- $(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数,表示同时复制事件
- })
- ·替换节点
- $("p").replaceWith("<strong>您好</strong>"); //将所有p元素替换成后者 <p>您好</p> --> <strong>您好</strong>
- $("<strong>您好</strong>").replaceAll("p"); //倒过来写,同上
- ·包裹节点
- $("strong").wrap("<b></b>"); //用b元素把所有strong元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>
- $("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b>
- $("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>
- ·属性操作
- var txt = $("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性
- $("#myDiv").attr("title","我是标题内容"); //设置id为myDiv的元素的title属性的值
- $("#myDiv").attr({"title":"我是标题内容", "alt":"我还是标题"); //一次性设置多个属性的值
- $("#myDiv").removeArrt("alt"); //移除id为myDiv的元素的title属性
- ·样式操作
- var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式
- $("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式
- $("#myDiv").addClass("other"); //在id为myDiv的元素中追加样式
- $("#myDiv").removeClass("other"); //在id为myDiv的元素中移除other样式
- $("#myDiv").removeClass("myClass other"); //在id为myDiv的元素中移除myClass和other多个样式
- $("#myDiv").removeClass(); //在id为myDiv的元素中移除所有样式
- $("#myDiv").toggleClass("other"); //切换样式,在有other样式和没other样式之间切换
- $("#myDiv").hasClass("other"); //判断是否有other样式
- ·设置和获取HTML、文本和值
- alert( $("#myDiv").html() ); //获取id为myDiv的元素的HTML代码(相当于innerHTML)
- $("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码
- alert( $("#myDiv").text() ); //获取id为myDiv的元素的HTML代码(相当于innerText)
- $("#myDiv").text("hello"); //设置id为myDiv的元素的HTML代码
- alert( $("#myInput").val() ); //获取id为myDiv的元素的value值(支持文本框、下拉框、单选框、复选框等)
- $("#myInput").val("hello"); //设置id为myDiv的元素的value值(下拉框、单选框、复选框带有选中效果)
- ·遍历节点
- var $cList = $("#myDiv").children(); //获取id为myDiv的元素的子元素(只考虑子元素,不考虑后代元素)
- var $sNext = $("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素
- var $sPrev = $("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素
- var $sSibl = $("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素
- var $pClos = $("#myDiv").closest("span"); //获取id为myDiv的元素本身开始,最接近的span元素(向上查找)
- ·CSS-DOM操作
- $("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值
- $("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值
- $("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color样式的值(多个)
- $("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度(兼容浏览器)
- $("#myDiv").css("height"); //获取id为myDiv的元素的高度(单位:px,兼容浏览器)
- $("#myDiv").height(); //同上(实际高度)
- $("#myDiv").css("width"); //获取id为myDiv的元素的宽度(单位:px,兼容浏览器)
- $("#myDiv").width(); //同上(实际宽度)
- var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
- alert( offset.top + "|" + offset.left );
- var offset = $("#myDiv").position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
- alert( offset.top + "|" + offset.left );
- $("#txtArea").scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
- $("#txtArea").scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
- $("#txtArea").scrollTop(100); //设置id为txtArea的元素滚动条距离顶端的距离
- $("#txtArea").scrollLeft(100); //设置id为txtArea的元素滚动条距离左侧的距离
- //---------------------------- 第四章 JQuery中的事件和动画 -------------------------------
- ·加载DOM
- $(window).load() 等价于 window.onload 事件
- $(document).ready() 相当于window.onload事件,但有些区别:
- (1)执行时机:
- window.onload 是在网页中所有元素(包括元素的所有关联文件)完全加载后才执行
- $(document).ready() 是在DOM完全就绪时就可以被调用,此时,并不意味着这些元素关系的文件都已经下载完毕
- (2)多次使用:可以在同一个页面注册多个$(document).ready()事件
- (3)简写方式:可以缩写成 $(function(){ }) 或 $().ready()
- ·事件绑定
- 当文档装载完成后,可以通过bind()方法,为特定的元素进行事件的绑定,可重复多次使用
- bind( type, [data, ] fn );
- type:指事件的类型:
- blur(失去焦点)、focus(获得焦点)
- load(加载完成)、unload(销毁完成)
- resize(调整元素大小)、scroll(滚动元素)
- click(单击元素事件)、dbclick(双击元素事件)
- mousedown(按下鼠标)、mouseup(松开鼠标)
- mousemove(鼠标移过)、mouseover(鼠标移入)、mouseout(鼠标移出)
- mouseenter(鼠标进入)、mouseleave(鼠标离开)
- change(值改变)、select(下拉框索引改变)、submit(提交按钮)
- keydown(键盘按下)、keyup(键盘松开)、keypress(键盘单击)
- error(异常)
- data:指事件传递的属性值,event.data 额外传递给对象事件的值
- fn:指绑定的处理函数,在此函数体内,$(this)指携带相应行为的DOM元素
- ·合并事件
- hover(enter,leave):鼠标移入执行enter、移出事件执行leave
- $("#myDiv").hover( function(){
- $(this).css("border", "1px solid black");0
- }, function(){
- $(this).css("border", "none");
- });
- toggle(fn1,fn2,...fnN):鼠标每点击一次,执行一个函数,直到最后一个后重复
- $("#myDiv").toggle( function(){
- $(this).css("border", "1px solid black");0
- }, function(){
- $(this).css("border", "none");
- });
- ·事件冒泡
- 下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分别将三种元素都注册click事件。
- 那么,click事件会按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。
- <body><div><span>我是SPAN我怕谁</span></div></body>
- $("span").bind("click", function(){ alert('span click'); });
- $("div").bind("click", function(){ alert('div click'); });
- $("body").bind("click", function(){ alert('body click'); });
- ·阻止冒泡
- 解决这个问题的办法是:在SPAN执行完click事件后,停止事件冒泡。
- $("span").bind("click", function(event){
- alert('span click');
- event.stopPropagation(); //停止冒泡
- });
- ·阻止默认行为
- 提交按钮在提交前做相应的逻辑判断,当不满足时
- $("#btnSubmit").bind("click", function(event){
- event.preventDefault(); //阻止默认行为 相当于return false;
- });
- ·事件对象的属性
- $("#myDiv").bind("click", function(event){ });
- event.type() //返回:click
- event.target() //获取当前元素
- event.relatedTarget() //引发事件的元素
- event.pageX()/event.pageY() //获取鼠标相对于页面的X和Y坐标
- event.which() //在单击事件中获取到对应的按键 鼠标左中右分别是123
- event.metaKey() //获取操作中的相关功能键(ctrl/alt/shift)
- ·移除事件
- $("#myDiv").bind("click", fn1 = function(){
- alert("function1");
- }).bind("click", fn2 = function(){
- alert("function2");
- }).bind("click", fn3 = function(){
- alert("function3");
- });
- $("#myDiv").unbind(); //移除id为myDiv的元素的所有事件
- $("#myDiv").unbind("click"); //移除id为myDiv的元素的所有click事件
- $("#myDiv").unbind("click",fn1); //移除id为myDiv的元素的名称为fn1的click事件
- ·一次性事件:绑定的事件执行一次后自动移除
- $("#myDiv").one("click", [data], function(){
- alert("function1");
- });
- ·触发事件
- $("#btn").trigger("click", [data]); //代码方式触发click事件
- $("#btn").click(); //另一种简写方式
- ·事件命名空间
- $("#myDiv").bind("click.hello", function(){
- alert("function1");
- });
- $("#myDiv").bind("click", function(){
- alert("function1");
- })
- $("div").unbind("click"); //两个事件都被移除
- $("div").unbind(".hello"); //只移除第一个
- $("div").unbind("click!"); //只移除第二个(注意感叹号,指没有名字空间的)
- ·JQuery中的动画
- $("div").hide(); //隐藏所有DIV元素,相当于sytle="display:none"
- $("div").show(); //显示所有DIV元素
- $("div").hide(1000); //一秒内隐藏所有DIV元素,其它参数还有:slow(600) normal(400) fast(200)
- $("div").show(1000); //一秒内显示所有DIV元素
- $("div").fadeOut(); //降低元素的不透明度,直至消失(支持速度参数,不会改变宽高)
- $("div").fadeIn(); //升高元素的不透明度,直至显示
- $("div").slideUp(); //由下至上收缩元素,直至消失(支持速度参数)
- $("div").slideDown(); //由上至下展开元素,直至显示
- ·自定义动画animate
- $(elem).animate(params, speed, callback);
- params:样式属性及值的映射 {protected:"value", protected:"value"}
- speed: 速度参数
- callback: 动画完成后执行函数,可选
- $("#myDiv").animate({left:"500px"}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置
- $("#myDiv").animate({left:"+=500px"}, 2000); //同上,支持累加、累减
- $("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //同上,多重动画,同时执行
- $("#myDiv").animate({opacity:"0.5"}, 1000) //先变成50%透明
- .animate({top:"500px"}, 500) //移至离顶端500px
- .animate({left:"500px"}, 500) //移至离左边500px
- .fadeOut(1000); //显示出来 (四个动作为队列,一步步执行)
- $("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画,参数为boolean
- $("#myDiv").is(":animate") //判断元素是否在执行动画
- ·其它动画
- $("#myDiv").toggle(); //显示与隐藏元素
- $("#myDiv").slideToggle(); //展开与收缩元素
- $("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%
- //-------------------- 第五章 JQuery对表单、表格的操作及更多应用 ------------------------
- ·单选文本框应用(获得焦点时,加了个特殊的样式,失去焦点时还原,兼容所有浏览器)
- $(":input").focus(function(){ this.addClass("inputFocus"); })
- .blur(function(){ this.removeClass("inputFocus"); });
- ·多行文本框的应用(放大、缩小多行文本框的高度,限制最大500px,兼容所有浏览器)
- var $txt = $("#textArea");
- $(".bigger").click(function(){
- if( $txt.height() < 500) $txt.height( $txt.height() + 50 );
- //if( $txt.height() < 500) $txt.animate({height:"+=50"}, 500 );
- });
- $(".smaller").click(function(){
- if( $txt.height() > 100) $txt.height( $txt.height() - 50 );
- //if( $txt.height() < 500) $txt.animate({height:"-=50"}, 500 );
- });
- ·复选框的应用(实现全选、全不选、反选)
- $("#btnCheckedAll").click(function(){ //全选
- $("[name=items]:checkbox").attr("checked", true);
- });
- $("#btnCheckedNone").click(function(){ //全不选
- $("[name=items]:checkbox").attr("checked", false);
- });
- $("#btnCheckedRev").click(function(){ //反选
- $("[name=items]:checkbox").each(function(){
- $(this).attr("checked", !$(this).attr("checked"));
- //this.checked = !this.checked;
- }
- });
- ·下拉框的应用(将一个下拉列表的选中项搬至另一个下拉列表)
- $("#btnAdd").click(function(){ //将选中选项搬过去
- $("#mySelect1 option:selected").appendTo("#mySelect2");
- });
- $("#btnAddAll").click(function(){ //将全部选项搬过去
- $("#mySelect1 option").appendTo("#mySelect2");
- });
- $("#mySelect1").dblclick(function()[ //双击项搬过去
- $("#mySelect1 option:selected").appendTo("#mySelect2");
- }
- ·表单验证
- <form>
- <div>
- <label>用户名:</label>
- <input type="text" id="txtUid" class="required" value="" />
- </div>
- </form>
- $("form :input.required").each(function(){ //往每个class有required样式的input元素后面添加*号
- $(this).parent().append( $("<span class='star'>*</span>") );
- });
- $("form :input.required").blur(function(){ //失去焦点时验证域
- if( this.value == "" ){
- $(this).parent().append( $("<span class='error'>必填字段</span>") );
- }
- else{
- $(this).parent().append( $("<span class='success'>验证正确</span>") );
- $(this).parent().find(".error").remove();
- }
- }).keyup(function(){ //用户每点一个键触发
- $(this).triggerHandler("blur");
- }).focus(function(){ //控制有焦点时触发
- $(this).triggerHandler("blur");
- });
- $("#btnSubmit").click(function(){
- $("form :input.required").trigger("blur"); //让所有需要验证的域失去焦点
- var errNum = $("form .error").length;
- if( errNum ){
- alert("有验证字段失败,请重新填写");
- return false;
- }
- });
- ·表格应用
- $("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式
- $("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式
- $("tr:contains('王五')").addClass("highlightTr"); //查找包含“王五”的行,添加highlightTr样式
- $("tr").click(function(){
- $(this).addClass("selectedTr") //给当前行添加选中样式
- .siblings().removeClass("selectedTr") //反选移除选中样式
- .end() //结束,返回$(this),否则则是反选的行
- .find(':radio").attr("checked",true); //在当前行查找单选框,选中它
- });
- //-------------------- 第六章 JQuery与Ajax的应用 ------------------------
- ·load( url [,data] [,callback] )方法
- url:要请求的页面的地址
- data:要发送的相关参数
- callback:回调函数
- $("#myDiv").load("hello.html"); //向myDiv元素加载hello.html的内容
- $("#myDiv").load("hello.html .myClass"); //筛选,只加载hello.html中myClass样式的内容
- $("#myDiv").load("hello.html", function(){} ); //没参数的,使用GET方式
- $("#myDiv").load("hello.html", {id:'123', name:'dier'}, function(){} ); //有参数的,使用POST方式
- $("#myDiv").load("hello.html", function(responseText, textStatus, XMLHttpRequest){ //回调函数
- //responseText : 请求返回的内容
- //textStatus : 请求状态 success error notmodified timeout
- //XMLHttpRequest : Ajax对象
- });
- ·$.get( url [,data] [,callback] [,type])和$.post( url [,data] [,callback] [,type])方法
- url:要请求的页面的地址
- data:要发送的相关参数
- callback:回调函数
- type:指定服务器返回内容的格式 xml html script json text _default
- $.get( "test.aspx", {id:"123", name:"dier"}, function(data,textStatus){ //回调函数只有当状态是success才触发
- //data : 请求返回的内容
- //textStatus : 请求状态 success error notmodified timeout
- //当data是HTML时,直接加载
- $("#myDiv").html(data);
- //当data是XML时,可筛选 <user id="123" name="dier" age="27" />
- var age = $(data).find("user").attr("age");
- //当data是JSON时,可直接点出属性来 {id:"123", name:"dier", age:"27"}
- var age = data.age;
- });
- ·getScript(url [,callback])方法
- $(function(){ //动态加载JS脚本
- $.getScript("test.js");
- $.getScript("test.js", function(){ //回调函数
- //do something..
- });
- });
- ·getJSON(url [,callback])方法
- $(function(){ //动态加载JS脚本
- $.getJSON("test.js");
- $.getJSON("test.js", function(data){ //回调函数
- //do something..
- //data : 返回的数据
- $.each( data, function(index, item){ //遍历,相当于foreach
- //index : 索引
- //item : 当前项内容
- //return false; 退出循环
- });
- });
- });
- ·ajax(options)方法
- url : 请求的地址
- type : 请求的方式 GET POST 默认为GET
- timeout : 请求超时时间(单位:毫秒)
- data : 请求时发送的参数(String,Object)
- dataType : 预期返回的数据类型 xml html script json jsonp text
- bdforeSend : 发送请求前触发事件,如果return false则取消发送 function(XmlHttpRequest){}
- complete : 请求完成后触发事件,不管成功与否 function(XmlHttpRequest, textStatus){}
- success : 请求完成并且成功时触发事件 function(data, textStatus){}
- error : 请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
- global : 是否为全局请求,默认为true,可使用AjaxStart、AjaxStop控制各种事件
- $.ajax({
- url : "test.aspx",
- type : "POST",
- timeout : "3000",
- data : {id:"123", name:"dier"},
- dataType : "HTML",
- success : function(data,textStatus){
- $("#myDiv").html( data );
- }
- error : function(XmlHttpRequest, textStatus, errThrown){
- $("#myDiv").html( "请求失败:" + errThrown );
- }
- });
- ·序列化字符串 serialize()
- $.get( "test.aspx", $("#form1").serialize(), function(data,textStatus){
- //将form1整个表单中的所有域序列化成提交的参数,支持自动编码
- });
- ·序列化数组 serializeArray()
- var arr = $(":checkbox, :radio").serializeArray();
- ·对象序列化 param()
- var obj = {id:"123", name:"dier", age:"27"};
- var kv = $.param(obj); //id=123&name=dier&age=27
- ·JQuery中的全局Ajax事件
- ajaxStart(callback) //请求开始时触发
- ajaxStop(callback) //请求结束时触发
- ajaxComplete(callback) //请求完成时触发
- ajaxSuccess(callback) //请求成功时触发
- ajaxError(callback) //请求失败时触发
- ajaxSend(callback) //请求发送前触发
- $("#loading").ajaxStart(function(){ //当有AJAX请求时显示,完成时隐藏
- $(this).show();
- }.ajaxStop(function(){
- $(this).hide();
- }
- );
- //第七章是插件的使用及编写 第八章则是一个实例 此处忽略
发表评论
-
ueditor编辑器图片上传路径问题
2015-04-02 13:24 3814第一部:修改jsp/config.json文件 访 ... -
Javascript 类与静态类的实现2
2014-08-19 16:47 638/***定义静态类***/ var StaticClass ... -
Javascript 类与静态类的实现1
2014-08-19 16:45 555首先说说类,在一个类里我们会有以下的几个特征: 1. 公有 ... -
JS实现类拟JAVA中MAP对像的功能
2014-08-19 16:34 762/* name: Map.js author: ... -
jQuery 多功能无缝滚动插件
2014-08-05 13:00 785/*** @description 基于 jQuery ... -
解决:在点击用户退出登录时,再按浏览器的后退按钮,仍然能够看到之前的页面
2014-05-14 23:18 8719需要在服务器返回的response header里面 ... -
复选框中 单选框 下拉
2013-12-22 15:35 809复选框 $("#id").is(&q ... -
Jquery append()总结(一)
2013-10-25 18:33 907append(content) Javas ... -
common-validator 验证框架使用
2013-10-12 12:47 1151地址:http://www.marsclan.org/ht ... -
PhoneGap与android交互及 JQuery Mobile+ iscroll 列表滚动条的实现
2013-08-13 18:32 15451、PhoneGap与android交互2、JQuery M ... -
iScroll 4 使用详解
2013-08-13 17:24 2776原文:http://cubiq.org/iscr ... -
js 工具
2013-04-17 15:26 8391、js日期格式化: 使用方式:new Date(v) ... -
JS- 清空file(兼容IE,火狐)
2013-04-08 16:47 775<script> function clean ... -
jQuery加分动画效果示例
2012-02-09 11:29 1072. -
web头像上传 裁剪 剪切功能
2011-11-11 16:33 31631、首先安装Ima ... -
lhgdialog 弹出窗体插件
2011-11-03 16:21 1026http://lhgcore.com/ -
jquery 五星评分插件
2011-11-03 15:32 1367. -
jQuery formValidator表单验证插件
2011-11-03 15:28 1091http://www.cnblogs.com/wzmaodon ... -
artDialog 强大弹出窗体插件
2011-11-03 10:53 1339官网:http://www.planeart.cn/demo/ ... -
zTree —— jQuery 树插件
2011-11-03 10:45 887http://www.baby666.cn/v3/main.p ...
相关推荐
Jquery学习笔记 Jquery学习笔记 Jquery学习笔记
锋利的JQuery学习笔记
锋利的JQuery学习笔记,总结超经典!
JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记 JQuery学习笔记
锋利的jquery (学习笔记) 学习jquery
jquery 学习笔记jquery 学习笔记jquery 学习笔记jquery 学习笔记
javascript jquery 学习笔记 资料
JQUERY学习笔记.doc JQUERY学习笔记.doc JQUERY学习笔记.doc
jquery的学习总结笔记 对选择器和常用方法进行总结 有实例
jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...
NULL 博文链接:https://yangmeng.iteye.com/blog/1557883
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
JQuery学习笔记,docx格式,记录了JQuery的一些知识要点,供大家参考。
JQuery学习笔记.txtJQuery学习笔记.txtJQuery学习笔记.txt
JQuery学习笔记 详 个人学习Jquery时记下的心得笔记 详细
这个笔记是很全面的原生Ajax用法、json解释和jQuery选择器、dom操作、事件的讲解每一部分都有例子搭配,是学习熟悉jQuery的好资料!
]_封捷_jQuery学习笔记
jquery学习笔记附带例子,希望对新手有帮助