完整版JQuery语法文档格式.docx

上传人:b****1 文档编号:14322749 上传时间:2022-10-22 格式:DOCX 页数:23 大小:24.17KB
下载 相关 举报
完整版JQuery语法文档格式.docx_第1页
第1页 / 共23页
完整版JQuery语法文档格式.docx_第2页
第2页 / 共23页
完整版JQuery语法文档格式.docx_第3页
第3页 / 共23页
完整版JQuery语法文档格式.docx_第4页
第4页 / 共23页
完整版JQuery语法文档格式.docx_第5页
第5页 / 共23页
点击查看更多>>
下载资源
资源描述

完整版JQuery语法文档格式.docx

《完整版JQuery语法文档格式.docx》由会员分享,可在线阅读,更多相关《完整版JQuery语法文档格式.docx(23页珍藏版)》请在冰豆网上搜索。

完整版JQuery语法文档格式.docx

p.test"

).hide()-隐藏所有class="

的段落

).hide()-隐藏所有id="

的元素

提示:

jQuery使用的语法是XPath与CSS选择器语法的组合。

在本教程接下来的章节,您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中:

$(document).ready(function(){

---jQueryfunctionsgohere----

});

这是为了防止文档在完全加载(就绪)之前运行jQuery代码。

jQuery选择器

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

在前面的章节中,我们展示了一些有关如何选取HTML元素的实例。

关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。

jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。

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

在HTMLDOM术语中:

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

jQuery元素选择器

jQuery使用CSS选择器来选取HTML元素。

)选取<

p.intro"

)选取所有class="

intro"

的<

p#demo"

)选取id="

demo"

的第一个<

jQuery属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素。

[href]"

)选取所有带有href属性的元素。

[href='

#'

]"

)选取所有带有href值等于"

#"

[href!

='

)选取所有带有href值不等于"

[href$='

.jpg'

)选取所有href值以"

.jpg"

结尾的元素。

jQueryCSS选择器

jQueryCSS选择器可用于改变HTML元素的CSS属性。

下面的例子把所有p元素的背景颜色更改为红色:

).css("

background-color"

"

red"

);

jQuery参考手册-选择器

选择器

选取

*

*"

所有元素

#id

#lastname"

id=lastname的元素

.class

.intro"

所有class="

element

所有<

元素

.class.class

.intro.demo"

所有class=intro且class=demo的元素

 

:

first

p:

first"

第一个<

last

last"

最后一个<

even

tr:

even"

所有偶数<

tr>

odd

odd"

所有奇数<

eq(index)

ulli:

eq(3)"

列表中的第四个元素(index从0开始)

gt(no)

gt(3)"

列出index大于3的元素

lt(no)

lt(3)"

列出index小于3的元素

not(selector)

input:

not(:

empty)"

所有不为空的input元素

header

header"

所有标题元素<

h1>

<

h2>

...

animated

所有动画元素

contains(text)

contains('

W3School'

)"

包含文本的所有元素

empty

empty"

无子(元素)节点的所有元素

hidden

hidden"

所有隐藏的<

visible

table:

visible"

所有可见的表格

s1,s2,s3

th,td,.intro"

所有带有匹配选择的元素

[attribute]

所有带有href属性的元素

[attribute=value]

所有href属性的值等于"

[attribute!

=value]

所有href属性的值不等于"

[attribute$=value]

所有href属性的值包含"

input

input"

input>

text

text"

所有type="

password

password"

radio

radio"

checkbox

checkbox"

submit

submit"

reset

reset"

button

button"

image

image"

file

file"

enabled

enabled"

所有激活的input元素

disabled

disabled"

所有禁用的input元素

selected

selected"

所有被选取的input元素

checked

checked"

所有被选中的input元素

jQuery事件

jQuery是为事件处理特别设计的。

jQuery事件函数

jQuery事件处理函数是jQuery中的核心函数。

事件处理函数是当HTML中发生事件时自动被调用的函数。

由“事件”(event)“触发”(triggered)是经常被用到的术语。

在您<

head>

由于jQuery是为事件处理特别设计的,通常是把jQuery代码置于网页<

部分的“事件处理”函数中:

html>

scripttype="

text/javascript"

src="

jquery.js"

>

/script>

$("

).click(function(){

).hide();

});

/head>

body>

Thisisaheading<

/h2>

Thisisaparagraph.<

/p>

Thisisanotherparagraph.<

buttontype="

Clickme<

/button>

/body>

/html>

TIY

在上面的例子中,定义了一个处理HTML按钮的点击事件的click函数:

).click(function(){..somecode...})

click函数内部的代码隐藏所有<

元素:

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

$(document).ready(function(){..somecode...})

单独文件中的函数

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

当我们在教程中演示jQuery时,会将函数直接添加到<

部分中。

不过,把它们放到一个单独的文件中会更好,就像这样(通过src属性来引用文件):

my_jquery_functions.js"

jQuery名称冲突

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

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

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

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

结论

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

∙把所有jQuery代码置于事件处理函数中

∙把所有事件处理函数置于文档就绪事件处理器中

∙把jQuery代码置于单独的.js文件中

∙如果存在名称冲突,则重命名jQuery库

jQuery参考手册-事件

jQuery事件方法

事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

触发实例:

button#demo"

).click()

上面的例子

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 医药卫生 > 预防医学

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1