篇一 :jquery快速入门总结很给力的

且确实可以很轻松地做出许多复杂的效果。

虽然jQuery上手简单,比其他库容易学会,但是要全面掌握,却不轻松。因为它涉及到网页开发的方方面面,提供的各种方法和内部变化有上千种之多。初学者常常感到,入门很方便,提高很困难。

目前,互联网上最好的jQuery入门教材,是Rebecca Murphey写的《jQuery基础》(jQuery Fundamentals)。在Google里搜索"jQuery 培训",此书排在第一位。jQuery官方团队已经同意,把此书作为官方教程的基础。

这本书虽然是入门教材,但也足足有100多页。我对它做了一个详细的笔记,试图理清jQuery的设计思想,找出学习的脉络。我的目标是全面掌握jQuery,遇到问题的时候,心里有底,基本知道使用它的哪一个功能,然后可以迅速从手册中找到具体的写法。

下面就是我的笔记,它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识,就能看懂它,在最短的时间里,掌握jQuery的所有主要方面(除了ajax和插件开发)。 ===========================================

jQuery设计思想

原文网址:http://jqfundamentals.com/book/

阮一峰 翻译整理

【目录】

一、选择网页元素

二、改变结果集

三、链式操作

四、元素的操作:取值和赋值

五、元素的操作:移动

六、元素的操作:复制、删除和创建

七、工具方法

八、事件操作

九、特殊效果

【正文】

一、选择网页元素

jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他函数库的根本特点。

使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

…… …… 余下全文

篇二 :jQuery学习总结

jQuery学习总结

因为项目需要,同时也因为兴趣,在近一段时间研究和使用了jQuery,它真的是太强大了,代码非常的优雅和简洁,好后悔现在才开始了解它,虽然目前网络上关于jQuery的资料、学习心得,教程多得你看不完,但我还是想把自己的一点学习经验写下来,不管是提供给那些想学习jQuery的人,还是保留一份学习笔记,我觉得这都是很有必要的。
    在说jQuery之前,不得不提下现在也非常流行的mootools框架。在网上,很多人把mootools比作java,把jquery比作perl。我没研究过mootools,也不发表意见,这完全没有意义。只要本身不存在重大缺陷就可以了。用好了都强大。好比Java和.NET争论了这么多年,一样的道理。
    jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助开发的库。是继prototype之后又一个优秀的JavaScript框架。它如暴风雪般席卷WEB前端开发,jQuery已确定成为ASP.NET MVC和Visual Studio 2008版本中的正式组成部分,诺基亚手机平台Web Run-Time也将纳入jQuery。所以,请相信,选择jQuery是不会错的。如果你看到这里还有犹豫,那么我再说个理由,应该能打消你的最后疑虑了。20##年12月份Tiobe编程语言排行榜JavaScript升到第8名,并且在上升势头最强劲的语言中排名第3位。我在这里不是想说排行榜的话题,因为那又会引发一场说不完的争论。我的意思是,排行榜不能说明一切问题,但至少能够说明,现在用哪种语言的人多,人多则说明有活力,相应的其它各种资源也会较丰富。JavaScript脚本已经深入WEB应用之中。而作为优秀的JavaScript框架,它的前景不用怀疑。除非出现一个比jQuery更牛B,更优秀的东东。
    我不打算像写教程那样,把jQuery的基础用法都罗列出来,那会很无趣,也没意义。网上这方面的知识随便搜一下就一大堆。我准备从项目的角度出发,写出自己的感受。当然,一份API帮助文档是必不可少的,在最末尾提供了jQuery-1.2.6.chm下载,需者自取。
    首先我们要知道,JavaScript开发基本可以分为以下四个部分:
        1、查找DOM元素进行取值和赋值的操作、在特定节点位置进行内容的取值和赋值操作(innerHTML)。
        2、针对元素进行事件监听。
        3、通过操作DOM节点结合改变元素的CSS样式,达到绚丽的动画效果。
        4、对DOM元素进行Ajax操作。
    对于jQuery来说,可以对这四部分提供完美的实现:
        a、jQuery拥有强大的选择器,可以查找任意的DOM元素。同时jQuery对象实现链式语法,能够很方便简洁的写出强大的操作。比如操作属性:$("#chkbox").attr("checked","checked").attr("disabled","disabled")。可以这样继续链下去,包括增加事件、样式等等操作。
        b、在页面加载时给DOM绑定事件。$("#chkbox").click(function(){ alert("hello jquery!"); });
        c、show()和hide()是jQuery中最基本的动画。对元素显示和隐藏,当然,我们还可以实现其它的更复杂的动画。
        d、$.ajax(options)是jQuery中最底层的Ajax实现。除此之外,还可以使用$.get()或$.post()实现Ajax请求。
    了解了以上内容后,jQuery带给我们的另一个惊喜,在于它的API支持当前多种主流浏览器,使得你不用再为了IE、FireFox等兼容问题而抓头发伤脑筋。在以前做项目的时候,我总是喜欢将行为或样式属性写在DOM中。这是极其不好也极其不规范的一种做法。如今采用jQuery后,我将所有的行为全部从DOM中抽取了出来,放到jQuery初始化函数中进行绑定。而且jQuery的初始化函数比window.onload的加载速度更快。

