Jquery入门
jQuery入门教程(很不错)
jQuery入门[1]－构造函数/archive/2008/03/05/1091816.html jQuery优点◦体积小（v1.2.3 15kb）◦丰富的DOM选择器(CSS1-3 + XPath) ◦跨浏览器（IE6,FF,Safari,Opera）◦链式代码◦强大的事件、样式支持◦强大的AJAX功能◦易于扩展，插件丰富jQuery的构造函数接收四种类型的参数：jQuery(expression,context)jQuery(html)jQuery(elements)jQuery(fn)第一种根据表达式（ID，DOM元素名，CSS表达式，XPath表达式）找出文档中的元素，并组装成一个jQuery对象返回。
DEMO:DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>jQuery basic title><style type="text/css">.selected{background-color:Yellow;}style><script src="../scripts/jquery-1.2.3.intellisense.js"type="text/javascript">script>head><body><h3>jQuery构造函数h3><ul><li>jQuery(expression,context)li><li>jQuery(html)li><li>jQuery(elements)li><li>jQuery(fn)li>ul><script type="text/javascript">script>body>html>将以下jQuery代码加入文末的脚本块中：jQuery("ul>li:first").addClass("selected");页面运行效果如下：其中jQuery()可替换为快捷方式$()，如果$被其它对象占用，可使用jQuery.noConflict()函数取消快捷方式。
jQuery基础入门ppt
jQuery的选择器
jQuery 选择器
选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 简洁的写法
完善的事件处理机制
基本选择器
基本选择器是 jQuery 中最常用的选择 器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
删除节点
remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选 元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删 除. 这个方法的返回值是一个指向已被删除 的节点的引用. empty(): 清空节点 – 清空元素中的所有后 代节点(不包含属性节点).
创建节点和插入节点示例 var newP =$("<p>武广高速铁路即将通车！ </p>"); newP.insertAfter(―#chapter‖); //将创建的newP元 素插入到ID为#chapter的元素之后 或者 newP.appendTo(―body‖); //插入到body元素里
内容过滤选择器示例
改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa $("p:cotains(di)") 改变不包含子元素(或者文本元素) 的 div 空 元素的背景色为 # bbffaa 改变含有 class 为 mini 元素的 p元素的背景 色为 # bbffaa $("p:has(.mini)") 改变含有子元素(或者文本元素)的div元素 的背景色为 # bbffaa
Jquery基础知识之菜鸟教程
Jquery基础知识之菜鸟教程 jquery核⼼： write less do more1.jQuery 语法基础语法： $(selector).action();2.⽂档就绪事件：⽂档完全加载完后执⾏函数第⼀种⽅式： $(document).ready(function(){});第⼆种⽅式： $(function(){});3.jQuery 选择器元素选择器 $("p").hide(); // 所有的p元素隐藏#id选择器 $("#test").hide();//id为test的元素隐藏.class选择器 $('.test').hide(); // class为test的所有元素隐藏$("*") //选取所有元素$(this) // 选取当前HTML元素$("p .intro") // 选取class 为intro的p元素$("ul li:first") //选取第⼀个ul元素下的第⼀个li元素$('ul li:first-child') //选取每个ul下的第⼀个li元素$('[href]') //选取所有带href属性的元素$('a[target="_blank"]') //选取所有a元素(带有target属性值为_blank)$('a[target !="_blank"]') //选取所有a元素(不带有target属性值为_blank)$(":button") // 选取所有type=“button”的input和button元素$("tr：even") // 选取所有的偶数⾏$("tr:odd") //选取所有的奇数⾏4.jQuery 事件事件：页⾯对不同访问者的响应⿏标事件： click dbclick mouseenter mouseleave hover(悬停事件)键盘事件： keypress keydown keyup blur表单事件： submit change focus unload⽂档窗⼝事件：load resize scroll4.1 jQuery 事件⽅法语法$("p").click(function(){//点击p元素后执⾏的代码});$("p").dblclick(function(){ //双击事件$(this).hide();});$("#p1").mouseenter(function(){ // ⿏标指针穿过元素事件alert("You entered p1!");});$("#p1").mouseleave(function(){// ⿏标指针离开元素事件alert("Bye! You now leave p1!");});$("input").focus(function(){// 元素获得焦点事件$(this).css("background-color","#cccccc");});$("input").blur(function(){// 元素失去焦点事件$(this).css("background-color","#ffffff");});5.jQuery 效果5.1 隐藏和现实HTML元素：$(selector).hide(speed,callback);$(selector).show(speed,callback);例：$("button").click(function(){$("p").hide(1000);//1000毫秒，隐藏的速度，1s钟隐藏});5.2 来回切换隐藏和显⽰⽤ toggle();<button>隐藏/显⽰</button>$("button").click(function(){$("p").toggle();});6. 淡⼊淡出$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);$("button").click(function(){ //三个div逐次出现$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});$("button").click(function(){ //三个div逐次淡出，依次看不见$("#div1").fadeOut();});<button>点击淡⼊/淡出</button>$("button").click(function(){$("#div3").fadeToggle(3000);});$("button").click(function(){$("#div1").fadeTo("slow",0);//0完全透明，div1看不见了});7. 滑动⽅法$(selector).slideDown(speed,callback); //向下收起来$(selector).slideUp(speed,callback); //向上收起来$(selector).slideToggle(speed,callback);8.动画：默认情况下，所有 HTML 元素都有⼀个静态位置，且⽆法移动。
jquery基础
jQuery基础教程一(传说中的ready)首先我们来说明一下什么是JqueryjQuery 是一个新型的JavaScript库.jQuery是一个简洁快速的JavaScript库，它能让你在你的网页上简单的操作文档、处理事件、运行动画效果或者添加Ajax交互。
jQuery的设计会改变你写JavaScript代码的方式。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不用的应用程序。
jQuery是一个轻量级的脚本，其代码非常小巧，JavaScript包只有15K左右。
jQuery支持CSS1-CSS3,以及基本的xPathjQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+ 第一步 ready函数如果你需要一些函数需要在DOM加载就绪以后才能执行,当然window.onload()能实现同样的功能，但当window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。
要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的.$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。
通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。
$(document).ready(function() {// do stuff when DOM is ready//当文档载入后从此处开始执行代码});jquery基础教程二(鼠标点击事件)下面我们来看看jquery如何给 DOM 各个元素批量绑定事件<SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){//$("div")就是页面中所有的 div标签alert("Hello World!");})})//--></SCRIPT>$("div").click $("div")就是页面中所有的 div标签这句话就是给所有的标签为div的元素绑定了一个click事件即当所有div 被鼠标单击的时候执行 alert("Hello World!");<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jquery基础教程二（demo鼠标点击事件）</title><script language="javascript"src="/demo/jquery.js"></script><SCRIPT LANGUAGE="JavaScript"><!--$(document).ready(function() {$("div").click(function(){alert("Hello World!");})//--></SCRIPT></head><body><div>Hello World!</div></body></html>程序演示地址 : /demo/jquery基础教程二demo鼠标点击事件.htmljquery基础教程三(css的操作之addClass和removeClass)下面我们看看jquery对css的操作方法 addClass和removeClassaddClass为每个匹配的元素添加指定的类名。
基础jquery知识点
基础jquery知识点基础jQuery知识点jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。
在网页开发中，jQuery非常常用，是前端开发的基础知识之一。
下面将介绍一些基础的jQuery 知识点。
一、选择器（Selectors）选择器是使用jQuery的关键，它允许我们通过各种方式选择HTML元素，并对其进行操作。
常见的选择器包括元素选择器、类选择器、ID选择器等。
1. 元素选择器元素选择器使用元素的标签名作为选择器，可以选择所有匹配的元素。
例如，使用$("p")可以选择页面中的所有段落元素。
2. 类选择器类选择器使用元素的class属性作为选择器，可以选择具有相同类名的所有元素。
例如，使用$(".class")可以选择页面中所有具有class为class的元素。
3. ID选择器ID选择器使用元素的id属性作为选择器，可以选择具有相同id的元素。
例如，使用$("#id")可以选择具有id为id的元素。
二、事件处理（Event Handling）事件处理是jQuery的另一个重要功能，它允许我们对HTML元素进行事件绑定，并在事件发生时执行相应的操作。
1. click事件click事件在元素被点击时触发，我们可以使用click()函数来绑定click事件，并定义事件处理函数。
例如，使用$("button").click(function(){})可以在点击按钮时执行相应的操作。
2. hover事件hover事件在鼠标悬停在元素上时触发，我们可以使用hover()函数来绑定hover事件，并定义事件处理函数。
例如，使用$("div").hover(function(){}, function(){})可以在鼠标悬停在div元素上时执行第一个函数，鼠标移出时执行第二个函数。
jquery前端基础知识
Jquery前端培训材料1. Jquery介绍1.1简介Jquery是一款革命性的JavaScript库，秉承着“以用为本”的设计理念。
倡导“写更少的代码，做更多的事”（write less,do more），极大的提升了JavaScript开发体验。
jquery的核心特性可以总结为:口兼容主流浏览器.支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+等，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
口具有独特的链式语法和短小清晰的多功能接口。
口具有高效灵活的CSS选择器。
并且可对CSS选择器进行扩展口拥有便捷的插件扩展机制和丰富的插件1.2总体架构Jquery的模块可以分为3部分:入口模块、底层支持模块和功能模块，如图所示，在构造Jquery对象模块中，如果在调用构造函数jQuery()创建jQuery对象时传入了选择器表达式，则会调用选择器Sizzle遍历文档，查找与之匹配的DOM元素，并创建一个包含了这些DOM元素引用的jquery对象。
选择器Sizzle是一款纯JavaScript实现的CSS选择器引擎，用于查找与选择器表达式匹配的元素集合。
工具方法模块提供了一些编程辅助方法，用于简化对jquery对象. DOM元素数组对象字符串等的操作。
Jquery代码整体结构代码如下:(function (window, undefined) {//构建jQuery对象var document = window.document,navigator = window.navigator,location = window.location;var jQuery = (function () {var jQuery = function (selector, context) {return new jQuery.fn.init(selector, context, rootjQuery);},_jQuery = window.jQuery;//............................//............................return jQuery; //981行})();//工具方法:Utilities;//回调函数列表Callbacks//异步队列Deferred//浏览器功能测试Support//数据缓存Cache//属性操作Attributes//队列Queue//事件系统Event//选择器Sizzle//Dom遍历Traversing//Dom操作Manipulation//样式操作CSS//异步请求Ajax//动画Effects//坐标Offset. 尺寸Dimensionswindow.jQuery = window.$ = jQuery;})(window);2. 核心模块2.1 jquery对象从上面的代码中可以看出，jquery的所有代码都被包裹在一个立即执行的匿名表达式中，这种代码结构称为“自调用匿名函数”。
JQuery基础
JQuery基础1、JQuery概念A、Jquery是一个优秀的Javascript框架。
它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。
jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。
jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
B、JavaScript的缺点:控件的操作方式不统一，不同浏览器容易出观兼容问题。
为了简化操作，出现了许多对JavaScript封装的函数库比如Prototype、JQuery等。
C、JQuery的优点:小巧、方便、功能强大。
插件丰富、开源、免费。
D、VS在VS2010中已经实现自动完成功能，VS2008需要安装VSSP1补丁和VS90SP1-KB958502-X86补丁才能更好的支持，然后引用jquery-1.4.1.js，jquery-1.4.1-vsdoc.js 放在同目录下，VS2008中才会有自动提示和自动完成功能。
E、JQuery文件说明:jquery-1.4.2.js是JQuery主文件。
jquery-1.4.2.min.js是压缩板JQuery主文件。
jquery-1.4.2-vsdoc.js是JQuery在VS中的自动提示功能。
2、JQuery之ReadyA、JQuery的read和Dom onload的区别:onload是所有Dom元素创建完毕触发，而ready 则是Dom元素创建完就触发，这样可以提高网页的响应速度。
3、JQuery内置函数A、$.map(array, function)函数:对数组array中每个元素调用function函数逐个处理，function 函数处理返回一个新的数组。
JQuery入门
效果：看一个JQ写 的tab切换的代码
jQuery选择器
jQuery选择器的优势 ➢ 简洁的写法 ➢ 支持CSS1到CSS3选择器 ➢ 完善的处理机制 jQuery选择器的分类 ➢ 基本选择器 ➢ 层次选择器 ➢ 过滤选择器
基本选择器
选择器 #id .class element
描述
返回
示例
根据给定的id匹配一个元素 单个元素 $(“#test”)选取id为test的元素
选取不包含子元素或者文 本的空元素
$(‘div:empty’)选取 集合元素 不包含子元素和文本的
空元素<div>
选取含有选择器所匹配的 元素的元素
$(‘div:has(p)’)选取 集合元素 含有<p>元素的<div>
元素
选取含有子元素或者文本 的元素(非空元素)
$(“div:parent”)选取 集合元素 拥有子元素或文本元素
集合元素
$(“div,span,p.myClass”)选取 所有<div>，<span>和拥有class 为myClass的<p>标签的一组元素
层次选择器
两个标签名之 间用空格分隔
选择器
描述
返回值
示例
$(“ancestor desendant”)
选取ancestor元素里的所有 descendant(后代)元素
如今，jQuery已经成为最流行的javascript库。
配置jQuery环境
获取jQuery类库 进入jQuery官网，下载jQuery文件。 2.0及之后的版本，不兼容IE6 7 8
在页面中引入jQuery 和其他JS文件引入一样：
jQuery前端开发入门指南
jQuery前端开发入门指南一、什么是jQueryjQuery是一个用于简化HTML文档遍历、事件处理、动画设计等操作的快速、简洁的JavaScript库。
它为开发者提供了一种方便的方式来处理网页中的交互和操作。
1.1 jQuery的优势相比于传统的JavaScript操作，jQuery具有以下优势：- 简洁优雅：jQuery提供了简洁的API，使得开发者能够更简单地完成复杂的操作。
- 跨浏览器兼容性：jQuery解决了不同浏览器间的兼容性问题，使得代码在各种浏览器中都能正常运行。
- 强大的选择器：jQuery提供了强大的选择器，能够方便地选择DOM元素进行操作。
- 丰富的插件：jQuery生态系统中有大量的插件可供选择，可以快速实现各种功能。
- 完善的文档：jQuery拥有完善的官方文档，提供了详细的API说明和示例。
1.2 jQuery的基本用法使用jQuery，首先需要在HTML文件中引入jQuery库。
可以通过下载并引入本地文件，也可以使用CDN服务加速加载。
然后，可以通过选择器选中元素，再对选中的元素进行各种操作，例如修改样式、添加事件等。
最后，通过事件处理函数等交互操作来实现动态效果。
二、jQuery选择器选择器是jQuery的核心功能之一，它允许开发者根据元素的标签名、类名、ID、属性等特征来选取元素。
2.1 基本选择器基本选择器允许通过标签名、类名、ID等基本特征直接选取元素。
例如：- $("p")：选取所有p标签的元素。
- $(".class")：选取所有类名为class的元素。
- $("#id")：选取ID为id的元素。
2.2 层次选择器层次选择器允许开发者根据元素之间的层次关系来选取元素。
例如：- $("parent child")：选取parent元素下所有的子元素中的child元素。
- $("prev + next")：选取prev元素之后紧邻的next元素。
JQuery初学笔记
标准文件JQuery应用Jquery是继prototype之后的又一个优秀的javascript框架首先要引入Jquery<script type="text/javascript" src="WEB-INF/jquery-1.4.2.min.js"></script>第1章访问和操作DOM元素1.获取DOM对象var tDiv = $("#divTmp");// 获取DOM对象var username = $("#username").val();// 得到文本框内容var usersex = $("#usersex").is(":checked")?"男":"女";// 获取单选钮的值var isno = $("#isno").is(":checked")?"是":"否";// 获取复选框的值// 显示提示文本元素和内容$("#divtip").css("display","blok").html(username+"<br>"+usersex+"<b r>"+isno);<form action="" method="post">请输入如下信息：姓名：<input type="text" name="username" id="username">性别：<input type="radio" name="usersex" id="usersex" value="男">男<input type="radio" name="usersex" id="usersex" value="女">女婚否：<input type="checkbox" name="isno" id="isno" value="是">是<input type="checkbox" name="isno" id="isno" value="否">否<div class="divbtn"><input type="button" name="subbtn" id="subbtn" value="提交"> </div><div id="divtip"></div></form>2.为元素设置属性attr()方法可以对元素的属性进行获取、设置，removeattr()方法可以删除某一指定属性。
15天学会jquery(完整版)
td { }
padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center;
没有了 PHPjavascript 和我一点也不亲近了。但是我还是尽全力保持头脑清醒， 并尽量保持用 AJAX 去思考。
所以当我遇到 jQuery 的时候我想:“还需要另外一个 javascript 库吗?不了,谢 谢…”
why
为什么我改变我我对 jQuery 的看法，以及为什么你要考虑去使用它? 很简单, 只要你看一眼过使用 jQuery 的页面你就会发现它是如此的简单易用.只用很少 的几行,就能表现出很优雅的效果. 有一天当我突然看到一些用 jQuery 写的代 码时我一下子豁然开朗了. 早茶的过程中,我例行公务的去翻阅我的订阅,去看 每日必看的设计博客的时候我看到了一个用 jQuery 写的 javascript 的例子.事 实证明,这些代 码还是有些和浏览器关联的 bug,不过这些概念还是我以前从来 没有见过的.
</tr> <tr>
<td>邓国梁</td> <td>23</td> <td>31540205</td> <td>gl.deng@</td> </tr> <tr> <td>邓国梁</td> <td>23</td> <td>31540205</td> <td>gl.deng@</td> </tr> <tr>
jQuery入门
一．jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
编程。
jQuery 很容易学习。
很容易学习。
我们将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
二．jQuery 语法jQuery 语法是为 HTML 元素的选取编制，并可以对元素执行某些操作。
并 基础语法是：$(selector).action()• 美元符号定义 jQuery • 选择符（selector）“查询”和“查找” HTML 元素 • action() 执行对元素的操作$(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有 class="test" 的段落 $("#test").hide() - 隐藏第一个 id="test" 的元素文档就绪函数在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：$(document).ready(function(){});这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
下面是两种假如文档完全加载之前运行函数的话，操作失败的情况：• 试图隐藏一个不存在的元素。
• 获得未完全加载的图像的大小。
三．jQuery选择器选择器允许您对元素组或单个元素进行操作 关键点是学习 jQuery 选择器是如何准确地选取您希望选到的元素。
选择器允许您对 DOM 元素组或单个 DOM 节 点进行操作。
（1）jQuery 元素选择器 ）jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
JQuery入门、手册及教程
浅谈JQUREY（摘自/softwave/article/details/2070815）JQUERY手册（第七页，附教程）Jquery是继prototype之后又一个优秀的Javascript框架。
对prototype我使用不多，简单了解过。
但使用上jquery 之后，马上被她的优雅吸引住了。
有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery 就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。
使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
一，找到你了！还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。
没错，jquery也跟风了。
为达到document.getElementById()的目的，jquery是这样写的：Java代码1.var someElement = $("#myId");[java]view plaincopyprint?1.var someElement = $("#myId");看起来比其他两个框架的要多了一个#，好，看看下面的用法：Java代码1.$("div p");(1)2.$("div.container")(2)3.$("div #msg");(3)4.$("table a",context);(4)[java]view plaincopyprint?1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4)在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。
jQuery入门
9 2-9
如何获取页面元素（ 如何获取页面元素（3）
支持层级写法 $(“#div1 .c1 input, #div2 .c1 p”)，取div1 c1 中的 中的input ， 中的c1样式表中的 和div2中的 样式表中的 元素 中的 样式表中的p元素 支持限定写法 $(“#mytable tr :odd”)，取mytalbe中的奇数行 ， 中的奇数行 $(“#mytable tr :first”)，取mytalbe中的第一行 ， 中的第一行
要取得被原始DOM对象，可使用下面的方法取到： 对象，可使用下面的方法取到： 要取得被原始 对象 get()返回原始 返回原始DOM对象集合 返回原始 对象集合 get(index)按下标返回一个原始 按下标返回一个原始DOM如何获取页面元素（ 如何获取页面元素（1）
JQuery入门 JQuery入门
1
第一章
下午9时43分28秒
目标
了解jQuery是什么 是什么 了解 学习jQuery的方法 的方法 学习 jQuery基本操作入门 基本操作入门
2 2-2
jQuery是什么 jQuery是什么
jQuery是目前使用最广泛的 是目前使用最广泛的javascript函数库，可以方 函数库， 是目前使用最广泛的 函数库 可以方 便地处理 HTML documents、events、实现动画效果， 、 、实现动画效果， 交互。 同类型的js函数 并且方便地为网站提供 AJAX 交互。（同类型的 函数 库还有YUI，Ext-js，dojo，prototype等） 库还有 ， ， ， 等 使用广泛 全世界排名前100万的网站，一半以上使用 万的网站， 全世界排名前 万的网站 一半以上使用jQuery
4 2-4
jquery从入门到精通
jQuery 的第一个例子通过这个例子可以对jQuery的使用有个基本的认识，jQuery的事件句柄、选择器、基本语法结构，你可以复制这些代码运行感受一下。
CodeCode<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN " "/TR/xhtml1/ DTD/xhtml1-transitional.dtd"><html xmlns="/ 1999/xhtml"><head runat="server"><title></title><script src="jquery.js" typ e="text/javascript"></script><style type="text/css">.red{background-color: R ed;}.green{background-color: G reen;}.blue{background-color: Blue;}</style><script type="text/javascri pt">$(document).ready(function() {$("div").addClass("blue");//$("#olID>li").add Class("green");$("#olID>li").hover (function() {$(this).addClas s("red")},function() {$(this).removeC lass("red")});$("#olID>li:last"). hover(function() {$(this).addClas s("green");},function() {$(this).removeC lass("green");})})</script></head><body><form id="form1" runat="ser ver"><div><ol id="olID"><li>Terry.Feng.C</l i><li>冯瑞涛</li><li>fengruitao@gmai </li></ol></div></form></body></html>jQuery 选择器的使用jQuery 能如此的流行，很重要的一点也许就是他有非常强大且灵活的选择器，下面是一个使用选择器的例子，同样你可以复制下面的代码运行一下。
jQuery基础教程
jQuery基础教程jQuery是什么？jQuery是⼀个JavaScript常⽤的⼯具函数库。
jQuery是⼀个轻量级的"写的少，做的多"的JavaScript库。
jQuery当中包含有以下⼀些常⽤功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities下⾯的内容当中，我们会逐⼀的介绍jQuery的常⽤内容。
学习jQuery的⼼态以练为主，多看多练以js为基础，更好的理解jQueryjQuery只是js的⼀个函数库，不能忘记jsjQuery的版本问题⽬前jQuery有三个⼤版本，1.xx 、 2.xx 和 3.xx ，三个版本当中，1版本兼容性最⾼，可以有效的兼容ie浏览器，6，7，8，9都能得到⼀个很好的兼容，2版本则最低只能兼容到ie9，⽽3版本则彻底放弃了ie9以下的浏览器。
但是却新增加了很多的使⽤的⽅法，并且代码的安全性也增加很多，例如可以很好的防⽌xss攻击等。
jQuery的使⽤⾸先，我们可以根据需要下载⼀个指定版本的jquery⽂件，当然也可以选择使⽤cdn⽂件。
js 官⽅⽹址: /常⽤CDN:<script src="/jquery/1.10.2/jquery.min.js"></script> 百度CDN中的jQuery<script src="/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍云<script src="/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪jQuery 中的核⼼语法在jQuery当中，jQuery是⼀个核⼼⽅法，⽤来查找元素从⽽⽅便对元素的操作，可以简写为$。
jQuery中文入门指南2
jQuery中文入门指南jQuery入门指南教程这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。
它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。
这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。
内容提要1. 安装2. Hello jQuery3. Find me:使用选择器和事件4. Rate me:使用AJAX5. Animate me(让我生动起来):使用FX6. Sort me(将我有序化):使用tablesorter插件(表格排序)7. Plug me:制作您自己的插件8. Next steps(下一步)安装一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。
这个指南提供一个基本包含实例的包供下载.下载：jQuery Starterkit(译者Keel注:一定要下载这个包，光看文章不实践肯定是不行的。
)下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。
(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.本章的相关链接:? Starterkit? jQuery DownloadsHello jQuery在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:$(document).ready(function() {// do stuff when DOM is ready});放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.$(document).ready(function() {$("a").click(function() {alert("Hello world!");});});这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。
JQUERY入门笔记
$("#p1").mousedown(function(){ alert("Mouse down over p1!");
}); 在某个元素上释放鼠标左键时触发 $("#p1").mouseup(function(){
});
当点击按钮时，只会隐藏 id 为 test 的元素(class 同样) <script> $(document).ready(function(){
$("button").click(function(){ $("#test").hide();
}); }); </script>
<body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button>Click me</button>>标记添加单击事件处理 $("p").click(); 添加单击事件的处理函数，你必须传一个回调函数给单击事件： $("p").click(function(){
// action goes here!! }); 在双击<p>元素时隐藏其内容： $("p").dblclick(function(){
// jQuery methods go here... }); 这为 Document Ready 事件处理器以防止 jQuery 在页面没有完成载入前就执行。从而可以避 免下面类似情况发生： 试图隐藏尚未创建好的元素 试图获取尚未载入的图片的大小