`
rebecca
  • 浏览: 314994 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

JQuery1.4学习笔记

阅读更多

  一:核心部分  

/** (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" onClick="jq()"& gt;jQuery</a><b>Hello</b>  
 *  说明:执行完后在界面可看见执行效果  
 */   
 /*  
 function jq(){  
       $("#test").after("<b>Hello</b>");  
}  
*/   
/** (3)  
 *  after(elem)或after(elems)  
 *  运行:将指定对象elem或对象组elems插入到在匹配元素后  
 *  说明:执行后相当于  <a href="#" onClick="jq()">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([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的标签  
 */   
                          八:插件程序        

分享到:
评论

相关推荐

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    jquery完全笔记 带目录 高清 经典前端js笔记 前端必看

    ### jQuery完全笔记知识点概述 #### 1. jQuery概述 jQuery是一个快速、小型且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery,可以更方便地在网页中操作文档对象、选择...

    jquery 15天学习笔记 02 table表格 隔行变色的问题

    在本篇“jQuery 15天学习笔记”的第二部分中,我们将聚焦于如何处理HTML表格,特别是实现隔行变色的效果。隔行变色是一种常见的网页设计技巧,它能提高表格数据的可读性,使用户更容易区分和浏览数据行。 首先,...

    自己整理的jQuery笔记

    《jQuery笔记详解》 jQuery,作为JavaScript的一个库,极大地简化了DOM操作,提升了开发者的工作效率。它将常用的功能进行了封装,形成了一系列API,使得开发者无需关注底层实现,只需调用相应的方法即可实现复杂...

    Java JDK 7学习笔记(国内第一本Java 7,前期版本累计销量5万册)

    丛书名: 学习笔记 出版社:清华大学出版社 ISBN:9787302282082 上架时间:2012-5-9 出版日期:2012 年5月 开本:16开 页码:564 版次:1-1 所属分类:计算机 &gt; 软件与程序设计 &gt; JAVA(J#) &gt; Java 编辑推荐   ...

    详细的jquery 教程

    - **JQuery_1.4_API.CHM和jQueryAPI-1.41.chm**: 这两个CHM文件是jQuery 1.4版本的API文档,包含所有可用函数、方法和参数的详细说明,是学习和查找参考资料的重要工具。 ### 3. 动画效果 - **动画**: jQuery提供...

    JQuery CSS样式控制 学习笔记

    &lt;script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"&gt; var jq = jQuery.noConflict(); jq(document).ready(function() { jq("#changeStyle").click(function() { ...

    自创笔记,JQUERY及时复习

    这份自创的笔记旨在帮助我们更好地理解和应用jQuery,以提升开发效率。下面,我们将深入探讨jQuery中关于类操作的核心知识点。 **1.1 class 类的操作** 在HTML中,类(class)常用来对元素进行分组,以便于样式化...

    web前端学习笔记.docx编程资料

    ### Web前端学习笔记知识点概述 #### 一、Web基础知识 ##### 1.1 Web与Internet - **Internet**: 是一个全球性的计算机互联网络,提供多种服务如Telnet、Email、WWW、BBS、FTP等。它基于分组交换原理及TCP/IP协议...

    Java学习笔记-个人整理的

    {1.4}数据类型}{23}{section.1.4} {1.4.1}整数与浮点数}{23}{subsection.1.4.1} {1.4.1.1}浮点数原理}{24}{subsubsection.1.4.1.1} {1.4.2}格式化输出浮点数}{24}{subsection.1.4.2} {1.4.3}\texttt {char}}{24...

    jQuery_struts2_hibernate

    ##### 1.4 jQuery API介绍 1. **选择器**: - **基本选择器**:如`$("#id")`、`$("div")`、`$(".class")`等。 - **层级关系选择器**:如`$("from input")`、`$("from &gt; input")`等。 - **简单选择器**:如`:...

    js和jquary随堂笔记

    谷歌的引用方式是 `&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"&gt;`,微软的是 `&lt;script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"&gt;`。这样可以利用 CDN ...

Global site tag (gtag.js) - Google Analytics