jQuery介绍总结

总结:    DOM操作万能4步:    

1.    查找触发事件的元素

2.    绑定事件处理函数

3.    查找要修改的元素

4.    修改元素:  包含三步

取出旧值，修改后，将新值放回元素上

总结:  $的原理:  new  jQuery()    4种用法:  

1.  $("选择器")    2件事:  

(1).  创建jQuery子对象，  

(2).  查找符合条件的DOM元素，保存进jQuery对象中

2.  $(DOM元素)  创建jQuery子对象，并无需查找就可将已经获得的DOM元素保存进jQuery对象中.——其实就是将DOM元素对象转化为jQuery对象

3.  $(`HTML片段`)  将HTML片段创建为新DOM元素对象

4.  $(function(){  ...  })  绑定DOMContentLoaded事件，让代码在HTML+JS加载完就可提前执行。

总结:  jQuery  API  三大特点:  

1.  自带遍历:  只对jQuery对象调用一次简化版函数，等效于自动对jQuery对象内保存的每个DOM元素都调用一次等效的原生函数或属性。

2.  一个函数两用:  和修改、事件绑定相关的函数

(1).  不传入新值时，默认执行获取旧值的操作

(2).  传入新值时，自动切换为执行修改操作

3.  凡是没有特定返回值的函数，几乎都返回.前正在操作的jQuery对象本身！

如果前一个函数正在操作的.前的属于和后一个操作想要的.前的主语，刚好一样！则可以使用链式操作，避免使用变量或重复代码！

总结:    增删改查+事件绑定    不用背！！！用的时候来找到即可！

1.    查找元素:    

(1).    将所有的查找统一为按选择器查找:  var    $jquery对象=$("选择器")

a.  jQuery支持所有CSS3选择器

b.  扩展:  

1).  基本过滤:  

:first    :last      :even      :odd        :eq(i)        :gt(i)          :lt(i)

2).  内容过滤:  :contains(关键词)      :has(选择器)      :parent        :empty

3).  可见性过滤:  :visible    :hidden

4).  表单元素过滤:  

i.  :input      选择所有表单元素(input  select  textarea  button)

ii.  :text      :password        :button          :radio      ...  ...

(2).    不需要查找就可直接获得的元素对象:    1个

a.    $(document)            根节点对象

(3).    按节点间关系查找:    

a.    父子关系:

1).    $元素.parent()    代替    元素.parentElement
2).    $元素.children("选择器")    代替    元素.children  ——只在直接子元素中查找

新增:  $元素.find("选择器")    在所有后代中查找

3).    $元素.children(":first-child")  代替    元素.firstElementChild

4).    $元素.children(":last-child")  代替    元素.lastElementChild

b.    兄弟关系:  

1).    $元素.prev()    代替    元素.previousElementSibling    

新增:  $元素.prevAll("选择器")

2).    $元素.next()    代替    元素.nextElementSibling    

新增:  $元素.nextAll("选择器")

3).  新增:  查找除当前元素之外其余所有兄弟:    $元素.siblings("选择器")  

2.    修改:    3种    

(1).    内容:    3种

a.    $元素.html()    代替了  .innerHTML

b.    $元素.text()    代替了  .textContent

c.    $元素.val()    代替了  .value

(2).    属性:    3种:    

	JQUERY	DOM
字符串类型标准属性	$元素.attr()   $元素.prop()	核心DOM:  getAttribute()  setAttribute() HTML  DOM:  元素.属性名
bool类型标准属性	$元素.prop()	HTML  DOM:  元素.属性名
自定义扩展属性	$元素.attr() 没有对应！	核心DOM:  getAttribute()  setAttribute() HTML  5:  元素.dataset.自定义属性

	凡是字符串类型的属性	凡是标准属性
	$元素.attr()	$元素.prop()
字符串类型标准属性	√	√
bool类型标准属性	×	√
自定义扩展属性	√	×

a.    字符串类型的HTML标准属性:    2种:    

