web前端-jQuery

1.jQuery概述

 1.1 前端工程师的工作

一个前端开发工程师的成长之路，一定要制作页面特效。而jQuery就是制作页面特效的时候大家都比较青睐的一种解决方案。

  1.2 jQuery简介

 jQuery是一个快速、简洁的JavaScript框架

 写更少的代码，做更多的事情。

  1.3 整体感知

首先我们使用jQuery的时候，必须要先引包（和我们之前自己封装的xxx.js一样）：

  <script type="text/javascript" src="jquery-1.12.3.min.js"></script>

  <script type="text/javascript"> 

  //自己的代码

  </script>

2. $()函数

  2.1 size()方法和length属性

var $div = $("div").size()

  var $div = $("div").length 

  两种方法都能够获取通过$()函数得到的页面元素的个数。

  2.2 jQuery全面支持css2.1的选择器

$("div .box #span1").animate({"font-size":400},1000);

  2.3 jQuery全面支持css3的选择器

$("div[id=div1]").css("background-color","red");

  2.4 jQuery自己发明的伪类

jq中自创的筛选器有七种：

  选择器:first     选中指定元素集合中的第一个元素

  选择器:last   选中指定元素集合中的最后一个元素

  选择器:eq(n)   选中指定元素集合中从0开始，第n个元素

  选择器:lt(n)  选中指定元素集合中从0开始，第n个元素之前的所有元素

  选择器:gt(n)  选中指定元素集合中从0开始，第n个元素之后的所有元素

  选择器:odd  选中指定元素集合中从0开始，所有奇数序号的元素

  选择器:even  选中指定元素集合中从0开始，所有偶数序号的元素

  2.5 $()函数和jQuery函数等价

$("p:eq(2)").css("background-color","red");

等价于 jQuery("p:eq(2)").css("background-color","red");

  2.6 $()函数得到的是jQuery对象

var $p = $("p")；//此处$p就是一个jq对象(集合)

a) jq对象可以通过【jq对象[n]】方式转换为js原生对象

    var p = $("p")[0];

  b) jq对象可以通过【.get(n)】方式转换为js原生对象

  var p = $("p").get(0);

  2.7 关于引号

$(window)

  $(document)

  $(this)

只有这三种情况的时候不需要写引号

 

3. jQuery添加事件监听

3.1 基本写法

$("选择器").click(function(){})

$("div").click(function(){ 
	$(this).css("background-color","red");
});

3.2 事件名

jQuery中事件的名字，一律没有on。

  单击：   click() 

  双击：    dblclick()

  鼠标进入：    mouseenter()  

  鼠标离开：    mouseleave()

  文本框得到焦点：    focus() 

  失去焦点：  blur()

//鼠标进入div颜色变红
	$("div").mouseenter(function(){
		$(this).css("background-color","red");
	});

允许链式声明

$("div").mouseenter(function(){$(this).css("background-color","red");})
        .mouseleave(function(){$(this).css("background-color","orange");}); 

3.3 jQuery事件监听的特点

jq中规定事件绑定不存在覆盖问题，事件的实际执行顺序会按照事件绑定的顺序逐个执行。

3.4 其他添加事件监听的方法

(1)通过on方法来为jq对象添加事件监听、通过off方法来为jq对象取消事件监听。

$("div").on("click",function(){
$(this).css("background-color","red");
}); 
		
$("div").off("click");   //去掉div的click事件监听 

(2)通过bind方法来给jq对象添加事件监听。

//bind方法的好处的就是能够给一个jq对象添加多个事件监听。事件名用空格隔开。
$("div").bind("mouseenter mouseleave",function(){ 	
		num++; 	
		//让h1里面显示这个num数字 	
		$("h1").html(num);
});

//bind还可以采用JSON形式的参数来给jq对象添加事件监听。
$("div").bind(
		{
			click : function(){$(this).css("background-color","red");},			
			mouseenter : function(){$(this).css("background-color","pink");}		
		}
);

(3)通过one方法来给jq对象添加事件监听。'一次性的'，只能执行一次。

4. 常见方法

4.1 css()方法

4.2 show()和hide()方法

4.3 slideDown()和slideUp()方法

4.4 fadeIn()和fadeOut()方法

4.5 addClass()和removeClass()方法

4.6 attr()方法

4.7 html()方法

5. 交叉淡入淡出轮播图

6. animate()方法

6.1 最简单的形态

6.2 不能够变化的属性

background-color、background-position不能参与动画！

6.3 动画顺序

