zoukankan      html  css  js  c++  java
  • JQuery笔记Ⅰ朦胧篇

    鸣谢张子秋博客 、baidu 、 googlewiki

     

    JQuery--概念篇                                                

    jQuery是一套跨浏览器JavaScript,强化HTMLJavaScript之间的操作。由John Resig20061BarCamp NYC上释出第一个版本。目前全球有28%的站台使用jQuery,是目前最受欢迎的JavaScript库。

    JQ官方网站http://jquery.com/

     

    简介

    jQuery免费且开放源代码,使用GPLMIT许可证双协议。jQuery的语法设计使得许多操作变容易,如操作文档对象(document)、选择DOM元素、动画效果、事件处理、发展Ajax以及其他功能。除此之外,jQuery提供API让开发者将自己所写的功能融入jQuery内。

    微软诺基亚20089时宣布,会在他们的平台上内置jQuery。微软同时将jQuery与其开发工具Microsoft Visual Studio集成。

    jQuery 1.3版以后,引入全新的CSS选择器引擎Sizzle。 同时不再提供Packed版本,因为解压缩的消耗的时间,远大于所节省的下载时间,且不利于Debug,且已有Google AJAX Libraries API等公开站台提供jQueryjs的引用服务,故Packed版本原本的优点已荡然无存。

     

    特点

    例如:jQuery 有下列特色:

    · 跨浏览器的DOM元素选择

    · DOM 巡访与更改 —— 支持 CSS 1-3 与 基本的XPathjQuery 1.2版以后默认取消XPath支持,改为插件支持

    · 事件(Events

    · CSS操纵

    · 特效和动画

    · Ajax

    · 延伸性(Extensibility

    · 工具 —— 例如浏览器版本和each函数。

    · JavaScript插件

    · 轻量级

    · DHTML DOM选择器与链式语法

    经由jQueryDHTML DOM选择器,可以更容易的操作在复杂的树状HTML中的任何DHTML DOM对象,并可用链式语法对同一对象的不同属性进行操作。 

    例如: $("p.surprise").addClass("ohmy").show("slow");

    相当于 

    1 查找HTML<p>标签,且其class"surprise"DHTML DOM对象

    1 将其Class属性多加上一个"ohmy"(通常是配CSS的定义做显示时的配色修改)

    1 打开显示

    · CSS 1-3 选择器 —— 支持CSS选择器选定DOM对象。

    · 跨浏览器 —— 跨浏览器的AJAX解决方式,支持Internet Explorer 6.0+Opera 9.0+Firefox 2+Safari 2.0+Google Chrome 1.0+

    § 简单 —— 较其它JavaScript库更易于入门。

     

    找你很容易

    在编写js库代码时候,你一定经常和$美元符号打交道吧?无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。jQuery也这样做了,但是,它的功能远非如此,瞧瞧以下的jQuery代码,你就会发现它的美丽:   

     var someElement = $("#myId");   

    看起来比其他两个框架的要多了一个#,好,看看下面的用法:   

    $("div p"); // (1) 
    
    $("div.container"); // (2)   
    
    $("div #msg"); // (3)   
    
    $("table a",context); // (4)
    

       

     prototype里看过这样的写法吗?第一行代码得到所有div标签下的p元素。第二行代码得到class containerdiv元素,第三行代码得到标签下面idmsgdiv元素(不过最好别这样写,因为jQuery需要遍历所有的div元素,对于带id的元素,直接用$("#id"))。第四行代码得到context为上下文的table里面所有的连接元素。   

    如果你熟悉CSS,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jQuery就是如此强大,你可以轻易地找到DOM中的任何元素,而这也是jQuery设计之初query的真实含义(查询)。

    JQuery对象

    jquery提供了很多遍历的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):   

    代替body标签的onload

    这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:   

    $(document).ready(function(){   
    
    alert("hello");   
    
    });(1)   
    
    <body onload="alert('hello');">(2) 
    

      

     

    上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作,即$(document).ready (fn)可以在一个页面中重复出现,而不会冲突。基本上Jquery的很多plugin都是利用这个特性,正因为这个特性,多个plugin共同使用起来,在初始化时不会发生冲突。   

    不管怎么说,这个惯例可以分离javascrīptHTML。推荐使用。

    添加VS智能提示

    不再复述如何安装VSjQuery的智能感知,可以参考http://hi.baidu.com/tianhaoer/blog/item/f335818f213dacf1503d9277.html。注意,这里要安装的是针对VS2008SP1的补丁。

     

    参考资料

    jQ官方网站 http://jquery.com/

    百度百科 http://baike.baidu.com/view/1020297.htm

    启用VSjQuery的智能感知http://hi.baidu.com/tianhaoer/blog/item/f335818f213dacf1503d9277.html

    Wiki百科http://zh.wikipedia.org/zh/JQuery

    var a = $("#cid");   
    
    var b = $("<p>hello</p>");   
    
    var c = document.createElement("table");   
    
    var tb = $(c);
    
  • 相关阅读:
    十 mybatis逆向工程
    九 spring和mybatis整合
    八 mybatis查询缓存(一级缓存,二级缓存)和ehcache整合
    七 mybatis的延迟加载
    利用游标循环删除数据
    oracle11g空表导不出来的解决办法
    关闭启动数据库AWR功能
    数据库维护操作
    开启和关闭oracle数据库中的审计功能
    Oracle序列
  • 原文地址:https://www.cnblogs.com/TivonStone/p/1834481.html
Copyright © 2011-2022 走看看