大数据正式10

大数据正式10

jQuery

• 定义：jQuery是一个“写的更少”，但“做的更多”的轻量级JavaScript函数库
• 优势
  1. 可以简化JavaScript代码
  2. 可以像css那样获取元素
  3. 可以修改css来控制页面效果
  4. 可以兼容常用的浏览器
• jQuery版本支持
  • 未压缩版和压缩版
    1. 1.x 支持常用的浏览器和IE6+
    2. 2.x 支持常用的浏览器和IE9+
    3. 3.x 支持常用的浏览器和IE9+
  • 注意：jQuery不兼容老版本，因为jQuery升级除了会做一些内部优化之外，还会删除以前的一些代码，删除和添加一些方法，所有在升级之后，以前的代码可能会无法执行
• 引入：和之前的js文件的引入是一样的

jQuery语法

• $
  • $等价于jQuery，是jQuery单词的缩写
  • $()等价于jQuery(),该函数会返回一个jQuery对象，这个jQuery对象中包含零个或多个HTML元素
• 文档就绪事件
  • 在整个html文档加载完之后立即触发，执行一些操作
  • 格式

    $(document).ready(function(){});
    

  • 相当于window.οnlοad=function(){};
  • 简写形式

    $(function(){});
    

• DOM对象和jQuery对象互相转化
  • js对象只能调用js上提供的属性和方法，不能调用jQUery提供的属性和方法，如果非要使用，必须将js对象转化为jQuery对象，反之亦然
  • dom对象转jQuery对象

    var dom=document.getElementById("username");
    var $jQuery=$(dom);
    

  • jQuery对象转化为dom对象

    var $jQuery=$("#username");
    //方式1
    var dom1=$jQuery[0];
    //方式2
    var dom2=$jQuery.get(0);
    

jQuery选择器

• 基本选择器
  • 元素名选择器

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

  • class选择器

    $("。div1")//匹配class值为div1的元素
    

  • id选择器

    $("#div2")//匹配id值为div2的元素
    

  • *号匹配符

    $("*")//获取所有的元素
    

  • 多元素选择器

    $("div,span,#h2")//匹配这些元素
    

• 层级选择器
  • 通过DOM元素之间的层次关系来获取特点的元素

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

• 基本过滤选择器
  • 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，以:开头

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

• 内容选择器

  1. $("div:contians("abs")")//匹配所有div中包含abc内容的div元素
      如：
  
  2. $("div:has(p)")//匹配所有div中包含p元素的div元素
      如：
  aasd
  
  3. $("div:empty")//匹配所有div内容为空的div元素
      如：
  div>
  4. $("div:parent")//匹配所有div内容不为空的div元素
      如：
  
  

• 可见选择器

  1. $("div:hidden")//匹配所有隐藏的div元素
  2. $("div:visible")//匹配所有可见的div元素
  

• 属性选择器

  1. $("div[id]")//匹配所有具有id属性的div元素
  2. $("div[id='d1']")//匹配所有具有id属性值为d1的div元素
  3. $("div[id!='d1']")//匹配所有具有id属性值不为d1的div元素
  4. $("div[id^='d1']")//匹配所有具有id属性以d1开头的div元素
  5. $("div[id$='d1']")//匹配所有具有id属性以d1结尾的div元素
  

• 子元素选择器

  1. $("div:nth-child(n)")//n从1开始，匹配div中的第n个元素
  2. $("div:first-child")//n从1开始，匹配div中的第1个元素
  3. $("div:last-child")//n从1开始，匹配div中的最后一个元素
  

• 表单选择器

  1. $(":input")//匹配所有的input文本框，密码框，单选框，复选框，select框，textarea框，button
  2. $(":password")//匹配所有的密码框
  3. $(":radio")//匹配所有的单选框
  4. $(":checkbox")//匹配所有的复选框
  5. $(":checked")//匹配所有的选中的单选框/复选框/option
  6. $("input:checked")//匹配所有的单选框/复选框
  7. $(":selected")//匹配所有的option选项
  

文件操作

• parent()

  $("#d1").parent()//获取id值为d1的父元素
  

• parents()

  $("#d1").parents()//获取id值为d1的祖先元素
  

  $("#d1").parents("tr")//获取id值为d1的tr祖先元素
  

• next()

  $("#d1").next()//获取id值为d1后面的紧邻兄弟元素
  

  $("#d1").next("p")//获取id值为d1后面的紧邻兄弟p元素
  

• nextAll()

  $("#d1").nextAll()//获取id值为d1后面的所有紧邻兄弟元素 
  

  $("#d1").nextAll("p")//获取id值为d1后面的所有紧邻兄弟p元素 
  

• prev()

  $("#d1").prev()//获取id值为d1前面的紧邻兄弟元素  #
  $("#d1").prev("p")//获取id值为d1前面的紧邻兄弟p元素
  

• prevAll()

  $("#d1").prevAll()//获取id值为d1前面的紧邻兄弟元素
  

  $("#d1").prevAll("p")//获取id值为d1前面的紧邻兄弟p元素
  

• siblings()

  $("#d1").siblings()//获取id值为d1后面所有的元素
  

  $("#d1").siblings("p")//获取id值为d1后面所有的p元素
  

• append()

  $("div").append("
  hello
  ")//为所有的div后增加一个p标签
  

• remove()

  $("div").remove()//删除匹配的元素
  

• html()

  $("div").html()//获取元素的html内容
  $("div").html("xxx")//设置元素的html内容
  

• text()

  $("div").text()//获取元素的文本内容
  $("div").text("xxx")//设置元素的文本内容
  

• attr()

  $("div").attr("id")//获取元素的id属性的内容
  $("div").attr("id","xx")//设置元素的id属性的值为xx
  

• css

  $("div").css("width")//获取元素的样式
  $("div").css("width","200px")//设置元素的样式
  $("div").css("width","200px"，"color":"red","font-size":"24px")//设置元素的样式
  

事件

• click()点击事件

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

• blur()失去焦点事件

  $("input").blur(function(){});
  

• focus()获得焦点事件

  $("input").focus(function(){});
  

• change()选项切换事件

  $("select").change(function(){});
  

• ready()文档就绪事件

  $(document).ready(function(){});
  //相当于
  window.οnlοad=function(){}
  //简写形式
  $(function(){})
  

效果

• show()

  $("div").show();//底层操作的是display
  

• hide()

  $("div").hide();//底层操作的是display
  

• toggle()

  $("div").toggle();//显示与隐藏互换
  

JSON

• 定义：json是JavaScript提供的一种数据交换（存储）格式
• 格式

  var person={
      "name":"kungfu",
      "age",18,
      "gender":"男"
  }
  

  var person={
      "name":"kungfu",
      "age",18,
      "gender":"男",
      "friends":["gougou","maomao"],
      "gf",{
          "name":"hui"
      }
  }   
  var person={
      "name":"kungfu",
      "age",18,
      "gender":"男"
      "friends":[
          {
              "name":"wk",
              "age":12
          },{
              "name":"pww",
              "age":23
          }
      ]
  }   
  

• 语法
  • {}括起来的就是一个对象
  • json的属性名只能用双引号引起来，不能用单引号
  • json的属性值
    1. 数字（整数或浮点数）
    2. 字符串（在双引号中）
    3. 逻辑值（true，false）
    4. 数组（在方括号中）
    5. null
• json和xml比较

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

补充