jQuery功能简述

---

---

jQuery: 它是一个开源的Ajax框架，也是学javaEE必须要掌握的框架。
因为它是目前企业中用到得最多的一个框架.

---

---

-- jQuery历史：
  2006年8月：第一个版本.
  2015年4月28日：V1.11.3.

-- 它的官方网站： http://www.jquery.com
   V1.xxx.xx : 支持所有浏览器.
   V2.xxx.xx : 不支持msie6,7,8. msie9+: html5.

   V1.xxx.xx: 
   1.9.0之前版本：下载一个js文件.
   1.9.0之后版本: 下载两个js文件.
   下载哪些文件：
    jquery-1.11.3.js     (源码)
    jquery-1.11.3.min.js (源码压缩后的)

    jquery-migrate-1.2.1.js (源码) 迁移插件.
    jquery-migrate-1.2.1.min.js (源码压缩后的).

    学习时用：
    jquery-1.11.3.js 
    jquery-migrate-1.2.1.js

    实际项目开发：
    jquery-1.11.3.min.js
    jquery-migrate-1.2.1.min.js

-- 这个项目的开发宗旨：
   write less, do more: 写更少，做更多.
   
-- 学习Ajax框架的好处：
   1. 它可以帮我们解决js跨浏览器兼容问题.
   2. 简化dom编程.
   3. 简化异步请求.
   4. 它提供了一批好用工具的方法.

-- 市面上用到得Ajax框架：
   1. 重量级(界面组件)：extjs、dojo.
   2. 轻量级(没有界面组件): jquery、prototype.
      jquery-easyui

---

---

一、jQuery入门：
    第一步：在html页面上引入jquery两个js文件.
    <script type="text/javascript" src="jquery-1.11.3.js"></script>
    <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script>

    第二步：监听文档是不是加载完 window.onload.
       $(window).ready(function(){
	    alert("第一种方式");
       });

       $(this).ready(function(){
	    alert("第二种方式");
       });

       $(document).ready(function(){
	    alert("第三种方式");
       });
		
       $(function(){
	    alert("第四种方式");
       });

    第三步：查询dom元素.
       $  === jQuery

       window.jQuery = window.$ = jQuery;

    第四步：对dom元素操作.

二、核心部分：
    1. jQuery(selector, [context]) : 核心函数.
        核心函数调用返回得是jQuery对象,这个jQuery对象就封装了查询到得dom元素.
	对jQuery对象做操作，实际上就是对它查询到得dom元素做操作.

       -- selector : 选择器(是jQuery规定的查询字符串).
       -- context: 上下文(也是就是查询范围)。默认为document.(当前html文档).

   2. $("selector").length: 获取jQuery对象中查询到得dom元素的个数. 
   3. $("selector").size(): 获取jQuery对象中查询到得dom元素的个数. 

   4. $("selector").each() : 迭代jQuery对象中查询到得dom元素。
      $("selector").each(function(i, item){
         // i: 索引号
	 // this === item : dom元素
      });

   5. $("selector").selector: 获取你调用jQuery核心函数传进去的第一个参数.
   6. $("selector").context: 获取你调用jQuery核心函数传进去的第二个参数.

   7. $("selector").get(i): 从jQuery对象中根据索引号取指定dom元素.
      $("selector").get(): 从jQuery对象中取指定dom元素,返回一个dom元素数组(Array).

   8. 从jQuery对象中取dom元素：

      a. 第一种方式：
        $("selector").get(i).

      b. 第二种方式：
         $("selector").get()[i].

      c. 第三种方式：
         $("selector")[i].

      d. 第四种方式：
         $("selector").toArray()[i]. 

   9. 把dom元素转换成jQuery对象.
      var obj = $(dom元素);

