脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 jQuery:轻量及的javaScript库
jqiery向页面添加jQuery库：
<script tyPE="text/javascript" src="jQuery.js"></script>
jQiery语法：
基础语法是：$(selector).action()
文档就绪函数：
$(document).ready(function(){
--- jQuery functions go here ----
});
一 jQiery选择器
1 元素选择器：
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
2 属性选择器：
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
3 CSS选择器:
$("p").css("background-color","red");把所有 p 元素的背景颜色更改为红色
4 更多选择器
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的元素
$("ul li:First") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性
$("p#intro .head") id="intro" 的 <p> 元素中的所有 class="head" 的元素
二 jQiery事件函数
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
例子：
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
三 jQuery效果
语法： $(selector).anction(speed,callback);
jQuery隐藏和显示
hide() 隐藏 show 显示 toggle()隐藏和显示切换 （其中这三个函数可带速度和回调函数参数）
jQuery淡入淡出(入：进入浏览器，出：出去流览器)
fadein() 淡入 fadeOut 淡出 fadeToggle()淡入淡出切换 fadeTo() 淡的透明度to(0--1)
$("#P3").fadeIn(3000);
$("#p2").fadeOut("slow");
$("#p3").fadeToggle(3000);
$("#p3").fadeTo("slow",0.7);
jQuery 滑动效果
slideDown() 向下滑动 slideUp() 向上滑动 slideToggle()向上向下滑动切换
四 jQuery 动画
语法： $(selector).aniMATE({params},speed,callback);
例子
$("button").click(function(){
VAR p=$("p");
p.animate({left:'100px'},"slow");
p.animate({fontSize:'3em'},"slow");
});
jQuery stop() 方法用于在动画或效果完成前对它们进行停止
$(selector).stop(stopAll,goToEnd);
Callback 函数在当前动画 100% 完成之后执行
语法:$(selector).hide(speed,callback)
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
五 获得HtML内容和属性
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值。
例子 $("#test").text(); $("#test").html() ;$("#test").val();$("#w3s").attr("href")
设置Html内容和属性
$("#test").text("hello"); $("#test").html("<h1>hello</h1>") ;
$("#test").val(hello");$("#w3s").attr("href","http://www.baidu.COM")
通过回调函数
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
六 添加新的 HTML 内容
append() - 在被选元素的结尾插入内容
PRepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$("p").prepend("Some prepended text.");
七 删除已有的 HTML 元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
八 操作css
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("p").css("background-color") 返回css属性值
$("p").css("background-color","yellow") 设置css属性
$("p").css({"background-color":"yellow","font-size":"200%"}) 设置多个css
九 尺寸方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）
outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）
$(document).height() 返回文档（HTML 文档）的宽度和高度
$(window).height() 返回窗口（浏览器视口）的宽度和高度
十 jQuery遍历
parent() 方法返回被选元素的直接父元素 $("span").parent()
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素的指定元素 $("p").find("span") $("p").find("*") 表示p后的所有元素
siblings() 方法返回被选元素的所有同胞元素 $("h2").siblings() h1 h2 h3 都会被找到
next() 方法返回被选元素的下一个同胞元素
first() 方法返回被选元素的首个元素
last() 方法返回被选元素的最后一个元素
eq() 方法返回被选元素中带有指定索引号的元素 $("p").eq(1)
filter() not() 方法返回匹配标准的所有元素 $("p").filter(".intro")
not() 方法返回不匹配标准的所有元素。
十一 Ajax
1: load() 方法从服务器加载数据，并把返回的数据放入被选元素中
语法：$(selector).load(URL,data,callback)
例子
$("button").click(function(){
$("#p1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
2: $.get() 方法通过 HTTP GET 请求从服务器上请求数据
语法:$.get(URL,callback)
例子
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "/nStatus: " + status);
});
});
3: $.post(URL,data,callback) 方法通过 HTTP POST 请求从服务器上请求数据并发送数据。
语法:$.post(URL,data,callback)
例子
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
cITy:"Duckburg"
},
function(data,status){
alert("Data: " + data + "/nStatus: " + status);
});
});
对应的asp文件
<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")
%>
觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！
以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery总结全部内容，希望文章能够帮你解决javascript代码实例教程-jQuery总结所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。