---------------基础语法---------
添加一个下属节点
var $h=$("<p>第一段文字</p>");
$("#h11").append($h);
添加一个样式
$("li").addClass("normalStyle");
添加一个属性
$("li").css("color","blue");
移除id为tr1的第二个表框
$("#tr1 td:eq(1)").remove();
克隆一个按钮并显示在id为tr1的元素后面
$("#btn").click(function(){
$(this).clone().insertAfter($("#tr1"));
});
设置id为key的 属性
$("#key").attr("color","#ccc");
点击以动画出现 toggle 表示它下面的方法依次调用
$(function(){
$("h2").toggle(function(){
$(this).next("p").slideUp();
},function(){
$(this).next("p").slideDown();
});
});
<h2>点击出现下面</h2>
<p style=" height:60px; background:#faa; border:solid 1px #d00;">一段文字</p>
#
# // 目 录 //
# // //
# // 1: 核心部分 //
# // 2: DOM操作 //
# // 3: css操作 //
# // 4: javascript处理 //
# // 5: 动态效果 //
# // 6: event事件 //
# // 7: ajax支持 //
# // //
#
#
#
#
# // 一:核心部分 //
#
#
# /** (1)
# * $()
# * 运行:点击文档中所有a标签时将弹出对话框
# * 说明:$("a") 是一个jQuery选择器;$本身表示一个jQuery类,所有$()是构造一个 jQuery对象;
# * click() 是这个对象的方法。同理$ (document)也是一个jQuery对象,ready(fn)是$(document)的方法,
# * 表示当document全部下载完毕时执行函数。
# */
# /*
# $(document).ready(function(){
# // do something here
# $("a").click(function() {
# alert("Hello world!");
# });
#
# });
# */
#
# /** (2)
# * html()
# * 运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
# */
# /*
# function jq(){
# alert($("div > p").html());
# }
# */
#
# /** (3)
# * appendTo()
# * 运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p>< /div>”
# */
# /*
# function jq(){
# $("<div><p>Hello</p></div>").appendTo("body");
# }
# */
#
# /** (4)
# * css()
# * 运行:当点击id为test的元素时,背景色变成黑色
# * 说明:原文为$(document.body).background("black"); 在 jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代
# */
# /*
# function jq(){
# $(document.body).css("background-color","black");
# }
# */
#
# /** (5)
# * $(elems)
# * 运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
# * 说明:限制jQuery作用于一组特定的DOM元素
# * 参数: elem:一组通过jQuery对象压缩的DOM元素
# */
# /*
# function jq(){
# $(form1.elements ).hide();
# }
# */
#
# /** (6)
# * $(obj)
# * 运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
# * 说明:复制一个jQuery对象
# */
# /*
# function jq(){
# var f = $("div");
# alert($(f).find("p").html());
# }
# */
#
# /** (7)
# * each(fn)
# * 运行:当点击id为test的元素时,img标签的src都变成了2.jpg
# * 说明:将函数作用于所有匹配的对象上
# */
# /*
# function jq(){
# $("img").each(function(){
# this.src = "http://news.xinhuanet.com/ent/2006-08/23/xinsrc_592080323084167412218.jpg"; });
# }
# */
#
# /** (8)
# * get(num)
# * 运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p> 标签的内容
# * 说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
# * 参数:get (Number): 期望限制的索引,从0 开始
# * 注意:get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
# */
# /*
# function jq(){
# alert($("p").get(1).innerHTML);
# }
# */
#
# /** (9)
# * eq(pos)
# * 运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p> 标签的内
# * 说明:减少匹配对象到一个单独的dom元素
# * 参数:pos (Number): 期望限制的索引,从0 开始
# * 注意:get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
# */
# /*
# function jq(){
# alert($("p").eq(1).html())
# }
# */
#
# /** (10)
# * index(obj)
# * 运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
# * 说明:返回对象索引
# * 参数:obj (Object): 要查找的对象
# */
# /*
# function jq(){
# alert($("div").index(document.getElementById('test1')));
# alert($("div").index(document.getElementById('test2')));
# }
# */
#
# /** (11)
# * size()或Length
# * 运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
# * 说明:当前匹配对象的数量,两者等价
# */
# /*
# function jq(){
# //alert($("img").length);
# alert($("img").size());
# }
# */
#
#
#
# // 二:DOM操作 //
#
# /** (1)
# * attr("属性名")或attr("属性名","属性值")
# * 运行:先弹出对话框显示id为test的连接url(1.html),在将其url改为2.html,当弹出对话框后会看到转向到2.html
# * 说明: jquery自1.2.3版本取消了直接的href等相关操作属性的方法,只能使用attr方式。包括src属性等
# */
# /*
# function jq(){
# alert($("#test").attr("href"));
# $("#test").attr("href","2.html");
# }
# */
#
# /** (2)
# * after("html代码")
# * 运行:在匹配元素后插入一段 html <b>Hello</b>;<a href="http://yijianfengvip.blog.163.com/blog/#" id="test" onClick="jq()"& gt;jQuery</a><b>Hello</b>
# * 说明:执行完后在界面可看见执行效果
# */
# /*
# function jq(){
# $("#test").after("<b>Hello</b>");
# }
# */
# /** (3)
# * after(elem)或after(elems)
# * 运行:将指定对象elem或对象组elems插入到在匹配元素后
# * 说明:执行后相当于 <a href="http://yijianfengvip.blog.163.com/blog/#" onClick="jq()">jQuery& lt;/a><p id="test">after</p>
# */
# /*
# function jq(){
# $("#test").after($("#hello"));
# }
# */
#
# /** (4)
# * append(html)
# * 运行:在匹配元素内部,且末尾插入指定html
# * 说明:同理还有 append(elem) append(elems) before(html) before(elem) before(elems)请执行参照 append和after的方来测试、理解!
# */
# /*
# function jq(){
# $("#test").append("<b>Hello</b>");
# }
# */
# /** (5)
# * appendTo(html)
# * 运行:在匹配元素内部,且末尾插入指定html
# * 说明:appendTo()与append() 正好相反
# */
# /*
# function jq(){
# $("<b>Hello</b>").appendTo($("#test"));
# }
# */
# /** (6)
# * appendTo(html)
# * 运行:复制一个id为hello的对象并且放在id为test的元素内部未尾
# * 说明:原元素无保持无变化
# */
# /*
# function jq(){
# $("#hello").clone().appendTo($("#test"));
# }
# */
# /** (7)
# * empty()
# * 运行:删除匹配对象的所有子节点
# */
# /*
# function jq(){
# $("#delete").empty();
# }
# */
# /** (8)
# * prepend(elem/elems/html)
# * 运行:在匹配元素的内部且开始处插入
# * 说明:比较:append(elem),appendTo(expr),prepend(elem) ,append在匹配元素内部结束处插入,appendTo 与append匹配相反
# */
# /*
# function jq(){
# $ ("#delete").prepend($("#test1"))
# alert($ ("#delete").html());
# }
# */
# /** (8)
# * after(elem)
# * 运行:在匹配元素的外部后面开始插入
# * 说明:比较:before(elem)在匹配元素的外部前面开始插入,insertAfter(elem)与 after相反匹配,insertBefore(elem)与before匹配相反
# */
# /*
# function jq(){
# $ ("#delete").before($("#test1"))
# }
# */
# /** (9)
# * remove()
# * 运行:移除匹配对象
# * 说明:注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象
# */
# /*
# function jq(){
# $ ("#delete").remove();
# }
# */
# /**(10)
# * wrap(htm)
# * 运行:将匹配对象包含在给出的html代码内
# * 说明:wrap(elem) 将匹配对象包含在给出的对象内(只是一种包装,原对象不变)
# */
# /*
# function jq(){
# //$("#delete").wrap("<b></b>");
# $("#delete").wrap($("#content"));
# }
# */
# /**(11)
# * add(el)
# * 运行:在匹配对象的基础上在附加指定的dom元素
# * 说明:add(els)在匹配对象的基础上在附加指定的一组对象,els是一个数组
# */
# /*
# function jq(){
# var f=$("p").add("b");
# //var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
# for(var i=0;i < $(f).size();i++){
# alert($(f).eq(i).html());}
# }
# */
# /**(12)
# * parents()
# * 运行:一依次以匹配结点的父节点的内容为对象,一般一个文档还有<body> 和<html>,依次类推下去
# * 说明:parents(expr)在parents()的基础上之取符合表达式的对象
# * 注意:新版本中取代老版本的ancestors()
# */
# /*
# function jq(){
# var f= $("span").parents();
# for(var i=0;i < $(f).size();i++){
# alert($(f).eq(i).html());}
# }
# */
#
# /** (13)
# * children()
# * 运行:返回匹配对象的所有子结点
# * 说明:children(expr)返回匹配对象的子介点中符合表达式的节点,与之对应的有parent()和parent(expr)
# */
#
# /*
# function jq(){
# //alert($("#delete").children("span").html());
# alert($("#delete").children().html());
# }
# */
#
# /** (14)
# * contains( String text ) returns Array<Element>
# * 运行:匹配元素根据提供的test
# * 说明:contents( ) returns jQuery
# */
# /*
# function jq(){
# //$("p:contains('just')").css("text-decoration", "underline"); //pass
# //alert($("p:contains('just')").css("text-decoration", "underline").html()); //pass
# //$("p").contents().wrap("<b/>"); //pass Find all the text nodes inside a paragraph and wrap them with a bold tag.
# // $("p").not(".green, #blueone").css("text-decoration", "underline")//pass emoves elements matching the specified expression from the set of matched elements.
# }
# */
#
# /** (15)
# * filter( Function fn ) returns jQuery
# * 运行:首先选择所有的div并设计其css,然后过滤掉除index为1或id为delete的元素,并且设置其css
# * 说明:过滤元素,把不匹配的 filter中定义的方法都过滤掉(当function return true时选择,否则过滤)
# */
# /*
# function jq(){
# $("div").css("background", "#b4b0da")
# .filter(function (index) {
# return index == 1 || $(this).attr("id") == "delete";
# })
# .css("border", "3px double red");
# }
# */
# /** (15)
# * find("elem")
# */
# /*
# function jq(){
# alert($("div").find("#span").html());
# alert($("#delete").find("span").html());
# alert($("div").find("span").html());
# }
# */
# /**
# * is(expr)
# * 运行:判断对象是否符合表达式,返回boolen值
# */
# /*
# function jq(){
# alert($("#p").is("#p"));
# }
# */
#
# /**
# * next()
# * 运行:返回匹配对象下一个兄弟节点
# * 说明:next(expr) 返回匹配对象下一个符合条件的兄弟节点中;prev(),prev,(expr) 参照next理解
# */
#
# /*
# function jq(){
# alert($("p").next().html());
# alert($("p").next("#one").html());
# }
# */
#
# /**
# * toggleClass(String)
# * 运行:将当前对象添加一个样式,不是当前对象则移出此样式,返回的是处理后的对象
# */
# /*
# function jq(){
# $("p").toggleClass("selected");
# }
# */
#
# /**
# * removeAttr (name)
# * 运行:将对象的指定属性移出
# */
# /*
# function jq(){
# $("img"). removeAttr("src");
# }
# */
# function jq(){
# //alert($("#payoutListTable").size());
# //alert($("#payoutListTable").find("#tr2").html());
# //alert($("#payoutListTable").html());
# alert($("html").html());
# }
#
# // 三:css操作 //
#
# /*
# *css(name)
# *css(prop)
# *css(key, value)
# *说明:css(name) 获取样式名为name的样式;css(prop) prop是一个hash对象,用于设置大量的css样式;css(key, value) 用于设置一个单独得css样式
# *
# */
# /*
# function jq(){
# //$("#b").css({ color: "red", background: "blue" });
# //$("#b").css("color","red");
# //alert($("#b").css("color"));
# }
# */
#
#
# // 四:javascript处理 //
#
# /**
# *
# */
# /*
# function jq(){
# if($.browser.msie) {
# alert("这是一个IE浏览器");}
# else if($.browser.opera) {
# alert("这是一个opera浏览器");}
# else alert("others");
# }
# */
# /**
# * $.each(obj, fn)
# * 说明:obj为对象或数组,fn为在obj上依次执行的函数,obj可以为一个hash对象,依次将hash中每组对象传入到函数中
# */
# /*
# function jq(){
# //$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
# $.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this )});
# }
# */
# /**
# *
# */
# /*
# function jq(){
# var settings = { validate: false, limit: 5, name: "foo" };
# var options = { validate: true, name: "bar" };
# $.extend(settings, options);
# $.each(settings, function(i){ alert( i + "=" + this ); });
# }
# */
# /**
# * $.grep(array,fn)
# * 说明:通过函数fn来过滤array,将array中的元素依次传给fn,fn必须返回一个boolen,如 fn返回true,将被过滤
# */
# /*
# function jq(){
# var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
# $.each(arr, function(i){ alert(i); });
# }
# */
# /*
# function jq(){
# var arr = $.merge([0,1,2],[2,1,3])
# $.each(arr,function(i){ alert(arr[i]); });
# }
# */
# /**
# * $.trim(str
# * 说明:移出字符串两端的空格
# */
# /*
# function jq(){
# var arr ="Hello World!~ "
# var arrTrim=$.trim(arr);
# alert(arr.length);
# alert(arrTrim.length);
# }
# */
#
#
#
#
#
# // 五:动态效果 //
#
#
# /**
# * hide(speed)
# */
# /*
# function jq(){
# //$("#one").hide();
# //$("#one").hide("slow");//speed有3级 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也可以是自定义的速度
# //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
# }
# */
# /**
# * hide(speed)
# */
# /*
# function jq2(){
# //$("#one").show();
# //$("#one").show("slow");
# //$("#one").show(1300,function(){alert("shwo");});
# }
# */
# /**
# * fadeIn(speeds)
# */
# /*
# function jq(){
# $("#one").fadeIn("slow");
# //$("#one").hide("slow");//speed有3级 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也可以是自定义的速度
# //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
# }
# */
# /**
# * fadeOut(speeds)
# */
# /*
# function jq2(){
# $("#one").fadeOut("slow");
# //$("#one").hide("slow");//speed有3级 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也可以是自定义的速度
# //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
# }
# */
# /**
# * fadeTo(speed, opacity, callback)
# */
# /*
# function jq(){
# $("#one").fadeTo("slow",0.2,function(){alert("fadeTo 0.2");});
# }
# */
# /**
# * slideDown(speed, callback)
# */
# /*
# function jq(){
# $("#one").slideUp("slow",function(){alert("slideUp");});
# }
# */
# /**
# * slideDown(speed,callback)
# */
# /*
# function jq2(){
# $("#one").slideDown("slow",function(){alert("slideDown");});
# }
# */
# /**
# * slideToggle(speed,callback)
# */
# function jq2(){
# $("#one").slideToggle("slow",function(){alert("slideToggle");});
# }
#
#
# // 六:event事件 //
#
# /**
# * hover(fn,fn)
# */
# /*
# $(function(){
# $("#one").hover(
# function(){$(this).addClass("red");},
# function(){ $(this).removeClass("red");
# });
# })
# */
#
# /**
# * toggle(fn,fn)
# */
# /*
# $(function(){
# $("#one").toggle (
# function(){$(this).addClass("red");},
# function(){ $(this).removeClass("red");
# });
# })
# */
# /**
# * bind(type, fn)
# */
# /*
# $(function(){
# $("#one").bind("click",function(){
# alert("click");
# $("#one").unbind("click");
# });
# })
# */
#
# // 七:ajax支持 //
#
# /**
# 通用方式:
# $.ajax(prop) 通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种 。
# (String)type:数据传递方式(get或post)。
# ((String)url:数据请求页面的url
# ((String)data:传递数据的参数字符串,只适合post方式
# ((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
# ((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是 false
# ((Number)timeout: 设置时间延迟请求的时间。可以参考$.ajaxTimeout
# ((Boolean)global:是否为当前请求触发ajax全局事件,默认为true
# ((Function)error:当请求失败时触发的函数。
# ((Function)success:当请求成功时触发函数
# ((Function)complete:当请求完成后出发函数
# */
# /*
# // 示例:
# function pageselectCallback(page_id, jq) {
# $.ajax({
# type: "POST",
# url: "../account/alloplist.action?pageNo=" + (page_id*1+1),
# data: "timedesc=" + $("#TiemDese").val()+"&userid=<c:out value='${userid}'/>",
# success: function(msg) {
# $("#tabs-3").html(msg);
# }
# });
# }
# //说明:些示例为翻页的ajax请求jquery处理,
# 传递方式为post,指定了请求路径(URL),传递的参数数据,如果操作成功将更新id为 tabs-3的标签
添加一个下属节点
var $h=$("<p>第一段文字</p>");
$("#h11").append($h);
添加一个样式
$("li").addClass("normalStyle");
添加一个属性
$("li").css("color","blue");
移除id为tr1的第二个表框
$("#tr1 td:eq(1)").remove();
克隆一个按钮并显示在id为tr1的元素后面
$("#btn").click(function(){
$(this).clone().insertAfter($("#tr1"));
});
设置id为key的 属性
$("#key").attr("color","#ccc");
点击以动画出现 toggle 表示它下面的方法依次调用
$(function(){
$("h2").toggle(function(){
$(this).next("p").slideUp();
},function(){
$(this).next("p").slideDown();
});
});
<h2>点击出现下面</h2>
<p style=" height:60px; background:#faa; border:solid 1px #d00;">一段文字</p>
#
# // 目 录 //
# // //
# // 1: 核心部分 //
# // 2: DOM操作 //
# // 3: css操作 //
# // 4: javascript处理 //
# // 5: 动态效果 //
# // 6: event事件 //
# // 7: ajax支持 //
# // //
#
#
#
#
# // 一:核心部分 //
#
#
# /** (1)
# * $()
# * 运行:点击文档中所有a标签时将弹出对话框
# * 说明:$("a") 是一个jQuery选择器;$本身表示一个jQuery类,所有$()是构造一个 jQuery对象;
# * click() 是这个对象的方法。同理$ (document)也是一个jQuery对象,ready(fn)是$(document)的方法,
# * 表示当document全部下载完毕时执行函数。
# */
# /*
# $(document).ready(function(){
# // do something here
# $("a").click(function() {
# alert("Hello world!");
# });
#
# });
# */
#
# /** (2)
# * html()
# * 运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
# */
# /*
# function jq(){
# alert($("div > p").html());
# }
# */
#
# /** (3)
# * appendTo()
# * 运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p>< /div>”
# */
# /*
# function jq(){
# $("<div><p>Hello</p></div>").appendTo("body");
# }
# */
#
# /** (4)
# * css()
# * 运行:当点击id为test的元素时,背景色变成黑色
# * 说明:原文为$(document.body).background("black"); 在 jQuery1.2及以上版本中,@符号应该去除,background方法被css方法取代
# */
# /*
# function jq(){
# $(document.body).css("background-color","black");
# }
# */
#
# /** (5)
# * $(elems)
# * 运行:当点击id为test的元素时,隐藏form1表单中的所有元素。
# * 说明:限制jQuery作用于一组特定的DOM元素
# * 参数: elem:一组通过jQuery对象压缩的DOM元素
# */
# /*
# function jq(){
# $(form1.elements ).hide();
# }
# */
#
# /** (6)
# * $(obj)
# * 运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容。
# * 说明:复制一个jQuery对象
# */
# /*
# function jq(){
# var f = $("div");
# alert($(f).find("p").html());
# }
# */
#
# /** (7)
# * each(fn)
# * 运行:当点击id为test的元素时,img标签的src都变成了2.jpg
# * 说明:将函数作用于所有匹配的对象上
# */
# /*
# function jq(){
# $("img").each(function(){
# this.src = "http://news.xinhuanet.com/ent/2006-08/23/xinsrc_592080323084167412218.jpg"; });
# }
# */
#
# /** (8)
# * get(num)
# * 运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p> 标签的内容
# * 说明:获取匹配元素,get(num)返回匹配元素中的某一个元素
# * 参数:get (Number): 期望限制的索引,从0 开始
# * 注意:get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
# */
# /*
# function jq(){
# alert($("p").get(1).innerHTML);
# }
# */
#
# /** (9)
# * eq(pos)
# * 运行:当点击id为test的元素时,alert对话框显示:So is this,即第二个<p> 标签的内
# * 说明:减少匹配对象到一个单独的dom元素
# * 参数:pos (Number): 期望限制的索引,从0 开始
# * 注意:get和eq的区别,eq返回的是jQuery对象,get返回的是所匹配的dom对象,所有取$("p").eq(1)对象的内容用jQuery方法html(),而取$("p").get(1)的内容用innerHTML
# */
# /*
# function jq(){
# alert($("p").eq(1).html())
# }
# */
#
# /** (10)
# * index(obj)
# * 运行:当点击id为test的元素时,两次弹出alert对话框分别显示0,1
# * 说明:返回对象索引
# * 参数:obj (Object): 要查找的对象
# */
# /*
# function jq(){
# alert($("div").index(document.getElementById('test1')));
# alert($("div").index(document.getElementById('test2')));
# }
# */
#
# /** (11)
# * size()或Length
# * 运行:当点击id为test的元素时,弹出alert对话框显示2,表示找到两个匹配对象
# * 说明:当前匹配对象的数量,两者等价
# */
# /*
# function jq(){
# //alert($("img").length);
# alert($("img").size());
# }
# */
#
#
#
# // 二:DOM操作 //
#
# /** (1)
# * attr("属性名")或attr("属性名","属性值")
# * 运行:先弹出对话框显示id为test的连接url(1.html),在将其url改为2.html,当弹出对话框后会看到转向到2.html
# * 说明: jquery自1.2.3版本取消了直接的href等相关操作属性的方法,只能使用attr方式。包括src属性等
# */
# /*
# function jq(){
# alert($("#test").attr("href"));
# $("#test").attr("href","2.html");
# }
# */
#
# /** (2)
# * after("html代码")
# * 运行:在匹配元素后插入一段 html <b>Hello</b>;<a href="http://yijianfengvip.blog.163.com/blog/#" id="test" onClick="jq()"& gt;jQuery</a><b>Hello</b>
# * 说明:执行完后在界面可看见执行效果
# */
# /*
# function jq(){
# $("#test").after("<b>Hello</b>");
# }
# */
# /** (3)
# * after(elem)或after(elems)
# * 运行:将指定对象elem或对象组elems插入到在匹配元素后
# * 说明:执行后相当于 <a href="http://yijianfengvip.blog.163.com/blog/#" onClick="jq()">jQuery& lt;/a><p id="test">after</p>
# */
# /*
# function jq(){
# $("#test").after($("#hello"));
# }
# */
#
# /** (4)
# * append(html)
# * 运行:在匹配元素内部,且末尾插入指定html
# * 说明:同理还有 append(elem) append(elems) before(html) before(elem) before(elems)请执行参照 append和after的方来测试、理解!
# */
# /*
# function jq(){
# $("#test").append("<b>Hello</b>");
# }
# */
# /** (5)
# * appendTo(html)
# * 运行:在匹配元素内部,且末尾插入指定html
# * 说明:appendTo()与append() 正好相反
# */
# /*
# function jq(){
# $("<b>Hello</b>").appendTo($("#test"));
# }
# */
# /** (6)
# * appendTo(html)
# * 运行:复制一个id为hello的对象并且放在id为test的元素内部未尾
# * 说明:原元素无保持无变化
# */
# /*
# function jq(){
# $("#hello").clone().appendTo($("#test"));
# }
# */
# /** (7)
# * empty()
# * 运行:删除匹配对象的所有子节点
# */
# /*
# function jq(){
# $("#delete").empty();
# }
# */
# /** (8)
# * prepend(elem/elems/html)
# * 运行:在匹配元素的内部且开始处插入
# * 说明:比较:append(elem),appendTo(expr),prepend(elem) ,append在匹配元素内部结束处插入,appendTo 与append匹配相反
# */
# /*
# function jq(){
# $ ("#delete").prepend($("#test1"))
# alert($ ("#delete").html());
# }
# */
# /** (8)
# * after(elem)
# * 运行:在匹配元素的外部后面开始插入
# * 说明:比较:before(elem)在匹配元素的外部前面开始插入,insertAfter(elem)与 after相反匹配,insertBefore(elem)与before匹配相反
# */
# /*
# function jq(){
# $ ("#delete").before($("#test1"))
# }
# */
# /** (9)
# * remove()
# * 运行:移除匹配对象
# * 说明:注意区分empty(),empty()移出匹配对象的子节点,remove(),移出匹配对象
# */
# /*
# function jq(){
# $ ("#delete").remove();
# }
# */
# /**(10)
# * wrap(htm)
# * 运行:将匹配对象包含在给出的html代码内
# * 说明:wrap(elem) 将匹配对象包含在给出的对象内(只是一种包装,原对象不变)
# */
# /*
# function jq(){
# //$("#delete").wrap("<b></b>");
# $("#delete").wrap($("#content"));
# }
# */
# /**(11)
# * add(el)
# * 运行:在匹配对象的基础上在附加指定的dom元素
# * 说明:add(els)在匹配对象的基础上在附加指定的一组对象,els是一个数组
# */
# /*
# function jq(){
# var f=$("p").add("b");
# //var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
# for(var i=0;i < $(f).size();i++){
# alert($(f).eq(i).html());}
# }
# */
# /**(12)
# * parents()
# * 运行:一依次以匹配结点的父节点的内容为对象,一般一个文档还有<body> 和<html>,依次类推下去
# * 说明:parents(expr)在parents()的基础上之取符合表达式的对象
# * 注意:新版本中取代老版本的ancestors()
# */
# /*
# function jq(){
# var f= $("span").parents();
# for(var i=0;i < $(f).size();i++){
# alert($(f).eq(i).html());}
# }
# */
#
# /** (13)
# * children()
# * 运行:返回匹配对象的所有子结点
# * 说明:children(expr)返回匹配对象的子介点中符合表达式的节点,与之对应的有parent()和parent(expr)
# */
#
# /*
# function jq(){
# //alert($("#delete").children("span").html());
# alert($("#delete").children().html());
# }
# */
#
# /** (14)
# * contains( String text ) returns Array<Element>
# * 运行:匹配元素根据提供的test
# * 说明:contents( ) returns jQuery
# */
# /*
# function jq(){
# //$("p:contains('just')").css("text-decoration", "underline"); //pass
# //alert($("p:contains('just')").css("text-decoration", "underline").html()); //pass
# //$("p").contents().wrap("<b/>"); //pass Find all the text nodes inside a paragraph and wrap them with a bold tag.
# // $("p").not(".green, #blueone").css("text-decoration", "underline")//pass emoves elements matching the specified expression from the set of matched elements.
# }
# */
#
# /** (15)
# * filter( Function fn ) returns jQuery
# * 运行:首先选择所有的div并设计其css,然后过滤掉除index为1或id为delete的元素,并且设置其css
# * 说明:过滤元素,把不匹配的 filter中定义的方法都过滤掉(当function return true时选择,否则过滤)
# */
# /*
# function jq(){
# $("div").css("background", "#b4b0da")
# .filter(function (index) {
# return index == 1 || $(this).attr("id") == "delete";
# })
# .css("border", "3px double red");
# }
# */
# /** (15)
# * find("elem")
# */
# /*
# function jq(){
# alert($("div").find("#span").html());
# alert($("#delete").find("span").html());
# alert($("div").find("span").html());
# }
# */
# /**
# * is(expr)
# * 运行:判断对象是否符合表达式,返回boolen值
# */
# /*
# function jq(){
# alert($("#p").is("#p"));
# }
# */
#
# /**
# * next()
# * 运行:返回匹配对象下一个兄弟节点
# * 说明:next(expr) 返回匹配对象下一个符合条件的兄弟节点中;prev(),prev,(expr) 参照next理解
# */
#
# /*
# function jq(){
# alert($("p").next().html());
# alert($("p").next("#one").html());
# }
# */
#
# /**
# * toggleClass(String)
# * 运行:将当前对象添加一个样式,不是当前对象则移出此样式,返回的是处理后的对象
# */
# /*
# function jq(){
# $("p").toggleClass("selected");
# }
# */
#
# /**
# * removeAttr (name)
# * 运行:将对象的指定属性移出
# */
# /*
# function jq(){
# $("img"). removeAttr("src");
# }
# */
# function jq(){
# //alert($("#payoutListTable").size());
# //alert($("#payoutListTable").find("#tr2").html());
# //alert($("#payoutListTable").html());
# alert($("html").html());
# }
#
# // 三:css操作 //
#
# /*
# *css(name)
# *css(prop)
# *css(key, value)
# *说明:css(name) 获取样式名为name的样式;css(prop) prop是一个hash对象,用于设置大量的css样式;css(key, value) 用于设置一个单独得css样式
# *
# */
# /*
# function jq(){
# //$("#b").css({ color: "red", background: "blue" });
# //$("#b").css("color","red");
# //alert($("#b").css("color"));
# }
# */
#
#
# // 四:javascript处理 //
#
# /**
# *
# */
# /*
# function jq(){
# if($.browser.msie) {
# alert("这是一个IE浏览器");}
# else if($.browser.opera) {
# alert("这是一个opera浏览器");}
# else alert("others");
# }
# */
# /**
# * $.each(obj, fn)
# * 说明:obj为对象或数组,fn为在obj上依次执行的函数,obj可以为一个hash对象,依次将hash中每组对象传入到函数中
# */
# /*
# function jq(){
# //$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
# $.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this )});
# }
# */
# /**
# *
# */
# /*
# function jq(){
# var settings = { validate: false, limit: 5, name: "foo" };
# var options = { validate: true, name: "bar" };
# $.extend(settings, options);
# $.each(settings, function(i){ alert( i + "=" + this ); });
# }
# */
# /**
# * $.grep(array,fn)
# * 说明:通过函数fn来过滤array,将array中的元素依次传给fn,fn必须返回一个boolen,如 fn返回true,将被过滤
# */
# /*
# function jq(){
# var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
# $.each(arr, function(i){ alert(i); });
# }
# */
# /*
# function jq(){
# var arr = $.merge([0,1,2],[2,1,3])
# $.each(arr,function(i){ alert(arr[i]); });
# }
# */
# /**
# * $.trim(str
# * 说明:移出字符串两端的空格
# */
# /*
# function jq(){
# var arr ="Hello World!~ "
# var arrTrim=$.trim(arr);
# alert(arr.length);
# alert(arrTrim.length);
# }
# */
#
#
#
#
#
# // 五:动态效果 //
#
#
# /**
# * hide(speed)
# */
# /*
# function jq(){
# //$("#one").hide();
# //$("#one").hide("slow");//speed有3级 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也可以是自定义的速度
# //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
# }
# */
# /**
# * hide(speed)
# */
# /*
# function jq2(){
# //$("#one").show();
# //$("#one").show("slow");
# //$("#one").show(1300,function(){alert("shwo");});
# }
# */
# /**
# * fadeIn(speeds)
# */
# /*
# function jq(){
# $("#one").fadeIn("slow");
# //$("#one").hide("slow");//speed有3级 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也可以是自定义的速度
# //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
# }
# */
# /**
# * fadeOut(speeds)
# */
# /*
# function jq2(){
# $("#one").fadeOut("slow");
# //$("#one").hide("slow");//speed有3级 ("slow", "normal", "fast")
# //$("#one").hide(1300); //也可以是自定义的速度
# //$("#one").hide(1300,function(){alert("hide");});//执行hide后招待指定方法
# }
# */
# /**
# * fadeTo(speed, opacity, callback)
# */
# /*
# function jq(){
# $("#one").fadeTo("slow",0.2,function(){alert("fadeTo 0.2");});
# }
# */
# /**
# * slideDown(speed, callback)
# */
# /*
# function jq(){
# $("#one").slideUp("slow",function(){alert("slideUp");});
# }
# */
# /**
# * slideDown(speed,callback)
# */
# /*
# function jq2(){
# $("#one").slideDown("slow",function(){alert("slideDown");});
# }
# */
# /**
# * slideToggle(speed,callback)
# */
# function jq2(){
# $("#one").slideToggle("slow",function(){alert("slideToggle");});
# }
#
#
# // 六:event事件 //
#
# /**
# * hover(fn,fn)
# */
# /*
# $(function(){
# $("#one").hover(
# function(){$(this).addClass("red");},
# function(){ $(this).removeClass("red");
# });
# })
# */
#
# /**
# * toggle(fn,fn)
# */
# /*
# $(function(){
# $("#one").toggle (
# function(){$(this).addClass("red");},
# function(){ $(this).removeClass("red");
# });
# })
# */
# /**
# * bind(type, fn)
# */
# /*
# $(function(){
# $("#one").bind("click",function(){
# alert("click");
# $("#one").unbind("click");
# });
# })
# */
#
# // 七:ajax支持 //
#
# /**
# 通用方式:
# $.ajax(prop) 通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种 。
# (String)type:数据传递方式(get或post)。
# ((String)url:数据请求页面的url
# ((String)data:传递数据的参数字符串,只适合post方式
# ((String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
# ((Boolean)ifModified: 当最后一次请求的相应有变化是才成功返回,默认值是 false
# ((Number)timeout: 设置时间延迟请求的时间。可以参考$.ajaxTimeout
# ((Boolean)global:是否为当前请求触发ajax全局事件,默认为true
# ((Function)error:当请求失败时触发的函数。
# ((Function)success:当请求成功时触发函数
# ((Function)complete:当请求完成后出发函数
# */
# /*
# // 示例:
# function pageselectCallback(page_id, jq) {
# $.ajax({
# type: "POST",
# url: "../account/alloplist.action?pageNo=" + (page_id*1+1),
# data: "timedesc=" + $("#TiemDese").val()+"&userid=<c:out value='${userid}'/>",
# success: function(msg) {
# $("#tabs-3").html(msg);
# }
# });
# }
# //说明:些示例为翻页的ajax请求jquery处理,
# 传递方式为post,指定了请求路径(URL),传递的参数数据,如果操作成功将更新id为 tabs-3的标签
# */
来源本人博客:http://yijianfengvip.blog.163.com/blog/static/175273432201111231459588/