小强的HTML5移动开发之路（34）—

一、jQuery是什么？

jQuery是由美国人John Resig创建，至今吸引了来自世界各地的众多javascript高手加入其中。

jQuery的创始人和技术领袖，目前在Mozilla担任JavaScript工具开发工程师。著有《Pro
JavaScript Techniques》（即《精通JavaScript》）等经典JavaScript书籍。

jQuery是继prototype之后又一个优秀的javascript框架。其宗旨是——WRITE LESS, DO MORE,写更少的代码，做更多的事。

jQuery是轻量级的js库（压缩后只有21k），这是其他js库所不及的，它兼容css3,还兼容各种浏览器。

下载地址：http://jquery.com/download/

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。

二、目前流行的javascript库

jQuery

EXTJS

Prototype

DWR

Dojo

YUI

MooTools

三、jQuery库包含以下特征

1、HTML元素选取

2、HTML元素操作

3、CSS操作

4、HTML事件函数

5、Javascript特效和动画

6、HTML DOM遍历和修改

7、AJAX

8、Utilites

四、添加jQuery库

可以添加Google或Microsoft的CDN jQuery

Google的CDN
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

</head>
Microsoft的CDN
<head>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

</head>
注意：在HTML5中，不必再写 type="text/javascript" 了，JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。

有两个版本的JQuery可以下载：http://jquery.com/download/

1、Production version ：用于实际的网站中，已经被精简压缩。

2、Development version ：用于测试和开发，未压缩可读。

五、简单实用方法

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

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

$ ：美元符号定义jQuery

selector ：查询和查找HTML元素

action() ：执行对元素的操作

例如：$(this).hide 隐藏当前的HTML元素
<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

	$(document).ready(function(){

  		$("button").click(function(){

  			$(this).hide();

		});

	});

</script>

</head>

<body>

<button type="button">Click me</button>

</body>

</html>
注意上面代码的朋友可能会对上面的如下代码感到疑惑
$(document).ready(function(){

--- jQuery functions go here ----

});
这句代码是为了防止文档在完全加载就运行jQuery代码，否则就可能出现问题。

除了上的this以外，还可以通过其他方式获得元素对象

1、元素选择器

$("#test") ：id="test"的元素。

$("p") ： <p>元素。

$(".test") ：class="test"的元素。

$("p.intro") ： class="intro" 的 <p> 元素。

$("p#demo") ： id="demo" 的 <p> 元素。

2、属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有href属性的元素。

$("[href='#']") 选取所有带有href且值等于#的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3、CSS选择器

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

六、jQuery选择器表

选择器实例选取

* $("*") 所有元素

#id $("#lastname") id="lastname" 的元素

.class $(".intro") 所有 class="intro" 的元素

element $("p") 所有 <p> 元素

.class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素

:first $("p:first") 第一个 <p> 元素

:last $("p:last") 最后一个 <p> 元素

:even $("tr:even") 所有偶数 <tr> 元素

:odd $("tr:odd") 所有奇数 <tr> 元素

