从零开始学习jquery （一）

http://www.cnblogs.com/liuyuqing/p/4303181.html

从零开始学习jquery （一）

一、jquery是什么

Jquery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。总的来说，就是使用jquery后，我们可以不再萝莉啰嗦的写一大堆JavaScript代码而使用jquery简单代码就能实现其功能了。

二、怎样得到和使用jquery

2.1 如何得到jquery：

2.1.1到官网下载：http://jquery.com/，有两种版本

• Production version - 用于实际的网站中，已被精简和压缩。
• Development version - 用于测试和开发（未压缩，是可读的代码）

2.1.2 加载cdn：cdn是指内容分发网络

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

2.1.3 通过nuget 引用第三方插件(jquery 或者其他的)(什么是nuget？ 自己百度去)，个人认为通过这种方式的体验最好。推荐使用这种方法，特别是对于新手来说。

2.2 如何使用jquery

2.2.1通过nuget引用jquery，先安装nuget，然后右键项目--管理nuget程序包，在左边选择联机 ，输入jquery ，选择后 安装即可以。

安装完成后 我们发现其有四个文件。尤其注意其中一个vsdoc文件其是jquery的智能感应文件，有了它我们可以方便快速的撸码。如果不是通过nuget得到jquery，你需要自己下载对应的vsdoc文件。

 

如何使用jquery呢？我们在需要使用jquery的网页 head标签内引用jquery即可。src是指存放的jquery的文件的物理位置。

1	< script  type="text/javascript" src="Scripts/jquery-2.1.3.js"></ script >

2.2.2 通过cdn加载，国内的话一般使用百度的cdn加载。

1 2 3 4

< head > < script  src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </ script > </ head >

　　

1 2 3 4 5 6

又拍云 CDN:   < head > < script  src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </ script > </ head >

　　

1 2 3 4 5 6

新浪 CDN:   < head > < script  src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </ script > </ head >

　　到这里我们基本了解了如何获得和使用jquery了。

EcitGis

从零开始学习jquery （二）

前面我们了解到了如何获取使用jquery，下面我们主要看看jquery的一些语法。基本的语法

 $(selector).action()。

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有p标签

$("p .test").hide() - 隐藏所有 class="test" 的p标签

$("#test").hide() - 隐藏所有 id="test" 的元素。

我们在使用jquery的时候，通常的会加上这么一句，为什么要加上这么一句呢，这句的意思时，当当前的dom加载完毕后，才会执行函数里面的句子。这样做是为了防止我们一些html dom没有完成加载后，执行JavaScript而产生的一些错误。比如我们要将一个p元素隐藏，但是如果不加上这句的话，在p元素没有加载完成，我们去隐藏它，这样就会产生错误，达不到我们预期的代码效果

$(document).ready(function(){

   // jQuery methods go here...

});

例如，下面的这个例子，运行后p元素是不会隐藏的。但是如果加上前面一句话后，出现的就是一个空白的页面，即p元素被隐藏了。

1 2 3 4 5 6 7 8 9 10 11

< head >      < title ></ title >      < script   type="text/javascript" src="Scripts/jquery-2.1.3.min.js"></ script >      < script  type="text/javascript">          $( "p" ).hide();             </ script > </ head > < body > < p >我将要被隐藏了</ p > </ body >

　　

$(document).ready(function(){})可以简写为$(function(){})
jquery选择器
元素选择器

1 2 3

在页面中选取所有 < p > 元素:   $("p")

　　

1 2 3 4 5 6 7 8

#id 选择器 jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。   页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。   通过 id 选取元素语法如下：   $("#test")

　　

1 2 3 4 5 6

.class 选择器 jQuery 类选择器可以通过指定的 class 查找元素。   语法如下：   $(".test")

　　

1 2 3 4 5 6 7 8 9 10 11 12

$("*")  选取所有元素  $(this) 选取当前 HTML 元素    $("p.intro")    选取 class 为 intro 的 < p > 元素 $("p:first")    选取第一个 < p > 元素  $("ul li:first")    选取第一个 < ul > 元素的第一个 < li > 元素   $("ul li:first-child")  选取每个 < ul > 元素的第一个 < li > 元素    $("[href]") 选取带有 href 属性的元素 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 < a > 元素 $("a[target!='_blank']")    选取所有 target 属性值不等于 "_blank" 的 < a > 元素  $(":button")    选取所有 type="button" 的 < input > 元素 和 < button > 元素   $("tr:even")    选取偶数位置的 < tr > 元素   $("tr:odd") 选取奇数位置的 < tr > 元素

　　jquery 事件：

什么是事件？

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

• 在元素上移动鼠标。
• 选取单选按钮
• 点击元素

在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

例子：当我们点击p元素时，其会消失

1 2 3 4 5 6 7

$( document ).ready( function ()         {             $( "p" ).click( function ()             {                 $( "p" ).hide();             } );         } );

例子：当我们把鼠标移到p元素上时，其背景变为红色，当鼠标离开时背景变为蓝色。

1 2 3 4 5 6 7 8 9 10 11 12

$( document ).ready( function ()         {             $( "p" ).mouseover( function ()             {                 $( "p" ).css( "background-color","Red");             } );               $( "p" ).mouseleave( function ()             {                 $( "p" ).css( "background-color","Blue" );             } );         } );