JS总结（三）

jQuery

基本使用

• 入口函数

  等着 DOM 结构渲染完毕即可执行内部代码， 相当于原生中的 DOMContentLoaded
  • $(function () {
    }) ;
  • $(document).ready(function() {
    });

• jQuery 的顶级对象 $

  在代码中可用jQuery 代替 $，相当于原生中的 window

• jQuery 对象和 DOM 对象

  • 用原生 JS 获取来的对象就是 DOM 对象
  • jQuery 方法获取的元素就是 jQuery 对象
    注：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法
  • DOM 对象转换为 jQuery 对象： $(“div”)
  • jQuery 对象转换为 DOM 对象
    $(“div”) [index]
    $(“div”) .get(index)

选择器：$(“选择器”)

里面选择器直接写 CSS 选择器即可

• 设置样式

  $(‘div’).css(‘属性’, ‘值’)

• 隐式迭代

  给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作， 方便我们调用

• jQuery 筛选选择器

  :first 获取第一个元素
  :last 获取最后一个元素
  :eq(index) 获取索引号为 index 的元素，从0开始
  :odd 获取索引号为奇数的元素
  :even 获取索引号为偶数的元素
  用法：$(“li:first”);

• jQuery 筛选方法

  parent() 查找父级
  children(selector) 相当于父子选择器
  find(selector) 相当于后代选择器
  sibling(selector) 查找兄弟节点，不包括自己本身
  eq(index) 相当于 :eq(index)，index从0开始
  用法：$(“li”).parent();

操作css方法

• 操作css方法

  • 返回属性值：$(this).css(“color”);
  • 设置样式：$(this).css(“color”, “red”); 属性必须加引号，值如果是数字可以不用跟单位和引号
  • 设置多组样式：$(this).css({“color”:“white”,“font-size”:“20px”}); 属性可以不用加引号

• 设置类样式方法

  • 添加类：$(“div”).addClass(“类名”);
  • 移除类：$(“div”).removeClass(“类名”);
  • 切换类：$(“div”).toggleClass(“类名”); 只是对指定类进行操作，不影响原先的类名

效果

• 参数都可以省略
• speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。
• easing：用来指定切换效果，默认是“swing”，可用参数“linear”。
• fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

• 显示隐藏效果

  • 显示：show([speed],[easing],[fn])
  • 隐藏：hide([speed],[easing],[fn])
  • 切换：toggle([speed],[easing],[fn])

• 滑动效果

  • 下滑：slideDown([speed],[easing],[fn])
  • 上滑：slideUp([speed],[easing],[fn])
  • 切换：slideToggle([speed],[easing],[fn])

• 事件切换：hover([over,]out)

  • over : 鼠标移到元素上要触发的函数（相当于mouseenter）
  • out : 鼠标移出元素要触发的函数（相当于mouseleave）
  • 如果只写一个函数，则鼠标经过和离开都会触发它

• 动画队列及其停止排队方法

  动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
  停止排队：stop() 写道动画或者效果的前面，相当于停止结束上一次的动画

• 淡入淡出效果

  • 淡入： fadeIn([speed],[easing],[fn])
  • 淡出：fadeOut([speed],[easing],[fn])
  • 切换：fadeToggle([speed],[easing],[fn])
  • 渐进方式调整到指定的不透明度
    fadeTo(speed,opacity,[easing],[fn]) opacity 透明度必须写，speed必须写

• 自定义动画 animate

  animate(params,[speed],[easing],[fn])
  params: 想要更改的样式属性，以对象形式传递，必须写。 属性名可以不用带引号， 如果是复合属性则需要采取驼峰命名法

属性操作

• 设置或获取元素固有属性值 prop()

  • 获取属性：prop(“属性”)
  • 设置属性：prop(“属性”,“属性值”)

• 设置或获取元素自定义属性值 attr()

  • 获取属性：attr(“属性”) 类似于原生getAttribute()
  • 设置属性：attr(“属性”,“属性值”) 类似于原生 setAttribute()

