jQuery 学习笔记
|
问题
|
回答
|
|
文档就绪事件
|
$(document).ready( funA )
或者
$( funcB )
|
|
标签被点击
|
$("p").click( funB ) ;
|
|
安装jQuery
|
1 本地嵌入 <script src="jquery-1.10.2.min.js"></script>
2 用CDN <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
|
|
隐藏当前元素
|
$(this).hide();
|
|
隐藏所有 <p> 元素
|
$("p").hide();
|
|
隐藏所有 class="test" 的 <p> 元素
|
$("p.test").hide();
|
|
隐藏所有 id="test" 的元素
|
$("#test").hide();
|
|
所有带有 class="test" 属性的元素都隐藏：
|
$(".test").hide();
|
|
选取第一个 <p> 元素
|
$("p:fisrt")
|
|
选取第一个 <ul> 元素的第一个 <li> 元素
|
$("ul li:first")
|
|
选取每个 <ul> 元素的第一个 <li> 元素
|
$("ul li:first-child")
|
|
选取带有 href 属性的元素
|
$("[href]")
|
|
选取所有 target 属性值等于 "_blank" 的 <a> 元素
|
$("a[target='_blank']")
|
|
选取所有 target 属性值不等于 "_blank" 的 <a> 元素
|
$("a[target!='_blank']")
|
|
选取所有 type="button" 的 <input> 元素 和 <button> 元素
|
$(":button")
|
|
选取偶数位置的 <tr> 元素
|
$("tr:even")
|
|
选取奇数位置的 <tr> 元素
|
$("tr:odd")
|
|
单击方法
|
click
|
|
双击方法
|
dblclick
|
|
穿过元素
|
mouseenter
|
|
鼠标指针离开元素
|
mouseleave
|
|
鼠标指针移动到元素上方 并按下鼠标按键时
|
mousedown
|
|
松开鼠标按钮
|
mouseup
|
|
于模拟光标悬停事件
|
hover( funA, funB ) ;
|
|
当元素获得焦点时
|
focus
|
|
当元素失去焦点时
|
blur
|
|
hide show
|
$(selector).show(speed,callback);
speed可取 slow fast 或毫秒数
|
|
切换显隐
|
toggle()
|
|
淡入淡出效果
|
fadeIn() 可取 slow fast 毫秒数
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
|
|
滑动效果
|
$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
|
|
动画
|
$("div").animate({left:'250px'}); 向右面移动250像素
使用相对值: +=150px
使用预定值: height:'toggle'
可队列执行
|
|
停止动画
|
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
|
|
chaining动画
|
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
|
|
获得内容
|
text() html() val()
|
|
获取属性
|
$("#id").attr("href");
|
|
设置内容
|
text() html() val()
|
|
text()、html() 以及 val() 的回调函数
|
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world! (index: " + i + ")"; });
|
|
设置属性
|
$("#id").attr("href","www.baidu.com") ;
|
|
attr的回调函数
|
$("#id").attr("href", functionA ) ;
|
|
Create text with HTML
|
var txt1="<p>Text.</p>";
|
|
Create text with jQuery
|
var txt2=$("<p></p>").text("Text.");
|
|
Create text with DOM
|
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
|
|
在被选元素的结尾插入内容
|
apend(), 可传入多个元素
|
|
在被选元素的开头插入内容
|
prepend
|
|
在被选元素之后插入内容
|
after
|
|
在被选元素之前插入内容
|
before
|
|
删除被选元素（及其子元素）
|
$("p").remove();
|
|
删除被选元素的子元素。
|
$(":p").empty();
|
|
过滤删除
|
$(":p").remove(".italic");
|
|
向被选元素添加一个或多个类
|
addClass
|
|
从被选元素删除一个或多个类
|
removeClass
|
|
对被选元素进行添加/删除类的切换操作
|
toggleClass( "blue" )
|
|
返回首个匹配元素的 background-color 值
|
$("p").css("background-color")
|
|
设置多个 CSS 属性
|
$("p").css({"background-color":"green", "font-size":200%} ) ;
$("p").css("height": "500px" ) ;
|
|
padding border margin 的意义
|
|
|
innerWidth
|
width + padding * 2 ;
|
|
outerWidth()
|
width _ padding * 2 + border * 2
|
|
outerWidth(true)
|
width _ padding * 2 + border * 2 + margin * 2 ;
|
|
返回被选元素的直接父元素
|
parent();
|
|
返回被选元素的所有祖先元素
|
parents();
|
|
返回介于两个给定元素之间的所有祖先元素
|
$("span").parentsUntil("div")
|
|
被选元素的所有直接子元素
|
$("div").children();
|
|
返回类名为 "blue" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
|
$("div").children("p.blue") ;
|
|
返回被选元素的后代元素，一路向下直到最后一个后代, 找到所有
|
$("div").find("span");
|
|
返回 <div> 的所有后代
|
$("div").find("*");
|
|
什么是同胞
|
有相同的父元素
|
|
返回被选元素的所有同胞元素
|
$("div").siblings();
|
|
返回属于 <h2> 的同胞元素的所有 <p> 元素
|
$("h2").siblings("p");
|
|
返回被选元素的下一个同胞元素
|
$("h2").next(); // prev
|
|
返回被选元素的所有跟随的同胞元素
|
$("h2").nextAll(); // prevAll();
|
|
返回介于两个给定参数之间的所有跟随的同胞元素
|
$("h2").nextUntil("h6") 不包含h6 // prevUntil();
|
|
选取首个 <div> 元素内部的第一个 <p> 元素
|
$("div p").fisrt();
|
|
选择最后一个 <div> 元素中的最后一个 <p> 元素
|
$("div p").last();
|
|
选取第四个 <p> 元素
|
$("p").eq(3);
|
|
返回带有类名 "intro" 的所有 <p> 元素
|
$("p").filter(".intro");
|
|
返回不带有类名 "intro" 的所有 <p> 元素
|
$("p").not(".intro");
|
|
Ajax load语法
|
$("div").load("test.txt");
$(selector).load(URL,data,callback);
$("#div1").load("/try/ajax/demo_test.txt",function(responseTxt,statusTxt,xhr){});
|
|
把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中
|
$("div0").load( "demo_text.text #p1 ) ;
|
|
post 和 get 方法
|
$.post("/try/ajax/demo_test_post.php",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
|
|
释放会 $ 标识符的控制，这样其他脚本就可以使用它了
|
$.noConflict();
|
|
noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用
|
var myJQ = $.noConflict();
|
|
$的另一种写法
|
jQuery
|
|
JSONP
|
$.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {});
|
|
class 为 "intro" 或 "demo" 的所有元素
|
$(".intro,.demo")
|
|
生成被选元素的副本
|
|
|
检查被选元素是否包含指定的 class 名称
|
|
|
返回被选元素相对于文档的偏移坐标
|
offset()
|
|
返回元素的位置（相对于父元素）
|
|
|
设置或返回被选元素的水平滚动条位置
|
|
|
设置或返回被选元素的垂直滚动条位置
|
|
|
$.param( obj ) 的作用
|
序列化一个 key/value 对象：
var params = { width:1900, height:1200 }; var str = jQuery.param(params); $("#results").text(str); 结果:
width=1680&height=1050
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
