书签分享收藏举报版权申诉 / 92

立即下载加入VIP,免费下载

当前位置：首页 > 初中教育 > 数学 > jquery笔记吐血整理.docx

jquery笔记吐血整理.docx

文档编号：3526955
上传时间：2022-11-23
格式：DOCX
页数：92
大小：227.13KB

jquery笔记吐血整理.docx

《jquery笔记吐血整理.docx》由会员分享，可在线阅读，更多相关《jquery笔记吐血整理.docx（92页珍藏版）》请在冰豆网上搜索。

jquery笔记吐血整理.docx

jquery笔记吐血整理

$（document）.ready（function（）{

$（"p"）.click（function（）{

$（this）.hide（）;

}）;

Ifyouclickonme,Iwilldisappear.

------------------------------------------------------------------

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"p"）.hide（）;

}）;

Thisisaheading

Thisisaparagraph.

Clickme

===================================================================

向页面添加jQuery库

jQuery库位于单个的JavaScript文件中，其中包含所有jQuery函数。

可以通过下面的标记把jQuery添加到网页中：

库的替代

Google和Microsoft对jQuery的支持都很好。

如果您不愿意在自己的计算机上存放jQuery库，那么可以从GoogleorMicrosoft加载CDNjQuery核心文件。

使用Google的CDN

使用Microsoft的CDN

====================================================================

jQuery语法：

通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。

jQuery语法实例：

$（this）.hide（）

演示jQueryhide（）函数，隐藏当前的HTML元素。

$（"#test"）.hide（）

演示jQueryhide（）函数，隐藏id="test"的元素。

$（"p"）.hide（）

演示jQueryhide（）函数，隐藏所有

元素。

$（".test"）.hide（）

演示jQueryhide（）函数，隐藏所有class="test"的元素。

jQuery语法

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

基础语法是：

$（selector）.action（）

∙美元符号定义jQuery

∙选择符（selector）“查询”和“查找”HTML元素

∙jQueryaction（）执行对元素的操作

实例

$（this）.hide（）-隐藏当前元素

$（"p"）.hide（）-隐藏所有段落

$（"p.test"）.hide（）-隐藏所有class="test"的段落

$（"#test"）.hide（）-隐藏所有id="test"的元素

提示：

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

文档就绪函数：

为了防止文档在完全加载（就绪）之前运行jQuery代码。

$（document）.ready（function（）{

---jQueryfunctionsgohere----

}）;

在文档完全加载之前运行函数操作失败的情况：

∙试图隐藏一个不存在的元素。

∙获得未完全加载的图像的大小。

==================================================================

jQuery选择器

1、jQuery元素选择器

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

$（"p"）选取

元素。

$（"p.intro"）选取所有class="intro"的

元素。

$（"p#demo"）选取id="demo"的第一个

元素。

2、jQuery属性选择器

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

$（"[href]"）选取所有带有href属性的元素。

$（"[href='#']"）选取所有带有href值等于"#"的元素。

$（"[href!

='#']"）选取所有带有href值不等于"#"的元素。

$（"[href$='.jpg']"）选取所有href值以".jpg"结尾的元素。

3、jQueryCSS选择器

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

实例：