• 数据缓存 data()

  可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
  • 获取数据：data(“属性”)
  • 附加数据：data(“属性”,“属性值”)

内容文本值

• 普通元素内容html() （相当于原生innerHTML）

  • 获取内容：html()
  • 设置内容：html(“内容”)

• 普通元素文本内容 text() （相当与原生 innerText）

  • 获取内容：text()
  • 设置内容：text(“文本内容”)

• 表单的值 val()（相当于原生value）

  • 获取内容：val()
  • 设置内容：val(“内容”)

元素操作

• 遍历元素

  隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历
  • $(“div”).each(function (index, domEle) { }）
    demEle 是每个DOM元素对象，不是jquery对象
  • $.each(object，function (index, element) { }）
    $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象 ；遍历对象时相当于for…in。element 为遍历内容

• 创建元素

   $(''<li>内容</li>'');   动态创建了一个li
  

• 添加元素

  • 内部添加
    • 放在匹配元素内部最后面，类似原生 appendChild：element.append(“内容”)
    • 放在匹配元素内部最前面：element.prepend(“内容”)
  • 外部添加
    • 把内容放入目标元素后面 ： element.after(’‘内容’’)
    • 把内容放入目标元素前面 ：element.before(’‘内容’’)

• 删除元素

  • 删除匹配的元素本身：element.remove()
  • 删除匹配的元素集合中所有的子节点 ：element.empty()
  • 清空匹配的元素内容 ：element.html("")

尺寸、位置操作

• 尺寸

  width() / height() 只算width / height
  innerWidth() / innerHeight() 包括 width / height、padding
  outerWidth() / outerHeight() 包括 width / height、padding、border
  outerWidth(true) / outerHeight(true) 包括 width / height、padding、border、margin
  注 ：以上参数为空，则是获取相应值，返回的是数字型；如果参数为数字，则是修改相应值；参数可以不必写单位。

• 位置

  • offset() 设置或返回被选元素相对于文档的偏移坐标
    offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。
    设置元素的偏移：offset({ top: 10, left: 30 });
  • position() 返回相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
    position().top，position().left，这个方法只能获取
  • scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧
    不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

事件

• 事件注册

  • 单个事件注册
    element.事件(function(){})
    例： $(“div”).click(function(){ })

• 事件处理

  • on() 绑定事件

    • $(“div”).on({   
            mouseover: function(){},    
            mouseout: function(){}
      });     //绑定多个事件
      
      $(“div”).on(“mouseover mouseout”, function() {    
      
      });    // 如果事件处理程序相同 
      

    • 可以事件委派操作（把原来加给子元素身上的事件绑定在父元素身上）
      $(‘ul’).on(‘click’, ‘li’, function() { });
    • on() 可以绑定未来动态创建的元素
      $(“div").on(“click”,”p”, function(){ }); p 是创建的元素

  • one() 只想触发一次事件，与on用法相同

  • off() 解绑事件 ：可以移除通过 on() 方法添加的事件处理程序。
    $(“p”).off() 解绑p元素所有事件处理程序
    $(“p”).off( “click”) 解绑p元素上面的点击事件
    $(“ul”).off(“click”, “li”) 解绑事件委托

  • trigger() 自动触发事件

    • element.click()
    • element.trigger(“click”)
    • element.triggerHandler(“click”) 不会触发元素的默认行为，这是和前面两种的区别

• 事件对象

  事件被触发，就会有事件对象的产生
  element.on(events,[selector],function(event) {})
  • 阻止默认行为：event.preventDefault() 或者 return false
  • 阻止冒泡： event.stopPropagation()

AJAX

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
AJAX = 异步 JavaScript 和 XML。

XHR

• 创建 XMLHttpRequest 对象

  • variable=new XMLHttpRequest();
  • variable=new ActiveXObject(“Microsoft.XMLHTTP”); IE5 和 IE6

• 向服务器发送请求

  • 使用 XMLHttpRequest 对象的 open() 和 send() 方法
    • open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。
      • method：请求的类型；GET 或 POST
      • url：文件在服务器上的位置，该文件可以是任何类型的文件
      • async：true（异步）或 false（同步），当 async=false 时，不要编写 onreadystatechange 函数并且把代码放到 send() 语句后面即可
    • send(string) 将请求发送到服务器。
      • string：仅用于 POST 请求
• GET 和 POST：与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
  在以下情况中使用POST
  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
• setRequestHeader(header,value) 向请求添加 HTTP 头
  • header: 规定头的名称
  • value: 规定头的值

• 服务器响应

  XMLHttpRequest 对象的 responseText 或 responseXML 属性可以获得来自服务器的响应
  • responseText 获得字符串形式的响应数据。
  • responseXML 获得 XML 形式的响应数据。

• onreadystatechange 事件

  • XMLHttpRequest 对象的三个重要的属性
    当 readyState 等于 4 且状态为 200 时，表示响应已就绪。
    onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。
    • onreadystatechange ：存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
    • readyState
      存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
      0: 请求未初始化
      1: 服务器连接已建立
      2: 请求已接收
      3: 请求处理中
      4: 请求已完成，且响应已就绪
    • status
      200: “OK”
      404: 未找到页面

jQuery - AJAX

• $.ajax() 执行异步 AJAX 请求
• $(selector).load(url,data,function(response,status,xhr))
  从服务器加载数据，并把返回的数据放置到指定的元素中
  • URL 必需。规定您需要请求的 URL。
  • data 可选。规定连同请求发送到服务器的数据。
  • function(data,status,xhr) 可选。规定当请求成功时运行的函数。
• $.get(URL,data,function(data,status,xhr),dataType)
  使用 AJAX 的 HTTP GET 请求从服务器加载数据
  • URL 必需。规定您需要请求的 URL。
  • data 可选。规定连同请求发送到服务器的数据。
  • function(data,status,xhr) 可选。规定当请求成功时运行的函数。
  • dataType 可选。规定预期的服务器响应的数据类型。
• $(selector).post(URL,data,function(data,status,xhr),dataType)
  使用 AJAX 的 HTTP POST 请求从服务器加载数据
  • URL 必需。规定您需要请求的 URL。
  • data 可选。规定连同请求发送到服务器的数据。
  • function(data,status,xhr) 可选。规定当请求成功时运行的函数。
  • dataType 可选。规定预期的服务器响应的数据类型。

JSON

JSON 是存储和交换文本信息的语法（是一种格式），类似 XML；JSON 比 XML 更小、更快，更易解析。
XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。

• 将JSON 字符串转换为 JavaScript 对象

  JSON.parse(text[, reviver])
  • text : 必需， 一个有效的 JSON 字符串。
  • reviver : 可选，一个转换结果的函数， 将为对象的每个成员调用此函数。
  • 返回给定 JSON 字符串转换后的对象。

• 将 JavaScript 值转换为 JSON 字符串。

  JSON.stringify(value[, replacer[, space]])
  • value : 必需， 要转换的 JavaScript 值（通常为对象或数组）。
  • replacer : 可选。用于转换结果的函数或数组。
  • space : 可选，文本添加缩进、空格和换行符。
  • 返回包含 JSON 文本的字符串。

• JSON对象

  • JSON 对象在大括号中，以键值对（key/value）形式书写
    例：{ “name”:“runoob”, “alexa”:10000, “site”:null }
  • 嵌套JSON对象
    JSON 对象中可以包含另外一个 JSON 对象
    例：

     myObj = {
    	    "alexa":10000,
    	    "sites": {
    	        "site1":"www.runoob.com",
    	        "site3":"c.runoob.com"
    	    }
    }
    

• 数组（可写在对象中）

  • JSON 数组在中括号中书写
    例：[ “Google”, “Runoob”, “Taobao” ]

• 把 JSON 文本转换为 JavaScript 对象

  var obj = eval ("(" + txt + “)”);

• JSONP

  Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。