三、选择器(查询字符串)
    1. $("#html元素的id属性值"): $("#div1").

    2. $("html元素的标签名"): $("div") $("input").

    3. $(".html元素的class属性值"): $(".myClass1").

    4. 选择器组合：
       $("#html元素的id属性值,html元素的标签名,.html元素的class属性值");

    5. $("selector1 selector2") : 查询父元素中所有的子元素(不是父子关系的查询).

    6. $("selector1 > selector2") : 查询父元素中的直接子元素(父子关系的查询).
       
    7. $("selector1 + selector2") : 查询相邻的后面的一个元素.

    8. $("selector1 ~ selector2") : 查询相邻的后面的所有的指定元素.

    9. $("selector:first") : 查询后取第一个.

    10. $("selector:last") : 查询后取最后一个.

    11. $("selector:eq(i)") : 查询后根据索引号取指定的.

    12. $("selector:not(selector)"): 查询后不包含指定的索引号对应的dom元素.

    13. 属性选择器:
        a. $("html元素的标签名[属性名]"). $("div[id]")
	b. $("html元素的标签名[属性名=属性值]"). $("div[id='div1']")
	c. $("html元素的标签名[属性名^=属性值]"). $("div[id^='di']")
	d. $("html元素的标签名[属性名$=属性值]"). $("div[id$='v1']")
	e. $("html元素的标签名[属性名*=属性值]"). $("div[id*='i']")
	f. $("html元素的标签名[属性名!=属性值]"). $("div[id!='div1']")

	属性选择器组合：
	$(html元素的标签名[属性名][属性名=属性值][属性名^=属性值]...")

    14. $("selector:checked"): 把选中的checkbox、radio查询出来.
         $("input[type='checkbox']:checked");
	 $("input[type='radio']:checked");

    15. $("selector:selected"): 把选中的option查询出来.
         $("select > option:selected");

四、操作属性：
    1. 添加属性值：
       $("selector").attr("属性名", "属性值") 
                    .attr("属性名", "属性值");
       $("selector").attr({"属性名":"属性值","属性名": "属性值"});

       $("selector").prop("属性名", "属性值")
                    .prop("属性名", "属性值");
       $("selector").prop({"属性名":"属性值","属性名": "属性值"});

    2. 获取属性值：
       $("selector").attr("属性名");
       $("selector").prop("属性名");

    3. 删除属性:
       $("selector").removeAttr("属性名");
    

五、操作class： 
    1. 添加class:
       $("selector").addClass("class名称1 class名称2");

    2. 删除class:
       $("selector").removeClass("class名称1 class名称2"); // 删除指定class
       $("selector").removeClass(); // 删除全部class

    3. 获取class:
       $("selector").attr("class");

    4. class开关:
       $("selector").toggleClass("class名称1 class名称2");//对指定class做开关操作.


六、操作文本： 
    1. 添加文本
       $("selector").html("html格式文本|普通文本");
       $("selector").text("普通文本");

    2. 获取文本
       $("selector").html();
       $("selector").text();

    3. 删除文本
       $("selector").html("");
       $("selector").text("");
       

七、操作value： 
    1. 设置value
       $("selector").val("值");
       $("selector").attr("value","值");
       $("selector").prop("value","值");
       $("selector").get(0).value = "值";
       $("selector").get()[0].value = "值";
       $("selector")[0].value = "值";
       $("selector").toArray()[0].value = "值";

    2. 获取value
       $("selector").val();
       $("selector").attr("value");
       $("selector").prop("value");
       $("selector").get(0).value;
       $("selector").get()[0].value;
       $("selector")[0].value;
       $("selector").toArray()[0].value;

    3. 删除value
       $("selector").val("");
       $("selector").attr("value","");
       $("selector").prop("value","");
       $("selector").get(0).value = "";
       $("selector").get()[0].value = "";
       $("selector")[0].value = "";
       $("selector").toArray()[0].value = "";

八、操作css(style属性):
    1. 设置css
       $("selector").css("样式名", "样式值");
       $("selector").css({"样式名": "样式值", "样式名": "样式值"});

    2. 获取css值
       $("selector").css("样式名");

    3. 删除css
        $("selector").css("样式名", ""); // 删除指定的
	$("selector").removeAttr("style"); // 删除全部

    4. 设置宽度、获取宽度.
       $("selector").width("值");
       $("selector").width();

    5. 设置高度、获取高度.
       $("selector").height("值");
       $("selector").height();

九、文档处理：
    
    /** ############### 往目标元素里面添加子元素  ################# **/
    1. $("selector").append("html格式的字符串"); // 往目标元素里面最后面添加子元素.
    2. $("html格式的字符串").appendTo("selector"); // 把子元素追加到目标元素里面最后面.

    3. $("selector").prepend("html格式的字符串"); // 往目标元素里面最前面添加子元素.
    4. $("html格式的字符串").prependTo("selector"); // 把子元素追加到目标元素里面最前面.


    /** ############### 往目标元素外面添加相邻的元素 ################# **/
    5. $("selector").after("html格式的字符串"); // 往目标元素外面最后面添加相邻元素.
    6. $("html格式的字符串").insertAfter("selector"); // 把元素追加到目标元素外面最后面.

    7. $("selector").before("html格式的字符串"); // 往目标元素外面最前面添加相邻元素.
    8. $("html格式的字符串").insertBefore("selector"); // 把元素追加到目标元素外面最前面.
    
    9. $("selector").empty(); // 清空所有的子元素.

    10. $("selector").remove(); // 删除所有的元素.
       
 
十、筛选(查询后再一次过滤):
    -- 实际是把选择器改成了方法.
    1. $("selector").eq(i) : 查询后再根据索引取.
    2. $("selector").first() : 取第一个
    3. $("selector").last() : 取最后一个
    4. $("selector").filter("seletor"): 查询后把需要的过滤出来.
    5. $("selector").map() : 把查询到的jQuery对象转化成另外一个jQuery对象.
                             该jQuery对象中封装的元素不再是dom元素，而是map方法
			      中回调函数的返回值.
        var obj1 = obj.map(function(i, item){  // obj1封装得是map方法回调函数的返回值
		//alert(i + "==" + item);
		return item.name + "=" + item.value;
	});
	alert(obj1.get().join("&"));
    6. $("selector").not("selecotr") : 查询后不包含哪一个.
    7. $("selector").children() : 查询所有直接的子元素.
    8. $("selector").find("selector"): 查询指定的子元素.
           $("ul").find("div").css("color", "red");

十一、动画效果:
    1. 显示与隐藏:
       a. $("selector").show(1000, function(){}); // 显示
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.

       b. $("selector").hide(1000, function(){}); // 隐藏
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.

       c. $("selector").toggle(1000, function(){}); // 显示隐藏开关
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.


    2. 滑上与滑下：
       a. $("selector").slideDown(1000, function(){}); // 显示(滑下)
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.

       b. $("selector").slideUp(1000, function(){}); // 隐藏(滑上)
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.

       c. $("selector").slideToggle(1000, function(){}); // 显示隐藏(滑下滑上)开关
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.
       

    3. 淡入与淡出：
       a. $("selector").fadeOut(1000, function(){}); // 显示(淡入)
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.

       b. $("selector").fadeIn(1000, function(){}); // 隐藏(淡出)
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.

       c. $("selector").fadeToggle(1000, function(){}); // 显示隐藏(淡入淡出)开关
           -- 第一个参数：执行动画毫秒数.
	   -- 第二个参数：动画完成后需要回调的函数.
    
   4. 淡入到指定的透明度：
      $("selector").fadeTo(1000, [0-1], function(){});
       -- 第一个参数：执行动画毫秒数.
       -- 第二个参数：透明度(0-1).
       -- 第三个参数：动画完成后需要回调的函数.
   
十二、事件绑定：
   1. 用on()方法绑定事件.
      $("selector").on("click mouseover", {name:'admin'}, function(event){
		// event.type : 获取事件类型.
		// event.data : 获取事件数据.
      });
      -- 第一个参数：事件名(事件名把前面的on去掉).
      -- 第二个参数：数据.
      -- 第三个参数：事件处理函数.

      $("selector").on({
	  "click" : function(){
	  },
          "mouseover" : function(){
	  }
      });
      
    2. 用bind()方法绑定事件.
      $("selector").bind("click mouseover", {name:'admin'}, function(event){
		// event.type : 获取事件类型.
		// event.data : 获取事件数据.
      });
      -- 第一个参数：事件名(事件名把前面的on去掉).
      -- 第二个参数：数据.
      -- 第三个参数：事件处理函数.

      $("selector").bind({
	  "click" : function(){
	  },
          "mouseover" : function(){
	  }
      });

    3. 主动触发事件.
       a. $("selector").trigger("click");

       b. $("selector").triggerHandler("click");

    4. hover集成了onmouseover与onmouseout.
       $("selector").hover(
	  function(){},  // onmouseover
	  function(){}   // onmouseout
       );

    5. 按点击次数绑定事件：
       $("selector").toggle(
	  function(){ // 点击第一次
	  }, 
	  function(){ // 点击第二次
	  }, 
	  function(){ // 点击第三次
	  }
        );
    6. 特殊方法绑定相应的事件：
       onclick  --> click();
       onblur   --> blur();
       onchange --> change();
       onxxx    --> xxx();
     

十三、事件对象：
      -- event.type : 获取事件类型.
      -- event.data : 获取事件数据.

十四、工具方法：
      1. $.each() : 数组迭代方法
         $.each([], function(i, item){
	     // i : 索引号
	     // this === item : 数组元素

	 });
      2. $.extend({},{}) : 两个json对象进行合并,把后面的json对象合并到前面的json对象中.
      
      3. $.grep() : 数组过滤返回一个新数组.
         var newArr = $.grep([], function(item, i){
	     // i : 索引号
	     // item : 数组元素
             return true: 保留  false: 不保留
	 });

      4. $.map(): 把一个数组转化成一个新的数组.
         var newArr = $.map([], function(item, i){
	     // i : 索引号
	     // item : 数组元素
	     return "值"; // 返回值存入新的数组
	 });

      5. $.merge([],[]): 两个数组合并，返回一个新数组.
      
      6. $.parseJSON(): 把json字符串解析成json对象.
         var str = '{"name" : "李刚", "age" : 50}';
	 -- key : 必须用双引号
	 -- value: 如果是字符串也必须用双引号.

      7. $.trim() : 去掉字符串前后的空格.

      8. $.param() : 把json对象转化成get请求的字符串key=value&key=value

      9 . $("#form的id属性值").serialize() : 把表单中的input元素序列成get请求的字符串.
          <input type="text" name="userId" value="admin"/>
	  <input type="text" name="pwd" value="111111"/>
	  name属性值=value属性值&name属性值=value属性值
	  userId=admin&pwd=11111
         

十五、异步请求(ajax)：
   1. $.ajax(url, settings) : 核心方法.
      -- 第一个参数：请求URL.
      -- 第二个参数：settings发送异步请求需要设置的参数.{}json对象.

      $.ajax({
	   url : "请求URL",
	   type : "get|post|put|delete", // 请求方式
	   data : "key=value&key=value|{key:value,key:value}|[{key:value,key:value},..]", // 请求参数
           dataType : "text|html|xml|json|script|jsonp", // 指定服务器响应回来的数据类型.
           async : true|false, // 异步｜同步
	   success : function(data){ // 请求成功
	      // data : 响应数据
	   },
	   error : function(){ // 请求失败
	     
	   }
      });

    2. $.get() : 只发送get请求  
       $.get(url, data, function(data, status){
          // status(状态码): success 、error
	  // data : 响应数据
       }, dataType);
       -- 第一个参数：请求URL
       -- 第二个参数：请求参数
       -- 第三个参数：回调函数
       -- 第四个参数：服务器端响应回来的数据类型

    3. $.post() : 只发送post请求
       $.post(url, data, function(data, status){
          // status(状态码): success 、error
	  // data : 响应数据
       }, dataType);
       -- 第一个参数：请求URL
       -- 第二个参数：请求参数
       -- 第三个参数：回调函数
       -- 第四个参数：服务器端响应回来的数据类型

    4. $.getJSON(): 发送get请求响应数据为json.
       $.getJSON(url, data, function(data, status){
          // status(状态码): success 、error
	  // data : 响应数据
       });
       -- 第一个参数：请求URL
       -- 第二个参数：请求参数
       -- 第三个参数：回调函数

   5.  $.getScript() : 发送get请求响应数据为script.
        $.getScript(url, function(data, status){
          // status(状态码): success 、error
	  // data : 响应数据
       });
       -- 第一个参数：请求URL
       -- 第二个参数：回调函数

   6. $("selector").load()发送get请求响应数据为html.(加载公共的页面)
      $("selector").load(url, function(data, status){
          // status(状态码): success 、error
	  // data : 响应数据
       });
       -- 第一个参数：请求URL
       -- 第二个参数：回调函数

       	// 发送异步请 求开始
	$("#loading").ajaxStart(function(){
		$(this).show();
	});
	// 发送异步请 求结束
	$("#loading").ajaxStop(function(){
		$(this).hide();
	});

异步请求示例：

1. 省份城市联级下拉列表(异步请求,响应数据为xml) $.ajax()
2. 省份城市联级下拉列表(异步请求,响应数据为json) $.ajax()
3. $.get()发送请求

4. $.post()发送请求
5. $.getScript()
6. $.getJSON()
7. $("selector").load()