jQuery基础教程
jQuery语法
基础语法：$(selector).action()
- 美元符号定义jQuery
- 选择符查询和查找HTML元素
- jQuery的action执行对元素的操作
jQuery选择器
元素选择器
- $(“p”)选择页面上的<p>元素
#id选择器
- $(“#test”)选择页面上有id=”test”属性的元素
.class选择器
- $(“.test”)选择页面上有class=“test”属性的元素
其他
- $(“*”)选择所有元素
- $(this)选取当前HTML元素
- $(“p.intro”)选取class为intro的<p>元素
- $(“p:first”)选取第一个<p> 元素
- $(“ul li:first”)选取第一个 <ul> 元素的第一个 <li> 元素
- $(“ul li:first-child”)选取每个 <ul> 元素的第一个 <li> 元素
- $(“[href]”)选取带有 href 属性的元素
- $(“a[target=’blank’]”)选取所有 target 属性值等于 “blank” 的 <a> 元素
- $(“a[target!=’blank’]”)选取所有 target 属性值不等于 “blank” 的 <a> 元素
- $(“:button”)选取所有 type=”button” 的 <input> 元素 和 <button> 元素
- $(“tr:even”)选取偶数位置的 <tr> 元素
- $(“tr:odd”)选取奇数位置的 <tr> 元素
jQuery事件
鼠标事件
click点击
$("p").click(function(){ alert("段落被点击了。"); });dbclick双击
$("p").dblclick(function(){ alert("这个段落被双击。"); });mouseenter鼠标移入
$("p").mouseenter(function(){ $("p").css("background-color","yellow"); });mouseleave鼠标移出
$("p").mouseleave(function(){ $("p").css("background-color","gray"); });
键盘事件
keypress按下
$("input").keypress(function(){ $("span").text(i+=1); });keydown按下的过程
$("input").keydown(function(){ $("input").css("background-color","yellow"); });keyup键盘松开
$("input").keyup(function(){ $("input").css("background-color","pink"); });hover悬停
$("p").hover(function(){ $("p").css("background-color","yellow"); },function(){ $("p").css("background-color","pink"); });
表单事件
submit提交
$("form").submit(function(){ alert("提交"); });change文本内容变化
$("input").change(function(){ alert("文本已被修改"); });focus获取焦点
$("input").focus(function(){ $("span").css("display","inline").fadeOut(2000); });blur失去焦点
$("input").blur(function(){ alert("输入框失去了焦点"); });
文档窗口事件
load载入(在jQuery1.8中已被废弃)
$("img").load(function(){ alert("图片已载入"); });resize窗口调整大小
$(window).resize(function(){ $('span').text(x+=1); });scroll滚动指定元素
$("div").scroll(function(){ $("span").text(x+=1); });unload离开页面、点击某个离开的链接、键入新的URL、使用前进或后退按钮、关闭浏览器窗口、重新加载页面(在jQuery1.8中已被废弃)
$(window).unload(function(){ alert("Goodbye!"); });
jQuery效果
jQuery隐藏/显示
hide隐藏
- $(selector).hide(speed,callback)
$("#hide").click(function(){ $("p").hide(); }); $("button").click(function(){ $("p").hide(1000); });show显示
- $(selector).show(speed,callback)
$("#show").click(function(){ $("p").show(); });toogle切换状态
- $(selector).toggle(speed,callback);
$("button").click(function(){ $("p").toggle(); });
jQuery淡入淡出
fadeIn淡入已隐藏的元素
- $(selector).fadeIn(speed,callback);
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });fadeOut淡出可见的元素
- $(selector).fadeOut(speed,callback);
$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });fadeToggle切换淡入淡出
- $(selector).fadeToggle(speed,callback);
$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); });fadeTo允许渐变为给定的不透明度
- $(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7); });
jQuery滑动
slideDown向下滑动
- $(selector).slideDown(speed,callback);
$("#flip").click(function(){ $("#panel").slideDown(); });slideUp向上滑动
- $(selector).slideUp(speed,callback);
$("#flip").click(function(){ $("#panel").slideUp(); });slideToggle切换滑动效果
- $(selector).slideToggle(speed,callback);
$("#flip").click(function(){ $("#panel").slideToggle(); });
jQuery动画
animate
$(selector).animate({params},speed,callback)
$("button").click(function(){ $("div").animate({left:'250px'}); });操作多个属性
$("button").click(function(){ $("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' }); });使用相对值
$("button").click(function(){ $("div").animate({ left:'250px', height:'+=150px', width:'+=150px' }); });使用预定义的值
$("button").click(function(){ $("div").animate({ height:'toggle' }); });使用队列功能
$("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); $("button").click(function(){ var div=$("div"); div.animate({left:'100px'},"slow"); div.animate({fontSize:'3em'},"slow"); });
jQuery停止动画
stop
$(selector).stop(stopAll,goToEnd)
$("#stop").click(function(){ $("#panel").stop(); });
jQuery Callback
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
//以下实例没有回调函数，警告框会在隐藏效果完成前弹出
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});jQuery链
$("#p1").css("color","red").slideUp(2000).slideDown(2000);jQuery HTML
jQuery捕获
text()设置或返回所选元素的文本内容
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); });html()设置或返回所选元素的内容(包括HTML标记)
$("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });val()设置或返回表单字段的值
$("#btn1").click(function(){ alert("值为: " + $("#test").val()); });attr()设置或改变属性值
$("button").click(function(){ alert($("#runoob").attr("href")); });
jQuery设置
text()设置或返回所选元素的文本内容
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); });html()设置或返回所选元素的内容(包括HTML标记)
$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn2").click(function(){ $("#test2").html(function(i,origText){ return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; }); });val()设置或返回表单字段的值
$("#btn3").click(function(){ $("#test3").val("RUNOOB"); });attr()设置或改变属性值
$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); }); $("button").click(function(){ $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); });
jQuery添加元素
append()在被选元素的结尾插入内容
$("p").append("追加文本");prepend()在被选元素的开头插入内容
$("p").prepend("在开头追加文本"); function appendText() { var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }after()在被选元素之后插入内容
$("img").after("在后面添加文本");before()在被选元素之前插入内容
$("img").before("在前面添加文本"); function afterText() { var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }
jQuery删除元素
remove()删除被选元素及其子元素
$("#div1").remove(); $("p").remove(".italic");empty()从被选元素中删除子元素
$("#div1").empty();
jQuery CSS类
addClass()向被选元素添加一个或多个类
$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); }); $("button").click(function(){ $("body div:first").addClass("important blue"); });removeClass()从被选元素删除一个或多个类
$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });toggleClass()对被选元素进行添加/删除类的切换操作
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });css()设置或返回样式属性
$("p").css("background-color");
jQuery css()方法
返回CSS属性
css(“propertyname”);
$("p").css("background-color");
设置CSS属性
css(“propertyname”,”value”);
$("p").css("background-color","yellow");
设置多个CSS属性
css({“propertyname“:”value“,”propertyname“:”value“,…});
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery尺寸
width()设置或返回元素的宽度(不包括内边距、边框或外边距)
$("button").click(function(){ var txt=""; txt+="div 的宽度是: " + $("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); });height()设置或返回元素的高度(不包括内边距、边框或外边距)
$("button").click(function(){ var txt=""; txt+="div 的宽度是: " + $("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height(); $("#div1").html(txt); });innerWidth()返回元素的宽度(包括内边距)
$("button").click(function(){ var txt=""; txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度，包含内边距: " + $("#div1").innerHeight(); $("#div1").html(txt); });innerHeight()返回元素的高度(包括内边距)
$("button").click(function(){ var txt=""; txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>"; txt+="div 高度，包含内边距: " + $("#div1").innerHeight(); $("#div1").html(txt); });outerWidth()返回元素的宽度(包括内边距和边框)
$("button").click(function(){ var txt=""; txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); });outerHeight()返回元素的高度(包括内边距和边框)
$("button").click(function(){ var txt=""; txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>"; txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight(); $("#div1").html(txt); });
jQuery遍历
jQuery祖先
parent()被选中元素的直接父元素
$(document).ready(function(){ $("span").parent(); });parents()被选中元素的所有祖先元素
$(document).ready(function(){ $("span").parents(); }); $(document).ready(function(){ $("span").parents("ul"); });parentsUntil()介于两个给定元素之间的所有祖先元素
$(document).ready(function(){ $("span").parentsUntil("div"); });
jQuery后代
children()被选元素的所有直接子元素
$(document).ready(function(){ $("div").children(); }); $(document).ready(function(){ $("div").children("p.1"); });find()被选元素的后台元素，一路向下直到最后一个后代
$(document).ready(function(){ $("div").find("span"); }); $(document).ready(function(){ $("div").find("*"); });
jQuery同胞
siblings()被选元素的所有同胞元素
$(document).ready(function(){ $("h2").siblings(); }); $(document).ready(function(){ $("h2").siblings("p"); });next()被选元素的下一个同胞元素
$(document).ready(function(){ $("h2").next(); });nextAll()被选元素所有跟随的同胞元素
$(document).ready(function(){ $("h2").nextAll(); });nextUntil()介于两个给定参数之间的所有跟随的同胞元素
$(document).ready(function(){ $("h2").nextUntil("h6"); });prev()被选元素的前一个同胞元素
$(document).ready(function(){ $("h2").prev(); });prevAll()被选元素所有前面的同胞元素
$(document).ready(function(){ $("h2").prevAll(); });prevUntil()介于两个给定参数之间的所有前面的同胞元素
$(document).ready(function(){ $("h2").prevUntil("h6"); });
JQuery过滤
first()被选元素的首个元素
$(document).ready(function(){ $("div p").first(); });last()被选元素的最后一个元素
$(document).ready(function(){ $("div p").last(); });eq()被选元素中带有指定索引号的元素
$(document).ready(function(){ $("p").eq(1); });filter()根据给定标准删除不匹配元素，返回匹配元素
$(document).ready(function(){ $("p").filter(".url"); });not()返回不匹配元素
$(document).ready(function(){ $("p").not(".url"); });
jQuery Ajax
load()从服务器加载数据，将返回元素放入被选元素中
$(selector).load(URL,data,callback);
$("#div1").load("demo_test.txt"); $("#div1").load("demo_test.txt #p1"); $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("外部内容加载成功!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); }); });
get()
$.get(URL,callback);
$("button").click(function(){ $.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); }); });
post()
$.post(URL,data,callback);
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \n" + data + "\n状态: " + status); }); });
jQuery其他
noConflict()会释放对 $ 标识符的控制，这样其他脚本就可以使用它了
$.noConflict(); jQuery(document).ready(function(){ jQuery("button").click(function(){ jQuery("p").text("jQuery 仍然在工作!"); }); }); var jq = $.noConflict(); jq(document).ready(function(){ jq("button").click(function(){ jq("p").text("jQuery 仍然在工作!"); }); }); $.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍然在工作!"); }); });
