一、DOM对象和jQuery对象的转换
jQuery对象是jQuery对DOM对象的封装，封装了jQuery的一些方法和属性。
(一)检测DOM对象和jQuery对象
检测 DOM object ：obj.nodeType 返回值：是*DOM对象返回数字，非*返回undefined
检测 jQuery object：obj.jquery 返回值：是*jQuery对象返回版本号，非*返回值undefined
<body>
<h1 id="h1">创建HTML</h1>
<div id="div">测试</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
var h1 = document.getElementById('h1');
var div = $('#div');
console.log(h1.nodeType); //1
console.log(div.jquery); //1.12.4 当前版本号
console.log(h1.jquery); //undefined
console.log(div.nodeType); //undefined
})
</script>
</body>(二)DOM对象和jQuery对象相互转换
1.DOM对象——>jQuery对象
var jqueryObj = $(domObj);
<body>
<h1 id="h1">创建HTML</h1>
<div id="div">测试</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
var h1 = document.getElementById('h1');
var div = $('#div');
console.log(h1); //DOM对象 <h1 id="h1">创建HTML</h1>
console.log($(h1)); //DOM对象——>jquery对象
})
</script>
</body>创建元素也可以转换
console.log($('<div id="div2">测试2</div>')); //输出的是jQuery对象2.jQuery对象——>DOM对象
- jqueryObj.get(index) //返回指定位置的DOM元素 index可以为负值（从后往前）index超出为undefined
- jqueryObj[index] //返回类数组中指定的DOM元素 index超出为undefined
- jqueryObj.get() //不带参数，返回DOM元素的集合
- jqueryObj.toArray() //返回DOM元素的集合和jqueryObj.get() 是一样的二、检查和提取jQuery对象中的元素
(一)检查元素数量
//$('XXX').length
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
var ulEle = $('ul>li');
console.log(ulEle.length); //5
})
</script>
</body>(二)提取元素
jqueryObj.eq(index) //返回jquery对象集合中的指定索引的元素对象,index为负（从后往前）
jqueryObj.first() //返回jquery对象集合中的第一个
jqueryObj.last() //返回jquery对象集合中的最后一个
以上这3个方法和过滤器中的:eq、:first、:last功能一样。
$('XXX:eq(index)');
$('XXX:first()');
$('XXX:last()');
不过筛选器的效率比使用方法低
ps:注意点
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function(){
console.log($('li:eq(0)')); //jQuery.fn.init [li, prevObject: jQuery.fn.init(1), context: document, selector: "li:eq(0)"]
console.log($('li').eq(0)); //jQuery.fn.init [li, prevObject: jQuery.fn.init(5), context: document]
$('li:eq(0)') === $('li').eq(0); //返回值为false
})
</script>
</body>(三)通过 父子 关系查找jQuery对象
| 方法名 | 说明 |
|---|---|
| children([selector]) | 只能查找直接子元素 |
| contents() | 只能查找直接子元素和它的文本节点 |
| find(selector) | 查找所有子元素（包括孙子）,必须要有参数 |
| parent([selector]) | 从父元素开始匹配，只能查找直接父元素，返回1个 |
| parents([selector]) | 从父元素开始匹配，查找所有符合条件的父元素（包括祖父），返回集合，如果不加条件的话，直接查找到html |
| parentsUntil([selector]) | 从父元素开始匹配，直接查到[selector]，但不包括[selector]，返回集合 |
| closest(selector) | 从本身开始向上查找，找匹配的就停止 |
closest与parents的区别：
1. closest是从当前元素开始匹配的；parents是从父元素开始匹配的
2. closest向上找，找到匹配的就停止；parents会找到所有的父元素，并返回一个集合
3. closest返回1个或0个，parents能返回多个
(四)通过 兄弟姐妹 关系查找jQuery对象
| 方法名 | 用法 |
|---|---|
| next([selector]) | 查找下一个相邻的兄弟元素 |
| nextAll([selector]) | 向下查找所有兄弟（同辈）元素 |
| nextUntil([selector]) | 向下查找到selector层级的同辈元素，selector本身不被查找 |
| prev([selector]) | 查找上一个相邻的兄弟元素 |
| prevAll([selector]) | 向上查找所有的兄弟（同辈）元素 |
| prevUntil([selector]) | 向上查找到selector层级的同辈元素，selector本身不被查找 |
| siblings([selector]) | 查找所有的（兄弟）同辈元素，不包括本身 |
(五)添加元素
一般是对使用上面的方法查找出来的元素进行操作
| 方法名 | 说明 |
|---|---|
| add(selector) | 将指定的selector，并添加到元素集合 |
(六)过滤元素
过滤已经查找出的元素集合
| 方法名 | 说明 |
|---|---|
| not(selector) | 从已有的元素集合剔除指定的seletor元素 |
| filter(selector) | 剔除元素集合中除了selector外的所有元素 |
| has(selector) | 从元素集合中过滤出包含 指定后代元素 的元素 |
| slice(start[,end]) | 根据指定的下标范围，过滤匹配的元素；1.start是从0开始，end被省略，则一直到最后；2.start为负数从尾开始；3.正常情况是 [start,end)，不包括end; |
例子
//为含有二级列表的li添加背景颜色
<!DOCTYPE html>
<html>
<head>
<title>测试</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li class="li li1">测试1</li>
<li class="li li2">
<ul>
<li>测试2-1</li>
<li>测试2-2</li>
</ul>
</li>
<li class="li li3">测试3</li>
<li class="li li4">
<ul>
<li>测试4-1</li>
<li>测试4-2</li>
<li>测试4-3</li>
</ul>
</li>
<li class="li li5">测试5</li>
</ul>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.li').has('ul').css('background-color','yellow')
});
</script>
</body>
</html>(七)获取或设置元素的值
| 方法名 | 说明 |
|---|---|
| map() | .map()方法特别适用于获取或设置元素集合中的值，返回值是一个jquery的类数组对象，可使用get()转换成普通数组，再使用join()转换成字符串 |
map()中可以使用回调函数。
例子
//获取获取li中的文本，以数组的形式存储
<body>
<h1></h1>
<ul>
<li class="item1">item1</li>
<li class="item2">item2</li>
<li class="item3">item3</li>
<li class="item4">item4</li>
<li class="item5">item5</li>
<li class="item6">item6</li>
<li class="item7">item7</li>
<li class="item8">item8</li>
<li class="item9">item9</li>
</ul>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<script>
$(function (){
//使用map
var liText1 = $('li').map(function(index,domElement){
return this.innerText;
}).toArray();
console.log(liText1);
//使用each
var liText2 = [];
$('li').each(function(index,domElement){
liText2.push(this.innerText);
});
console.log(liText2);
});
</script>
</body>(八)遍历元素
| 方法名 | 说明 |
|---|---|
| each() | .each() 方法用来让DOM循环结构更简单更不易出错。它会迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。更重要的是，回调函数是在当前DOM元素为上下文的语境中触发的。因此关键字 this 总是指向这个元素。 |
具体使用见手册
(九)map()和each()的对比
| # | map | each |
|---|---|---|
| 定义 | 用于使用指定函数处理类数组对象中的每个元素（或对象的每个属性），并将处理结果封装为新的jquery对象并返回 | 为每个匹配的元素规定要运行的函数 |
| 语法 | $.map(object,function(){…}) 或jQuery(selector).map(function(){…}) | jQuery(selector).each(function(index,element){…}) 或jQuery.each(object,function(index[,element]){…})可以直接使用遍历对象数组 |
| 参数 | Object：指定的需要处理的类型是数组或对象 function：指定处理的匿名函数 |
function：是必需的，为每个匹配元素规定运行的函数。 index：代表选择器的位置（下标） element：是当前元素（也可以在函数中使用$(this)） |
ps:$是jQuery的缩写
例子
//$.each()和$.map()可以直接遍历对象数组
//1.使用$.each遍历json对象,并动态插入到html中
$.ajax({
url:'__APP__/Admin/Flow/XXX',
type: 'POST',
success:function(data){
var mdata = $.parseJSON(data);
str = "";
$.each(mdata,function(index){
str += '<tr>'+
'<td width="20%" class="text-c">'+mdata[index].flowchart_name+'</td>'+
'<td>'+
'<div class="progress" style="float: left;height: 20px;">'+
'<div class="progress-bar" style="height: 20px;">'+
'<span class="sr-only radius" style="width:'+mdata[index].percentage+';height: 20px;"></span>'+
'</div>'+
'</div>'+
'<span style="float: left;margin-left: 20px;">'+mdata[index].percentage+'</span>'+
'</td>'+
'</tr>';
});
$('#tbody').append(str);
}
});(十)其他操作
| 方法名 | 说明 |
|---|---|
| is(selector) | 判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true。 |
| end() | 恢复破坏性操作前一次的元素集合；使用end()方法时，前一次的操作一定要是破坏性操作，不然会返回一个空对象 |
| addBack([selector]) | 将之前匹配的元素加入到当前匹配的元素中 |
三、对jQuery对象的属性、特性以及数据的操作
(一)属性properties和特性attributes的不同
1.attributes
- 值为：string
- 名称不区分大小写
- 会在HTML中呈现
- 就是HTML标签属性中实际的键和值
2.properties
- 值为：string、boolean、number、object
- 可以有任意值，property名区分大小写
- 通过点方式获取
3.property和attribute值的同步
- 如果attributes是本来在DOM对象中存在的，attributes和properties的值 会同步
- 如果attributes是本来的DOM对象中就存在的，但是类型为boolean，那么attributes和properties的 不会同步
- 如果attributes不是DOM对象内建的属性，attributes和properties的值 不会同步
//1.property和attribute值保持一致
document.body.setAttribute('id','pageWrap')
console.log(document.body.id) // pageWrap
//2.property的值不一定和attribute完全一致
img.src//绝对地址
img.getAttribute('src')//相对地址
a.href = '/';
console.log(a.getAttribute('href')); // '/'
console.log(a.href); // 完整链接
//3.如果值为boolean型，property的值和attribute不一致
<input type="checkbox" name="test" id="test" checked="checked">
<script>
var inputEle = document.getElementById('test');
console.log(inputEle.checked); //true
console.log(inputEle.getAttribute('checked')); //checked
</script>
//4.同步的propery和attribute名称不一致
//class/className
//因为JS中class是保留字，所以对于class attribute，用className property来代替class property。
document.body.setAttribute('class', 'big red bloom');
console.log(document.body.className); //big red bloom, 但ie8及以下输出为空(二)操作attribute和property
1.操作元素的特性attribute：
- 获取特性的值：attr(name)
- 设置特性的值：attr(name,value) attr(attributes)
- 删除特性：removeAttr(); 删除多个特性中间加空格。
2.操作元素的属性：
- 获取属性的值：prop(name)
- 设置属性的值：prop(name,value) prop(properties)
- 特性不区分大小写，属性区分
- 删除属性：removeProp();
3.在元素中存储数据：
- 获取数据的值：data([name])
- 设置数据的值：data(name,value) data(object);
- 删除数据：removeData([name]);
- 判断元素是否有数据：hasData(‘ele’);
四、修改jQuery对象的样式和内容
(一)修改元素样式（addClass()、removeClass()、toggleClass()）
- addClass(names) 批量操作元素，添加或修改class
- removeClass(names) 批量操作元素、删除一个或多个类
//以上方法可以定义函数，不过返回值需要一个或多个类名
//addClass和removeClass都是批量操作, 括号里可以用空格隔开, 括号里也可以是函数,函数第一个参数是调用者的index, 第二个参数是className
$('#demo').addClass(function(index,className){
return 'red';
})- hasClass(name) 方法检查被选元素是否包含指定的 class。
- toggleClass([names],[switch]) 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除
(二)获取和设置元素样式（css()）
- css(name) 获取
- css(name,value) 设置
- css({property1：value1，property2：value2 })
- 用横杠写属性需要加引号，驼峰则不用
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
#box{width:400px;height:400px;border:1px solid red;text-align:center;}
.child{width:300px;height:300px;margin:0 auto;margin-bottom:50px;}
</style>
</head>
<body>
<div id="box">
<div class="child"></div>
<input type="button" value="按钮1" class="btn1"/>
<input type="button" value="按钮2" class="btn2"/>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$('.btn1').click(function(){
$('.child').css('background-color','pink');
});
$('.btn2').click(function(){
$('.child').css({
width: '-=100',
height: '-=100',
})
});
});
</script>
</body>
</html>(三)获取和设置元素尺寸
带参数就是设置，不带参数就是获取
- width([value])
- height([value])
- innerHeight([value])
- innerWidth([value])
- outerWidth([value])
- outerHeight([value])
(四)获取或设置 位置 和 滚动
- 返回对象集合中的一个元素，返回两个值，左侧和顶部的距离：offset()；
- 返回匹配元素相对于父元素的位置（偏移）：position();
- 设置滚动条：scrollTop()和scrollLeft();
(五)获取或设置元素内容
- html()
- html(content)
- text()
- text(content)
1、获取值：html（）只对第一个起作用；text（）对所有元素起作用，返回所有；
2、设置值：html（）设置html代码段，传入样式，则文本改变样式；text（）设置文本，将标签中的文本变成了传入的参数
3、设置纯文本时，作用是一样的
五、jQuery对象的文档处理
（一）移动、插入元素
- append() 在元素内的后面添加元素 append($(selector))参数为选择的元素就是移动
- prepend() 在元素内的前面添加元素
- before() 在元素之前添加元素
- after() 在元素之后添加元素
以下方法的效果和上面一样：就是操作顺序不一样,而且还是破坏性操作 - appendTo() 向目标结尾插入匹配元素集合中的每个元素
- prependTo() 向目标开头插入匹配元素集合中的每个元素
- insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面
- insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面
（二）包裹元素
- wrap()
- wrapAll()
- wrapInner()
- unwrap()
（三）移除元素
- remove()删除后会删除选中的元素的事件和数据，但是不会把选中的元素从JQuery中删除。
- detach()删除后会保存选中的元素的事件和数据。
- empty()会删除元素的内容(inner，包括子节点)，元素本身会保留。
（四）复制和替换元素
- clone([Even[,deepEven]); 第一个参数是否复制它本身，第二个参数是否深度复制，如果不写默认都为false
- replaceWith(content)
- replaceAll(target) 该方法是破坏性的操作 在链式语法中 项选择之前的元素 需要实现end( )方法
（五）处理表单元素值（val()）
jquery一贯的风格带参数为设置，不带参数为获取
- val(value) 设置值除了文本框和下拉框单选外，使用数组的设置方法
- val() 获取值
<body>
<h1>处理表单元素值</h1>
<form>
<p>
<label>用户名：</label>
<input type="text" name="username" value="John">
</p>
<p>
<label>密码：</label>
<input type="password" name="password" value="123456">
</p>
<p>
<label>性别：</label>
<input type="radio" name="sex" value="男">
<input type="radio" name="sex" value="女" checked>
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="aihao" value="羽毛球">
<input type="checkbox" name="aihao" value="健身" checked>
<input type="checkbox" name="aihao" value="篮球">
<input type="checkbox" name="aihao" value="网球" checked>
<input type="checkbox" name="aihao" value="力量举" checked>
</p>
</p>
<p>
<label>学历：</label>
<select name="education">
<option value="0">大学以上</option>
<option value="1" selected>大学</option>
<option value="2">大专</option>
<option value="3">高中</option>
<option value="4">高中以下</option>
</select>
</p>
<p>
<label>签名：</label>
<textarea name="sign">小可爱~</textarea>
</p>
</form>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function () {
//文本框
console.log($('[name="username"]').val());
console.log($('[name="password"]').val());
//单选框
console.log($('[name="sex"]:checked').val());
//复选框
//console.log($('[name="aihao"]:checked').val());对于一个元素集合.val()只能获取一个值，要使用map()方法
console.log($('[name="aihao"]:checked').map(function(inedx,element){
return $(this).val();
}).toArray() //toArray将jquery对象数组转为数组
);
//下拉框 (多选下拉框一样，获取的值是数组)
console.log($('[name="education"] option:selected').val()); //最好加上option:selected
//文本域
console.log($('[name="sign"]').val());
//console.log($('[name="sign"]').text());也是可以的
});
</script>
</body>