…… …… 余下全文

篇三 :jquery心得、技巧、总结

Jquery

1         . 开始:
$(document).ready(function() {}); 可缩写成:$(function(){});

选择器:引号中可以有多个一起选择
$(“#id”)要求id唯一
$(“.class”) class名对应的元素
$(“HTML标签”)所有标签元素对象
$(“*”)所有元素
$(“a b”)a元素下的所有子孙b元素
$(“a>b”)a元素下的所有子b元素
$(“a+b”)a元素后的下一个b元素 等价于 $(“a”).next(“b”);
$(“a~b”)a元素后的所有b元素 等价于 $(“a”).nextAll(“b”);
$(“#a”).siblings(“div”)#a元素的所有同辈div元素

过滤选择器:
:first 第一个元素
:last 最后一个元素
:not(selector) 除selector选择器对应的之外的所有元素
:even 索引为偶数的所有元素(索引从0开始)
 dd 索引为奇数的所有元素
:eq(index) 索引等于index的元素
:gt(index) 索引大于index的元素
:lt(index) 索引小于index的元素
:header 所有标题元素(h1~h6)
:animated 正在执行动画的所有元素
:contains(text) 含有文本内容为text的元素
:empty 不包含子元素或文本的空元素
:has(selector) 含有selector选择器所匹配的元素的元素
:parent 含有子元素或者文本的元素
:hidden 所有不可见元素
:visible 所有可见元素

属性过滤选择器:多个可合并
[att] 拥有此属性的元素
[att=val] 属性值为val的元素
[att!=val] 属性值不等于val的元素
[att^=val] 属性值以val开始的元素
[att$=val] 属性值以val结束的元素
[att*=val] 属性值含有val的元素

…… …… 余下全文

篇四 :jquery学习总结

 
 

一、选择网页元素

  jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他函数库的根本特点。
  使用jQuery的第一步,往往就是将一个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

选择表达式可以是CSS选择器:

 $(document)//选择整个文档对象  
 $('#myId')//选择ID为myId的网页元素  
 $('div.myClass')//选择class为myClass的div元素  
 $('input[name=first]')//选择name属性等于first的input元素 

也可以是jQuery特有的表达式:

 $('a:first')//选择网页中第一个a元素  
 $('tr:odd')//选择表格的奇数行  
 $('#myForm :input')//选择表单中的input元素  
 $('div:visible') //选择可见的div元素  
 $('div:gt(2)')//选择所有的div元素,除了前三个  
 $('div:animated')//选择当前处于动画状态的div元素  
  
 二、改变结果集
  如果选中多个元素,jQuery提供过滤器,可以缩小结果集:

* $('div').has('p'); //选择包含p元素的div元素  
* $('div').not('.myClass'); //选择class不等于myClass的div元素  
* $('div').filter('.myClass'); //选择class等于myClass的div元素  
* $('div').first(); //选择第1个div元素  
* $('div').eq(5); //选择第6个div元素  
有时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动方法:

…… …… 余下全文

篇五 :jQuery总结与注意事项

jQuery总结与注意事项

刚开始学了 JQuqery, 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。

后来学习 ASP.NET AJAX ,在微软的领导下,逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣,

才想起学习一下了 Jquery.

随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、 mootools、Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。

jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript? 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点:

1、代码简练、语义易懂、学习快速、文档丰富。

2、jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。

3、jQuery支持CSS1-CSS3,以及基本的xPath。

4、jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。

5、可以很容易的为jQuery扩展其他功能。

6、能将JS代码和HTML代码完全分离,便于代码和维护和修改。

7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。

…… …… 余下全文

篇六 :jquery总结学习资料JQuery总结

一、简介

1.1、概述

随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。

jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript? 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点:

1、代码简练、语义易懂、学习快速、文档丰富。

2、jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。

3、jQuery支持CSS1-CSS3,以及基本的xPath。

4、jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。

5、可以很容易的为jQuery扩展其他功能。

6、能将JS代码和HTML代码完全分离,便于代码和维护和修改。

7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式,降低你学习使用JS操作网页的复杂度,提高网页JS开发效率,无论对于js初学者还是资深专家,jQuery都将是您的首选。 jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同的Web应用程序中。

…… …… 余下全文

篇七 :jQuery总结

1、 jQuery是JavaScript语法写的一些函数类,内部仍然是调用JavaScript,特点:

a) 解决了不同浏览器的兼容问题

b) 对于不同控件具有统一的操作方式