同步原则：同一个元素如果存在多个animate命令，则按照添加顺序执行。

  异步原则：不同元素如果存在多个animate命令，则他们同时执行。

6.4 回调函数

6.5 匀速运动

animate的完整写法，一共有4个参数：

 $("#box1").animate({"left" : 1000, "top" : 1000} ,1000,"linear",function(){
  $("#box2").animate(); 
    }
);

6.6 stop()方法

6.7 动画积累的防止

animate()方法中的防止动画积累的策略就是如下的实现方式。

  策略1：立即结束当前动画，执行新的命令：

  $().stop(true).animate();

  策略2：如果当前正在运动，那么不接收新的命令：

  if($("div").is(":animated")){

  return;

  }

7. animate动画实例--百叶窗

8. 节点关系

8.1 children()方法

$("#box").children().css("background-color","red");

      将#box中所有的子元素背景色都变红

8.2 find()方法

作用：在某个节点中查找符合选择器要求的后代节点

  实例：

      $("div").click(function(){ 

      //$(this)没有引号，表示触发监听的这个元素，这个元素是某一个div 

      $(this).find("li").css("background-color","red");

      });

8.3 parent()方法

作用：表示查找当前节点的直属父节点

  实例：$("p").click(function(){

      $(this).parent().css("background-color","red");

      });

      //把点击的p标签的父级元素背景改成红色

8.4 parents()方法

作用：表示查找当前节点的所有祖先节点，直到html节点为止。

  实例：$("p").click(function(){

      $(this).parent().css("background-color","red");

      });

8.5 siblings()方法

作用：访问当前节点的所有兄弟节点（除本身之外）

  实例：

      $("li").click(function(){

      //常见用法，排他操作。

      $(this).addClass('selected').siblings().removeClass("selected");

      });

8.6 next()、prev()、nextAll()和prevAll()方法

next() 后一个亲兄弟

  prev() 前一个亲兄弟

  nextAll() 后所有亲兄弟

  prevAll() 前所有亲兄弟

  实例：

  $(this).next().css("background-color","red");//其他格式一样，以此类推

8.7 节点关系综合查找

9. 节点顺序和遍历

9.1 index()方法

index()方法用来获取当前元素在其兄弟节点中的排名，从0开始。

  语法：$('selector').index()

  例如：

      $(".teshu").click(function(){

      alert($(this).index());

      });

      //获得点击节点在其兄弟节点中的排名。

9.2 对应

语法：$('selector').eq(index)

  例如：$('p').eq(2)//表示获取这个p集合中的第三个p

9.3 each()方法

作用：遍历每个节点，然后执行里面的回调函数。

  注意：回调函数中如果存在$(this)，那么它指的是【遍历中当前这一次的这个节点】。

  语法：$('selector').each(func) 

  实例：

  $("div").each(function(){ 

    $(this).children().eq(2).css("background-color","red");

  });

10. 节点操作

10.1 内部插入append()、appendTo()、prepend()、prependTo()方法 

作用：这四个方法都用来在某个节点内部插入新内容

  语法：

  A.append(B);  //向【A节点内部现有内容之后】追加【B节点】

  B.appendTo(A);  //将【B节点】追加到【A节点内部现有内容之后】

  A.prepend(B);  //向【A节点内部现有内容之前】追加【B节点】

  B.prependTo(A);  //将【B节点】追加到【A节点内部的现有内容之前】

10.2 外部插入after()、before()、insertAfter()、insertBefore() 

作用：相比于前面的四个方法的作用，这四个方法可以认为是给当前节点添加兄弟

  语法：

  A.after(B);  //在【A节点之后】添加【同级节点B】

  A.before(B);  //在【A节点之前】添加【同级节点B】

  A.insertAfter(B);  //把【A节点】添加到【B节点之后】

                 A.insertBefore(B);  //将【A节点】添加到【B节点之前】

10.3 改变节点位置 

对于jq来说操作的实际上要么是节点，要么是节点组。那么有一条原则在操作节点的时候我们就必须遵守：

  通过搜索获得的节点在页面中只能同一时刻出现在一个位置。

10.4 包裹wrap() 

作用：给自己增加一个父类(开发中基本没啥用)

                语法：A.warp(B)

10.5 删除节点empty()、remove() 

作用：empty()表示删除指定节点中的内容，而remove()则表示移除自己

  语法：

        A.empty() 等价于 A.html(‘’);

      A.remove();

10.6 克隆clone() 

作用：相当于js中的cloneNode操作，即克隆的节点在页面中没有自己的位置。

      需要通过append等操作才能够追加到页面当中。

  语法：

        A.append(B.clone)