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操作Table学习总结

jQuery在客户端操作Table学习：不过有很多很多的不足，还需要学习掌握。 <style type="text/css">

.hover

{

background-color:red;

}

</style>

<table id="table1" border="1" cellpadding="0" cellspacing="0">

<tr>

<th>

<input type="checkbox" id="checkall" onclick="checkAll1(this)"/>

</th>

<th>姓名</th>

<th>性别</th>

<th>密码</th>

<th>地址</th>

</tr>

<tr>

<td>

<input type="checkbox" id="Checkbox1" />

</td>

<td>张三</td>

<td>男</td>

<td>zhangsan</td>

<td>上海</td>

</tr>

<tr>

<td>

<input type="checkbox" id="Checkbox2" />

…… …… 余下全文

　
 

一、选择网页元素

　　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 学习总结

一 页面引用

<script src="jquery-1.3.2.js" type="text/javascript"></script>

在页面引用JQuery

二 页面加载事件

$(document). ready (function(){

         //function(){}是页面加载完后要执行的方法；

         Alert(“asd”);

//页面加载完成后弹出对话框

});

$(docunent).readry(fn);页面加载完之后执行的方法fn 可以理解为onload();

三 获取对象

补充：$(“p”).addClass(“a”); 为标记P添加样式a ；$(“p”).removeClass(“a”); 给标记P删除样式a ；

addClass("css name")函数是为前面$()选择到的元素对象增加CSS样式.

removeClass("css name")函数也是为去掉前面$()选择到的元素对象的指定的样式.

因此我们可以理解

1.  CSS样式

 $("#tabTxt tr:even").addClass("tabEven"); 为id为tabTxt的表格的偶数行增加名为tabEven的CSS样式

 $("#tabTxt tr:odd").addClass("tabOdd");   为id为tabTxt的表格的奇数行增加名为tabOdd的CSS样式

…… …… 余下全文

jQuery学习总结

什么是jQuery？

jQuery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库，兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

jQuery学习资料

作为初学者，我在学习jQuery时，主要阅读了《jQuery基础教程》这本书，这本书确实很不错，作者写的很详实，译者的翻译也很到位，是入门jQuery的很好的教程。然后就是在开发中参考jQuery的API，API中的例子很有参考价值，这让我们新手都能很快的掌握一种比较流行的技术。这里为大家提供了上面所说的两种参考资料，请见附件。

jQuery的选择器

jQuery最强大的方面之一就是它能够简化DOM遍历任务。一般来说，可以通过html文档中的元素的标签名，id属性，class属性来获取该元素。举例如下：

标签名：$(‘p’)会取得文档中所有的段落。

Id：$(‘#some-id’)会取得文档中具有对应id为some-id的一个元素。这里使用的是“#”号。

Class：$(‘.some-class’) 会取得文档中带有some-class类的所有元素。这里使用的是“.”符合

由于通过选择器获取的元素可能不止一个，因此，一个jQuery对象实际上可以说是一个集合，集合中包含多个被获取到的元素。

有时，我们可能需要通过元素的属性对元素进行选择。在jQuery中，在涉及属性选择符时，jquery使用了XPath中的惯例来标识属性，即将属性前置一个@符号并放在一个方括号中。例如，要选择所有带title属性的链接，可以使用下面的代码：$(‘a[@title]’)。属性选择符允许以类似正则表达式的语法来标识字符的开始(^)和结尾($)，也可以使用(*)来表示字符串中的任意位置。例如，要取得所有电子邮件链接，需要构造一个选择符，用来寻找所有href属性([]@href)且以mailto开头(^=”mailto”)的锚元素。结果如下所示：

…… …… 余下全文

jQuery学习笔记

一、jQuery的概述

jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。jQuery的设计会改变你写JavaScript代码的方式。jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有20K左右，支持CSS1-CSS3,以及基本的xPath，并跨浏览器。

二、使用方法

在需要使用jQuery的页面中引入jQuery的js文件即可。例如：<script type="text/javascript" src="js/jquery.js"></script>，引入之后便可在页面的任意地方使用jQuery提供的语法。

三、语法总结和注意事项

1、关于页面元素的引用

通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换

只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$()转换成jquery对象。 如：$(document.getElementById("msg"))则为jquery对象，可以使

用jquery的方法。由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。

如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。以下几种写法都是正确的：

…… …… 余下全文