c) 体积小,使用简单方便

d) 链式编程、隐式迭代、插件丰富、开源、免费

e) 让编写JavaScript程序更简单、更强大

2、 jQuery中的顶级对象:$(jQuery的简写)

3、 window.onload与$(document).ready(fn)区别:

a) window.onload:页面完全加载完毕才会触发,即所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。$(document).ready()只要Dom元素加载完毕即触发。这样可以提高响应速度。

b) $(document).ready();可以多次注册事件处理程序,并且最终都会执行,而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。

4、 jQuery通用的两个函数:

a) $.map(array ,fn)//遍历、修改数组,不支持Dictionary风格数组(可以遍历,但返回值错误),函数fn返回值为处理后的一个新数组,原数组不变。在fn中this并不表示当前循环的元素

b) $.each(array, fn)//遍历数组,return false退出循环,return true跳至下一个循环,函数fn没有返回值,fn中this指向一个不同的DOM元素

补充:

$.trim(字符串); 函数//去掉两端空格

5、 jQuery对象和DOM对象

a) Dom对象→ jQuery 对象:$(Dom对象)

b) jQuery→Dom 对象:$(Dom对象).get(0) / $(Dom对象)[0]

6、 jQuery选择器(返回的是一个对象数组)

a) ID选择器:$(‘#id’)

…… …… 余下全文

篇八 :jquery个人总结

jquery中获取一个文本框的属性值的方法

eg

<input type="button" value="测试行" id="testrow">

$("#testrow")[0].value

$("#testrow")[0].type

$(":input[id$='uname']") 结尾

$(":input[id^='uname']")开始

$(":input[id*='uname']") 包含uname的

$(":input[id='uname']")

$(":input[id!='uname']")

$("input[id^='uname1']")也可以达到相同的效果

div和span获取值用text()或者html();

$("#div")为jQuery对象

$("#div")[0]为dom元素 可以用dom的所有属性和方法

var $cr=$("#cr"); //jquery对象

var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);

alert(cr.checked); //检测这个checkbox是否给选中

dom对象转换成jquery对象

对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);

复制代码 代码如下:

var cr=document.getElementById("cr"); //dom对象

…… …… 余下全文