jQuery总结---版本一

Posted 2020-09-09

day01---

 

jQuery是一个函数库，简化了DOM操作，屏蔽了浏览器兼容性问题。函数分为4类

（1）DOM操作

（2）事件处理

（3）动画

（4）AJAX

jQuery3的新特性有哪些？

    1. 移除旧的IE工作区

    2. jQuery 3.0运行在Strict Mode下

    3. 引进for...of循环

    4. 动画方面采用新的API

    5. 对包含特殊含义的字符串提供转义的新方法

    6. 类操作方法支持SVG

    7. 延迟对象现在与JS Promises兼容

    8. jQuery.when()对于多种参数的不同解读

    9. 新的显示/隐藏逻辑

    10. 对于防止XSS攻击的额外保护

2.jQuery函数的特点

  (1) $或者jQuery是一个函数，返回值是一个jQuery类数组对象

  (2)即使没有查找到需要的元素，jQuery类数组对象也不会是null/undefined，调用jQuery函数不会报错！

  (3)jQuery类数组对象提供的函数都自带for循环遍历每个查找到的元素

  (4)jQuery函数底层都是DOM操作，所以可和原生的DOM操作组合使用

  (5)原生DOM对象不能调用jQuery提供的函数；jQuery函数返回的类数组对象也不能调用核心DOM成员

  (6)原生DOM对象和jQuery对象间如何转换：

原生DOM对象封装到一个jQuery类数组对象

$(domObject)

jQuery类数组中取出封装的DOM对象：

$(‘button‘)[index]

  (7)jQuery对象方法的返回值一般还是当前选定的类数组对象，可以实现“链式调用”

   1.常用核心DOM操作

      （1）查找元素方法

            document.getElementById("id");

　　　　document.getElementsByName("uname");//根据name属性名获取

　　　　document.getElementsByTagName("p")//获取所有的p元素

　　　　document.getElementsByClassName("className");//根据类名获取元素

　　　　document.querySelector("选择器");//根据选择器选择单个元素

　　　　document.querySelectorAll("选择器");//根据选择器选择所有匹配元素

      （2）遍历节点
 　　　　node.parentNode

　　　　parent.childNodes（节点树）    parent.children(元素树)

　　　　node.nextSibling  node.previousSibling    node.nextElementSibling   node.previousElementSibling

       （3）修改元素属性

　　　　element.getAttribute("属性名");

　　　　element.setAttribute("属性名","属性值");

　　（4）修改元素内容

　　　　element.innerhtml

　　　　element.innerText/element.textContent

 　　（5）修改元素样式

　　　　element.style.color="red";

　　　　element.className="btn btn-danger";//通过类名来增加样式

　　　（6）修改表单元素属性值

　　　　 　　inputElement.value="值";

　　　（7）添加新元素

　　　　　　var newElement= document.createElement("div");

　　　　　　parent.appendChild(newElement);

　　　（8）删除已有元素

 　　　　　parent.removeChild(node)　　

　　　（9）替换旧元素

　　　　　parent.replaceChild(oldChild,newChild)

　　　（10）元素克隆

　　　　　parent.cloneNode();

jQuery操作

jQueryDOM操作——查找节点

  jQuery(‘选择器‘) =》  类数组对象

基本选择器：

#id、.class、div、*、button,.btn

层级选择器：

parent  child

parent > child

prev + next

prev ~ siblings

基本过滤选择器：

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

:odd :even :not(selector)

子代过滤选择器：

:first-child :last-child :nth-child(i)

:nth-child(odd)   :nth-child(even)

属性选择器：

[attr="value"]

可见性选择器：

:visible :hidden

内容选择器：

:contains(txt) :has(selector)

:empty :parent

表单元素选择器：

:text :radio :submit

:disabled :enabled :checked :selected

 

 

核心DOM操作和jQuery操作对比

1.操作元素的属性

<a  href="" title=""  data-toggle="dropdown">

  核心DOM：

