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

JQuery1.3学习笔记

    博客分类：
  • Ajax
jQueryCSSAjaxHTMLOpera 
阅读更多 
////////////////////////////////////////////////////////////////////////////////
//                               目        录                                 //
//                                                                            //
// 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" onClick="jq()">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的标签
 */
////////////////////////////////////////////////////////////////////////////////
//                               八：插件程序                                 //
////////////////////////////////////////////////////////////////////////////////

 

分享到：
| 配制无限制的Spring事务管理
评论
1 楼 bigcoon 2009-07-17  
关注！支持
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 学习笔记

    **jQuery学习笔记** jQuery，作为一个轻量级的JavaScript库，极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧，帮助初学者快速上手。 ## 一...

    Ajax和jQuery学习笔记

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

    jQuery学习笔记01

    1、jQuery介绍 ...1.3 jQuery流行程度  jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery好处！  jQuery是免费、开源的，jQuery的语法设计

    自己整理的jQuery笔记

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

    jQuery 源码分析笔记

    "jQuery 源码分析笔记"探讨了jQuery的核心设计和实现，特别是其如何简化JavaScript开发，并且深入研究了jQuery的源码结构。 jQuery的创建方式是一个自执行的匿名函数，这样做的好处在于它不会污染全局命名空间，...

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

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

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程，涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始，引导读者理解网页样式的设置与应用。 1. CSS（Cascading Style Sheets）样式表是用于控制...

    jquery-1.5.2

    `西西软件.txt`可能包含关于jQuery 1.5.2的学习资源或笔记，而`西西软件.url`可能是链接到相关的教程网站。这些资料对于深入理解和应用jQuery 1.5.2非常有帮助。 3.2 实战演练 通过创建实际项目，如构建动态网页、...

    自创笔记，JQUERY及时复习

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

    js学习笔记——（15）jQuery选择器、样式操作、效果

    #### 1.3 过滤选择器 - `$(‘:first’)`：选取集合中的第一个元素。 - `$(‘:last’)`：选取集合中的最后一个元素。 - `$(‘:even’)`：选取索引为偶数的元素（0被视为偶数）。 - `$(‘:odd’)`：选取索引为奇数的...

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

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

    jQuery_struts2_hibernate

    ##### 1.3 学习前的注意事项 1. **区分jQuery对象与原生JS对象**： - **jQuery对象**：通过jQuery的选择器选出的对象集合。 - **原生JS对象**：如`document`、`document.getElementById()`、`this`等。 - **转换...

    Java学习笔记-个人整理的

    {1.3}补码}{19}{section.1.3} {1.3.1}总结}{23}{subsection.1.3.1} {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}...

    jq01课堂笔记.docx

    总的来说，jQuery为JavaScript开发提供了极大的便利，它通过封装一系列实用的功能，提高了开发效率，降低了学习和维护成本，成为了前端开发不可或缺的工具之一。在实际项目中，熟练掌握jQuery能帮助开发者更快地实现...

    Jque.rt笔记完整版

    《Jquery笔记完整版》 Jquery，也称为jQuery，是一种轻量级的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画设计和Ajax交互。这篇笔记涵盖了Jquery的核心功能、对象访问、数据缓存、插件机制以及选择器...

    Web前端基础笔记1

    【Web前端基础笔记1】 在Web开发领域，前端技术扮演着至关重要的角色，它负责构建用户与网站交互的界面。本笔记主要关注HTML（Hyper Text ...学习Web前端不仅需要理解基础语法，还需要不断学习和适应新的技术和工具。

Magicbox
Global site tag (gtag.js) - Google Analytics