回顾

1. 操作样式 (5)
  1.1 css操作
      css("name","value")		设置单个样式
      css({"name":"value",...})	设置多个样式，对象
      css("name")				获取样式
  1.2 class操作
      addClass("name"):		添加类
      removeClass("name"):	移除类
      hasClass("name"):		判断类
      toggleClass("name"):	切换--有则移除，无则添加
  
2. 操作属性(3)
  2.1 attr()-------用法同css()---目标为标签内的属性
      设置单个属性
      设置多个属性
      获取属性
  2.2 prop()-----特殊情况，目标是属性值为true/false的属性--用法同attr()
      对于布尔类型的属性，disabled，selected，checked，只能用prop
  2.3 removeAttr(name)
      移除某个属性
  
3. 动画  (10)
  3.1 三组基本动画
      show/hide(显示/隐藏)   
      slideDown/slideUp/slideToggle(滑入/滑出/切换)  
      fadeIn/fadeOut/fadeToggle(淡入/淡出/切换)
  3.2 自定义动画
  		//参数：目标对象(必有)、时间、动画形式、回调函数(动画结束后执行)
      animate(elem, [speed], [swing/linear], [callback])
  3.3 停止动画
      stop()	//多用于欲执行动画函数之前
  
4. 操作节点(10)
  4.1 创建节点:  $("<span></span>")
  4.2 添加节点   append() appendTo() prepend() prependTo() after() before()
  4.3 清空内容   empty()
  4.4 删除节点   remove()
  4.5 克隆节点   clone()
5.媒体操作
	//找到相应媒体(audio、video)缓存、播放
	5.1.load()
	5.2.play()
val()函数，设置元素的value值
text()函数，设置元素的内容

jQuery特殊属性的操作

1.value操作
	.val()			//获取
	.val("haha")	//设置值
	
2.html()---相当于JS中innerHTML()
	.html()					//获取标签对象内容，包括子标签
	.html(<p>我是文本</p>)	//---》我是文本
	
3.text()---相当于JS中innerText()
	.text()					//仅获取标签对象内容
	.tex(<p>我是文本</p>)	//---》<p>我是文本</p>	//没有标签效果
	
4.width()和height()
	.width	//获取目标元素宽度	//比css()更加方便直接
	.height	//获取目标元素高度
	.width(500)		//设置目标元素宽度
	.height(500)	//设置目标元素高度
	
5.innerWidth()、outWidth()
	.innerWidth()	//获取padding+width的值
	.outWidth()		//获取border+padding+width
	.outWidth(true)	//获取margin+border+padding+width
	
6.innerHeight()、outHeight()
	.innerHeight()	//获取padding+height的值
	.outHeight()		//获取border+padding+height
	.outHeight(true)	//获取margin+border+padding+height
	
7.scrollTop()和scrollLeft()	-- 获取页面卷曲度函数
	.scrollTop()	
	.scrollLeft()
	
8. offset()和position()	//用于获取元素的位置
	.offset()	//获取元素的相对于document的位置，无视定位
	.position()	//获取元素相对于有定位的父元素的位置
	

案例===========================================================
	1.固定导航
	2.小火箭返回顶部
		html,body 拥有scrollTop、scrollLeft属性
		window没有
		$("html,body").stop().animate({scrollTop:0},3000);

jQuery事件机制

简单事件机制>>bind事件绑定>>delegate(委托)事件绑定>>on事件绑定(推荐)

事件注册

1.简单注册事件：一次只能(为自己)注册一个事件，不能为动态创建元素注册事件
	$("div").click(function () {
	      alert("哈哈");
    });
2.bind方式注册事件：一次注册多个，不能为动态创建元素注册事件
	    $("p").bind({
	      click:function () {
	        alert("呵呵")
	      },
	      mouseenter:function () {
	        alert("哈哈")
	      }
	    });
