上一章我们学完了JavaScript，接下来我们开始学习jQuery，jQuery在项目中已经不怎么使用了，这里我们也粗略学习一下，在老项目中遇到了，知道什么意思能用就行了！！
jQuery学习
1、jQuery介绍
- 它的作者是 John Resig ,于2006年创建的一个开源项目
- jQuery 是一个 JavaScript 库(仓库)，它通过封装原生的 JavaScript 函数得到一整套定义好的方法
1.1 jQuery概念
-
它的作者是 John Resig ,于2006年创建的一个开源项目
jQuery是封装好js的一个框架，其实质就是一个js文件
-
jQuery 是一个 JavaScript 库，它通过封装原生的 JavaScript 函数得到一整套定义好的方法
-
jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能
为什么要学jQuery?
它使诸如HTML文档遍历和操纵，事件处理，动画和Ajax等事情变得更简单，使用易于使用的API，可在多种浏览器中使用.结合多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式
通俗理解: 让我们操作页面/浏览器变得更加简单,并且没有兼容性问题 (write less, do more)
写js原生的一些问题:
- 实现同一功能,代码量相对较大
- 有兼容性问题
jQuery :
- 实现同一功能,代码量更少
- 处理了兼容性问题
代码示例:
//需求:
//点击div,改变div中的文本
//html
<div id="box">我女朋友长的好看,你有女朋友嘛?</div>
//js原生
var box = document.getElementById('box');
box.addEventListener('click',function(){
this.innerText = '不好意思,刚才吹牛X了';
}, false);
//jQuery
$('#box').on('click',function(){
$(this).text('jQuery就是屌');
})
1.2 jQuery的功能和优势
- 像 CSS 那样访问和操作 DOM
- 修改 CSS 控制页面外观
- 简化 JavaScript 代码操作
- 事件处理更加容易
- 各种动画效果使用方便
- 让 Ajax 技术更加完美
- 基于 jQuery 大量插件
- 自行扩展功能插件
1.3 jQuery历史
-
从 2005 年 8 月开始,进入公共开发阶段,随之而来的新框架于 2006 年 1 月 14 正式以 jQuery 的名称发布。
时间 版本 更新 2006 年 8 月 jQuery 1.0 第一个稳定版本，具有对 CSS 选择符、事件处理和 Ajax 交互的支持 2007 年 1 月 jQuery 1.1 极大的简化 API。合并了许多较少使用的方法 2007 年 7 月 jQuery 1.1.3 优化了 jQuery 选择符引擎执行的速度 2007 年 9 月 jQuery 1.2 去掉了 XPath 选择器,新增了命名空间事件 时间 版本 更新 2009 年1月 jQuery1.3 使用了全新的选择符引擎 Sizzle,性能进一步提升 2010 年 1 月 jQuery1.4 进行了一次大规模更新,提供了 DOM 操作,增加了很多新的方法或是增强了原有的方法 2010 年 2 月 jQuery1.4.2 添加了.delegate()和.undelegate()两个新方法,提升 了灵活性和浏览器一致性,对事件系统进行了升级 2011 年 1 月 jQuery 1.5 重写了 AJAX 组件,增强了扩展性和性能 2011 年 5 月 jQuery 1.6 重写了 Attribute 组件,引入了新对象和方法 时间 版本 更新 2011 年 11 月 jQuery 1.7 引入了.on()和.off()简介的 API 解决事件绑定及委托容 易混淆的问题 2012 年 3 月 jQuery 1.7.2 进行一些优化和升级 2012 年 7 月 jQuery 1.8 重写了选择符引擎,修复了一些问题 2013 年 1 月 jQuery 1.9 CSS 的多属性设置,增强了 CSS3 2013 年 5月 jQuery 1.10 一增加了一些功能 -
2013 年 4 月发布了 jQuery 2.0,5 月发布了 jQuery 2.0.2,一个重大更新版本,不在支持 IE6/7/8,体积更小,速度更快
-
jQuery3版本的改动：
- 移除旧的IE工作区
- jQuery 3.0运行在Strict Mode下
- 引进for…of循环
- 动画方面采用新的API
- 延迟对象现在与JS Promises兼容
- 。。。
2、jQuery的基本使用
2.1 jQuery 下载
2.2 jQuery的使用
-
引入jquery.js文件
- <script src=“jquery.js”></script>
- <script src=“jquery.min.js”></script>
- <script src=“https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js”></script>
2.3 jQuery执行时机
| 方法 | window.onload | DOMContentLoaded | $(document).ready() | $(function () { }); |
|---|---|---|---|
| 执行时机 | 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 | 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 | 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 |
| 执行次数 | 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 | 可以执行多次,第N次都不会被上 一次覆盖 | 可以执行多次,第N次都不会被上 一次覆盖 |
| 简写方案 | 无 | 无 | $(function () { }); |
2.4 jQuery结构
-
jQuery 程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。
<script> $(function(){ // 执行一个匿名函数 $(function(){}); // 获取id为box的jquery对象 $('#box'); // 将id为box的对象的样式修改 $('#box').css('color','red'); }) </script> -
jQuery类库定义了一个全局函数：
jQuery()。该函数使用频繁，因此在类库中还给它定义了一个快捷别名：$。这是jQuery在全局命名空间中定义的唯一两个变量。<script> jQuery(function(){ // 执行一个匿名函数 jQuery(function(){}); // 获取id为box的jquery对象 jQuery('#box'); // 将id为box的对象的样式修改 jQuery('#box').css('color','red'); }) </script> -
css() 这个功能函数返回的对象其实也就是 jQuery 对象， jQuery 的代码模式是采用的连缀方式,可以不停的连续调用功能函数
<script> $(function(){} $('#box').css('color','red').css('font-size','30px'); ) </script> -
底层实现
<script> //jQuery构造函数 function jQuery() { } // 使用jQuery选择器获取的元素或者jQ方法返回的元素， 属于jQuery实例化对象 // 实例化对象可以调用jQuery的原型方法 jQuery.prototype.css = function () { } jQuery.prototype.eat = function(){ } //jQuery构造函数对象可以调用自己的静态方法 jQuery.ajax = function () { }//释放jQuery到全局 window.jQuery = window.$ = jQuery; </script>
2.5 jQuery代码风格
链式调用：jQuery的每一个方法都会返回一个jQuery对象，返回的是前边离他最近的jQuery元素获取
<div class="box">年轻人不讲武德，耗子为汁</div>
<script src="./jquery.js"></script>
<script>
$("body").css("background", "green");
console.log($("body").css("background", "green"))
console.log($("body").css("background", "green").find(".box").css("background-color", "red"))
</script>
3、jQuery对象和JS对象
3.1 什么是JS对象
DOM对象，即是我们用传统的方法(javascript)获得的对象。
3.2 什么是jQuery对象
jQuery对象即是用jQuery类库的选择器获得的对象，jQuery对象就是通过jQuery包装DOM对象后产生的对象，它是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法
3.3 jQuery对象和DOM/js对象的互相转换
jquery对象和dom对象是不一样的！比如jquery对象不能使用dom的方法，dom对象不能使用jquery方法，
-
jQ转js
jquery对象转换成 dom对象：即[index]和get(index)。jquery对象就是一个类数组对象
$(".box").css("color","red"); $(".box")[0].style.color = "red"; $(".box").get(0).style.color = "red"; -
js转jQ
dom对象转换成jquery对象：对于一个dom对象，只需要用
$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);var oBox = document.querySelector('.box'); $(oBox).css("color", "red");
4、jQuery类数组操作
4.1 什么是类数组
只包含使用从零开始，且自然递增的整数做键名，并且定义了length表示元素个数的对象，我们就认为他是类数组对象。
<script>
var arr = [1,2,3];
var obj = {0:1,1:2,2:3};
console.log(arr[0],obj[0]);//1,1
</script>
var obj = {
0:0,
1:1,
2:2,
3:3,
4:4
}
console.log(obj[0]); //0
console.log(obj.length); //undefined
4.2 类数组操作
//例题
<div id="dm">
你是大马
<div id="zm">
你是中马
<div id="xm">
你是小马</div>
</div>
<div id="z1m">你是中1马</div>
<ul></ul>
</div>
-
children() ：返回原始包装集元素的所有不同子元素所组成的新包装集,如果指定了参数，那么该参数也是筛选表达式
// children(); 获取的是子代对象 var dm = $('#dm'); console.log(dm.children().length); console.log(dm.children()[0]); console.log(dm.children()[1]); //可以在children中来指定要获取的子标签的名字 筛选子标签 console.log(dm.children('div')[2]); -
parent() ：返回原始包装集所有元素的唯一直接父元素的新包装集；如果指定了参数，那么该参数也是筛选表达式
var xm = $('#xm'); console.log(xm.parent().length);//1 console.log(xm.parent().text());//你是中马 你是小马 // parents一直找到html标签 极少使用 console.log(xm.parents().length);//4 // 不允许使用 console.log(xm.parent('#dm').text());//空 -
siblings() ：返回原始包装集元素中的所有兄弟元素所组成的新包装集；如果指定了参数，那么该参数也是筛选表达式
<body> <ul> <li class="box">我是列表项1</li> <li class="box">我是列表项2</li> <li class="box">我是列表项3</li> <li id="l4">我是列表项4</li> <li class="box">我是列表项5</li> <li class="box">我是列表项6</li> <ul>嘿嘿嘿</ul> </ul> <script src="js/jquery.js"></script> <script> var $l4 = $('#l4'); console.log($l4.siblings('li').length);//5 </script> </body> -
find(String) ：返回原始包装集里与传入的选择器表达式相匹配的所有元素的新包装集，并且原始包装集中的元素的后代也会被传入新的包装集
// find 查询当前标签的子标签 var $dm = $('#dm'); // find中必须要加参数 该参数是一个字符串类型的数据 数据为标签名字（大部分的情况下） // 也可以添加选择器 // find是获取的是后代元素 console.log($dm.find('.zm').length);//1 -
对于类数组的常用方法还有很多，比如
prev()–>上一个兄弟元素、
end()–> 最后一个兄弟元素
next()–> 下一个兄弟元素
等等。<body> <ul> <li>我是列表项1</li> <li>我是列表项2</li> <li>我是列表项3</li> <li id="l4">我是列表项4</li> <li>我是列表项5</li> <li>我是列表项6</li> </ul> <script src="js/jquery.js"></script> <script type="text/javascript"> // prev var $l4 = $('#l4'); console.log($l4.prev().html());//上一个兄弟 我是列表项3 console.log($l4.next().html());//下一个兄弟 我是列表项5 // end是执行end之前最后一步操作 而后续的操作则不执行 $l4.css('color','red').end().css('color','green'); //end()没有生效 </script> </body>
类数组案例
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.b1{
border-radius: 50%;
}
.s1{
font-size: 4px;
}
</style>
</head>
<body>
<button class="b2">-</button>
<span class="s1">2</span>
<button class="b1">+</button><br>
<button class="b2">-</button>
<span class="s1">2</span>
<button class="b1">+</button><br>
<button class="b2">-</button>
<span class="s1">2</span>
<button class="b1">+</button><br>
<button class="b2">-</button>
<span class="s1">2</span>
<button class="b1">+</button><br>
<button class="b2">-</button>
<span class="s1">2</span>
<button class="b1">+</button><br>
<script src="js/jquery.js"></script>
<script>
var s1_list = $('.b1');
// 虽然你是jq对象 但是我遍历的时候就变成了 js对象
for(var i = 0; i < s1_list.length; i++){
// s1_list[i].onclick = function(){
// alert(111);
// }
$(s1_list[i]).click(function(){
// 当前对象的上一个标签
var num = $(this).prev().text();
num++;
$(this).prev().text(num);
})
}
for(var i = 0;i < s2_list.length;i++){
$(s2_list[i]).click(function(){
// 当前对象的下一个标签
var num = $(this).next().text();
num--;
if(num<= 0){
num = 0;
}
$(this).next().text(num);
})
}
5、jQuery选择器
jQuery 选择器是 jQuery 库中非常重要的部分之一。它支持网页开发者所熟知的CSS 语法，快速轻松地对页面进行设置
5.1 jQuery 基础选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据给定的id匹配一个元素 | 单个元素 | $(“#test”)选取 id 为 test 的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(“.test”)选取所有 class 为 test 的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $(“p”)选取所有的元素 |
| * | 匹配所有元素 | 集合元素 | $(“*”)选取所有的元素 |
| selector1,selector2, …,selectorN | 将每一个选择器匹配到的元 素合并后一起返回 | 集合元素 | $(“div,span,.myClass”)选取所有，和拥有class为myClass 的标签的一组元素 群组 |
5.2 jQuery 层次选择器
如果想通过 DOM 元素之间的层次关系来获取特定的元素，例如后代元素，子元素，相邻元素和兄弟元素等，那么层次选择器是一个非常好的选择。
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $(“ancestor descendant”) | 选取 ancestor 元素里所有descendant(后代)元素 ♢空格的个数无所谓 | 集合元素 | $(“div span”)选取里的所 有的 元素 |
| $(“parent>child”) | 选取 parent 元素下的child (子)元素 ♢一般书写要加空格 | 集合元素 | $(“div>span”)选取元素下 元素名是 的子元素 |
| $(“prev+next”) | 选取紧接在 prev 元素后的 next 元素 ♢空格不建议添加 | 集合元素 | $(“.one+div”)选取 class 为 one 的下一个 、兄弟元素 |
| $(“prev~siblings”) | 选取prev元素之后的所有siblings元素 ♢空格不建议添加 | 集合元素 | $(“#two~div”)选取 id 为 two 的元素后面所有兄弟元素 |
5.3 过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 选取第1个元素 | 单个元素 | $(“div:first”)选取所有 <div> 元素 中第一个 <div> 元素 |
| :last | 选取最后1个元素 | 单个元素 | $(“div:last”)选取所有 <div> 元素 中最后一个 <div> 元素 |
| :not(selector) | 去除所有与给定选择器 匹配的元素 | 集合元素 | $(“input:not(.myClass)”)选取 class 不是 myClass 的 <input> 元素 |
| :even | 选取索引(从0开始)是偶数的所有元素 | 集合元素 | $(“input:even”)选取索引是偶数的 <input>元素 |
| :odd | 选取索引(从0开始)是奇数的所有元素 | 集合元素 | $(“input:odd”)选取索引是奇数的 <input> 元素 |
| :eq(index) | 选取索引(从0开始)等于 index 的元素 | 单个元素 | $(“input:eq(1)”)选取索引等于1的 <input> 元素 |
| :gt(index) | 选取索引(从0开始)大于 index的元素 | 集合元素 | $(“input:gt(1)”)选取索引大于1的 <input> 元素 |
| :lt(index) | 选取索引(从0开始)小于 index的元素 | 集合元素 | $(“input:lt(1)”)选取索引小于1的 <input> 元素 |
| :header | 选取所有的标题元素，即<h1>到<h6> | 集合元素 | $(“:header”)选取页面中所有的标题元素 |
| :contains(text) | 选取含有文本内容为 text 的元素 | 集合元素 | $(“div:contains(‘test’)”)选取含有文本内容为 test 的<div>元素 |
| :empty | 选取不包含子元素或文本的空元素 | 集合元素 | $(“div:empty”)选取不包含子元素或文本的空 <div> 元素 |
| :has(selector) | 选取含有给定选择器 匹配的元素的元素 | 集合元素 | $(“div:has(.myClass)”)选取含有 class 为 myClass 的元素的 <div> 元素 |
| :parent | 选取含有子元素或文本的元素 | 集合元素 | $(“div:parent”)选取含有子元素或文本的 <div> 元素 |
| :first-child | 选取第1个子元素 | 集合元素 | $(“div :first-child”)选取每个 <div>下第一个子元素 |
| :last-child | 选取最后1个子元素 | 集合元素 | $(“div :last-child”)选取每个 <div> 下最后一个子元素 |
| :only-child | 选取只有唯一子元素的元素的子元素 | 集合元素 | $(“div :only-child”)选择只有一个子元素的 <div> 元素 |
| :nth-child(index/ even/odd/equation) | 选取每个父元素下的第index(索引值为奇数/ 索引值为偶数/索引值等于某个表达式)个子元素，index 从1开始 | 集合元素 | $(“div:nth-child(1)”)选取每个div 中第一个子元素 |
5.4 属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $(“div[id]”)选取拥有属性 id 的元素 |
| [attribute=value] | 选取属性的值为value的元素 | 集合元素 | $(“div[title=test]”)选取属性 title 为 test 的<div>元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 集合元素 | $(“div[title!=test]”)选取属性 title 不等于 test 的<div>元素 |
| [attribute^=value] | 选取属性的值以value开始的元素 | 集合元素 | $(“div[title^=test]”)选取属性 title 以 test 开始的<div>元素 |
| [attribute$=value] | 选取属性的值以 value结束的元素 | 集合元素 |
(
“
d
i
v
[
t
i
t
l
e
(“div[title
(“div[title=test]”)选取属性 title 以 test 结束的 <div> 元素 |
| [attribute*=value] | 选取属性的值含有 value 的元素 | 集合元素 | $(“div[title*=test]”)选取属性 title 含有 test 的 <div> 元素 |
| [selector1][selector2]…[selectorN] | 选取匹配以上所有属性 选择器的元素 | 集合元素 | $(“div[id][title*=test]”)选取拥有属性 id ，且属性 title 含有 test 的<div> 元素 |
5.5 jQuery 表单选择器
表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $(“input:enabled")选取页面内所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $(“input:disabled")选取页面内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $(“input:checked”)选取所有被选中的 <input> 元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $(“select option:selected”)选取所有被选中的选项元素 |
| :input | 选取所有的 <input>、 <textarea>、 <select>和 <button>元素 | 集合元素 | $(“:input”)选取所有的<input>、<textarea>、<select>和<button>元素 |
| :text | 选取所有的单行文本框 | 集合元素 | $(“:text”)选取所有的单行文本框 |
| :password | 选取所有的密码框 | 集合元素 | $(“:password”)选取所有的密码框 |
| :radio | 选取所有的单选框 | 集合元素 | $(“:radio”)选取所有的单选框 |
| :checkbox | 选取所有的多选框 | 集合元素 | $(“:checkbox”)选取所有的多选框 |
| :submit | 选取所有的提交按钮 | 集合元素 | $(“:submit”)选取所有的提交按钮 |
筛选方法
注意: 上面的选择器只要根据传入字符串不同来区分,而筛选选择器是一些方法
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $(‘ul’).children(‘li’) | 找到自己的所有符合条件的直接子元素 当前于子代选择器$(“ul>li”); |
| find(selector) | $(‘ul’).find(‘li’) | 找到自己的所有符合条件的后代元素 当前于后代选择器$(“ul li”); |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟元素，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找直接父亲元素 |
| eq(index) | $(“li”).eq(2); | 找到所有符合条件的li里面对应下标的元素,索引从0开始 |
| next() | $(‘#first’).next() | 下一个兄弟 |
| index() | $(‘li’).index() | 返回对应的索引 |
jQuery样式操作
操作行内样式方法
描述:设置或者修改样式，操作的是style属性。
设置单个样式
语法: jQuery对象.css(‘属性名’, ‘属性值’)
//html
<div id="box"></div>
//js
$("#box").css("background","gray");//将背景色修改为灰色
//js代码运行完毕的结果
<div id="box" style="background: gray"></div>
设置多个样式
语法: jQuery对象.css({
属性名: 属性值,
属性名: 属性值
})
//html
<div id="box"></div>
//js
$("#one").css({
"backgroundColor":"gray",
"width":"400px",
"height":"200px",
"fontSize": "30px"
});
//js执行完毕的结果
<div id="box" style="background:gray; width:400px; height:200px"></div>
-
获取行内样式
语法: jQuery对象.css(‘属性名’)
//html <div id="box" style="background: gray width:100px"></div> $("#box").css("background-color"); //返回的是 rgb(128, 128, 128) --> gray $("#box").css("width"); //返回100px
操作class样式方式
添加样式类
语法： Query对象.addClass(‘类名’)
注意： 传入的参数,不需要加点
//html
<div id="box" ></div>
//js
$('#box').addClass('one');
//执行完之后的结果
<div id="box" class="one"></div>
//======================================================================================
//如果想要同时添加多个
//html
<div id="box" ></div>
//js
$('#box').addClass('two three');
//结果
<div id="box" class="two three"></div>
移除所有样式类
语法: jQuery对象.removeClass(‘类名’)
-
如果不传参数,那么会移除所有的类名
//html <div id="box" class="one two three"></div> //js $('#box').removeClass(); //执行完毕的结果 <div id="#box" class></div> -
如果传入参数,删除指定的类名
//html <div id="box" class="one two three"></div> //js $('#box').removeClass('one'); //执行完毕的结果 <div id="#box" class="two three"></div> //====================================================================================== //如果想同时删除多个类名 //html <div id="box" class="one two three"></div> //js $('#box').removeClass('one three'); //结果 <div id="#box" class="two"></div>
判断是否有样式类
语法: jQuery对象.hasClass(‘类名’) 返回的是true/false
//html
<div id="box" class="one"></div>
//js
$('#box').hasClass('one'); //返回 true
$('#box').hasClass('two'); //返回 false
切换样式类
作用: 如果有这个类名，则移除该样式，如果没有，添加该类名。
语法: jQuery对象.toggleClass(‘类名’)
//html
<div id="box"></div>
//js
$('#box').toggleClass('one');
//执行完的结果
<div id="box" class="one"></div>
//此时再执行一次toggleClass('one');
$('#box').toggleClass('one');
//执行完的结果
<div id="box" class></div>
jQuery中的隐式迭代
迭代: 就是循环的意思
需求: 现在我们有三个盒子,背景默认是透明的.我们现在想要给他们三个都设置黄色的背景颜色
<!-- html结构 -->
<div style="border:5px solid red"></div>
<div style="border:5px solid green"></div>
<div style="border:5px solid blue"></div>
/*css*/
div{
width: 200px;
height: 200px;
float:left;
margin-left:20px;
}
js原生解决:
//js
var divs = document.getElementsByTagName('div');
for(var i = 0; i < divs.length; i++){
divs[i].style.background = 'yellow';
}
//执行完毕之后,这三个div的背景颜色都变成了黄色
如果我们使用jQuery来做这件事情:
$('div').css('background-color', 'yellow'); //只需要这一行代码就可以了
小结:
隐式迭代: jQuery内部会帮我们遍历DOM对象,然后给每一个DOM对象实现具体的操作
思考题:
js代码执行返回值是什么?
//html
<div style="border:5px solid red"></div>
<div style="border:5px solid green"></div>
<div style="border:5px solid blue"></div>
//js
$('div').css('border'); //5px solid rgb(255, 0, 0) 返回的是第一个div的行内样式
说明: 当我们要获取元素某些属性值的的时候,jQuery对象中可能有多个DOM对象,而每个DOM对象的属性值可能都不一样,jQuery不会返回所有的属性值,只会返回第一个DOM对象中的属性值
jquery操作DOM
创建元素
语法: $(‘html形式的字符串’)
$('<span>这是一个span元素</span>'); //创建了一个jQuery包装的span,此时并没有添加到DOM树上
var span = document.createElement('span')
$(span)
添加元素
append方法
语法: jQuery对象.append(参数)
传入一个jQuery对象
//html
<div id="box"></div>
<div ></div>
//js
var $span = $("<span>这是一个span元素</span>");
$("#box").append($span);
//执行完的结果
<div id="box">
<span>这是一个span元素</span>
</div>
<div ></div>
//思考:如果执行下面这行代码,结果是什么?
$("div").append($span);
注意: 如果添加已经存在的元素
//html
<div></div>
<p></p>
//js
var $p = $('p');
$('div).append($p);
//执行之后的结果
<div>
<p></p>
</div>
//注意：如果添加的是已经存在的元素,会有剪切的效果。
传入一个html形式的字符串
//html
<div></div>
//js
$('div').append('<span>这是一个span元素</span>');
//执行之后的结果
<div>
<span>这是一个span元素</span>
</div>
传入一个dom对象
//html
<div></div>
<p id="p"></p>
//js
var p = document.getElementById('p');
$('div').append(p);
//执行之后的结果
<div>
<p></p>
</div>
//注意：也会有剪切的效果。
其他跟append类似的方法
- prepend 在前面添加子元素
- after 放到自己的后面(变为兄弟元素)
- before 放到自己的前面(变为兄弟元素)
调用html方法
语法: jQuery对象.html(‘html形式的字符串’)
//html
<div>
div里面的文本
<p></p>
</div>
//js
$('div').html('<span>这是一段内容</span>');
//执行完的结果
<div>
<span>这是一段内容</span>
</div>
//注意: 会有覆盖的作用
小结:
- append(jQuery对象/ ‘html字符串’/DOM对象) 有剪切效果
- html(‘html字符串’) 会覆盖以前的内容
html()的其他作用
html() 不传参数 用于获取内容
//html
<div>
<p></p>
<span></span>
文本
</div>
//js
console.log($('div').html()); // 返回 <p></p>
<span></span>
文本
html(‘’) 传入一个空的字符串
不推荐使用,因为子元素的事件没有被清除,会造成内存泄露
语法: jQuery对象.html(‘’) 传递进来一个空的字符串
//html
<div>
<p></p>
<span></span>
</div>
//js
$('div).html('');
//执行完的结果
<div></div>
清空元素
empty方法
清空指定节点的所有子节点 (推荐使用，会清除子元素上绑定的内容)
语法: jQuery对象.empty()
//html
<div>
<p></p>
<span></span>
</div>
//js
$('div).empty();
//执行完的结果
<div></div>
删除元素
把自己删除掉
语法: jQuery.remove();
//html
<p></p>
<div>
<span></span>
文本
</div>
//js
$('div').remove();
//执行之后的结果
<p></p>
克隆元素
语法: jQuery对象.clone([boolean])
不传参数
不传参数相当于传入一个false,会复制所有
//html
<div id="box"></div>
<p>
<span>span元素</span>
</p>
//js
var newP = $('p').clone();
$('#box').append(newP);
//执行完的结果
<div id="box">
<p>
<span>span元素</span>
</p>
</div>
<p>
<span>span元素</span>
</p>
传true
传true会克隆所有内容,并且注册的事件也一起克隆下来
//html
<div id="box"></div>
<p>
<span>span元素</span>
</p>
//js
$span = $('span');
//这是jQuery中注册事件的方式,后面会仔细讲
$span.on('click', function(){
console.log('span')
})
var newP = $('p').clone(true);
$('#box').append(newP);
//执行完的结果
<div id="box">
<p>
<span>span元素</span> //点击会打印span
</p>
</div>
<p>
<span>span元素</span> //点击会打印span
</p>
clone(true),无法克隆用原生方式注册的事件
//html
<div id="box"></div>
<p>
<span>span元素</span>
</p>
//js
var span = document.getElementsByTagName('span')[0];
span.onclick = function(){
console.log('span')
}
var newP = $('p').clone(true);
$('#box').append(newP);
//执行完的结果
<div id="box">
<p>
<span>span元素</span> //点击不打印span
</p>
</div>
<p>
<span>span元素</span> //点击会打印span
</p>
下一篇：23.jQuery学习（二）
9万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
