jQuery汇总
html
<input type="button" value="A" /> <input type="button" value="B" /> <input type="button" value="C" /> <div >A</div> <div>B</div> <div>C</div>
获得内容
text()、html() 以及 val()
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括 HTML 标记)
val() 设置或返回表单字段的值
txt+="Width: " + $("#div1").width() + "</br>";
滑动
sildeDown():向下滑动元素sildeUp():向上滑动元素sildeToggle():切换向上向下滑动
jQuery的使用
$("div").animate({
选择器
获得内容和属性
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
DOM = Document Object Model(文档对象模型)
$("button").click(function(){
添加
append():在被选元素的结尾插入内容perpend():在被选元素的开头插入内容after():在被选元素之后插入内容before():在被选元素之前插入内容
attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
获取和设置内容属性
text():设置或返回所选文本内容html():设置或返回所选元素的内容val():设置或返回表单字段的值
jQuery查询其他节点
$("#w3s").attr({
效果
过滤(缩写搜索元素的范围)
first() 返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
返回带有类名 "intro" 的所有 <p> 元素:
$(document).ready(function(){ $("p").filter(".intro"); });
not() 方法返回不匹配标准的所有元素。
not() 方法与 filter() 相反。
返回不带有类名 "intro" 的所有 <p> 元素:$(document).ready(function(){ $("p").not(".intro"); });
var txt="";
class选择器
$
设置内容和属性
opacity:'0.5',
css类
addClass():添加一个或多个类removeClass():删除一个或多个类
jQuery 效果
隐藏、显示、切换,滑动,淡入淡出,以及动画
$("button").click(function(){
DOM操作
操作HTML元素和属性的方法
获取属性
attr()
- $(selector).attr( 属性) 方法用于获取属性值
例子:如何获得链接中 href 属性的值:
$("button").click(function(){
alert($("#w3s").attr("href"));
});
- jQuery删除
元素选择器
$('element')
$ 选择所有div元素中的p元素$('#div>*') 选择id为div元素的所有子元素$('div + p') 选择所有div的下一个元素p$("#div ~ div")选择id为div元素之后所有同一父级的div标签
:first 选择第一个元素:last 选取最后一个元素:not 取非元素
jQuery 事件函数
jQuery 代码放到
部分的事件处理方法
$("button").click(function() {..some code... } )
单独文件中的函数
如果您的网站包含许多页面,并且您希望您的 jQuery
函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。
和导入jQuery库文件一样。
jQuery 事件
Event 函数 | 绑定函数至 |
---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件(当文档完成加载时) |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件 |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
})
id选择器
$
jQuery ID选择器
- $("#name") 选取 ID名字为 name的元素。
$("#div2").fadeIn("slow");
jQuery
$(function(){ $.click(function(){ $.addClass('current').siblings().removeClass() var $i = $.index $.hide.show
jQuery的导入
要使用jQuery首先要导入jQuery文件导入的方式分两种本地导入和网络导入(其实就上用网上的jQuery库)
$("p").remove(".italic");删除 class="italic" 的所有 <p> 元素
显示隐藏
show(speed,callback):显示hide(speed,callback): 隐藏toggle(speed,callback);切换显示和隐藏
本地导入
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
注意:
导入文件的这对<script>标签里不能再写jquery代码,不然会出错。
before() - 在被选元素之前插入内容;$("img").before("Some text after");
文档就绪函数
$.ready(function 简化为$(function
jQuery 选择器
$(“#test1”).text(hello);
删除
remove():删除被选元素empty():删除被选元素的子元素
jQuery 简介
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
addClass() - 向被选元素添加一个或多个类
jQuery实例
隐藏和显示
hide() 隐藏HTML 元素
show() 显示 HTML 元素
toggle() 切换 hide() 和 show() 方法
- 显示被隐藏的元素,并隐藏已显示的元素:
- $(selector).toggle(speed,callback)
- 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast"
或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
$("button").click(function(){
css
div{ width: 200px; height: 200px; background-color: #ccc; font-size: 100px; text-align: center; line-height: 200px; display: none; } .current{ background-color: skyblue; } .show{ display: block; }
基础语法
$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
});
尺寸
width():设置或返回元素的宽度(不包含内边距,边框和外边距)height():设置或返回元素的高度(不包含内边距,边框和外边距)outerWidth():返回元素的宽度outerHeight():返回元素的高度offset():函数用于设置或返回当前匹配元素相对于当前文档的偏移
[toc]
$(“#btn2”).click(function(){
淡入淡出
fadeIn():淡入已隐藏的元素fadeOut():淡出可见元素fadeToggle():切换淡入和淡出效果
网络导入
如果您不愿意在自己的计算机上存放 jQuery 库,那么可以从 Google 或
Microsoft 加载 CDN jQuery 核心文件。
Google 的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
Microsoft 的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>
使用谷歌或微软的 jQuery,有一个很大的优势:
许多用户在访问其他站点时,已经从谷歌或微软加载过 jQuery。所有结果是,当他们访问您的站点时,会从缓存中加载 jQuery,这样可以减少加载时间。同时,大多数 CDN 都可以确保当用户向其请求文件时,会从离用户最近的服务器上返回响应,这样也可以提高加载速度。
$("#btn2").click(function(){
选取HTML元素,并对它们执行操作基础语法 : $.action()原则 : Get first Set all
后代
children() 返回被选元素的所有直接子元素。
find() 返回被选元素的后代元素,一路向下直到最后一个后代。
- find("selector") 返回属于被选元素后代的所有selector 元素
- **find("*")** 返回被选元素的所有后代
用于根据其相对于其他元素的关系来“查找”(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
遍历
用根据其相对于其他元素的关系来'查找'HTML元素,以某项选择器开始,并沿着这个选择移动,直到抵达期望的元素为止each:函数用于以当前jQuery对象匹配到每个元素作为上下文来遍历执行指定的函数eq:获取当前index所对应的jQuery对象find:函数用于选取每个元素匹配指定表达是expr的后代元素index():函数用于获取当前jQuery对象中指定DOM元素的索引值
next():获得匹配元素集合中每个元素紧邻的同辈元素prev():获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选:把当前匹配集合中的每个元素传递给函数,产生包含返回值的新 jQuery 对象。filter():filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。siblings():获得匹配元素集合中所有元素的同辈元素,由选择器筛选。
滑动
slideDown() 方法用于向下滑动元素。
语法:
- $(selector).slideDown(speed,callback)
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
slideUp() 方法用于向上滑动元素。
语法:
- $(selector).slideUp(speed,callback)
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
语法:
- $(selector).slideToggle(speed,callback)
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
$(“button”).click(function(){
淡入淡出
- fadeIn() 用于淡入已隐藏的元素。
- 语法:
- $(selector).fadeIn(speed,callback)
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut() 方法用于淡出可见元素。
语法:
- $(selector).fadeOut(speed,callback)
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
- $(selector).fadeToggle(speed,callback)
- 可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
- $(selector).fadeTo(speed,opacity,callback)
- 必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
- fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
- 可选的 callback 参数是该函数完成后所执行的函数名称。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
jQuery CLASS选择器
- $(".name") 选取 class名字为 name的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$(selector).css("属性":"值");
$("p").css("background-color","red");
$("#panel").slideToggle();
设置内容
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括 HTML 标记)
val() 设置或返回表单字段的值
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及
val(),同样拥有回调函数。
回调函数由两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
例子演示带有回调函数的 text() 和 html():
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "Old html: " + origText + " New html: Hello <b>world!</b>
(index: " + i + ")";
});
});
$("#div1").fadeIn();
删除元素/内容
remove() 删除被选元素(及其子元素)
empty() 从被选元素中删除子元素
5. callback函数:在当前动画100%完成之后执行。$(selector).hide(speed,callback);callback 参数是一个在 hide 操作完成后被执行的函数。若想在一个涉及动画的函数之后来执行语句,则使用 callback 函数。
动画
animate() 方法用于创建自定义动画。
语法:
- $(selector).animate({params},speed,callback)
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
animate() - 操作多个属性
请注意,生成动画的过程中可同时使用多个属性:
- 当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right
animate() - 使用相对值
- 也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:
animate() - 使用预定义的值
- 您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
});
获取并设置 CSS 类
- addClass() 向被选元素添加一个或多个类
- removeClass() 从被选元素删除一个或多个类
- toggleClass() 对被选元素进行添加/删除类的切换操作
- css() 设置或返回被选元素的一个或多个样式属性。
返回 CSS 属性
语法: css("propertyname")
$("p").css("background-color");
设置多个 CSS 属性
css({"propertyname":"value","propertyname":"value",...})
width() 设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 返回元素的宽度(包括内边距)。
innerHeight() 返回元素的高度(包括内边距)。
outerWidth() 返回元素的宽度(包括内边距和边框)。
outerHeight() 返回元素的高度(包括内边距和边框)。
innerWidth();返回元素的宽度(包括内边距)
兄弟
siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil("selector") 返回介于两个给定参数之间的所有跟随的同胞元素
prev() 返回的是前面的同胞元素
prevAll() 返回被选元素的前面的同胞元素。
prevUntil("selector") 返回介于两个给定参数之间的所有跟随的同胞元素(向前)
$("#div1").html(txt);
jQuery 元素选择器
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$(“div”).animate({left:’260px’});
添加元素
添加新内容的四个 jQuery 方法
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容
注意:通过 append() 和 prepend() 方法添加若干新元素
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
css() - 设置或返回被选元素的一个或多个样式属性。
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值
$(selector).attr( 属性:属性值)
attr() 方法也允许您同时设置多个属性
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
prepend() - 在被选元素的开头插入内容;$("p").prepend("Some appended text.
jQuery HTML
jQuery 拥有可操作 HTML 元素和属性的强大方法。
$("[href='#']")选取所有href值等于#的元素
祖先
parent() 返回被选元素的直接父元素。
parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
返回所有 元素的所有祖先:
$(document).ready(function(){
$("span").parents();
});
您也可以使用可选参数来过滤对祖先元素的搜索。
例子返回所有 元素的所有祖先,并且它是
$(document).ready(function(){
$("span").parents("ul");
});
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
返回介于 与
元素之间的所有祖先元素:
$(document).ready(function(){
$("span").parentsUntil("div");
});
$("#div3").fadeOut(3000);
jQuery 语法
});
jQuery 事件
jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML
中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
});
jQuery 属性选择器
jQuery 使用** XPath 表达式**来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
(("[href)='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
- $("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
$("#stop").click(function(){
$("button").click(function(){
ps:
txt+="Height: " + $("#div1").height();
height();设置或返回元素的高度。
<script>
$("#div1").fadeTo("slow",0.15);
$(document).ready(function(){ //为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
.slideUp(2000)
可以使用相对值;如
append() - 在被选元素的结尾插入内容;$("p").append("Some appended text.");
val() - 设置或返回表单字段的值
alert("The paragraph is now hidden");
Ps: 把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色,然后向上滑动,然后向下滑动.
alert("HTML: " + $("#test").html());
width:'+=150px'
$("#flip").click(function(){
jQuery attr() 方法用于获取属性值。
- Jquery设置
a. hide()用法:隐藏元素。
jQuery库特性:HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities
- 链接(chaining)的技术:允许在相同的元素上运行多条jQuery命令。
- jQuery 元素选择器
});
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
alert($("#w3s").attr("href"));
outerHeight();返回元素的高度(包括内边距和边框)
height:'+=150px',
- jQuery获取
$("#div1").html(txt);
$("#div3").fadeTo("slow",0.7);
$("#panel").slideDown();
d. fadeTo():$(selector).fadeTo(speed,opacity,callback);允许渐变为给定的不透明度(值介于 0 与 1 之间)
2. jQuery添加
$("#p1").show();
$("div").animate({
- jQuery css选择器
Ps:默认所有html元素位置都是静态的,无法移动,若要对位置进行操作,必须先将css position属性设置为relative、fixed或absolute。
var div=$("div");
$("#panel").slideUp();
- 滑动函数:可以在元素上创建滑动效果。
$("p").css("background-color","red");
});
$(“#test3”).val(“hhh”);
a. fadeIn()函数:$(selector).fadeIn(speed,callback);用于淡入已隐藏的元素
c. fadeToggle()函数:$(selector).fadeToggle(speed,callback);切换fadeIn()和fadeOut()函数
opacity 参数(必选)将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
});
});
$("button").click(function(){
$("#div2").fadeTo("slow",0.4);
b. slideUp()函数:向上滑动元素。$(selector).slideUp(speed,callback);
- jQuery尺寸
$("[href!='#']")选取所有href值不等于#的元素
$("button").click(function(){
});
b. stop()函数:停止滑动或动画。$(selector).stop(stopAll,goToEnd); stopAll 参数(可选)规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。goToEnd 参数(可选)规定是否立即完成当前动画。默认是 false。stop()默认会清除在被选元素上指定的当前动画。
div.animate({width:'100px',opacity:'0.8'},"slow");
$(“btn1”).click(function(){
});
$(document).ready(function(){
})
等价于
$(function(){
})
});
removeClass() - 从被选元素删除一个或多个类
"title" : "W3School jQuery Tutorial"
speed 参数(必选)规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
});
$("button").click(function(){
var txt="";
$("button").click(function(){
c. slideToggle()函数:切换slideDown()函数和slideUp()。$(selector).slideToggle(speed,callback);
$(“#btn3”).click(function(){
$("#div1").fadeOut();
$("#flip").click(function(){
left:'250px',
$("#div3").fadeIn(3000);
div.animate({height:'100px',opacity:'0.4'},"slow");
jQuery 可以选取某些元素并执行相应的操作,可以通过元素名、属性名、类名或者ID选择。
$("p") 选取 <p> 元素。
$(selector).mouseover(function);将函数绑定到被选元素的鼠标悬停事件
txt+="Inner height: " + $("#div1").innerHeight();
- 隐藏/显示函数
});
jQuery remove() 方法删除被选元素及其子元素。$("#div1").remove();
$(selector).focus(function);将函数绑定到被选元素获得焦点事件
一. jQuery函数
$("p").toggle();
$("p").css("background-color");
等价于
after() - 在被选元素之后插入内容;$("img").after("Some text after");
});
.slideDown(2000);
$("button").click(function(){
innerHeight();返回元素的高度(包括内边距)
});
更多可选项:$(this).hide(); $("p").hide(); $(".t").hide; $("#t").hide()
$("div").addClass("important");
$(this).hide();//隐藏当前的html元素
$(selector).hide(speed,callback);参数可选。
- 动画效果函数:
- jQuery操作css
$("#p1").css("color","red")
txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
$("button").click(function(){
})
height:'150px',
$(“#test2”).html(“<b>heo</b>”);
toggleClass() - 对被选元素进行添加/删除类的切换操作
});
可以使用队列功能;如
});
});
$("p").css("background-color","yellow");
width:'150px'
speed 参数规定隐藏/显示的速度,可取以下值:"slow"、"fast" 或毫秒。
});
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)
$("[href]") 选取所有带有href属性的元素
$("button").click(function(){
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("#btn1").click(function(){
});
left:'250px',
六.jQuery遍历
- 用于 DOM 操作的 jQuery 方法
text() - 设置或返回所选元素的文本内容
- jQuery属性选择器
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
});
a. slideDown()函数:向下滑动元素。$(selector).slideDown(speed,callback);
三. jquery事件
二. jQuery选择器
html() - 设置或返回所选元素的内容(包括 HTML 标记)
b. show()函数:根据对选择器的操作显示相应的元素
$("h1,h2,p").removeClass("blue");
$("#panel").stop();
jQuery empty() 方法删除被选元素的子元素。$("#div1").empty();
jQuery 使用 CSS 选择器来选取 HTML 元素。
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
callback 参数(可选)是该函数完成后所执行的函数名称。
未完待续。。。。。。
$(selector).click(function);将函数绑定到被选元素的点击事件
});
</script>
outerWidth();返回元素的宽度(包括内边距和边框)
width();设置或返回元素的宽度。
$(document).ready(function);将函数绑定到文档就绪事件
- 淡入淡出效果函数:
$("#btn1").click(function(){
});
$("p").click(function(){
可以使用预定义的值,有show、hide或toggle;如
$(selector).dbclick(function);将函数绑定到被选元素的双击事件
基础语法是:$(selector).action()
<script src="D:demojQuerytestjquery-2.2.2.min.js"></script>
});
alert("Value: " + $("#test").val());
});
alert("Text: " + $("#test").text());
});
jQuery是轻量级的JavaScript库,jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数。更少的代码做更多的事。
$("#div2").fadeOut("slow");
});
height:'toggle'
b. fadeOut()函数:$(selector).fadeOut(speed,callback);根据不同的参数元素以不同的速度淡出可见元素。
$("p").hide(1000,function(){
$("div").animate({
});
$("#show").click(function(){
callback 参数是隐藏或显示完成后所执行的函数名称。
四. jQuery HTML
$("h1,h2,p").addClass("blue");
"href" : "",
$("#flip").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
生成动画的时候可以操作多个属性;如
$("button").click(function(){
c. toggle()函数:切换hide()和show()函数.$(selector).toggle(speed,callback);
$("h1,h2,p").toggleClass("blue");
});
a. animate()函数:用于创建自定义动画。$(selector).animate({params},speed,callback);params参数(必选)定义形成动画的css属性,speed参数(可选)规定动画效果的时长,取值有:slow,fast或毫秒数。
$("[href$='.jpg']")选取所有href值以jpg结尾的元素
$("button").click(function(){
});
版权声明:本文由澳门新葡亰平台游戏发布于网络编程,转载请注明出处:jQuery汇总