1).    $元素.attr("属性名","属性值")    代替:  getAttribute()  setAttribute()

2).    $元素.prop("属性名","属性值")    代替:  元素.属性名

b.    bool类型的HTML标准属性:    只能用    $元素.prop("属性名",bool)

c.    自定义扩展属性:    1种

1).  $元素.attr("data-自定义属性名","属性值")    

代替    元素.getAttribute()    元素.setAttribute()

3).    查找带有自定义扩展属性的元素:    属性选择器    [data-自定义属性=属性值]

(3).    样式:    

a.    只获取或修改一个css属性时:  统一为:    $元素.css("css属性名",  "属性值")

b.    批量修改多个css属性时:    用class

1).  $元素.addClass()

2).  $元素.removeClass()

3).  $元素.hasClass()

4).  $元素.toggleClass();

简写:  .attr()/.prop()/.css()  其实都可以一句话修改多个属性值 $元素.attr或prop或css({     属性名:  属性值,       ...  :  ... })

3.    添加元素:    jquery只需要2步

(1).    用HTML片段创建新元素

var    $新元素=$(`HTML片段`)

说明:  元素所需的属性和样式已经包含在HTML片段里了，所以，无需再专门添加关键属性。

(2).  将新元素添加到DOM树:    5种  10个函数

a.  父元素末尾追加新元素:  

$父元素.append($新元素)  代替  父元素.appendChild(新元素)

兄弟函数:  $新元素.appendTo($父元素)

b.  父元素开头插入新元素:  

新增:  $父元素.prepend($新元素)

兄弟函数:  $新元素.prependTo($父元素)

c.  插入到一个现有子元素之前:  

$现有元素.before($新元素)  代替  父元素.insertBefore(新元素,  现有子元素)

兄弟函数:  $新元素.insertBefore($现有元素)

d.  插入到一个现有子元素之后:  

新增:    $现有元素.after($新元素)  

兄弟函数:  $新元素.insertAfter($现有元素)

e.  替换父元素下一个现有子元素:  

$现有元素.replaceWith($新元素)  父元素.replaceChild(新元素,  现有子元素)

兄弟函数:  $新元素.replaceAll($现有元素)

(2).  jQuery内已封装了尽量减少操作DOM树的优化(文档片段)，所以我们无需额外专门创建文档片段，jquery内部也已经自动使用了文档片段！

4.    删除元素:    $元素.remove()      代替    父元素.removeChild(要删除的元素)

5.  新增:  克隆:  $元素.clone()

6.  新增:  判断元素是否符合选择器要求:  $元素.is("选择器")

7.    事件:    

(1).    事件绑定:    1种:

a.    $元素.on("事件名",  事件处理函数)  代替  元素.addEventListener("事件名",  处理函数)

$元素.off("事件名",  原事件处理函数)  代替  元素.removeEventListener("事件名",原处理函数)

b.  简写:  只有以下列表中的事件才能:  $元素.事件名(事件处理函数)

常用事件名:   blur  失去焦点   change  下拉列表选中项改变   click  单击   dblclick  双击   focus  获得焦点     keydown  键盘按键按下   keyup  键盘按键抬起 mousedown  鼠标按键按下   mouseenter  鼠标进入(jq) mouseleave  鼠标移出(jq) mousemove    鼠标移动 mouseout  鼠标移出(dom) mouseover  鼠标进入(dom) mouseup  鼠标按键抬起 resize    窗口大小改变 scroll    网页滚动

(2).  页面加载完成事件：2次

a.  DOM中:  先DOMContentLoaded，再window.onload

b.  jq中:  先$(function(){  ...  })，再$(window).load(function(){  ...  })

c.  今后，所有不依赖于css和图片的初始化页面的jquery代码(事件绑定，设置元素的初始内容、属性和样式等)，都应该放在$(function(){  ...  })中

(3).    事件模型:    3个阶段:    捕获、目标触发、冒泡

