jQuery学习之旅
来源:互联网 发布:ubuntu ports 编辑:程序博客网 时间:2024/04/29 07:37
jQuery 语法实例
- $(this).hide()
- 演示 jQuery 的 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>
- $("p").hide()
- 演示 jQuery 的 hide() 函数,隐藏所有 <p> 元素。
<html><head><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" 的元素。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><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></body></html>
- $("#test").hide()
- 演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p id="test">This is another paragraph.</p><button type="button">Click me</button></body></html>
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){--- jQuery functions go here ----});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节,您将学习到更多有关选择器的语法。
文档就绪函数
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){--- jQuery functions go here ----});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
- 试图隐藏一个不存在的元素
- 获得未完全加载的图像的大小
Hiding - Sliding- Fading
- jQuery fadeOut()
- 演示简单的 jQuery fadeout() 函数。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#test").click(function(){ $(this).fadeOut(); });});</script></head><body><div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div><p>如果您点击上面的框,它会淡出。</p></body></html>
- jQuery hide()
- 演示简单的 jQuery hide() 函数。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("p").click(function(){ $(this).hide(); });});</script></head><body><p>If you click on me, I will disappear.</p></body></html>
- Hide explanations
- 演示如何隐藏部分文本。
<html><head><script type="text/javascript" src="/jquery/jquery.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>Island Trading</h3><div class="ex"><button class="hide" type="button">Hide me</button><p>Contact: Helen Bennett<br /> Garden House Crowther Way<br />London</p></div><h3>Paris Trading</h3><div class="ex"><button class="hide" type="button">Hide me</button><p>Contact: Marie Bertrand<br /> 265, Boulevard Charonne<br />Paris</p></div></body></html>
- Slide panel
- 演示简单的 Slide Panel 效果。
//渐渐弹出效果<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){$(".flip").click(function(){ $(".panel").slideToggle("slow"); });});</script> <style type="text/css"> div.panel,p.flip{margin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;}div.panel{height:120px;display:none;}</style></head> <body> <div class="panel"><p>W3School - 领先的 Web 技术教程站点</p><p>在 W3School,你可以找到你所需要的所有网站建设教程。</p></div> <p class="flip">请点击这里</p> </body></html>
- jQuery animate()
- 演示简单的 jQuery animate() 函数。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); });});</script> </head> <body><p><a href="#" id="start">Start Animation</a></p><div id="box"style="background:#98bf21;height:100px;width:100px;position:relative"></div> </body></html>
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
实例
$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});
亲自试一试
hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
语法:
$(selector).hide(speed,callback)$(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关callback 参数的知识。
实例
$("button").click(function(){$("p").hide(1000);});
亲自试一试
jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
实例
$("button").click(function(){$("p").toggle();});
亲自试一试
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
$(".flip").click(function(){$(".panel").slideDown();});
亲自试一试
slideUp() 实例
$(".flip").click(function(){$(".panel").slideUp()})
亲自试一试
slideToggle() 实例
$(".flip").click(function(){$(".panel").slideToggle();});
亲自试一试
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数:
$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback)$(selector).fadeTo(speed,opacity,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
fadeTo() 实例
$("button").click(function(){$("div").fadeTo("slow",0.25);});
亲自试一试
fadeOut() 实例
$("button").click(function(){$("div").fadeOut(4000);});
亲自试一试
jQuery 自定义动画
jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
实例 1
<script type="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({height:300},"slow");$("#box").animate({width:300},"slow");$("#box").animate({height:100},"slow");$("#box").animate({width:100},"slow");});});</script>
亲自试一试
实例 2
<script type="text/javascript">$(document).ready(function(){$("#start").click(function(){$("#box").animate({left:"100px"},"slow");$("#box").animate({fontSize:"3em"},"slow");});});</script>
亲自试一试
HTML 元素默认是静态定位,且无法移动。
如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。
jQuery 效果 - 来自本页
HTML 操作
改变 HTML 元素的内容。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").html("W3School"); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>
向 HTML 元素追加内容。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").append(" <b>W3School</b>."); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>
在 HTML 元素之后追加内容。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").after(" W3School."); });});</script></head><body><h2>This is a heading</h2><p>This is a paragraph.</p><p>This is another paragraph.</p><button type="button">请点击这里</button></body></html>
CSS 操作
改变 HTML 元素的 CSS 属性。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").css("background-color","red"); });});</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>
改变多个 CSS 属性。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color":"red","font-size":"200%"}); });});</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>
获得元素的 CSS 属性。
<head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("div").click(function(){ $("#result").html($(this).css("background-color")); });});</script></head><body><div style="width:100px;height:100px;background:#ff0000"></div><p id="result">Click in the box</p></body></html>
jQuery 包含很多供改变和操作 HTML 的强大函数。
改变 HTML 内容
语法
$(selector).html(content)
html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。
实例
$("p").html("W3School");
亲自试一试
添加 HTML 内容
语法
$(selector).append(content)
append() 函数向所匹配的 HTML 元素内部追加内容。
语法
$(selector).prepend(content)
prepend() 函数向所匹配的 HTML 元素内部预置(Prepend)内容。
实例
$("p").append(" W3School");
亲自试一试
语法
$(selector).after(content)
after() 函数在所有匹配的元素之后插入 HTML 内容。
语法
$(selector).before(content)
before() 函数在所有匹配的元素之前插入 HTML 内容。
实例
$("p").after(" W3School.");
亲自试一试
jQuery HTML 操作 - 来自本页
AJAX 和 jQuery
使用 $(selector).load(url) 来改变 HTML 内容。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#b01").click(function(){ $('#myDiv').load('/jquery/test1.txt'); });});</script></head><body><div id="myDiv"><h2>通过 AJAX 改变文本</h2></div><button id="b01" type="button">改变内容</button></body></html>
使用 $.ajax(options) 来改变 HTML 内容。
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ $("#b01").click(function(){ htmlobj=$.ajax({url:"/jquery/test1.txt",async:false}); $("#myDiv").html(htmlobj.responseText); });});</script></head><body><div id="myDiv"><h2>通过 AJAX 改变文本</h2></div><button id="b01" type="button">改变内容</button></body></html>
jQuery AJAX 实例
请点击下面的按钮,就可以通过 AJAX 来改变这段文本
亲自试一试
上面的例子摘自我们的 AJAX 教程,但使用 jQuery 进行了修改。
什么是 AJAX?
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。
您可以在我们的 AJAX 教程 中学习更多有关 AJAX 的知识。
AJAX 和 jQuery
jQuery 提供了用于 AJAX 开发的丰富函数(方法)库。
通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
而且您可以直接把远程数据载入网页的被选 HTML 元素中!
写的更少,做的更多
jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:
$(selector).load(url,data,callback)
请使用 selector 来定义要改变的 HTML 元素,使用 url 参数来指定数据的 web 地址。
亲自试一试
只有当您希望向服务器发送数据时,才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时,您才需要使用 callback 参数。
Low Level AJAX
$.ajax(options) 是低层级 AJAX 函数的语法。
$.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。
option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
亲自试一试
//JQUERY:$.ajax({type:'post',//可选geturl:'action.php',//这里是接收数据的PHP程序data:'data='dsa'',//传给PHP的数据,多个参数用&连接dataType:'text',//服务器返回的数据类型 可选XML ,Json jsonp script html text等success:function(msg){//这里是ajax提交成功后,PHP程序返回的数据处理函数。msg是返回的数据,数据类型在dataType参数里定义!},error:function(){ajax提交失败的处理函数!}})//PHP action.php<?phpecho "this is a ajax example!";?>
jQuery AJAX 请求
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
jQuery 选择器
jQuery 事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
jQuery 效果函数
jQuery 文档操作方法
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
jQuery 属性操作方法
下面列出的这些方法获得或设置元素的 DOM 属性。
这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。
jQuery CSS 操作函数
下面列出的这些方法设置或返回元素的 CSS 相关属性。
jQuery Ajax 操作函数
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
jQuery 遍历函数
jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。
jQuery 数据操作函数
这些方法允许我们将指定的 DOM 元素与任意数据相关联。
jQuery DOM 元素方法
jQuery 核心函数
- 学习jQuery之旅
- jQuery学习之旅
- 学习jQuery之旅
- jQuery学习之旅
- jQuery学习之旅(一)
- JQuery学习之旅之淡入淡出
- Jquery学习之旅之 动画 animate
- Jquery学习之旅之chaining
- Jquery学习之旅之添加元素
- Jquery学习之旅之删除元素
- Jquery学习之Jquery选择器
- jQuery学习之旅 Item5 $与jQuery对象
- jQuery学习之旅 5 $与jQuery对象
- jquery学习之旅-2010-5-28
- jQuery学习之旅 Item1 选择器【一】
- jQuery学习之旅 Item2 选择器【二】
- jQuery学习之旅 Item9 动画效果
- jQuery学习之旅 Item10 ajax快餐
- linux下解压缩指令汇总
- cocos2d开发学习一:开发环境搭建以及入门学习资源
- android - http
- Spring 图片上传
- 用C#通过HL7 message创建 modality work list
- jQuery学习之旅
- ubuntu中显示vi编辑的行数
- Watch窗口中的一行,并键入 “@err,hr”
- Android手机屏幕适配
- “微软”全面挑战“苹果”
- 谣言变真:iPad Mini/iPhone 5工程模具图泄漏!
- php 通过 exif_imagetype() 判断网络图片是否存在!
- 如何利用busybox构建根文件系统
- j2ee