jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。
由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。
全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
由于目前高校基本尚未开JavaScript的相关课程，目前jQuery的学习，使用，研究都仅限于在职Web程序员之间。
用jq的前提,首先要引用一个有jq的文件
lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
这个是jquery官方最新的地址。可用在自己网站里加个这个，就能使用jquery了。 但仍然建议下载到本地服务器上。
1、动态特效
2、AJAX
3、通过插件来扩展
jquery 免费编辑 添加义项名
B 添加义项 ?
所属类别 : 其他
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
基本信息
中文名称
Jquery
外文名称
Jquery
定义
id
核心理念
write less,do more
发布时间
2006年1月
发布人
John Resig
发布地点
美国纽约
最新版本版本
jQuery 3.1
第一个版本
jQuery 1.0（2006年8月）
目录
1简要介绍
2特点
3工厂函数
4遍历函数
5代替标签
6事件机制
7实现
8渐入淡出
9历史版本
10新版介绍
11插件
12引入
13实例
折叠编辑本段简要介绍
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
由于目前高校基本尚未开JavaScript的相关课程，目前jQuery的学习，使用，研究都仅限于在职Web程序员之间。
用jq的前提,首先要引用一个有jq的文件
lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
这个是jquery官方最新的地址。可用在自己网站里加个这个，就能使用jquery了。 但仍然建议下载到本地服务器上。
折叠编辑本段特点
动态特效
AJAX
通过插件来扩展
方便的工具 - 例如浏览器版本判断
渐进增强
链式调用
多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）
折叠编辑本段工厂函数
在编写js库代码时候，你一定经常和“$”美元符号打交道吧？
无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。
jQuery也这样做了，但是，它的功能远非如此，瞧瞧以下的jQuery代码，你就会发现它的美丽：
代码
var someElement = $("#myId");
看起来比其他两个框架的要多了一个#，好，看看下面的用法：
代码
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
在prototype里看过这样的写法吗？第一行代码得到所有div标签下的p元素。
第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素
(不过最好别这样写，因为jQuery需要遍历所有的div元素，对于带id的元素，直接用$("#id"))。
第四行代码得到context为上下文的table里面所有的链接元素。
如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。
jQuery就是如此强大，你可以轻易地找到DOM中的任何元素，而这也是jQuery设计之初query的真实含义（查询）。
jquery提供了很多遍历的函数，如each(fn)，但是使用这些函数的前提是：
你使用的对象是jquery对象。使一个Dom对象成为一个jquery对象很简单，通过下面一些方式（只是一部分）：
代码
var a = $("#cid");
var b = $("<p>hello</p>");
var c = document.createElement("table");
var tb = $（c）;
jq实例：
找出所有属于 div 元素的子元素的 p 元素，然后设置其边框属性：
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<script>$("div > p").css("border", "1px solid gray");</script>
jQuery( selector, [ context ] )
该语法有以下几种用法：
用法 1 ：设置选择器环境
语法
jQuery(selector, [context])
默认情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。
例如，如果我们希望在一个 callback 中搜索一个元素，可以限定下面的搜索：
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的 class。
在内部，选择器环境是通过 .find() 方法实现的，因此 $("span", this) 等价于 $(this).find("span")。
jQuery 的核心功能都是通过这个函数实现的。
jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。
这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。
默认情况下, 如果没有指定 context 参数，$() 将在当前的 HTML document 中查找 DOM 元素；
如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。
在 jQuery 1.3.2 以后，其返回的元素顺序等同于在 context 中出现的先后顺序。
用法 2 ：使用 DOM 元素
jQuery(element)
该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。
该功能通常的用法是，对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法：
$("div.foo").click(function() {
$(this).slideUp();
});
此例会在元素被点击时使用滑动动画对其进行隐藏。
由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素，
因此在对其调用 jQuery 的方法之前，必须用 jQuery 对象包装该元素。
这个函数也可以接收 XML 文档和 Window 对象（虽然它们不是 DOM 元素）作为有效的参数。
当 XML 数据从 Ajax 调用中返回后，我们可以使用 $() 函数通过 jQuery 对象包装该数据。
一旦完成，我们就可以使用 .find() 和其他 DOM 遍历方法来取回 XML 结构中单个元素。
在本教程中，您将通过教程以及许多在线实例，学到如何通过使用 jQuery 应用 JavaScript 效果。
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
jQ中AJAX，局部刷新功能
$(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
<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>
$("p").hide()
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
</html>
jQuery fadeOut()
演示简单的 jQuery fadeout() 函数。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
hide函数：
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
Hide explanations
演示如何隐藏部分文本。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：张先生<br />
北三环中路 100 号<br />
北京</p>
</div>
<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：David<br />
第五大街 200 号<br />
纽约</p>
</div>
</body>
</html>
Slide panel
演示简单的 Slide Panel 效果。（菜单脱下来）
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
简单动画效果：
jQuery animate()
演示简单的 jQuery animate() 函数。
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
HTML操作:
改变HTML元素的内容
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");
});
});
向HTML元素追加内容
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
在HTML元素之后追加内容
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
CSS操作：
改变HTML元素的CSS属性
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
改变多个CSS属性
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});
获得元素的CSS属性
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
AJax和JQuery
使用$(selector).load(url)来改变HTML内容
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
使用$.ajax(options)来改变HTML内容
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
向您的页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
请注意，<script> 标签应该位于页面的 <head> 部分。
提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？
在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
JQuery事件：
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
如：
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery 滑动方法可使元素上下滑动。
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
jQuery animate() 方法允许您创建自定义的动画。
$("button").click(function(){
$("div").animate({left:'250px'});
});
jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
下面的例子把 <div> 元素移动到右边，然后增加文本的字号：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
JQ删除元素：
$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素：
$(document).ready(function(){
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。
全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
由于目前高校基本尚未开JavaScript的相关课程，目前jQuery的学习，使用，研究都仅限于在职Web程序员之间。
用jq的前提,首先要引用一个有jq的文件
lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
这个是jquery官方最新的地址。可用在自己网站里加个这个，就能使用jquery了。 但仍然建议下载到本地服务器上。
1、动态特效
2、AJAX
3、通过插件来扩展
jquery 免费编辑 添加义项名
B 添加义项 ?
所属类别 : 其他
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。
基本信息
中文名称
Jquery
外文名称
Jquery
定义
id
核心理念
write less,do more
发布时间
2006年1月
发布人
John Resig
发布地点
美国纽约
最新版本版本
jQuery 3.1
第一个版本
jQuery 1.0（2006年8月）
目录
1简要介绍
2特点
3工厂函数
4遍历函数
5代替标签
6事件机制
7实现
8渐入淡出
9历史版本
10新版介绍
11插件
12引入
13实例
折叠编辑本段简要介绍
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。jQuery是继prototype之后又一个优秀的Javascrīpt框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
由于目前高校基本尚未开JavaScript的相关课程，目前jQuery的学习，使用，研究都仅限于在职Web程序员之间。
用jq的前提,首先要引用一个有jq的文件
lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
这个是jquery官方最新的地址。可用在自己网站里加个这个，就能使用jquery了。 但仍然建议下载到本地服务器上。
折叠编辑本段特点
动态特效
AJAX
通过插件来扩展
方便的工具 - 例如浏览器版本判断
渐进增强
链式调用
多浏览器支持，支持Internet Explorer6.0+、Opera9.0+、Firefox2+、Safari2.0+、Chrome1.0+（在2.0.0中取消了对Internet Explorer6,7,8的支持）
折叠编辑本段工厂函数
在编写js库代码时候，你一定经常和“$”美元符号打交道吧？
无论prototype还是DWR都使用了$代替频繁的document.getElementById()操作。
jQuery也这样做了，但是，它的功能远非如此，瞧瞧以下的jQuery代码，你就会发现它的美丽：
代码
var someElement = $("#myId");
看起来比其他两个框架的要多了一个#，好，看看下面的用法：
代码
$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); // (3)
$("table a",context); // (4)
在prototype里看过这样的写法吗？第一行代码得到所有div标签下的p元素。
第二行代码得到class 为container的div元素,第三行代码得到标签下面id为msg的div元素
(不过最好别这样写，因为jQuery需要遍历所有的div元素，对于带id的元素，直接用$("#id"))。
第四行代码得到context为上下文的table里面所有的链接元素。
如果你熟悉CSS，你会觉得这些写法很眼熟！对了。正是。看出奥妙了吧。
jQuery就是如此强大，你可以轻易地找到DOM中的任何元素，而这也是jQuery设计之初query的真实含义（查询）。
jquery提供了很多遍历的函数，如each(fn)，但是使用这些函数的前提是：
你使用的对象是jquery对象。使一个Dom对象成为一个jquery对象很简单，通过下面一些方式（只是一部分）：
代码
var a = $("#cid");
var b = $("<p>hello</p>");
var c = document.createElement("table");
var tb = $（c）;
jq实例：
找出所有属于 div 元素的子元素的 p 元素，然后设置其边框属性：
<p>one</p>
<div><p>two</p></div>
<p>three</p>
<script>$("div > p").css("border", "1px solid gray");</script>
jQuery( selector, [ context ] )
该语法有以下几种用法：
用法 1 ：设置选择器环境
语法
jQuery(selector, [context])
默认情况下，选择器从文档根部对 DOM 进行搜索。不过，可以为 $() 设置可选的 context 参数。
例如，如果我们希望在一个 callback 中搜索一个元素，可以限定下面的搜索：
$("div.foo").click(function() {
$("span", this).addClass("bar");
});
由于我们已经将 span 选择器限定到 this 这个环境中，只有被点击元素中的 span 会得到附加的 class。
在内部，选择器环境是通过 .find() 方法实现的，因此 $("span", this) 等价于 $(this).find("span")。
jQuery 的核心功能都是通过这个函数实现的。
jQuery中的一切都基于这个函数，或者说都是在以某种方式使用这个函数。
这个函数最基本的用法就是向它传递一个表达式（通常由 CSS 选择器组成），然后根据这个表达式来查找所有匹配的元素。
默认情况下, 如果没有指定 context 参数，$() 将在当前的 HTML document 中查找 DOM 元素；
如果指定了 context 参数，如一个 DOM 元素集或 jQuery 对象，那就会在这个 context 中查找。
在 jQuery 1.3.2 以后，其返回的元素顺序等同于在 context 中出现的先后顺序。
用法 2 ：使用 DOM 元素
jQuery(element)
该函数允许我们通过使用以其他方式找到的 DOM 元素来创建 jQuery 对象。
该功能通常的用法是，对已经通过 this 关键字传递到 callback 函数的元素调用 jQuery 的方法：
$("div.foo").click(function() {
$(this).slideUp();
});
此例会在元素被点击时使用滑动动画对其进行隐藏。
由于处理程序接受的 this 关键词中的被点击项目是纯的 DOM 元素，
因此在对其调用 jQuery 的方法之前，必须用 jQuery 对象包装该元素。
这个函数也可以接收 XML 文档和 Window 对象（虽然它们不是 DOM 元素）作为有效的参数。
当 XML 数据从 Ajax 调用中返回后，我们可以使用 $() 函数通过 jQuery 对象包装该数据。
一旦完成，我们就可以使用 .find() 和其他 DOM 遍历方法来取回 XML 结构中单个元素。
在本教程中，您将通过教程以及许多在线实例，学到如何通过使用 jQuery 应用 JavaScript 效果。
jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。
基本上，您将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
jQ中AJAX，局部刷新功能
$(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
<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>
$("p").hide()
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
<script type="text/javascript">
$(document).ready(function()
{
$("button").click(function()
{
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
})
</script>
</head>
<body>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
</body>
</html>
jQuery fadeOut()
演示简单的 jQuery fadeout() 函数。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
hide函数：
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
Hide explanations
演示如何隐藏部分文本。
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：张先生<br />
北三环中路 100 号<br />
北京</p>
</div>
<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>联系人：David<br />
第五大街 200 号<br />
纽约</p>
</div>
</body>
</html>
Slide panel
演示简单的 Slide Panel 效果。（菜单脱下来）
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
简单动画效果：
jQuery animate()
演示简单的 jQuery animate() 函数。
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
});
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
HTML操作:
改变HTML元素的内容
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");
});
});
向HTML元素追加内容
$(document).ready(function(){
$("#btn1").click(function(){
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function(){
$("ol").append("<li>Appended item</li>");
});
});
在HTML元素之后追加内容
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
CSS操作：
改变HTML元素的CSS属性
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");
});
});
改变多个CSS属性
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"red","font-size":"200%"});
});
});
获得元素的CSS属性
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
AJax和JQuery
使用$(selector).load(url)来改变HTML内容
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
使用$.ajax(options)来改变HTML内容
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。
jQuery 库包含以下特性：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
向您的页面添加 jQuery 库
jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中：
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
请注意，<script> 标签应该位于页面的 <head> 部分。
提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？
在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
JQuery事件：
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
结论
由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库
jQuery hide() 和 show()
通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$("button").click(function(){
$("p").toggle();
});
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
jQuery Fading 方法
通过 jQuery，您可以实现元素的淡入淡出效果。
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
如：
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
jQuery 滑动方法可使元素上下滑动。
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
jQuery animate() 方法允许您创建自定义的动画。
$("button").click(function(){
$("div").animate({left:'250px'});
});
jQuery animate() - 操作多个属性
请注意，生成动画的过程中可同时使用多个属性：
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
jQuery animate() - 使用相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
下面的例子把 <div> 元素移动到右边，然后增加文本的字号：
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
jQuery stop() 方法用于在动画或效果完成前对它们进行停止。
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
JQ删除元素：
$("#div1").remove();
jQuery empty() 方法
jQuery empty() 方法删除被选元素的子元素。
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
jQuery parent() 方法
parent() 方法返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历。
下面的例子返回每个 <span> 元素的的直接父元素：
$(document).ready(function(){
$("span").parent();
});
jQuery parents() 方法
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
下面的例子返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
3042
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
