jQuery基础、效果和事件

1、jQuery引入

    a、在本地直接引入——<script src="jquery-1.10.2.min.js"></script> 
b、在CDN上引入——<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>

2、jQuery优点

  写得少，做的多、兼容性好

3、jQuery是什么：

    一个JavaScript的函数库、轻量级的写得少做的多的JavaScript库。
    jQuery库包含以下内容：HTML元素选取、HTML元素操作、CSS操作、HTML事件函数、JavaScript特效和HTML遍历和修改。

4、入口：

a、jQuery(document).ready(function(){在这里开始写内容})
b、$(document).ready(function(){在这里开始写内容})
c、$(function(){在这里开始写内容})
可以有多个入口，而js只能有一个。

5、jQuery和JavaScript的区别：

   执行时机：  window.onload 必须等待网页全部加载完毕(包括图片)然后再执行包裹代码。
              $(function(){}) 只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码。

  执行次数：   js 执行一次，如果有第二次那么第一次就会被覆盖。
              jQuery执行多次，不会覆盖。

   写法：      window.onload=function(){}
              jquery 的可以简写

6、选择器

分为： 基本选择器、层级选择器、过滤选择器、筛选选择器

          基本选择器：标签、类名、id、并集选择器、交集选择器
      层级选择器：子代、后代。
      过滤选择器：
	      ：eq(index) 	选择索引号是index的元素
	      ：odd   	        选择索引号是奇数的元素
	      ：even 		选择索引号是偶数的元素
      筛选选择器：
	子类选择器：$(".box").children()   选取类名为box的子代 		children(selector)
	后代选择器：$(".box").find("li")	选取类名为box的后代叫li标签的后代	 find(selector)
	兄弟选择器：$(".outer>li:eq(2)).siblings() 	选取索引为2的li的兄弟们		siblings(selector)
	父亲选择器：$("#first").parent();	查找父亲 
	下一个兄弟：$(".outer").next()	
	上一个兄弟：$(".outer2").prev()
	获取当前位置：$(".outer2").index();
	not   $("li:not(.no)")

7、css方法（）

    1、返回css属性	css("propertyname");		用法：$("p").css("background-color");
    2、设置css属性	css("propertyname","value"); 	用法：$("p").css("background-color","yellow");
    3、设置多个属性	css({"propertyname":"value","propertyname":"value",...});	用法：$("p").css({"background-color":"yellow","font-size":"200%"});

8、css类的一些操作

1、addClass() 添加一个或者多个类名
2、removeClass() 删除一个或者多个类名
3、toggleClass()添加/删除类的切换操作

9、jQuery动画

    1、hide() 隐藏
    2、show() 显示
    3、toggle() 隐藏、显示切换
---------------------------
    1、fadeIn(speed,callback)淡入
    2、fadeOut(speed,callback)淡出
    3、fadeToggle(speed,easing,callback) 淡入、淡出切换
------------------------------
    1、slideDown(speed,callback) 向下滑动
    2、slideUp(speed,callback) 向上滑动
    3、slideToggle(speed,back)  上下滑动切换
---------------------------------
    jQuery自定义动画
animate({
	left:'250px',opacity:'0.5',height:'150px'      //等等
})
---------------------------------
stop()方法  停止动画和效果，在他们完成之前
回调函数：事件执行完后再写一个函数。

10、事件委托delegate()

$(selector).delegate(childrenSelector,event,data,function)
注意： childrenSelector只要是后代就可以，但是必须是后代！
      如果childrenSelector不是标签选择而是类名或者其它要写成“.class”而不是$(".class")
被委托的是事件源，this指向事件源。

11、each（）方法

  each()方法：为每个匹配元素规定要运行的函数
$("button").click(function(index,element){
	$("li").each(function(){
		alert($(this).text())
	});
});
数组.forEach(function(value,index){})      
  数组上的forEach（）的参数顺序正好相反