自我jQuery学习精华总结

因为项目需要,同时也因为兴趣,在近一段时间研究和使用了jQuery,它真的是太强大了,代码非常的优雅和简洁,好后悔现在才开始了解它,虽然目前网络上关于jQuery的资料、学习心得,教程多得你看不完,但我还是想把自己的一点学习经验写下来,不管是提供给那些想学习jQuery的人,还是保留一份学习笔记,我觉得这都是很有必要的。
    在说jQuery之前,不得不提下现在也非常流行的mootools框架。在网上,很多人把mootools比作java,把jquery比作perl。我没研究过mootools,也不发表意见,这完全没有意义。只要本身不存在重大缺陷就可以了。用好了都强大。好比Java和.NET争论了这么多年,一样的道理。前端UI分享
    jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助开发的库。是继prototype之后又一个优秀的JavaScript框架。它如暴风雪般席卷WEB前端开发,jQuery已确定成为ASP.NET MVC和Visual Studio 2008版本中的正式组成部分,诺基亚手机平台Web Run-Time也将纳入jQuery。所以,请相信,选择jQuery是不会错的。如果你看到这里还有犹豫,那么我再说个理由,应该能打消你的最后疑虑了。2009年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的加载速度更快。前端UI分享

$(function(){
    $("#chkbox").click(
        function(){
            alert("hello jQuery!");
        }
    );
});
<input type="checkbox" id="chkbox"/>

上面是一种简写方法,不管是初始化函数还是绑定事件。推荐采用这种写法。
    ※下面这种写法是不可取的,行为一定要和DOM分离:

function chkClick(){
    alert("hello jQuery");
}
<input type="checkbox" id="chkbox" onclick="chkClick()"/>

※不要再把样式写到DOM里面,这是很难维护的一件事情:

<span style="font-size:15pt;color:red">hello jQuery</span>

应该统一采用CSS文件定义或是定义class类,或是对ID进行定义:前端UI分享

.spanClass{
    font-size:15pt;
    color:red;
}
<span class="spanClass">hello jQuery</span>

#hello_span{
    font-size:15pt;
    color:red;
}
<span id="hello_span">hello jQuery</span>

是否对jQuery有了一些认识呢?下次我们继续讨论。

自我jQuery学习精华总结

时间: 2024-10-11 20:13:33

自我jQuery学习精华总结的相关文章

jQuery学习之开篇

吐槽 最近比较烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,如果没有掌握JS.JQuery想要进行后续的开发会非常困难.得,又得学下JQuery,一种蛋蛋的忧伤.一直认为前端的水非常的深这段时间算是见识到了,哎,不过工作还的继续,吐槽完了,卯足干劲充电吧! 前言 某前端白痴一个,会点html+css+js.JQuery的学习书籍看的是<锋利的JQuery>,先入门看了两章,感觉

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jquery学习(一)

简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type="text/javascript"></script> 首先一定要注意的是引入的路径 按照案例写一个简单的DEMO <%@ page language="java" contentType="text/html; charset=UT

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}

jQuery学习总结(一)

jQuery学习完了,但是感觉知识点很杂,想JavaScript一样,所以还是总结一下比较好. 1.DOCTYPE 在每次的html页面前都会有这样一句话,那么它有什么作用呢? DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档.也就是告知浏览器的渲染显示方式. 2.新的方法--专属jQuery (1)$()方法: 可以通过$()方法来获得页面的指定节点,参数是某种CSS的选择器. var userN

jQuery学习-事件之绑定事件(三)

在上一篇<jQuery学习-事件之绑定事件(二)>我们了解了jQuery的dispatch方法,今天我们来学习下handlers 方法: handlers: function( event, handlers ) {         var sel, handleObj, matches, i,             handlerQueue = [],             delegateCount = handlers.delegateCount,             cur =

jQuery学习-------jQuery选择器

基本选择器: id选择器:$("#id") 标签选择器:$("tag") 类选择器:$(".classname") 通配选择器:$("*") 组选择器:$("selector1,selector2,...,selectorN") 层次选择器: 包含选择器:$("ancestor descendant") 子选择器:$("parent>child") 相邻选择器:

jQuery学习示例------点击红色方块实现左右晃动

<!DOCTYPE html> <html> <head> <title>test</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javas

jQuery学习--------jQuery过滤器

each() 方法规定为每个匹配元素规定运行的函数. 过滤: 下标过滤: eq(index) //获取第index个元素 类过滤: hasClass(class)  //检查当前元素是否含有某个特定的类,如果有,返回true 例如:$("div").hasClass("div1") //含有div1类的div元素 表达式过滤: filter(expr)  //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式 filter(fn)    //筛选出与指定