jquery核心： write less do more
1.jQuery 语法
基础语法： $(selector).action();
2.文档就绪事件 ：文档完全加载完后执行函数
第一种方式： $(document).ready(function(){});
第二种方式： $(function(){});
3.jQuery 选择器
元素选择器 $("p").hide(); // 所有的p元素隐藏
#id选择器 $("#test").hide();//id为test的元素隐藏
.class选择器 $('.test').hide(); // class为test的所有元素隐藏
$("*") //选取所有元素
$(this) // 选取当前HTML元素
$("p .intro") // 选取class 为intro的p元素
$("ul li:first") //选取第一个ul元素下的第一个li元素
$('ul li:first-child') //选取每个ul下的第一个li元素
$('[href]') //选取所有带href属性的元素
$('a[target="_blank"]') //选取所有a元素(带有target属性值为_blank)
$('a[target !="_blank"]') //选取所有a元素(不带有target属性值为_blank)
$(":button") // 选取所有type=“button”的input和button元素
$("tr：even") // 选取所有的偶数行
$("tr:odd") //选取所有的奇数行
4.jQuery 事件
事件：页面对不同访问者的响应
鼠标事件： click dbclick mouseenter mouseleave hover(悬停事件)
键盘事件： keypress keydown keyup blur
表单事件： submit change focus unload
文档窗口事件：load resize scroll
4.1 jQuery 事件方法语法
$("p").click(function(){//点击p元素后执行的代码});
$("p").dblclick(function(){ //双击事件
$(this).hide();
});
$("#p1").mouseenter(function(){ // 鼠标指针穿过元素事件
alert("You entered p1!");
});
$("#p1").mouseleave(function(){// 鼠标指针离开元素事件
alert("Bye! You now leave p1!");
});
$("input").focus(function(){// 元素获得焦点事件
$(this).css("background-color","#cccccc");
});
$("input").blur(function(){// 元素失去焦点事件
$(this).css("background-color","#ffffff");
});
5.jQuery 效果
5.1 隐藏和现实HTML元素 ：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
例：
$("button").click(function(){
$("p").hide(1000);//1000毫秒，隐藏的速度，1s钟隐藏
});
5.2 来回切换隐藏和显示 用 toggle();
<button>隐藏/显示</button>
$("button").click(function(){
$("p").toggle();
});
6. 淡入淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
$(selector).fadeTo(speed,opacity,callback);
$("button").click(function(){ //三个div逐次出现
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("button").click(function(){ //三个div逐次淡出，依次看不见
$("#div1").fadeOut();
});
<button>点击淡入/淡出</button>
$("button").click(function(){
$("#div3").fadeToggle(3000);
});
$("button").click(function(){
$("#div1").fadeTo("slow",0);//0完全透明，div1看不见了
});
7. 滑动方法
$(selector).slideDown(speed,callback); //向下收起来
$(selector).slideUp(speed,callback); //向上收起来
$(selector).slideToggle(speed,callback);
8.动画：
默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
8.1 创建自定义动画
$(selector).animate({params},speed,callback);
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
'150px'
});
使用相对值：
$("div").animate({
left:'250px',
height:'+=150px',
'+=150px'
});
使用预定义的值
$("div").animate({
height:'toggle'
});
使用队列功能
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({'100px',opacity:'0.8'},"slow");
});
9.停止动画：
$(selector).stop(stopAll,goToEnd);
stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
goToEnd 参数规定是否立即完成当前动画。默认是 false。
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
10.动画的问题 Callback 方法（类似同步，先把动画执行完了再弹框）
// 隐藏效果完全实现后回调函数:
$("button").click(function(){
$("p").hide("slow",function(){
alert("The paragraph is now hidden");
});
});
//没有callback回调，类似异步，警告框会在隐藏效果完成前弹出：
$("button").click(function(){
$("p").hide(1000);
alert("The paragraph is now hidden");
});
11. jQuery 方法链接 Chaining
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
12. jQuery - 获取内容和属性 DOM操作
获得内容 - text()、html() 以及 val()
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
<p id="test" value="菜鸟教程">这是段落中的 <b>粗体</b> 文本。</p>
text()：这是段落中的粗体文本。
html(): 这是段落中的 <b>粗体</b> 文本。
val(): 菜鸟教程
<p><a href="http://www.runoob.com" value= "helloworld"id="runoob">菜鸟教程</a></p>
$('#runoob').attr("href"); //http://www.runoob.com
$('#runoob').attr('value');//helloworld
13. jQuery - 设置内容和属性
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
$("#runoob").attr("href","http://www.runoob.com/jquery");
13. JQUERY - 添加元素
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
$("p").append("追加文本");
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 创建元素 加粗的I
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 斜体的love
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
</script>
14. 删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素
$("p").remove(".italic"); //删除 class="italic" 的所有 <p> 元素：
15. jQuery - 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");
$("p").css({"background-color":"yellow","font-size":"200%"});
15.jQuery 尺寸
width(): 元素的宽度
innerWidth() = width() + padding的宽度
outerWidth() = innerWidth() + Border的宽度
outerWidth(true) = outerWidth() + margin的宽度
16. jQuery 遍历
祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。
向上遍历DOM树：
parent() //返回被选元素的直接父元素 div包含ul包含li包含span； $('span').parent()就是li
parents() // 返回被选元素的所有父元素，$('span').parents()就是li ul 和div，body，html
parentsUntil(); //$("span").parentsUntil("div");//返回介于 <span> 与 <div> 元素之间的所有祖先元素,不包括div及以上
向下遍历DOM树：
children() //返回被选元素的所有直接子元素
find() //被选元素的后代元素，一路向下直到最后一个后代。
$("div").children(); //div的直接子元素
$("div").children("p.1");//class=1 的p的直接子元素
$("div").find("*"); //返回 <div> 的所有后代
$("div").find("span"); //返回属于 <div> 后代的所有 <span> 元素：
同胞(siblings)
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()
$("h2").siblings();返回H2的所有同胞元素,平级元素
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});//返回h同胞元素中的p元素
$("h2").next().css({"color":"red","border":"2px solid red"}); //h2后面的第一个同胞元素
$("h2").nextAll(); 返回 <h2> 的所有跟随的同胞元素
$("h2").nextUntil("h6"); 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
过滤：
$("div p").first(); 选取第一个 <div> 元素内部的第一个 <p> 元素
$("div p").last(); 选择最后一个 <div> 元素中的最后一个 <p> 元素
$("p").eq(1); 返回被选元素中带有指定索引号的元素，索引从0开始
$("p").filter(".url"); //filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除反之被返回。
$("p").not(".url"); //与filter()相反
17.JSONP 教程 跨域读取数据