jQeury学习笔记

jQuery 语法:

核心语法: $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
action() 执行对元素的操作
1.事件

click()
$("p").click(function(){
// action goes here!!
});

hover()方法用于模拟光标悬停事件。
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

focus()当元素获得焦点时，发生 focus 事件

blur()当元素失去焦点时，发生 blur 事件

mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件

mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件
2.效果

a.隐藏和显示:
hide() 和 show() 方法隐藏和显示 HTML 元素
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
$("button").click(function(){
$("p").hide(1000);
});
toggle() 方法来切换 hide() 和 show() 方法，显示被隐藏的元素，并隐藏已显示的元素
语法:同上
$("button").click(function(){
$("p").toggle();
});

b.淡入淡出:
fadeIn() fadeOut() fadeToggle() 实现元素的淡入淡出效果
语法:同上
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。
$("button").click(function(){
$("#div1").fadeTo("slow",0.15);
$("#div2").fadeTo("slow",0.4);
$("#div3").fadeTo("slow",0.7);
});

c.滑动
slideDown() slideUp() slideToggle()
语法:同上上

d.动画/停止动画
animate() 方法用于创建自定义动画
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
});
stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
3.HTML

a.获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容($("#test").text();)
html() - 设置或返回所选元素的内容（包括 HTML 标记）($("#test").html();)
val() - 设置或返回表单字段的值($("#test").val();)
设置内容
$("#test1").text("Hello world!");

b.获取属性 - attr()
$("button").click(function(){
alert($("#w3s").attr("href"));
});
设置属性
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3cschool.cc/jquery",
"title" : "W3Schools jQuery Tutorial"
});
});

c.添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

function appendText()
{
var txt1="<p>Text.</p>"; // Create element with HTML
var txt2=$("<p></p>").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);
}

d.删除元素/内容
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

e.CSS类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});

返回首个匹配元素的 background-color 值：
$("p").css("background-color");
将为所有匹配元素设置 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});
4.遍历

a.向上遍历 DOM 树
parent() 方法返回被选元素的直接父元素
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
parentsUntil()

返回所有 <span> 元素的所有祖先：
$(document).ready(function(){
$("span").parents();
});
返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：
$(document).ready(function(){
$("span").parents("ul");
});

b.向下遍历 DOM 树
children() 方法返回被选元素的所有直接子元素
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

返回每个 <div> 元素的所有直接子元素：
$(document).ready(function(){
$("div").children();
});

使用可选参数来过滤对子元素的搜索,返回类名为 "1" 的所有 <p> 元素，并且它们是 <div>的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});

返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");//所有元素：$("div").find("*");
});

c.在 DOM 树中水平遍历
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

d.过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素
选取首个 <div> 元素内部的第一个 <p> 元素：
$(document).ready(function(){
$("div p").first();
});

last() 方法返回被选元素的最后一个元素

eq() 方法返回被选元素中带有指定索引号的元素
选取第一个 <p> 元素（索引号 0）：
$(document).ready(function(){
$("p").eq(0);
});

filter() 方法允许您规定一个标准。不匹配的元素会被从集合中删除，匹配的元素会被返回。
返回带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".intro");
});

not() 方法返回不匹配标准的所有元素