jQuery学习笔记

jQuery是一个JavaScript函数库，包含以下特性：

HTML元素选取

HTML元素操作

CSS操作

HTML事件函数

JavaScript特效和动画

HTML DOM遍历和修改

AJAX

Utilities

 

下载使用jQuery：

jQuery官网下载地址：http://docs.jquery.com/Downloading_jQuery

Google Code下载地址：http://code.google.com/p/jqueryjs/downloads/list

主要包括：

min：压缩后的jQuery类库，在正式环境上使用。如：jquery-1.3.2.min.js

vsdoc：在Visual Studio中需要引入此版本才能启动智能感知。如：jquery-1.3.2-vsdoc2.js

release包：里面有没有压缩的jquery代码, 以及文档和示例程序。如：jquery-1.3.2-release.zip

启动Visual Studio对jQuery的智能感知：（没有实验成功）

 

jQuery语法：

jQuery语法是为HTML元素的选取编制，可以对元素执行某些操作。

基础语法：$(selector).action()

$  定义jQuery

选择器(selector)   查询和查找HTML元素

action()   执行对元素的操作

文档就绪函数：防止文档在完全加载（就绪）之前运行 jQuery 代码。

$(document).ready( function (){
---  jQuery functions go here  ----
});

 

 

 jQuery选择器：选择器参考手册

// jQuery 元素选择器
$( " p " )  // 选取 <p> 元素。
$( " p.intro " )  // 选取所有 class="intro" 的 <p> 元素。
$( " p#demo " )  // 选取 id="demo" 的第一个 <p> 元素

// jQuery 属性选择器
$( " [href] " )  // 选取所有带有 href 属性的元素。
$( " [href='#'] " )  // 选取所有带有 href 值等于 "#" 的元素。
$( " [href!='#'] " )  // 选取所有带有 href 值不等于 "#" 的元素。
$( " [href$='.jpg'] " )  // 选取所有 href 值以 ".jpg" 结尾的元素。

// jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
// 实例
$( " p " ).css( " background-color " , " red " );

// 更多实例：
$( this )  // 当前 HTML 元素 
$( " p " )  // 所有 <p> 元素 
$( " p.intro " )  // 所有 class="intro" 的 <p> 元素 
$( " .intro " )  // 所有 class="intro" 的元素 
$( " #intro " )  // id="intro" 的第一个元素 
$( " ul li:first " )  // 每个 <ul> 的第一个 <li> 元素 
$( " [href$='.jpg'] " )  // 所有带有以 ".jpg" 结尾的 href 属性的属性 
$( " div#intro .head " )  // id="intro" 的 <div> 元素中的所有 class="head" 的元素 

 

jQuery 事件：jQuery事件参考手册

 

jQuery HTML操作：jQuery HTML操作

改变HTML内容：

$(selector).html(content)  // 改变所匹配的 HTML 元素的内容（innerHTML）

 

添加HTML内容：

$(selector).append(content)   // 向所匹配的 HTML 元素内部追加内容。
$(selector).prepend(content)   // 向所匹配的 HTML 元素内部预置（Prepend）内容。
$(selector).after(content)   // 在所有匹配的元素之后插入 HTML 内容。
$(selector).before(content)   // 在所有匹配的元素之前插入 HTML 内容。

 

 

jQuery CSS函数：jQuery CSS函数

$(selector).css(name,value)  // 为所有匹配元素的给定 CSS 属性设置值
$( " p " ).css( " background-color " , " yellow " );
$(selector).css({properties})  // 为所有匹配元素的一系列 CSS 属性设置值
$( " p " ).css({ " background-color " : " yellow " , " font-size " : " 200% " });
$(selector).css(name)  // 返回指定的 CSS 属性的值
$( this ).css( " background-color " );

 

jQuery Size 操作：

•$(selector).height(value)
•$(selector).width(value)