【整理】jQuery知识点1

★★★ ============================================================= 页面加载顺序
1、css外部文件 放在head标签之间和body标签之间效果一样


2、js dom对象的获取一定要在该dom元素加载之后，不然报错变量名undefined，可以放在body结束标签之前，但是为了阅读方便一般把它放在head标签之间，并加入事件
document.addEventListener("DOMContentLoaded", function(){}, false);  或者
window.addEventListener( "load", completed ); 或者jQuery中的
$(document).ready(function(){}; 等价于
$(function(){}); //至于为什么等价，源码中很清楚，本方法传入jQuery对象的参数是一个function，
后面还是调用的ready方法。


3、如果js外部文件声明在head标签之间，那么会先加载完成js文件，再加载body及其之间的dom元素，不会出现dom树已经加载完，js文件还未加载完，这是个很重要的认识，必须证明一下，下面是我自己的证明方法，在随便一个js文件，随便一个可执行的位置（不能是function），哪怕是js框架的最末端，加入一句话
alert(document.body)，它一定会弹出null，因为并没有加载到body，这就说明了head标签之间的js文件一定先加载完成。


4、至于用document.addEventListener("DOMContentLoaded", function(){}, false); 还是用
window.addEventListener( "load", function(){});我个人喜欢都用或只用前者，jQuery的机制是使用前者，源码中同时声明了这两个事件，并且任何一个执行都会首先删除这两个事件，这就说明不会都执行，经过测试，试了好多遍，发现它一定会首先执行前者，然后执行后者，即使没有图片等资源需要加载。至于为什么都用，我只能说他能满足我的一些极个别的特殊构造，加快执行效率，可以让它在图片加载完成前先做一些事情，而后面的一些事情只能图片等资源加载完全之后。


★★★ ============================================================= jQuery 选择器
1、元素选择器
在页面中选取所有 <p> 元素:
$("p")


2、#id 选择器
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")


3、.class 选择器
语法如下：
$(".test")
用户点击按钮后所有带有 class="test" 属性的元素都隐藏：


$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$(".test:first") 选取class 为 test 的第一个元素
$("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 与 dom 对象互转
$("#id1") 这是一个jQuery对象
$("#id1")[0]  这是一个dom对象
$("#id1").context 这是一个dom对象，与楼上等价
var a = document.getElementById("a"); //dom对象
var jq = $(a); //jq对象


★★★ ============================================================= jQuery 事件
jQuery 是为事件处理特别设计的。


jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。
页面中指定一个点击事件：
$("p").click(function(){});


常用的 jQuery 事件方法
click(function(){})    该函数在用户点击 HTMl 元素时执行。
dblclick(function(){})
mouseenter(function(){})
mouseleave(function(){})
mousedown(function(){})
mouseup(function(){})
hover(function(){}，function(){}) 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
focus(function(){})
blur(function(){})


★★★ ============================================================= jQuery 效果- 隐藏和显示
jQuery hide() 、 show() 、toggle()
语法:
$(selector).hide(speed,callback);     隐藏
$(selector).show(speed,callback);     显示
$(selector).toggle(speed,callback);   切换


★★★ ============================================================= jQuery 效果 - 淡入淡出
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()


jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
实例：
$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});


jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
实例
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});


jQuery fadeToggle() 方法
语法:
$(selector).fadeToggle(speed,callback);
实例
$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});


jQuery 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 效果 - 滑动
jQuery 滑动方法
jQuery 拥有以下滑动方法：
slideDown()
slideUp()
slideToggle()


jQuery slideDown() 方法
语法:
$(selector).slideDown(speed,callback);
实例
$("#flip").click(function(){
  $("#panel").slideDown();
});


jQuery slideUp() 方法
语法:
$(selector).slideUp(speed,callback);
实例
$("#flip").click(function(){
  $("#panel").slideUp();
});


jQuery slideToggle() 方法
语法
$(selector).slideToggle(speed,callback);
实例
$("#flip").click(function(){
  $("#panel").slideToggle();
});


★★★ ============================================================= jQuery 效果 - 动画
jQuery 动画 - animate() 方法
语法：
$(selector).animate({params},speed,callback);
实例
$("button").click(function(){
  $("div").animate({left:'250px'});
}); 


jQuery animate() - 操作多个属性
实例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 


jQuery animate() - 使用相对值
实例
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
}); 


jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：
实例
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});


jQuery animate() - 使用队列功能
默认地，jQuery 提供针对动画的队列功能。
这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
实例 1
$("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");
}); 


实例 2
$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
}); 


★★★ ============================================================= jQuery 停止动画
jQuery stop() 方法
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
语法:
$(selector).stop(stopAll,goToEnd);
实例
$("#stop").click(function(){
  $("#panel").stop();
});


★★★ ============================================================= jQuery Callback 方法
Callback 函数在当前动画 100% 完成之后执行。


jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。


实例
以下实例在隐藏效果完全实现后回调函数:
使用 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");
});


★★★ ============================================================= jQuery Chaining
通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。
$("#p1").css("color","red").slideUp(2000).slideDown(2000);