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)

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。