Jquery 学习 文档.docx
- 文档编号:17633874
- 上传时间:2023-07-27
- 格式:DOCX
- 页数:14
- 大小:21.08KB
Jquery 学习 文档.docx
《Jquery 学习 文档.docx》由会员分享,可在线阅读,更多相关《Jquery 学习 文档.docx(14页珍藏版)》请在冰点文库上搜索。
Jquery学习文档
每一章中用到的实例
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
Ifyouclickonme,Iwilldisappear.
jQuery是一个“写的更少,但做的更多”的轻量级JavaScript库。
基本上,您将学习到如何选取HTML元素,以及如何对它们执行类似隐藏、移动以及操作其内容等任务。
jQuery库-特性
jQuery是一个JavaScript函数库。
jQuery库包含以下特性:
∙HTML元素选取
∙HTML元素操作
∙CSS操作
∙HTML事件函数
∙JavaScript特效和动画
∙HTMLDOM遍历和修改
∙AJAX
∙Utilities
基础jQuery实例
下面的例子演示了jQuery的hide()函数,隐藏了HTML文档中所有的
元素。
实例
$(document).ready(function(){
$(":
button").click(function(){
$("p").hide();
});
}
);
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
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函数位于一个documentready函数中:
$(document).ready(function(){
---jQueryfunctionsgohere----
});
这是为了防止文档在完全加载(就绪)之前运行jQuery代码。
选择器允许您对元素组或单个元素进行操作。
关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。
jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。
选择器允许您对HTML元素组或单个元素进行操作。
在HTMLDOM术语中:
选择器允许您对DOM元素组或单个DOM节点进行操作。
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事件处理函数是jQuery中的核心函数。
事件处理函数是当HTML中发生事件时自动被调用的函数。
由“事件”(event)“触发”(triggered)是经常被用到的术语。
在您
中由于jQuery是为事件处理特别设计的,通常是把jQuery代码置于网页
部分的“事件处理”函数中:所有事件函数都在文档自身的“事件处理器”内部进行定义:
$(document).ready(function(){..somecode...})
jQuery名称冲突
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数(比如Prototype)同样使用$符号。
jQuery使用名为noConflict()的方法来解决该问题。
varjq=jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$符号。
结论
由于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事件函数
隐藏、显示、切换、滑动以及动画。
Becausetimeisvaluable,wedeliverquickandeasylearning.
AtW3School,youcanstudyeverythingyouneedtolearn,inanaccessibleandhandyformat.
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:
jQuery切换
jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)
speed参数可以设置这些值:
"slow","fast","normal"或毫秒。
callback参数是在hide或show函数完成之后被执行的函数名称。
jQuery滑动函数-slideDown,slideUp,slideToggle
jQuery拥有以下滑动函数:
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
speed参数可以设置这些值:
"slow","fast","normal"或毫秒。
callback参数是在hide或show函数完成之后被执行的函数名称。
jQueryFade函数-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函数完成之后被执行的函数名称。
jQuery自定义动画
jQuery函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是params。
它定义了产生动画的属性。
可以同时设置多个此类属性:
animate({width:
"70%",opacity:
0.4,marginLeft:
"0.6in",fontSize:
"3em"});
第二个参数是duration。
它定义用来应用于动画的时间。
它设置的值是:
"slow","fast","normal"或毫秒。
HTML元素默认是静态定位,且无法移动。
如需使元素可以移动,请把CSS的position设置为relative或absolute。
jQuery效果-来自本页
函数
描述
$(selector).hide()
隐藏被选元素
$(selector).show()
显示被选元素
$(selector).toggle()
切换(在隐藏与显示之间)被选元素
$(selector).slideDown()
向下滑动(显示)被选元素
$(selector).slideUp()
向上滑动(隐藏)被选元素
$(selector).slideToggle()
对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()
淡入被选元素
$(selector).fadeOut()
淡出被选元素
$(selector).fadeTo()
把被选元素淡出为给定的不透明度
$(selector).animate()
对被选元素执行自定义动画
Becauseanimationstaketime.Wehavetowaitbeforewecanexecutethenextinstruction.
Thecallbackfunctioniscalledaftertheanimationis100%finished.
由于JavaScript语句(指令)是逐一执行的-按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加Callback函数。
jQueryCallback函数
当动画100%完成后,即调用Callback函数。
典型的语法:
$(selector).hide(speed,callback)
callback参数是一个在hide操作完成后被执行的函数。
结论:
如果您希望在一个涉及动画的函数之后来执行语句,请使用callback函数。
改变HTML内容
语法
$(selector).html(content)
html()函数改变所匹配的HTML元素的内容(innerHTML)。
添加HTML内容
语法
$(selector).append(content)
append()函数向所匹配的HTML元素内部追加内容。
$(selector).prepend(content)
prepend()函数向所匹配的HTML元素内部预置(Prepend)内容。
$(selector).after(content)
after()函数在所有匹配的元素之后插入HTML内容。
$(selector).before(content)
before()函数在所有匹配的元素之前插入HTML内容。
jQueryHTML操作-来自本页
函数
描述
$(selector).html(content)
改变被选元素的(内部)HTML
$(selector).append(content)
向被选元素的(内部)HTML追加内容
$(selector).prepend(content)
向被选元素的(内部)HTML“预置”(Prepend)内容
$(selector).after(content)
在被选元素之后添加HTML
$(selector).before(content)
在被选元素之前添加HTML
jQueryCSS操作
jQuery拥有三种供CSS操作的重要函数:
∙$(selector).css(name,value)
∙$(selector).css({properties})
∙$(selector).css(name)
实例
$(selector).css(name,value)
$("p").css("background-color","yellow");
jQuerySize操作
jQuery拥有两种供尺寸操作的重要函数:
∙$(selector).height(value)
∙$(selector).width(value)
jQueryCSS函数-来自本页
CSS属性
描述
$(selector).css(name,value)
为匹配元素设置样式属性的值
$(selector).css({properties})
为匹配元素设置多个样式属性
$(selector).css(name)
获得第一个匹配元素的样式属性值
$(selector).height(value)
设置匹配元素的高度
$(selector).width(value)
设置匹配元素的宽度
jQuery拥有供AJAX开发的丰富函数(方法)库。
什么是AJAX?
AJAX=AsynchronousJavaScriptandXML.
AJAX是一种创建快速动态网页的技术。
AJAX通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。
这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。
AJAX和jQuery
jQuery提供了供AJAX开发的丰富函数(方法)库。
通过jQueryAJAX,使用HTTPGet和HTTPPost,您都可以从远程服务器请求TXT、HTML、XML或JSON。
而且您可以直接把远程数据载入网页的被选HTML元素中!
写的更少,做的更多
jQuery的load函数是一种简单的(但很强大的)AJAX函数。
它的语法如下:
$(selector).load(url,data,callback)
请使用选择器来定义要改变的HTML元素,使用url参数来指定您的数据的web地址。
只有当您希望向服务器发送数据,才需要使用data参数。
只有当您需要在完毕之后触发一个函数时,您才需要使用callback参数。
LowLevelAJAX
$.ajax(options)是低层级AJAX函数的语法。
$.ajax提供了比高层级函数更多的功能,但是同时也更难使用。
option参数设置的是name|value对,定义url数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
jQueryAJAX请求
请求
描述
$(selector).load(url,data,callback)
把远程数据加载到被选的元素中
$.ajax(options)
把远程数据加载到XMLHttpRequest对象中
$.get(url,data,callback,type)
使用HTTPGET来加载远程数据
$.post(url,data,callback,type)
使用HTTPPOST来加载远程数据
$.getJSON(url,data,callback)
使用HTTPGET来加载远程JSON数据
$.getScript(url,callback)
加载并执行远程的JavaScript文件
(selector)jQuery元素选择器语法
(url)被加载的数据的URL(地址)
(data)发送到服务器的数据的键/值对象
(callback)当数据被加载时,所执行的函数
(type)被返回的数据的类型(html,xml,json,jasonp,script,text)
(options)完整AJAX请求的所有键/值对选项
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Jquery 学习 文档