element.getAttribute(‘title‘)

element.setAttribute(‘title‘, ‘abc‘)

  jQuery：

var value  = $(..).attr(‘title‘) //读取属性的值

$(..).attr(‘title‘, ‘abc‘) //设置属性的值

  提示：读取和设置元素的data-*扩展属性，可以使用attr()方法，也可以使用data()方法，如： <a data-my-target="1.jpg">

var v = $(...).data(‘my-target‘) //读取

$(...).data(‘my-target‘, ‘2.jpg‘) //设置

2.操作元素的内容

  核心DOM：

var h = element.innerHTML;

element.innerHTML = h;

var t = element.innerText/textContent;

element.innerText/textContext = t;

  jQuery：

$(..).html( ) //读取innerHTML

$(..).html( ‘html‘ ) //设置innerHTML

$(..).text( ) //读取innerText

$(..).text( ‘txt‘ ) //设置innerText

3.操作元素的样式

  核心DOM：

var c = element.style.color //读取行内样式

element.style.color = ‘red‘ //设置行内样式

var n = element.className //读取ClassName

element.className = n //设置ClassName

  jQuery：

$(..).css(‘color‘) //读取指定样式的值

$(..).css(‘color‘, ‘red‘) //设置行内样式

$(..).addClass(‘alert‘) //添加一个class

$(..).removeClass(‘alert‘) //删除一个class

$(..).hasClass(‘alert‘) //判断选定元素是否具有指定class

4.操作表单元素的值

核心DOM：

var v = input.value //读取值

input.value = ‘v‘ //设置值

jQuery：

$(...).val( ) //读取值

$(...).val(‘value‘) //设置值

面试题：在操作元素的相关属性时，使用attr()、val()、prop()、data()有何区别？

attr()一般只用于操作元素的HTML字面属性，如src、href、name...

val()操作的是HTML元素对应的JS对象的value属性

prop()操作的是HTML元素对应的JS对象的disabled、readyonly、selected、checked等Boolean类型属性

data()操作的是HTML元素对应的JS对象的扩展数据属性（对象缓存数据），而attr(‘data-xx‘)读取/修改的HTML元素字面属性

5.遍历DOM树上的节点

  核心DOM：

element.parentNode //寻找父节点

element.childNodes/children //获取子节点

elemnet.nextSibling //获取下一个兄弟

element.previousSibling //获取上一个兄弟

  jQuery：

$(..).parent() //返回选定元素的父节点

$(..).children() //返回所有子节点

$(..).next() //返回下一个兄弟

$(..).prev() //返回上一个兄弟

$(..).siblings() //返回所有的同辈兄弟

6.添加新的元素

  核心DOM：

var li = document.createElement(‘li‘) //创建子节点

//修改li的属性.... //设置其属性

ul.appendChild( li ); //添加到父节点

  jQuery：

var li = $(‘<li class="item">内容</li>‘) //创建子节点

//li.click(fn)

$(‘ul‘).append( li ); //在父节点最后追加子节点

$(li).appendTo( ‘ul‘ ) //子节点追加到父节点最后

     -------可以简写为------------------------------

$(‘ul‘).append( ‘<li class="item">内容</li>‘ )

7.删除已有的元素

  核心DOM：

ul.removeChild( li ) //由父元素删除孩子

  jQuery：

$(‘li‘).remove() //删除当前选定元素

 

8.替换已有元素

  核心DOM：

parent.replaceChild(oldChild,  newChild);

  jQuery：

   $(‘oldChild‘).replaceWith( newChild ) //已有节点用新节点替换，返回被删除的旧节点

$(‘newChild‘).replaceAll( oldChild ) //新节点替换所有的旧节点，返回新节点

9.克隆节点

  核心DOM：

var copy = element.cloneNode( )

  jQuery：

var copy = $(..).clone() //返回选定元素的副本

var copy = $(..).clone(copyListener)   //参数指示是否复制选定元素绑定的监听函数，默认为false，不复制监听函数