大数据WEB阶段（五）jQuery

jQuery

一、概述

1. 什么是jQuery？
   
   1. jQuery是一个写的更少 ， 但做的更多的轻量级的 javaScript函数库 。
2. jQuery的优势？
   
   1. 可以简化JavaScript代码
   2. 可以向css那样获取元素
   3. 可以修改css来控制页面效果
   4. 可以兼容常用的浏览器 。
3. jQuery版本支持
   
   1. jQuery分为很多版本, 还分为未压缩版和压缩版, 根据需要选择对应的版本进行下载!
   2. 1.x 支持常用的浏览器和IE6+
   3. 2.x 支持常用的浏览器和IE9+
   4. 3.x 支持常用的浏览器和IE9+
   5. 注意: jQuery不兼容老版本. 因为jQuery升级除了会做一些内部优化之外, 还会删除以前的一些代码, 比如删除一些方法. 或者是添加一些新的方法。所以在升级之后， 以前的代码可能会无法执行。

4. jQuery引入

   1. jQueyr类库其实就是一个普通的js文件, 和之前在html中引入js文件方式是一样的！！！

二、jQuery语法

1. “$”介绍
   
   1. $符号等价于jQuery, 是jQuery单词的简写
   2. 例如： ()相当于调用jQuery()，该函数会返回一个jQuery对象,这个jQuery对象中包含零个或多个html元素,比如: (“div”)，可以通过jQuery中提供的方法来操作这些匹配的元素，比如$(“div”).remove()；