(4).    获得事件对象:    定义事件绑定时:    

$元素.事件名(function(e){    //触发事件时e=event    }

(5).    取消冒泡/停止蔓延:    e.stopPropagation()

(6).    只要多个平级子元素都要绑定相同的事件时:    利用冒泡/事件委托:    3步

a.    事件绑定在父元素上一份，但是必须用.on()绑定

b.    不用e.target代替this，this指回了最初触发事件的子元素，又可以用了

c.    为.on()添加第二个选择器参数，.on()自动判断当前点击的元素是否想要的。无需自己写if了。

$父元素.on("事件名",  "选择器",  function(){

//this->指向最初触发事件的子元素，不再指父元素，this又能用了

//不用写if了

})

(7).    阻止元素自带的默认行为:    e.preventDefault();

(8).    获得鼠标位置：    

a.    鼠标位置相对屏幕左上角的距离:        e.screenX                    e.screenY

b.    鼠标位置相对浏览器文档显示区左上角的距离    e.clientX                        e.clientY

c.    鼠标位置相对事件所在元素左上角的距离e.offsetX                            e.offsetY

(9).  鼠标事件:  

a.  DOM中:  mouseover    mouseout    反复进出子元素也会反复冒泡触发父元素的进出事件

b.  jq中:  

1).  mouseenter和mouseleave  代替mouseover和mouseout

2).  如果同时绑定mouseenter和mouseleave，就可只绑定一个hover

$元素.hover(  //=mouseenter+mouseleave

function(){  ...  },  //给mouseenter

function(){  ...  }    //给mouseleave

)

3).  特例:  万一两个函数可以修改为一样的，也可以只写一个function

$元素.hover(  //=mouseenter+mouseleave

function(){  ...  }  //给mouseenter和mouseleave

)

(10).  模拟触发:  $元素.trigger("事件名")

如果要触发的事件属于常用事件列表，可简写为  $元素.事件名()

(11).    窗口滚动事件:    

a.    当滚动条滚动时自动触发:    window.οnscrοll=function(){    ...    }

b.    获取滚动条滚动过的距离:    

var    scrollTop=document.body.scrollTop||document.documentElement.scrollTop;

c.    控制滚动条滚动到指定位置:    window.scrollTo(0,    要滚动到的位置)

8.  动画:  

(1). 简单动画: 3种固定效果，9个函数

a. 显示隐藏:

$元素.show(动画持续时间毫秒数, function(){ 动画结束后自动执行 })   

$元素.hide(动画持续时间毫秒数, function(){ 动画结束后自动执行 })   

$元素.toggle(动画持续时间毫秒数, function(){ 动画结束后自动执行 });

b. 上滑下滑:

$元素.slideUp(动画持续时间毫秒数, function(){ 动画结束后自动执行 })   

$元素.slideDown(动画持续时间毫秒数, function(){ 动画结束后自动执行 })   

$元素.slideToggle(动画持续时间毫秒数, function(){ 动画结束后自动执行 });

c. 淡入淡出:

$元素.fadeIn(动画持续时间毫秒数, function(){ 动画结束后自动执行 })   

$元素.fadeOut(动画持续时间毫秒数, function(){ 动画结束后自动执行 })   

$元素.fadeToggle(动画持续时间毫秒数, function(){ 动画结束后自动执行 });

(2). 万能动画:

$元素.animate({

css属性: 目标值,

... : ...

}, 动画持续时间毫秒数, function(){动画结束后自动执行})

(3). 停止动画: $元素.stop()

(4). 查找正在播放动画的元素: jquery新增选择器:   :animated

9.  类数组对象操作:  

(1). 遍历查找结果中每个DOm元素: $(...).each(function(i, elem){ ... })

(2). 查找一个元素在查找结果中的下标位置: $(...).index(要找的DOm元素)

10. 添加自定义函数:

jQuery.prototype.自定义函数=function(形参列表){

this->将来调用这个自定义函数的.前的jQuery子对象

this不用$(this)

}