3.delegate(委托)事件绑定--(为子元素注册)
	原理：父元素通过子元素触发事件要求的冒泡确定其条件符合--->将委托的事件交给子元素
	
	给父元素注册委托事件，最终还是有子元素来执行。
		//第一个参数：selector:事件最终由谁来执行。
    	//第二个参数：事件的类型
    	//第三个参数：函数，要做什么
    //优点：动态创建的也能有事件 ；缺点：只能注册委托事件
    $("#box").delegate("p", "click", function () {
      //alert("呵呵");
      console.log(this);
    });
4.on事件绑定(推荐)	//统一了所有事件注册，兼顾优点
	1）为自己注册	
		//事件类型、事件函数
		$("#btn").on("click", function () {
	      $("<p>我是新建的p元素</p>").appendTo("div");
	    });
	2）为子元素/后代元素注册(委托)	
		//事件类型、事件目标、事件函数
		$("div").on("click", "p", function () {
	      alert("呵呵")
	    });

事件触发

以事件触发其它元素事件
	在事件内以其它元素对象触发其事件
	trigger("click")
		$("#btn").on("click",function () {
	      //触发p元素的点击事件
	    // 1）$("p").click();
		// 2）$("p").trigger("click");
	    });

事件执行顺序

自己的事件--->父元素给予的委托事件-->冒泡父元素执行同样的事件

事件解绑

1.
	unbind()	解绑对象所有事件
	unbind("click")	解绑对象点击(指定)事件
2.
	undelegate()	解绑对象所有委托事件
	undelegate("click")	解绑对象点击(指定)委托
3.(推荐)
	.off()	//解除所有事件
	.off("click")	//解除指定事件

jQuery事件对象

//on(types, selector, data, callback)
//使用on方法的时候，可以给data参数传一个值，可以在事件里面通过e.data获取到。
$("div").on("click",100, function (e) {
  console.log(e);
  console.log("哈哈，我有"+e.data);	//==》100
});
	
阻止冒泡
  e.keyCode					//按下的键盘键对应数字
  e.preventDefault();		//阻止默认(行为)
  e.stopPropagation();		//阻止冒泡
  return false;//既能阻止事件冒泡，也能阻止浏览器的默认行为。
  //console.log(e.cancelBubble);--JS-IE--阻止冒泡-JQ不使用

节流阀：用bool型变量控制事件触发

delay(time)		//延时函数，毫秒
	$("div").fadeIn(1000).delay(2000).fadeOut(1000);	//div淡入-延时2秒-淡出

链式编程：
	//设置性操作：可以链式编程
	//获取性操作，不能链式，因为获取性操作返回--->数值，字符串------内部this指向改变
	//返回值是不是一个jq对象
		$(this).text(wjx_s).prevAll().text(wjx_s);
    	$(this).nextAll().text(wjx_k);

	如果获取型操作还想链式编程，则在到达一阶段时，使用end()返回到获取操作最初的对象
		$(this).text(wjx_s).prevAll().text(wjx_s).end().nextAll().text(wjx_k);

each()	jQuery遍历函数
	$("li").each(function(index,element){	//index--下标，element--对象
		$(element).css("opacity", (index+1)/10);
	});

"$"符号冲突
	 //jQuery释放$的控制权，放弃使用"$"
		$.noConflict();
		
		1）转为使用jQuery(备胎)
		2）或者更改为$$(其他变量代替$)
			var $$ = $.noConflict();

总结

1.特殊的属性操作
	val()
	text()、html()
	width()、height()
	scrollTop()、scrollLeft()
	offset()、position()
	//操作--->传参特指、不传参全部
2.事件注册、解绑、触发
	//注册
	on(type,func)
	on(type,selector,func)
	//解绑
	off()
	off(type)
	//触发
	trigger()
	事件名()
3.补充
	链式编程	
		end()
	JQ遍历
		each(func(index,element){$(element).css("opacity", (index+1)/10);)});
	解除"$"冲突
		$.noConflict();