jquery 学习历程1

最新推荐文章于 2024-10-03 22:12:17 发布

wei_wei_hnu

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量582

点赞数

文章标签： jquery function callback html button javascript

本文链接：https://blog.csdn.net/wei_wei_hnu/article/details/6071515

版权

jQuery 是一个 JavaScript 函数库，注意：jQuery 是为事件处理特别设计的。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

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

$(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 元素进行选择。

选择器允许您对 HTML 元素组或单个元素进行操作。

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 元素的背景颜色更改为红色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> <title>无标题文档</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body { background-color: #000000; }</style></head> <body > <input name="red" type="button" value="red" id="red"/> <input name="green" type="button" value="green" id="green"/> </body> </html>

点击按钮可以改变背景颜色

语法	描述
$(this)	当前 HTML 元素
$("p")	所有 <p> 元素
$("p.intro")	所有 class="intro" 的 <p> 元素
$(".intro")	所有 class="intro" 的元素
$("#intro")	id="intro" 的第一个元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的 href 属性的属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

jQuery 事件函数

jQuery 事件处理函数是 jQuery 中的核心函数。由于 jQuery 是为事件处理特别设计的，通常是把 jQuery 代码置于网页 <head> 部分的“事件处理”函数中：

所有事件函数都在文档自身的“事件处理器”内部进行定义：

$(document).ready(function() {..some code...} )

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。

jQuery 使用名为 noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。

<html> <head> <mce:script type="text/javascript" src="/jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"></mce: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>

由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

jQuery 事件

下面是 jQuery 中事件函数的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	文档的就绪事件（当 HTML 文档就绪可用）
$(selector).click(function)	被选元素的点击事件
$(selector).dblclick(function)	被选元素的双击事件
$(selector).focus(function)	被选元素的获得焦点事件
$(selector).mouseover(function)	被选元素的鼠标悬停事件

jQuery slideToggle()例子可以用于制作菜单

<html> <head> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">div.panel,p.flip{ width:20%; background:#999966; padding:10px; text-align:center; border:slide; } div.panel{ height:atuo; display:none; }</style> </head> <body> <p class="flip">show hide panel </p> <div class="panel"> <ul> <li><a href="#" mce_href="#">菜单一</a></li> <li><a href="#" mce_href="#">菜单二</a></li> </ul> </div> </body> </html>

jQuery fadeTo()例子指定透明度

<html> <head> <title>fadeTo</title> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="fadeto" style="background-color:#FF0033; width:100px; height:100px"> <input type="submit" id="fadeToButton" name="fadeToButton" /> </div> </body> </html>

jQuery 切换

jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素，显示隐藏的元素。

jQuery animate()沿着指定方向进行伸展

<html> <head> <title>animate</title> <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <p id = "start"> startshowing! </p> <div id="square" style="background-color:#FF0099; height:100px; width:100px;"></div> </body> </html>

jQuery 隐藏和显示

通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds：

<html> <head> <mce:script type="text/javascript" src="/jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <button type="button">Hide</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>

jQuery 切换

jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

隐藏显示的元素，显示隐藏的元素。

语法：

$(selector).toggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。

<html> <head> <mce:script type="text/javascript" src="/jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <button type="button">Toggle</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body>

jQuery 滑动函数 - slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数：

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。

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 参数是在 hide 或 show 函数完成之后被执行的函数名称。

<html> <head> <mce:script type="text/javascript" src="/jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div><br> <div id="appear" style="background:yellow;width:200px">CLICK ME restore!</div><br> <div id="fadeto" style="background:red;width:200px">CLICK ME to transparent!</div> </body> </html>

jQuery 效果总结

函数	描述
$(selector).hide()	隐藏被选元素
$(selector).show()	显示被选元素
$(selector).toggle()	切换（在隐藏与显示之间）被选元素
$(selector).slideDown()	向下滑动（显示）被选元素
$(selector).slideUp()	向上滑动（隐藏）被选元素
$(selector).slideToggle()	对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()	淡入被选元素
$(selector).fadeOut()	淡出被选元素
$(selector).fadeTo()	把被选元素淡出为给定的不透明度
$(selector).animate()	对被选元素执行自定义动画