- 1、本文档共18页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
Jquery使用教程
PAGE \* MERGEFORMAT18
Jquery 教程
html
head
script type=text/javascript src=jquery.js/script
script type=text/javascript
$(document).ready(function(){
$(p).click(function(){
$(this).hide();
});
});
/script
/head
body
pIf you click on me, I will disappear./p
/body
/html
向您的页面添加 jQuery 库
jQuery 库位于单个的 JavaScript 文件中,其中包含所有 jQuery 函数。
可以通过下面的标记把 jQuery 添加到网页中:
head
script type=text/javascript src=jquery.js/script
/head
请注意,script 标签应该位于页面的 head 部分。
基础 jQuery 实例
下面的例子演示了 jQuery 的 hide() 函数,隐藏了 HTML 文档中所有的 p 元素。
实例
html
head
script type=text/javascript src=jquery.js/script
script type=text/javascript
$(document).ready(function(){
$(button).click(function(){
$(p).hide();
});
});
/script
/head
body
h2This is a heading/h2
pThis is a paragraph./p
pThis is another paragraph./p
button type=buttonClick me/button
/body
/html
jQuery 语法实例
HYPERLINK /tiy/t.asp?f=jquery_hide_this $(this).hide()
演示 jQuery hide() 函数,隐藏当前的 HTML 元素。
HYPERLINK /tiy/t.asp?f=jquery_hide_id $(#test).hide()
演示 jQuery hide() 函数,隐藏 id=test 的元素。
HYPERLINK /tiy/t.asp?f=jquery_hide_p $(p).hide()
演示 jQuery hide() 函数,隐藏所有 p 元素。
HYPERLINK /tiy/t.asp?f=jquery_hide_class $(.test).hide()
演示 jQuery hide() 函数,隐藏所有 class=test 的元素。
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 选择器
在前面的章节中,我们展示了一些有关如何选取 HTML 元素的实例。
关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。
jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。
选择器允许您对 HTML 元素组或单个元素进行操作。
在 HTML DOM 术语中:
选择器允许您对 DOM 元素组或单个 DOM 节点
文档评论(0)