首页 > 代码库 > jQuery总结---版本一
jQuery总结---版本一
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="http://www.mamicode.com/值";
（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 = http://www.mamicode.com/‘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，不复制监听函数
jQuery总结---版本一