:eq(index) $("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）

:gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素

:lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素

:not(selector) $("input:not(:empty)") 所有不为空的 input 元素

:header $(":header") 所有标题元素 <h1> - <h6>

:animated 所有动画元素

:contains(text) $(":contains('W3School')") 包含指定字符串的所有元素

:empty $(":empty") 无子（元素）节点的所有元素

:hidden $("p:hidden") 所有隐藏的 <p> 元素

:visible $("table:visible") 所有可见的表格

s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素

[attribute] $("[href]") 所有带有 href 属性的元素

[attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素

[attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素

[attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素

:input $(":input") 所有 <input> 元素

:text $(":text") 所有 type="text" 的 <input> 元素

:password $(":password") 所有 type="password" 的 <input> 元素

:radio $(":radio") 所有 type="radio" 的 <input> 元素

:checkbox $(":checkbox") 所有 type="checkbox" 的 <input> 元素

:submit $(":submit") 所有 type="submit" 的 <input> 元素

:reset $(":reset") 所有 type="reset" 的 <input> 元素

:button $(":button") 所有 type="button" 的 <input> 元素

:image $(":image") 所有 type="image" 的 <input> 元素

:file $(":file") 所有 type="file" 的 <input> 元素

:enabled $(":enabled") 所有激活的 input 元素

:disabled $(":disabled") 所有禁用的 input 元素

:selected $(":selected") 所有被选取的 input 元素

:checked $(":checked") 所有被选中的 input 元素

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

小强的HTML5移动开发之路（34）——jQuery中的选择器的更多相关文章

小强的HTML5移动开发之路（18）——HTML5地理定位
来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...
小强的HTML5移动开发之路（14）——Video标签详解
来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...
小强的HTML5移动开发之路（13）——HTML5中的全局属性
来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey 快捷键 <!DOCTYPE HTML> ...
小强的HTML5移动开发之路（11）——链接，图片，表格，框架
来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...
小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较
一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...
小强的HTML5移动开发之路（37）——jqMobi快速入门
在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...
小强的HTML5移动开发之路（12）——从一个多媒体标签说起
来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...
小强的HTML5移动开发之路（3）——HTML5与HTML4比较
来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...
小强的HTML5移动开发之路（1）——HTML介绍
来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

amazeui学习笔记一（开始使用3）--兼容性列表compatibility
amazeui学习笔记一(开始使用3)--兼容性列表compatibility 一.总结 1.不要用ie做前端测试,不要碰ie,尽量用google 浏览器: 按照微软官方的说法,IE 开发者工具中的浏 ...
116.C语言异常抛错
#include <stdlib.h> #include <stdio.h> #include <setjmp.h> //异常抛错检测 jmp_buf buf1; ...
redhat6.5安装10201解决办法
rpm --import /etc/pki/rpm-gpg/RPM*yum install -y --skip-broken compat-libstdc++* elfutils-libelf* g ...
右键菜单→新建→BAT 批处理文件
目的:以前编写BAT,通常新建一个文本,然后另存为 .bat,比较麻烦,那么如何右键新建菜单里添加新建批处理文件呢? 代码如下: @echo offcd /d %temp%echo Windows R ...
【习题 6-5 UVA-1600】Patrol Robot
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设dis[x][y][z]表示到(x,y)连续走了z个墙的最短路 bfs一下就ok [代码] /* 1.Shoud it use l ...
Valgrind的用法
Valgrind是执行在Linux上一套基于仿真技术的程序调试和分析工具,它包括一个内核──一个软件合成的CPU,和一系列的小工具,每一个工具都能够完毕一项任务──调试.分析,或測试等. Valgri ...
Loadrunner--集合点
集合点的意思是等到特定的用户数后再一起执行某个操作,比如一起保存,一起提交(我们通常意义上的并发数并不是指一起提交或者一起保存),一般情况下使用不到集合点,不过,订票系统或者促销类需要用到,比如说某个 ...
损失函数 - Andrew Ng机器学习公开课笔记1.2
线性回归中提到最小二乘损失函数及其相关知识.对于这一部分知识不清楚的同学能够參考上一篇文章<线性回归.梯度下降>. 本篇文章主要解说使用最小二乘法法构建损失函数和最小化损失函数的方法. 最 ...
javascript进阶课程--第三章--匿名函数和闭包
javascript进阶课程--第三章--匿名函数和闭包一.总结二.学习要点掌握匿名函数和闭包的应用三.匿名函数和闭包匿名函数没有函数名字的函数单独的匿名函数是无法运行和调用的可以把匿 ...
POJ 3169 Layout （HDU 3592）差分约束
http://poj.org/problem?id=3169 http://acm.hdu.edu.cn/showproblem.php?pid=3592 题目大意: 一些母牛按序号排成一条直线.有两 ...

小强的HTML5移动开发之路（34）——jQuery中的选择器

小强的HTML5移动开发之路（34）——jQuery中的选择器的更多相关文章

随机推荐

热门专题