一、Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），通过 JS 异步的向服务器发送请 求并接收响应数据。

同步访问：当客户端向服务器发送请求时，服务器在处理的过程中，浏览器只能等待，效率较低。

异步访问：当客户端向服务器发送请求时，服务器在处理的过程中，客户端可以做其他的操作，不需要一直等待。

创建 ajax 实例  

 let xhr = new XMLHttpRequest();

创建请求

method: 请求方式，取值 ’GET’ 或 ‘POST’

url: 请求地址，字符串。

xhr.open(method,url)；

 发送请求  

        xhr.send()

响应请求  

        xhr.onload = function(){

          // 判断 你请求服务器的状态是否为 200  200 的状态码表示成功

          if(xhr.status === 200){

            console.log(xhr.response);

          }  

        }

二、jQuery

1.jQuery 介绍

jQuery 是 JavaScript 的工具库，对原生 JavaScript 中的 DOM 操作、事件处理、包括数据处理和 Ajax 技术等进行封装, 提供更完善，更便捷的方法。

2. 工厂函数 – $()

“$()” 函数用于获取元素节点，创建元素节点或将原生 JavaScript 对象转换为 jquery 对象, 返回 jQuery 对象。jQuery 对象实际是一个类数组对象，包含了一系列 jQuery 操作的方法。

原生 JavaScript 对象与 jQuery 对象的属性和方法不能混用。可以根据需要，互相转换 :

1. 原生 JavaScript 转换 jQuery 对象

    $(原生对象)，返回 jQuery 对象

2. jQuery 对象转换原生 JavaScript 对象

    – 方法一 : 根据下标取元素, 取出即为原生对象

        var div = $(“div”)[0];

    – 方法二 : 使用 jQuery 的 get(index)取原生对象

        var div2 = $(“div”).get(0);

3.jQuery 获取元素

jQuery 通过选择器获取元素，$(“ 选择器 ”)

标签选择器：$(“div”)

ID 选择器：$(“#d1”)

类选择器：$(“.c1”)

群组选择器：$(“body,p,h1”)

后代选择器：$(“div .c1”)

子代选择器：$(“div>span”)

相邻兄弟选择器：$(“h1+p”)  匹配选择器 1 后的第一个兄弟元素, 同时要求兄弟元素满足选择器 2

通用兄弟选择器：$(“h1~h2”) 匹配选择器 1 后所有满足选择器 2 的兄弟元素

过滤选择器，需要结合其他选择器使用。

:first

  匹配第一个元素 例:$(“p:first”)

:last

  匹配最后一个元素 例:$(“p:last”)

:odd

  匹配奇数下标对应的元素

:even

  匹配偶数下标对应的元素

:eq(index)

  匹配指定下标的元素

:lt(index)

  匹配下标小于 index 的元素

:gt(index)

  匹配下标大于 index 的元素

:not(选择器)

  否定筛选, 除 () 中选择器外, 其他元素

示例代码：

4. 操作元素内容

// 设置或读取标签内容, 等价于原生 innerHTML, 可识别标签语法

html()

// 设置或读取标签内容, 等价于 innerText, 不能识别标签

text()

// 设置或读取表单元素的值, 等价于原生 value 属性

val()

示例代码：

5. 操作标签属性

1. attr(“attrName”,”value”)

    设置或读取标签属性

2. prop(“attrName”,”value”)

    设置或读取标签属性

    注意 : 在设置或读取元素属性时,attr()和 prop()基本没有区别; 但是在读取或设置表单元素 (按钮) 的选中状态时, 必须用 prop()方法,attr()不会监听按钮选中状态的改变, 只看标签属性 checked 是否书写

3. removeAttr(“attrName”)

    移除指定属性

示例代码：

6. 操作标签样式

1. 针对类选择器, 提供操作 class 属性值的方法

// 添加指定的类名

addClass(“className”)

// 移除指定的类型, 如果参数省略, 表示清空 class 属性值

removeClass(“className”)

// 如果当前元素存在指定类名, 则移除; 不存在则添加

toggleClass(“className”)

2. 操作行内样式

// 设置行内样式

css(“ 属性名 ”,” 属性值 ”)  

// 设置一组 CSS 样式

css(对象)

示例代码：

    
    
    
    
    


     


     

        
英雄联盟
        
王者荣耀
        
永劫无间
        
原神
     


     
我是文本标签
     
     

7. 元素的创建, 添加, 删除

1. 创建：使用 $(“ 标签语法 ”)，返回创建好的元素

// 创建元素

let div = $(“

“);

// 设置内容和属性

div.html(“ 动态创建 ”).attr(“id”,”d1″).css(“color”,”red”);

let h1 = $(“

一级标题

“)

2. 作为子元素添加

// 在 $obj 的末尾添加子元素 newObj

$obj.append(newObj);

// 作为第一个子元素添加至 $obj 中

$obj.prepend(newObj);

3. 作为兄弟元素添加

// 在 $obj 的后面添加兄弟元素

$obj.after(newObj);

// 在 $obj 的前面添加兄弟元素

$obj.before(newObj);

4. 移除元素

// 移除 $obj

$obj.remove();  

示例代码：

8. 动画效果

1. 显示和隐藏

     show(speed,callback)/hide(speed,callback)

    – speed   可选。规定元素从隐藏到完全可见的速度。默认为 “0”。

    – callback   可选。show 函数执行完之后，要执行的函数

2. 通过使用滑动下拉和上推效果，显示隐藏的被选元素（** 只针对块元素 **）

     slideDown(speed,callback)/slideUp(speed,callback)

3. 通过使用淡隐淡现方式显示效果，显示隐藏的被选元素

     fadeOut(speed,callback)/fadeIn(speed,callback)

   

    
        
        
        
        
        
    

    

        

        隐藏

        上推

        若隐
        
        
    

9. 数据与对象遍历

1. $(selector).each() 方法规定为每个匹配元素规定运行的函数

    $(selector).each(function(index,element){})

    – *index* – 选择器的 index 位置

    – element – 当前的元素

2. $.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。

    $.each(Object, function(index, data){});

    – *index* – 选择器的 index 位置

    – data- 当前的数据

10.jQuery 事件处理

文档加载完毕原生 JavaScript 方法：window.onload

$(function(){

  // 文档加载完毕后执行

})

区别：原生 onload 事件不能重复书写，会产生覆盖问题；jquery 中对事件做了优化, 可以重复书写 ready 方法, 依次执行

$(“div”).on(“click”,function(){});

$(“div”).click(function(){});