$（document）.ready（function（）{

$（"button"）.click（function（）{

$（"p"）.css（"background-color","yellow"）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

更多的实例

语法

描述

$（this）

当前HTML元素

$（"p"）

所有

元素

$（"p.intro"）

所有class="intro"的

元素

$（".intro"）

所有class="intro"的元素

$（"#intro"）

id="intro"的第一个元素

$（"ulli:

first"）

每个

元素
$（"[href$='.jpg']"）
所有带有以".jpg"结尾的href属性的属性
$（"div#intro.head"）
id="intro"的
元素中的所有class="head"的元素
jQuery选择器
选择器
实例
选取
*
$（"*"）
所有元素
#id
$（"#lastname"）
id=lastname的第一个元素
.class
$（".intro"）
所有class="intro"的元素
element
$（"p"）
所有
元素
.class.class
$（".intro.demo"）
所有class=intro且class=demo的元素

:
first
$（"p:
first"）
第一个
元素
:
last
$（"p:
last"）
最后一个
元素
:
even
$（"tr:
even"）
所有偶数元素
:
odd
$（"tr:
odd"）
所有奇数元素

:
eq（index）
$（"ulli:
eq（3）"）
列表中的第四个元素（index从0开始）
:
gt（no）
$（"ulli:
gt（3）"）
列出index大于3的元素
:
lt（no）
$（"ulli:
lt（3）"）
列出index小于3的元素
:
not（selector）
$（"input:
not（:
empty）"）
所有不为空的input元素

:
header
$（":
header"）
所有标题元素
...
:
animated

所有动画元素

:
contains（text）
$（":
contains（'W3School'）"）
包含文本的所有元素
:
empty
$（":
empty"）
无子（元素）节点的所有元素
:
hidden
$（"p:
hidden"）
所有隐藏的
元素
:
visible
$（"table:
visible"）
所有可见的表格

s1,s2,s3
$（"th,td,.intro"）
所有带有匹配选择的元素

[attribute]
$（"[href]"）
所有带有href属性的元素
[attribute=value]
$（"[href='#']"）
所有href属性的值等于"#"的元素
[attribute!
=value]
$（"[href!
='#']"）
所有href属性的值不等于"#"的元素
[attribute$=value]
$（"[href$='.jpg']"）
所有href属性的值包含".jpg"的元素

:
input
$（":
input"）
所有元素
:
text
$（":
text"）
所有type="text"的元素
:
password
$（":
password"）
所有type="password"的元素
:
radio
$（":
radio"）
所有type="radio"的元素
:
checkbox
$（":
checkbox"）
所有type="checkbox"的元素
:
submit
$（":
submit"）
所有type="submit"的元素
:
reset
$（":
reset"）
所有type="reset"的元素
:
button
$（":
button"）
所有type="button"的元素
:
image
$（":
image"）
所有type="image"的元素
:
file
$（":
file"）
所有type="file"的元素

:
enabled
$（":
enabled"）
所有激活的input元素
:
disabled
$（":
disabled"）
所有禁用的input元素
:
selected
$（":
selected"）
所有被选取的input元素
:
checked
$（":
checked"）
所有被选中的input元素
============================================================
jQuery事件
jquery事件处理函数是当HTML中发生事件时自动被调用的函数。
由“事件”（event）“触发”（triggered）是经常被用到的术语。
单独文件中的函数（把jQuery函数放到独立的.js文件中,易于jQuery函数维护）
实例
jQuery名称冲突（了解）
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。
jQuery使用名为noConflict（）的方法来解决该问题。
varjq=jQuery.noConflict（），帮助您使用自己的名称（比如jq）来代替$符号。
实例：
varjq=jQuery.noConflict（）;
jq（document）.ready（function（）{
jq（"button"）.click（function（）{
jq（"p"）.hide（）;
}）;
}）;
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
Clickme

结论
由于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事件方法
事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

jQuery事件处理方法
事件处理方法把事件处理器绑定至匹配元素。
方法
触发
$（selector）.bind（event）
向匹配元素添加一个或更多事件处理器
$（selector）.delegate（selector,event）
向匹配元素添加一个事件处理器，现在或将来
$（selector）.die（）
移除所有通过live（）函数添加的事件处理器
$（selector）.live（event）
向匹配元素添加一个事件处理器，现在或将来
$（selector）.one（event）
向匹配元素添加一个事件处理器。
该处理器只能触发一次。
$（selector）.unbind（event）
从匹配元素移除一个被添加的事件处理器
$（selector）.undelegate（event）
从匹配元素移除一个被添加的事件处理器，现在或将来
$（selector）.trigger（event）
所有匹配元素的指定事件
$（selector）.triggerHandler（event）
第一个被匹配元素的指定事件
===========================================================================================
jQuery效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）
jQuery效果—隐藏和显示：
通过hide（）和show（）两个函数，jQuery支持对HTML元素的隐藏和显示
hide（）和show（）都可以设置两个可选参数：
speed和callback。
语法：
$（selector）.hide（speed,callback）
$（selector）.show（speed,callback）
callback参数是在hide或show函数完成之后被执行的函数名称。
speed参数可以设置这些值：
"slow","fast","normal"或milliseconds。
实例（隐藏）：
$（document）.ready（function（）{
$（"#hide"）.click（function（）{
$（"p"）.hide（）;
}）;
$（"#show"）.click（function（）{
$（"p"）.show（）;
}）;
}）;
Ifyouclickonthe"Hide"button,Iwilldisappear.
Hide
Show
-----------------------------------------------------------------------------------------------------
$（document）.ready（function（）{
$（"button"）.click（function（）{
$（"p"）.hide（1000）;
}）;
}）;
Hide
Thisisaparagraphwithlittlecontent.
Thisisanothersmallparagraph.

jQuery切换
jQuerytoggle（）函数使用show（）或hide（）函数来切换HTML元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
语法：
$（selector）.toggle（speed,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
实例
$（"button"）.click（function（）{$（"p"）.toggle（）;}）;
--------------------------------------------------------------------
DOCTYPEhtml>
$（document）.ready（function（）{
$（"button"）.click（function（）{
$（"p"）.toggle（）;
}）;
}）;
切换
这是一个段落。
这是另一个段落。
页面显示为：
点击“切换”之后，页面的段落隐藏起来，变为：
注：
点击“切换”，隐藏和显示段落字体循环.
jQuery滑动函数-slideDown,slideUp,slideToggle
jQuery拥有以下滑动函数：
$（selector）.slideDown（speed,callback）
$（selector）.slideUp（speed,callback）
$（selector）.slideToggle（speed,callback）
speed参数可以设置这些值：
"slow","fast","normal"或毫秒。
callback参数是在hide或show函数完成之后被执行的函数名称。
slideDown（）实例

$（document）.ready（function（）{
$（".flip"）.click（f

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载 加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：
如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：
部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关键词：
jquery 笔记吐血整理

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
该用户的其他资源更多>>
猜你喜欢
关于本文

本文标题：jquery笔记吐血整理.docx
链接地址：https://www.bdocx.com/doc/3526955.html

jquery笔记吐血整理.docx

Thisisaheading

Thisisaheading

Thisisaheading

热门标签