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);
    
  • 相关阅读:
    POJ 1795 DNA Laboratory
    CodeForces 303B Rectangle Puzzle II
    HDU 2197 本源串
    HDU 5965 扫雷
    POJ 3099 Go Go Gorelians
    CodeForces 762D Maximum path
    CodeForces 731C Socks
    HDU 1231 最大连续子序列
    HDU 5650 so easy
    大话接口隐私与安全 转载
  • 原文地址:https://www.cnblogs.com/TivonStone/p/1834481.html
Copyright © 2011-2022 走看看