JQuery1.3学习笔记
////////////////////////////////////////////////////////////////////////////////// 目 录 //// //// 1: 核心部分 //// 2: DOM操作 //// 3: css操作 //// 4: javascript处理 //// 5: 动态效果 //// 6: event事件 //// 7: ajax支持 //// 8: 插件程序 //// //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 一：核心部分 ///////////////////////////////////////////////////////////////////////////////////** (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="#" id="test" >jQuery</a><b>Hello</b> *说明：执行完后在界面可看见执行效果 */ /* function jq(){ $("#test").after("<b>Hello</b>");}*//** (3) *after(elem)或after(elems) *运行：将指定对象elem或对象组elems插入到在匹配元素后 *说明：执行后相当于<a href="#" >jQuery</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() 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( , 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( , function(i){ return i > 2; }); $.each(arr, function(i){ alert(i); });}*//*function jq(){var arr = $.merge(,)$.each(arr,function(i){ alert(arr); });}*//** * $.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的标签 */////////////////////////////////////////////////////////////////////////////////// 八：插件程序 //////////////////////////////////////////////////////////////////////////////////
页:
[1]