2. 文档就绪事件

   1. 所谓的文档就绪事件, 就是在整个html文档加载完之后立即触发, 执行一些操作，格式如下：

      $(document).ready(function(){
          //xxxx
      });
      
      该函数会在整个html文档加载完之后立即执行! 其作用相当于: 
      window.onload = function(){ //xxx  }
      

   2. 其简写形式为:

      $(function(){
          //xxxx
      });
      

3. DOM对象和jQuery对象相互转化

   1. JS对象只能调用JS上提供的属性和方法, 不能调用jQuery提供的属性和方法, 如果非要使用, 必须将JS对象转化成jQuery对象！反之亦然。

   2. dom对象转jQuery对象：

      var dom = document.getElementById("username");
      var $jQuery = $(dom);
      //jQuery对象要以$开头
      

   3. jQuery转dom对象：

      var $jQuery = $("#username");
      //方式一: 
      var dom1 = $jQuery[0];    // jQuery对象转成js对象
      
      //方式二:
      var dom2 = $jQuery.get(0);    // jQuery对象转成js对象
      

   4. 案例：

      /*通过点击按钮获取用户名的值，分别将jQuery对象转换成js对象和js对象转换为jQuery对象*/
                  /* 文档就绪事件 */
                  $(function(){
                      //为所有匹配的元素绑定点击事件
                      $("#btn").click(function(){
                          //jQuery对象
                          var $jQuery = $("#username");
                          //alert($jQuery.val());
      
                          //jQuery对象转成js对象:
                          //方式一: 
                          var js1 = $jQuery[0];
                          //alert(js1.value);
      
                          //方式二:
                          var js2 = $jQuery.get(0);
                          //alert(js2.value);
      
                          //js对象转成jQuery对象:
                          var oInp = document.getElementById("username");
                          var $Inp = $(oInp);
                          alert($Inp.val());
                      });
                  })
      

三、选择器

1. 基本选择器

   1. 元素名选择器

      $("div") -- 匹配所有的div元素
      

   2. class选择器

      $(".ca") -- 匹配所有的class值为ca的元素
      $("div.ca") -- 匹配所有的class值为ca的div元素
      

   3. id选择器

      $("#d1") -- 匹配所有的id为d1的元素
      

   4. *匹配符

      $("*") -- 匹配所有的元素
      

   5. 多元素选择器

      $("div , #d1 , .ca")
      

   6. 案例：

      //让整个页面加载完成
          $(document).ready(function() {
              /* ---------基本选择器练习--------- */
              //改变元素名为 
       的所有元素的背景色为 #FF69B4"  id="b1"
              $("#b1").click(function(){
                  $("div").css("background-color", "#FF69B4");
              });
      
              //改变 id 为 one 的元素的背景色为 #9ACD32"  id="b2"
              $("#b2").click(function(){
                  $("#one").css("background-color", "#9ACD32");
              });
      
              //改变 class 为 mini 的所有元素的背景色为 #FF0033"  id="b3"
              $("#b3").click(function(){
                  $(".mini").css("background-color", "#FF0033");
              });
      
              //改变所有元素的背景色为 #FDF5E6"  id="b4"
              $("#b4").click(function(){
                  $("*").css("background-color", "#FDF5E6");
              });
      
              //改变所有的元素和 id 为 two 的元素的背景色为 #FF1493"  id="b5"
              $("#b5").click(function(){
                  $("span,#two").css("background-color", "#FF1493");
              });
      
      
              //改变所有的元素和 id 为 two 的,id为one的，class为 mini的所有的元素的背景色为 #006400"  id="b6"
              $("#b6").click(function(){
                  $("span,#two,#one,.mini").css("background-color", "#006400");
              });
      
          }); 
      

2. 层次选择器

   1. 如果想通过DOM元素之间的层次关系来获取特定元素。例如子元素、兄弟元素等。则需要通过层次选择器。

      1. $("div span") – 匹配div下所有的span元素
      2. $("div>span") – 匹配div下所有的span子元素
      3. $("div+span") – 匹配div后面紧邻的span兄弟元素
      4. $("div~span") – 匹配div后面所有的span兄弟元素
      

   2. 案例

      $().ready(function() {
              /* ---------层级选择器练习--------- */
              //改变  内所有 
       的背景色为 #F08080"  id="b1"
              $("#b1").click(function(){
                  $("body div").css("background-color", "#F08080");
              });
              /*
                  $("#b1").click(function(){}) 
                  等价于:
                  document.getElementById("b1").onclick = function(){};
               */
      
              //改变  内子 
       的背景色为 #FF0033"  id="b2"
              $("#b2").click(function(){
                  $("body>div").css("background-color", "#FF0033");
              });
      
              //改变 id 为 one 的下一个 
       的背景色为 #0000FF"  id="b3"
              $("#b3").click(function(){
                  $("#one+div").css("background-color", "#0000FF");
              });
      
              //改变 id 为 two 的元素后面的所有兄弟
      的元素的背景色为 #9ACD32"  id="b4"
              $("#b4").click(function(){
                  $("#two~div").css("background-color", "#0000FF");
              });
              //改变 id 为 two 的元素所有 
       兄弟元素的背景色为 #FF6347"  id="b5"
              $("#b5").click(function(){
                  $("#two").siblings("div").css("background-color", "#0000FF");
      
      
                  //$("#two").next("div").css("background-color", "#0000FF");//选择id为two元素后面紧邻的div兄弟元素
                  //$("#two").nextAll("div").css("background-color", "#0000FF");//选择id为two元素后面所有的div兄弟元素
                  //$("#two").prev("div").css("background-color", "#0000FF");//选择id为two元素前面紧邻的div兄弟元素
                  //$("#two").prevAll().css("background-color", "#0000FF");//选择id为two元素前面所有的兄弟元素
              });
          })
      

3. 基本过滤选择器

   1. 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素, 该选择器都以 “:” 开头

      $("div:first") – 匹配所有div中的第一个div元素
      $("div:last") – 匹配所有div中的最后一个div元素
      $("div:even") – 匹配所有div中索引值为偶数的div元素，0开始
      $("div:odd") – 匹配所有div中索引值为奇数的div元素，0开始
      $("div:eq(n)") – 匹配所有div中索引值为n的div元素，0开始
      $("div:lt(n)") – 匹配所有div中索引值小于n的div元素，0开始
      $("div:gt(n)") – 匹配所有div中索引值大于n的div元素，0开始
      $("div:not(.one)") – 匹配所有class值不为one的div元素
      

   2. 案例：

      $(function() {
              /* ---------基本过滤选择器练习--------- */
              //改变第一个 div 元素的背景色为 #FF6347"  id="b1"
              $("#b1").click(function(){
                  $("div:first").css("background-color", "#FF6347");
              });
      
              //改变最后一个 div 元素的背景色为 #9ACD32" id="b2" 
              $("#b2").click(function(){
                  $("div:last").css("background-color", "#FF6347");
              });
      
              //改变class不为 one 的所有 div 元素的背景色为 #FF0033" id="b3" 
              $("#b3").click(function(){
                  $("div:not(.one)").css("background-color", "#FF0033");
              });
      
              //改变索引值为等于 3 的 div 元素的背景色为 #006400"  id="b4" 
              $("#b4").click(function(){
                  $("div:eq(3)").css("background-color", "#006400");
              });
      
              //改变索引值为小于 3 的 div 元素的背景色为 #FF69B4"  id="b5"/>
              $("#b5").click(function(){
                  $("div:lt(3)").css("background-color", "#FF69B4");
              });
      
              //改变索引值为大于 3 的 div 元素的背景色为 #F08080"  id="b6"
              $("#b6").click(function(){
                  $("div:gt(3)").css("background-color", "#F08080");
              });
      
      
              //改变索引值为偶数的 div 元素的背景色为 #FF6347" id="b7"
              $("#b7").click(function(){
                  $("div:even").css("background-color", "#F08080");
              });
      
              //改变索引值为奇数的 div 元素的背景色为 #FF1493" id="b8"
              $("#b8").click(function(){
                  $("div:odd").css("background-color", "#FF1493");
              });
          })
      

4. 内容选择器

   $("div:contians('abc')") – 匹配所有div中包含abc内容的div元素
       如: 
   xxxabcxx
   
   $("div:has(p)") – 匹配所有包含p元素的div元素
       如: 
   
   
   $("div:empty") – 匹配所有内容为空的div元素
       如: 
   
   
   $("div:parent") – 匹配所有内容不为空的div元素
       如: 
   xxxxx
   

5. 可见选择器

   $("div:hidden") -- 匹配所有隐藏的div元素
   $("div:visible") -- 匹配所有的可见的元素
   

   1. 案例：

      $(function() {
              /* ---------内容选择器--------- */
              //改变含有文本 ‘id’ 的 div 元素的背景色为 #FF6347" id="b1" 
      xxidxx
      
              $("#b1").click(function(){
                  $("div:contains('id')").css("background-color", "#FF6347");
              });
              //改变空元素div(既不包含文本也不包含子元素)的背景色为 #9ACD32" id="b2"
              $("#b2").click(function(){
                  $("div:empty").css("background-color", "#9ACD32");
              });
      
              //改变包含div子元素的div元素的背景色为 #FF0033" id="b3"
      
              $("#b3").click(function(){
                  $("div:has(div)").css("background-color", "#FF0033");
              });
      
              //改变非空div元素的背景色为 #006400" id="b4"
              $("#b4").click(function(){
                  $("div:parent").css("background-color", "#006400");
              });
      
              //====================================================
      
              /* ---------可见选择器练习--------- */
              //改变所有可见 div 元素背景色为 #F08080" id="b5"
              $("#b5").click(function() {
                  $("div:visible").css("background-color", "#F08080");
              })
      
              //让所有隐藏的div元素显示, 并改变背景色为 #FF69B4" id="b6"
              $("#b6").click(function() {
                  $("div:hidden").css("background-color", "red").show();
      
              })
          }) 
      

6. 属性选择器

   $("div[id]") – 匹配所有具有id属性的div元素
   $("div[id='d1']") – 匹配所有具有id属性并且值为d1的div元素
   $("div[id!='d1']") – 匹配所有id属性值不为d1的div元素
   $("div[id^='d1']") – 匹配所有id属性值以d1开头的div元素
   $("div[id$='d1']") – 匹配所有id属性值以d1结尾的div元素
   

7. 子元素选择器

   $("div:nth-child(n)") – n从1开始, 匹配div中第n个子元素。
   $("div:first-child") –匹配div中第1个子元素。
   $("div:last-child") –匹配div中最后一个子元素。。。
   

   1. 案例：

      $(function() {
              /* ---------属性选择器练习--------- */
              //改变包含id属性的 div 元素的背景色为 #FF6347" id="b1"
              $("#b1").click(function(){
                  $("div[id]").css("background-color", "#FF6347");           
              });
      
              //改变包含属性title='aa' 的div 元素的背景色为 #9ACD32" id="b2"
              $("#b2").click(function(){
                  $("div[title='aa']").css("background-color", "#9ACD32");           
              });
      
              //改变type属性不等于button的input 元素的背景色为 #FF0033" id="b3" 
              $("#b3").click(function(){
                  $("input[type!='button']").css("background-color", "#9ACD32");         
              });
      
              //=================================================
      
              /* ---------子元素选择器练习--------- */
      
              //改变div 第二个子元素的背景色为 #006400"  id="b4"
              $("#b4").click(function() {
                  $("div:nth-child(2)").css("background-color", "#006400");
              })
      
              //改变div 第一个子元素的背景色为 #FF69B4"  id="b5"
              $("#b5").click(function() {
                  //$("div:nth-child(1)").css("background-color", "#FF69B4");
                  $("div:first-child").css("background-color", "#FF69B4");
                  //$("div:last-child").css("background-color", "#FF69B4");
              })
          })
      

8. 表单选择器

   $(":input") – 匹配所有的input文本框、密码框、单选框、复选框、select框、textarea、button。
   $(":password") – 匹配所有的密码框
   $(":radio") – 匹配所有的单选框
   $(":checkbox") – 匹配所有的复选框
   $(":checked") – 匹配所有的被选中的单选框/复选框/option
   $("input:checked") – 匹配所有的被选中的单选框/复选框
   $(":selected") – 匹配所有被选中的option选项
   

   1. 案例：

      $(function() {
              /* ---------表单选择器练习--------- */
              //改变所有:input 元素的背景色为 #F08080" id="b1"
              $("#b1").click(function() {
                  $(":input").css("background-color", "#F08080");
                  alert($(":input").length);
              });
      
              //改变:password 元素的背景色为 #9ACD32" id="b2" 
              $("#b2").click(function() {
                  $(":password").css("background-color", "#9ACD32");
              });
              //弹出 :radio 元素的个数" id="b3"
              $("#b3").click(function() {
                  alert($(":radio").length);
              });
              //弹出所有 :checked 元素的value值" id="b4"
              $("#b4").click(function() {
                  $(":checked").each(function(){
                      alert($(this).val());
                  });
              });
      
              //弹出所有 :selected 元素的value值" id="b5"
              $("#b5").click(function() {
                  $(":selected").each(function(){
                      alert($(this).val());
                  });
              });
          })
      

四、文档操作

1. parent()
   
   1. $(“#d1”).parent() – 获取id为d1的父元素
2. parents()
   
   1. $(“#d1”).parents() – 获取id为d1的祖先元素
   2. $(“#d1”).parent(“tr”) – 获取id为d1的祖先tr元素
3. next()
   
   1. $(“#d1”).next() – 获取id为d1的后面紧邻的兄弟元素
   2. $(“#d1”).next(“span”) – 获取id为d1的后面紧邻的兄弟span元素
4. nextAll()
   
   1. $(“#d1”).nextAll() – 获取id为d1的后面所有的兄弟元素
   2. $(“#d1”).nextAll(“span”) – 获取id为d1的后面所有的兄弟span元素

5. prev()

   1. $(“div”).prev() – 获取所匹配元素前面紧邻的兄弟元素
   2. $(“div”).prev(“span”) – 获取所匹配元素前面紧邻的span兄弟元素

6. prevAll()

   1. $(“div”).prevAll() – 获取所匹配元素前面所有的兄弟元素
   2. $(“div”).prevAll(“span”) – 获取所匹配元素前面所有的span兄弟元素

7. siblings()

   1. $(“div”).siblings() – 获取所匹配元素前后所有的兄弟元素
   2. $(“div”).siblings(“span”) – 获取所匹配元素前后所有的span兄弟元素

8. append()

   1. $(“div”).append(““) –为所匹配元素追加一个span子元素

9. remove()

   1. $(“div”).remove() – 删除所匹配元素

10. html()

    1. $(“div”).html() – 获取所匹配元素的html内容
    2. $(“div”).html(“xxx”) – 为所匹配元素设置html内容

11. text()

    1. $(“div”).text() – 获取所匹配元素的文本内容
    2. $(“div”).text(“xxx”) – 为所匹配元素设置文本内容

12. attr()

    1. $(“div”).attr(“id”) – 获取所匹配元素的id属性值
    2. $(“div”).attr(“id”, “xx”) – 为所匹配元素设置id属性

13. css

    1. $(“div”).css(“width”) – 获取所匹配元素的width样式属性值
    2. $(“div”).css(“width”, “200px”) – 为所匹配元素设置width样式属性
    3. $(“div”).css({“width”:”200px”, “color”:”red”,”font-size”:”24px” }) ; – 为所匹配元素设置width样式属性

五、事件

1. click()

   1. $(“div”).click(function(){}) – 为所匹配元素绑定点击事件

2. blur()

   1. $(“input”).blur(function(){}) – 为所匹配元素绑定失去输入焦点事件

3. focus()

   1. $(“input”).focus(function(){}) – 为所匹配元素绑定获得输入焦点事件

4. change()

   1. $(“select”).change(function(){}) – 为所匹配元素绑定选项切换事件

5. ready()

   1. (document).ready(function())–文档就绪事件其作用相当于:window.onload=function()简写形式为: (function(){}) – 在整个文档加载完成后立即执行

六、效果

1. show()

   1. $(“div”).show() – 将隐藏元素设置为显示(底层操作的是display);

2. hide()

   1. $(“div”).show() – 将显示元素设置为隐藏(底层操作的是display);

3. toggle()

   1. $(“div”).toggle() – 切换元素的可见状态, 如果元素显示则设置为隐藏, 如果元素隐藏则设置为可见.

七、JSON

1. json是什么?
   json是JavaScript提供的一种数据交换(存储)格式

   创建JS对象:
       var person = {
           "name":"张飞",
           "age": 18,
           "gender": "男"
       }
   

2. json语法

   1. {}括起来的就是一个对象
   2. json的属性名只能用双引号引起来, 不能用单引号!

   3. json的属性值:

      数字（整数或浮点数）
      字符串（在双引号中）
      逻辑值（true 或 false）
      数组（在方括号中）
      对象（在花括号中）
      null
      

3. json和xml比较

   1. 可读性: xml比json具有更好的可读性
   2. 解析度: xml解析麻烦, 而json是js提供的对象, 可以非常方便的进行解析
   3. 流行度: xml虽然发展了很多年, 但是由于json易于操作, 所以在某些场景中json比xml更常用.

4. json格式:

   格式一:
                   var p1 = {
                       "name" : "兰刚",
                       "age" : 18,
                       "gender" : "男"
                   }
   
   
   
               格式二
                   var p2 = {
                       "name" : "兰刚",
                       "age" : 18,
                       "gender" : "男",
                       "friends" : ["赵栋","靳幸福","朴乾"],
                       "gf" : {
                           "name" : "凤姐",
                           "age" : "17",
                           "gender" : "女"
                       }
                   }
   
                   格式三
                   var p3 = {
                       "name" : "兰刚",
                       "age" : 18,
                       "gender" : "男",
                       "friends" : [
                       {
                           "name" : "赵栋",
                           "age" : 20,
                           "gender" : "男"
                       },{
                           "name" : "靳幸福",
                           "age" : 19,
                           "gender" : "男"
                       },{
                           "name" : "朴乾",
                           "age" : 21,
                           "gender" : "男"
                       }
                       ]
                   }