一、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 元素

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

  1. 小强的HTML5移动开发之路（18）——HTML5地理定位

    来自:http://blog.csdn.net/dawanganban/article/details/18192091 在前面的<小强的HTML5移动开发之路(2)--HTML5的新特性> ...

  2. 小强的HTML5移动开发之路（14）——Video标签详解

    来自:http://blog.csdn.net/dawanganban/article/details/18180605 在前面的小强的HTML5移动开发之路(5)--制作一个漂亮的视频播放器中制作了 ...

  3. 小强的HTML5移动开发之路（13）——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

  4. 小强的HTML5移动开发之路（11）——链接，图片，表格，框架

    来自:http://blog.csdn.net/dawanganban/article/details/18098193 一.HTML是什么? HTML(hypertext mark-uplangua ...

  5. 小强的HTML5移动开发之路（42）——HTML4与HTML5文档结构比较

    一般来说,人们在书写包括HTML在内的文档时,习惯上按照类似于"章--节--小节"这样的层次结构来进行. 在HTML4中的描述方式: <html> <head&g ...

  6. 小强的HTML5移动开发之路（37）——jqMobi快速入门

    在<小强的HTML5移动开发之路(33)-- jqMobi基础>中我们了解了什么是jqMobi,并从官方下载了jqMobi开发包,下载后解压目录如下: 拷贝上面的/css目录./plugi ...

  7. 小强的HTML5移动开发之路（12）——从一个多媒体标签说起

    来自:http://blog.csdn.net/dawanganban/article/details/18136813 一.视频播放 <html> <head> <ti ...

  8. 小强的HTML5移动开发之路（3）——HTML5与HTML4比较

    来自:http://blog.csdn.net/dawanganban/article/details/17652873 在前面介绍了HTML5的新特性,新标签的使用,智能表单设计,引入多媒体对象,C ...

  9. 小强的HTML5移动开发之路（1）——HTML介绍

    来自:http://blog.csdn.net/dawanganban/article/details/17591373 HTML是HyperText Markup Language(超文本标记语言) ...

随机推荐

  1. Android 为什么要有handler机制？handler机制的原理

    为什么要有handler机制? 在Android的UI开发中,我们经常会使用Handler来控制主UI程序的界面变化.有关Handler的作用,我们总结为:与其他线程协同工作,接收其他线程的消息并通过 ...

  2. css实现水波纹效果

    1. HTML 代码: <div class="example"> <div class="dot"></div> < ...

  3. DB2学习总结（1）——DB2数据库基础入门

    DB2的特性 完全Web使能的:可以利用HTTP来发送询问给服务器. 高度可缩放和可靠:高负荷时可利用多处理器和大内存,可以跨服务器地分布数据库和数据负荷:能够以最小的数据丢失快速地恢复,提供多种备份 ...

  4. iOS INVALID_USER_SCODE 定位 用户安全码未通过

    iOS 高德地图API不能定位及INVALID_USER_SCODE问题,有需要的朋友可以参考下. 一.在使用高德地图的API的时候,没有办法实现定位,在这里说一下在真机测试的时候出现没法定位应该注意 ...

  5. 如何使用SVN协调代源代码，多人同步开发

    转自linFen原文如何使用SVN协调代源代码,多人同步开发 1.什么是SVN SVN是一种版本管理系统,前身是CVS,是开源软件的基石.即使在沟通充分的情况下,多人维护同一份源代码的一定也会出现混乱 ...

  6. [Node] Setup an Nginx Proxy for a Node.js App

    Learn how to setup an Nginx proxy server that sits in front of a Node.js app. You can use a proxy to ...

  7. 原生js螺旋运动

    window.onload=function(){ var oSpiral=document.getElementById('spiral'); var oUl=oSpiral.getElements ...

  8. 【50.26%】【hdu 5907】Find Q

    Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/131072 K (Java/Others) 问题描述 Byteasar迷恋上了 ...

  9. 【35.37%】【codeforces 556C】Case of Matryoshkas

    time limit per test2 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  10. 仿凤凰时时彩代购平台源代码[ASP+MSSQL]完整下载

    源代码简单介绍 : 适用范围:  时时彩源代码,时时彩程序,开奖平台源代码,投注平台源代码,仿凤凰时时彩源代码 执行环境:  ASP+MSSQL 其它说明:仿凤凰时时彩代购平台源代码.网上售价8000 ...