jQuery权威教材.docx
- 文档编号:9789392
- 上传时间:2023-02-06
- 格式:DOCX
- 页数:66
- 大小:41.22KB
jQuery权威教材.docx
《jQuery权威教材.docx》由会员分享,可在线阅读,更多相关《jQuery权威教材.docx(66页珍藏版)》请在冰豆网上搜索。
jQuery权威教材
jQuery选择器
序号
选择器
实例
选取
1
*
$(“*”)
所有元素
2
#id
$(“#lastname”)
id=“lastname”的元素
3
.class
$(“.intro”)
所有class=“intro”的元素
4
element
$(“p”)
所有
元素
5
.class.class
$(“.intro.demo”)
所有class=“intro”且class=“demo”的元素
6
:
first
$(“p:
first”)
第一个
元素
7
:
last
$(“p:
last”)
最后一个
元素
8
:
even
$(“tr:
even”)
所有偶数
9
:
odd
$(“tr:
odd”)
所有奇数
10
:
eq(index)
$(“ulli:
eq(3)”)
列表中的第四个元素(index从0开始)
11
:
gt(no)
$(“ulli:
gt(3)”)
列出index大于3的元素
12
:
lt(no)
$(“ulli:
lt(3)”)
列出index小于3的元素
13
:
not(selector)
$(“input:
not(:
empty)”)
所有不为空的input元素
14
:
header
$(“:
header”)
所有标题元素
--
15
:
animated
所有动画元素
16
:
contains(text)
$(“:
contains(“W3School”)”)
包含指定字符串的所有元素
17
:
empty
$(“:
empty”)
无子(元素)节点的所有元素
18
:
hidden
$(“p:
hidden”)
所有隐藏的
元素
19
:
visible
$(“table:
visible”)
所有可见的表格
20
s1,s2,s3
$(“th,td,.intro”)
所有带有匹配选择的元素
21
[attribute]
$(“[href]”)
所有带有href属性的元素
22
[attribute=value]
$(“[href=‘#’]”)
所有href属性的值等于”#”的元素
23
[attribute!
=value]
$(“[href!
=‘#’]”)
所有href属性的值不等于”#”的元素
24
[attribute$=value]
$(“[href$=‘.jpg’]”)
所有href属性的值包含以”.jpg”结尾的元素
25
:
input
$(“:
input”)
所有元素
26
:
text
$(“:
text”)
所有type=“text”的元素
27
:
password
$(“:
password”)
所有type=“password”的元素
28
:
radio
$(“:
radio”)
所有type=“radio”的元素
29
:
checkbox
$(“:
checkbox”)
所有type=“checkbox”的元素
30
:
submit
$(“:
submit”)
所有type=“submit”的元素
31
:
reset
$(“:
reset”)
所有type=“reset”的元素
32
:
button
$(“:
button”)
所有type=“button”的元素
33
:
image
$(“:
image”)
所有type=“image”的元素
34
:
file
$(“:
file”)
所有type=“file”的元素
35
:
enabled
$(“:
enabled”)
所有激活的input元素
36
:
disabled
$(“:
disabled”)
所有禁用的input元素
37
:
selected
$(“:
selected”)
所有被选取的input元素
38
:
checked
$(“:
checked”)
所有被选中的input元素
实例
一、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函数位于一个documentready函数中:
这是为了防止文档在完全加载(就绪)之前运行jQuery代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。
1、演示jQuery的hide()函数,隐藏当前的HTML元素
$(document).ready(function(){
$("button").click(function(){
$(this).hide();});
});
2、演示jQuery的hide()函数,隐藏所有
元素
$(document).ready(function(){
$("button").click(function(){
$("p").hide();});
});
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
3、演示jQuery的hide()函数,隐藏所有class="test"的元素
$(document).ready(function()
{$("button").click(function()
{$(".test").hide();});
});
Thisisanotherparagraph.
4、演示jQuery的hide()函数,隐藏id="test"的元素
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();});
});
Thisisaheading
Thisisaparagraph.
二、Hiding-Sliding-Fading
jQuery可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
①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 参数的知识。
$(“button”).click(function(){$(“p”).hide(1000);});
②jQuery切换:
jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
$(selector).toggle(speed,callback);$(“button”).click(function(){$(“p”).toggle();});
③jQuery滑动函数:
—slideDown,slideUp,slideToggle;$(selector).slideDown(speed,callback),$(selector).slideUp(speed,callback),$(selector).slideToggle(speed,callback);$(“.flip”).click(function(){$(“.panel”).slideDown();});$(“.flip”).click(function(){$(“.panel”).slideup();});$(“.flip”).click(function(){$(“.panel”).slideToggle();});
④jQueryFade函数:
--fadeIn(),fadeOut(),fadeTo();$(selector).fadeIn(speed,callback);$(selector).fadeOut(speed,callback);$(selector).fadeTo(speed,opacity,callback);fadeTo()函数中的 opacity 参数规定减弱到给定的不透明度。
$(“button”).click(function(){$(“div”).fadeTo(“slow”,0.25);});$(“button”).click(function(){$(“div”).fadeOut(4000);});
⑤jQuery自定义动画:
$(selector).animate({params},[duration],[easing],[callback]);关键的参数是 params。
它定义产生动画的CSS属性。
可以同时设置多个此类属性:
animate({width:
”70%”,opacity:
0.4,marginLeft:
”0.6in”,fontSize:
”3em”});第二个参数是 duration。
它定义用来应用到动画的时间。
它设置的值是:
"slow","fast","normal"或毫秒。
300},”slow”);$(“box”).animate({width:
300,”slow”});$(“#box”).animate({height:
100,”slow”});$(“#box”).animate({width:
100},”slow”);});});
HTML元素默认是静态定位,且无法移动,如需使元素可以移动,请把CSS的position设置为relative或absolute。
函数
描述
函数
描述
$(selector).hide()
隐藏被选元素
$(selector).slideToggle()
对被选元素切换向上滑动和向下滑动
$(selector).show()
显示被选元素
$(selector).fadeIn()
淡入被选元素
$(selector).toggle()
切换(在隐藏与显示之间)被选元素
$(selector).fadeOut()
淡出被选元素
$(selector).slideDown()
向下滑动(显示)被选元素
$(selector).fadeTo()
把被选元素淡出为给定的不透明度
$(selector).slideUp()
向上滑动(隐藏)被选元素
$(selector).animate()
对被选元素执行自定义动画
三、HTML操作
1改变Html内容:
$(selector).html(content);html()函数改变所匹配的HTML元素的内容(innerHTML)。
$(“p”).html(“School”);
②添加HTML内容:
$(selector).append(content);append()函数向所匹配的HTML元素内部追加内容。
//$(selector).prepend(content);prepend()函数向所匹配的HTML元素内部预置(Prepend)内容。
$(“p”).append(“School”);//$(selector).after(content);after()函数在所有匹配的元素之后插入HTML内容。
//$(selector).before(content);before()函数在所有匹配的元素之前插入HTML内容。
函数
描述
函数
描述
$(selector).html(content)
改变被选元素的(内部)HTML
$(selector).after(content)
在被选元素之后添加HTML
$(selector).append(content)
向被选元素的(内部)HTML追加内容
$(selector).before(content)
在被选元素之前添加HTML
$(selector).prepend(content)
向被选元素的(内部)HTML“预置”(Prepend)内容
1、改变HTML元素的内容
$(document).ready(function(){
$("button").click(function(){
$("p").html("W3School");});
});
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
2、向HTML元素追加内容
$(document).ready(function(){ $("#btn1").click(function(){ $("p").append("Appendedtext.");}); $("#btn2").click(function(){ $("ol").append("
});
Thisisaparagraph.
Thisisanotherparagraph.
- Listitem1
- Listitem2
- Listitem3
3、在HTML元素之后追加内容
$(document).ready(function(){ $("#btn1").click(function(){ $("img").before("Before");}); $("#btn2").click(function(){ $("img").after("After");}); });
四、CSS操作
1jQuerycss()方法:
css()方法设置或返回被选元素的一个或多个样式属性。
如需返回指定的CSS属性的值,请使用如下语法:
css(“propertyname”);$(“p”).css(“background-color”);
②设置CSS属性:
如需设置指定的CSS属性,请使用如下语法:
css(“propertyname”,”value”);$(“p”).css(“background-color”,”red”);
③设置多个CSS属性:
如需设置多个CSS属性,请使用如下语法:
css({“propertyname”:
”value”,”propertyname”:
”value”,...})
1、改变HTML元素的CSS属性
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","red");});
});
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
2、改变多个CSS属性
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":
"red","font-size":
"200%"});});
});
Thisisaheading
Thisisaparagraph.
Thisisanotherparagraph.
3、获得元素的CSS属性
$(document).ready(function(){ $("button").click(function(){ alert("Backgroundcolor="+$("p").css("background-color"));}); });
这是标题
#ff00 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1