将来:

$(查找结果).自定义函数() 

11. 封装自定义插件:

(1). 创建自定义插件:

a. 先创建独立css文件，将原网页中插件相关的css，剪切到独立的css文件中

b. 再创建独立js文件，为jquery原型对象添加一个自定义插件函数。插件函数中做2件事

1). 为找到的HTML元素自动添加class

2). 为找到的元素自定绑定事件处理函数

(2). 使用插件:

a. 将插件的css和js文件拷贝到项目中

b. 在页面中引入jquery的js和插件的js以及插件的css

c. 在页面中按插件要求编写HTML内容和结果，不需要加class

d. 在自定义js中，查找插件父元素，调用插件函数

12. ajax

$.ajax({

url:"服务器端接口地址",

type:"get或post",

data:{ 变量: 值, 变量: 值 }, //发送到服务器端的参数变量和值

dataType:"json",

success: function(result){ 

//可使用result来获得服务器端返回的结果执行后续操作

}

})

13. 跨域:

a. 包括: 

  1). 域名不同: 

  从http://www.a.com 向 http://www.b.com发送请求

  2). 子级域名不同: 

  从http://oa.tedu.cn 向 http://hr.tedu.cn 发送请求

  3). 端口号不同:

  从http://localhost:5500 向 http://localhost:3000 发送请求

  4). 协议不同:

  从 http://12306.cn 向 https://12306.cn 发送请求

  5). 即使本机内，域名向IP发送请求: 

  从 http://localhost:3000 向 http://127.0.0.1:3000 发送请求

b. 同源策略(CORS): 浏览器只允许当前网页中的ajax请求使用自己网站的资源，禁止ajax请求使用其他网站的资源。报错: Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy:

从 源头 'http://127.0.0.1:5500' 到'http://localhost:3000/'的xhr请求被CORS策略阻止了！

No 'Access-Control-Allow-Origin' header is present on the requested resource.

且，又没有在请求的资源上设置'Access-Control-Allow-Origin' 头信息。(所以，无法跨域访问)

c. 解决: cors方式：只靠服务器端就能完成:

res.writeHead(200,{

  ... ...
  "Access-Control-Allow-Origin": "http://客户端网页所在网址"
})

d. 结果: 服务器端将响应结果中的寄件人地址伪装成和客户端网页所在地址一致，就可骗过浏览器cors策略的检查，让ajax顺利使用其他网站服务器端返回的结果数据了。

e. 问题: 服务器端必须知道客户端网站的域名或ip地址，受局限。

f. 解决: JSONP方式，服务器端无需知道任何客户端的IP或域名，没有局限。
  1). 客户端提前定义处理数据的函数: function 函数名(形参){ ... }

  2). 客户端不要用ajax或xhr发送请求，改为用<script src="接口地址">发送请求

  3). 服务器端将要返回的数据，拼接进一条字符串格式的js函数调用语句中，然后返回整条包含数据的函数调用语句。函数名与客户端提前定义的处理函数名保持一致

  4). 结果: <script>收到服务器端返回的函数调用语句后，立刻执行，自动调用第一步已经定义好的处理函数并将拼接在函数调用语句中的数据，传给处理函数的形参变量。

总结:    this        8种:

一定不要看定义在哪儿，只看在哪里调用，如何调用

1. obj.fun()    this->obj

2. new  Fun()    this->new正在创建的子对象

3. 类型名.prototype.共有方法=function(){    ...    }       

    this->将来调用这个共有方法的.前的子对象

4. fun() 和 (function(){    })()  和回调函数中的this->window

5. 访问器属性中的this，指访问器属性所在的当前对象。

6. 事件处理函数中的this->当前正在触发事件的这个元素对象

7. $jquery对象.click(function(){   
    this->将来点击的那个DOM元素对象
  })

8. jQuery.prototype.自定义函数=function(){

    … this指将来调用这个自定义函数的点前的一个jq子对象 …

    }