Jquery学习笔记.docx
- 文档编号:15297465
- 上传时间:2023-07-03
- 格式:DOCX
- 页数:23
- 大小:22.55KB
Jquery学习笔记.docx
《Jquery学习笔记.docx》由会员分享,可在线阅读,更多相关《Jquery学习笔记.docx(23页珍藏版)》请在冰点文库上搜索。
Jquery学习笔记
Jquery学习笔记
Hide函数
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
Thisisaheading
Thisisaparagraph.
jQuery语法实例
$(this).hide()
演示jQuery的hide()函数,隐藏当前的HTML元素。
$("p").hide()
演示jQuery的hide()函数,隐藏所有
元素。
$(".test").hide()
演示jQuery的hide()函数,隐藏所有class="test"的元素。
$("#test").hide()
演示jQuery的hide()函数,隐藏id="test"的元素。
jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选取
元素。
$("p.intro")选取所有class="intro"的
元素。
$("p#demo")选取id="demo"的第一个
元素
Remark:
.class即CSS;#id
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!
='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jQueryCSS选择器
jQueryCSS选择器可用于改变HTML元素的CSS属性。
下面的例子把所有p元素的背景颜色更改为红色:
实例
$("p").css("background-color","red");
jQuery事件函数
jQuery事件处理方法是jQuery中的核心函数。
事件处理程序指的是当HTML中发生某些事件时所调用的方法。
术语由事件“触发”(或“激发”)经常会被使用。
通常会把jQuery代码放到
部分的事件处理方法中:实例
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
jQuery名称冲突
jQuery使用$符号作为jQuery的简介方式。
某些其他JavaScript库中的函数(比如Prototype)同样使用$符号。
jQuery使用名为noConflict()的方法来解决该问题。
varjq=jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$符号。
jQuery事件
下面是jQuery中事件方法的一些例子:
Event函数
绑定函数至
$(document).ready(function)
将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function)
触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)
触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)
触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
jQuery隐藏和显示
通过hide()和show()两个函数,jQuery支持对HTML元素的隐藏和显示:
实例
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide()和show()都可以设置两个可选参数:
speed和callback。
语法:
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
speed参数规定显示或隐藏的速度。
可以设置这些值:
"slow","fast","normal"或毫秒。
callback参数是在hide或show函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
jQuery切换
jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)
speed参数可以设置这些值:
"slow","fast","normal"或毫秒。
实例
$("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参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
slideDown()实例
$(".flip").click(function(){
$(".panel").slideDown();
});
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参数是在该函数完成之后被执行的函数名称。
您将在本教程下面的章节学习更多有关callback参数的知识。
fadeTo()实例
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
jQueryCallback函数
当动画100%完成后,即调用Callback函数。
典型的语法:
$(selector).hide(speed,callback)
callback参数是一个在hide操作完成后被执行的函数。
错误(没有callback)
$("p").hide(1000);
alert("Theparagraphisnowhidden");
亲自试一试
正确(有callback)
$("p").hide(1000,function(){
alert("Theparagraphisnowhidden");
});
jQueryHTML操作-来自本页
函数
描述
$(selector).html(content)
改变被选元素的(内部)HTML
$(selector).append(content)
向被选元素的(内部)HTML追加内容
$(selector).prepend(content)
向被选元素的(内部)HTML“预置”(Prepend)内容
$(selector).after(content)
在被选元素之后添加HTML
$(selector).before(content)
在被选元素之前添加HTML
jQueryCSS函数-来自本页
CSS属性
描述
$(selector).css(name,value)
为匹配元素设置样式属性的值
$(selector).css({properties})
为匹配元素设置多个样式属性
$(selector).css(name)
获得第一个匹配元素的样式属性值
$(selector).height(value)
设置匹配元素的高度
$(selector).width(value)
设置匹配元素的宽度
AJAX和jQuery
jQuery提供了用于AJAX开发的丰富函数(方法)库。
通过jQueryAJAX,使用HTTPGet和HTTPPost,您都可以从远程服务器请求TXT、HTML、XML或JSON。
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文件
(url)被加载的数据的URL(地址)
(data)发送到服务器的数据的键/值对象
(callback)当数据被加载时,所执行的函数
(type)被返回的数据的类型(html,xml,json,jasonp,script,text)
(options)完整AJAX请求的所有键/值对选项
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事件方法
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发id="demo"的button元素的click事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击id="demo"的按钮时隐藏所有图像。
方法
描述
bind()
向匹配元素附加一个或更多事件处理器
blur()
触发、或将函数绑定到指定元素的blur事件
change()
触发、或将函数绑定到指定元素的change事件
click()
触发、或将函数绑定到指定元素的click事件
dblclick()
触发、或将函数绑定到指定元素的doubleclick事件
delegate()
向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()
移除所有通过live()函数添加的事件处理程序。
error()
触发、或将函数绑定到指定元素的error事件
event.isDefaultPrevented()
返回event对象上是否调用了event.preventDefault()。
event.pageX
相对于文档左边缘的鼠标位置。
event.pageY
相对于文档上边缘的鼠标位置。
event.preventDefault()
阻止事件的默认动作。
event.result
包含由被指定事件触发的事件处理器返回的最后一个值。
event.target
触发事件的DOM元素。
event.timeStamp
该属性返回从1970年1月1日到事件发生时的毫秒数。
event.type
描述事件的类型。
event.which
指示按了哪个键或按钮。
focus()
触发、或将函数绑定到指定元素的focus事件
keydown()
触发、或将函数绑定到指定元素的keydown事件
keypress()
触发、或将函数绑定到指定元素的keypress事件
keyup()
触发、或将函数绑定到指定元素的keyup事件
live()
触发、或将函数绑定到指定元素的load事件
load()
触发、或将函数绑定到指定元素的load事件
mousedown()
触发、或将函数绑定到指定元素的mousedown事件
mouseenter()
触发、或将函数绑定到指定元素的mouseenter事件
mouseleave()
触发、或将函数绑定到指定元素的mouseleave事件
mousemove()
触发、或将函数绑定到指定元素的mousemove事件
mouseout()
触发、或将函数绑定到指定元素的mouseout事件
mouseover()
触发、或将函数绑定到指定元素的mouseover事件
mouseup()
触发、或将函数绑定到指定元素的mouseup事件
one()
向匹配元素添加事件处理器。
每个元素只能触发一次该处理器。
ready()
文档就绪事件(当HTML文档就绪可用时)
resize()
触发、或将函数绑定到指定元素的resize事件
scroll()
触发、或将函数绑定到指定元素的scroll事件
select()
触发、或将函数绑定到指定元素的select事件
submit()
触发、或将函数绑定到指定元素的submit事件
toggle()
绑定两个或多个事件处理器函数,当发生轮流的click事件时执行。
trigger()
所有匹配元素的指定事件
triggerHandler()
第一个被匹配元素的指定事件
unbind()
从匹配元素移除一个被添加的事件处理器
undelegate()
从匹配元素移除一个被添加的事件处理器,现在或将来
unload()
触发、或将函数绑定到指定元素的unload事件
jQuery效果函数
方法
描述
animate()
对被选元素应用“自定义”的动画
clearQueue()
对被选元素移除所有排队的函数(仍未运行的)
delay()
对被选元素的所有排队函数(仍未运行)设置延迟
dequeue()
运行被选元素的下一个排队函数
fadeIn()
淡入被选元素至完全不透明
fadeOut()
淡出被选元素至完全不透明
fadeTo()
把被选元素减弱至给定的不透明度
hide()
隐藏被选的元素
queue()
显示被选元素的排队函数
show()
显示被选的元素
slideDown()
通过调整高度来滑动显示被选元素
slideToggle()
对被选元素进行滑动隐藏和滑动显示的切换
slideUp()
通过调整高度来滑动隐藏被选元素
stop()
停止在被选元素上运行动画
toggle()
对被选元素进行隐藏和显示的切换
jQuery文档操作方法
这些方法对于XML文档和HTML文档均是适用的,除了:
html()。
方法
描述
addClass()
向匹配的元素添加指定的类名。
after()
在匹配的元素之后插入内容。
append()
向匹配的元素内部追加内容。
appendTo()
向匹配的元素内部追加内容。
attr()
设置或返回匹配元素的属性和值。
before()
在每个匹配的元素之前插入内容。
clone()
创建匹配元素集合的副本。
detach()
从DOM中移除匹配元素集合。
empty()
删除匹配的元素集合中所有的子节点。
hasClass()
检查匹配的元素是否拥有指定的类。
html()
设置或返回匹配的元素集合中的HTML内容。
insertAfter()
把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()
把匹配的元素插入到另一个指定的元素集合的前面。
prepend()
向每个匹配的元素内部前置内容。
prependTo()
向每个匹配的元素内部前置内容。
remove()
移除所有匹配的元素。
removeAttr()
从所有匹配的元素中移除指定的属性。
removeClass()
从所有匹配的元素中删除全部或者指定的类。
replaceAll()
用匹配的元素替换所有匹配到的元素。
replaceWith()
用新内容替换匹配的元素。
text()
设置或返回匹配元素的内容。
toggleClass()
从匹配的元素中添加或删除一个类。
unwrap()
移除并替换指定元素的父元素。
val()
设置或返回匹配元素的值。
wrap()
把匹配的元素用指定的内容或元素包裹起来。
wrapAll()
把所有匹配的元素用指定的内容或元素包裹起来
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Jquery 学习 笔记