锋利的jQuery读书笔记-第3章 jQuery中的DOM操作
2016-12-16 15:24
393 查看
DOM是 Document Object Model的缩写,意思是问的那个对象模型。
一、DOM操作的分类
1、DOM Core:用于处理网页和标记性语言编写出来的文档。 JS中的getElementById()、getAttribute()等方法都属于DOM Core的组成部分。
2、HTML-DOM:提供记号来描述HTML元素,例如:document.forms element.src 这种都属于HTML-DOM操作。
3、CSS-DOM:针对CSS的操作,设置页面元素样式,例如:element.style.color="red";
二、jQuery中的DOM操作
1、查找节点(实际上就是jQuery选择器的功能)
(1)查找元素节点:$("p").text(); //查找到p元素的内容。
(2)查找属性节点:$("p").attr("title"); //获取到p元素的titile属性值。
2、创建节点
(1)创建元素节点:$("<li></li>"); //这样就创建了一个空的元素节点,也可以写成 $("</li>")。
(2)创建文本节点:$("<li>kewen</li>"); //这样就创建了带文本内容的节点。
(3)创建属性节点:$("<li title='kewen'>kewen</li>"); //这就是带属性和文本内容的节点。
3、插入节点
(1)append():向元素内部追加内容
(2)appendTo():将xxx内容追加到某个元素内,与append()的写法相反
(3)prepend():向元素内前置内容
(4)prependTo():将xxx内容前置于某个元素内,与prepend()写法相反
(5)after():在元素之后添加xxx,注意位于元素后而不是元素内。
(6)insertAfter():与上一条相反的写法,将xxx添加到某个元素后
(7)before():在元素之前添加xxx
(8)insertBefore():将xxx添加到某个元素之前
4、删除节点
(1)remove() : 删除某元素并将删除的对象返回,可以定义一个变量保存用于恢复页面元素,但是绑定的事件和活动不能恢复。
(2)detach():类似于去激活,只是页面不显示,实际内容都存在,可以用append()方法恢复回来,且事件和活动都还在。
(3)empty():清空元素,啥都不剩。
5、复制节点
$("#kewen").clone().appendTo("ul"); //将id为kwen的这个元素复制一份,追加到ul元素中去。
$("#kewen").clone(true).appendTo("ul"); //将id为kwen的这个元素包括绑定的事件复制一份,追加到ul元素中去。
6、替换节点
(1)replaceWith(): $("p").replaceWith("<Strong>kewen</Strong>"); // 将p元素的内容替换为粗体的“kewen”
(2)replaceAll(): $("<Strong>kewen</Strong>").replaceWith("p"); // 将p元素的内容替换为粗体的“kewen”
7、包裹节点:
(1)wrap() : $("strong").wrap("<b></b>"); // 用b标签将strong元素包括起来
(2)wrapAll() :将所有的元素用一个元素包裹起来,wrap()则是每一个元素包裹一个标签。
(3)wrapInner : 将元素内的内容用标签包裹。 $("strong").wrap("<b></b>"); //结果为 <Strong><b></b></Strong>
8、属性操作
(1)获取属性和设置属性: $("p").attr("title") // 获取到p元素的title属性。 ("p").attr("title","new title") //将p元素中的title属性设置为 "new title"。
(2)删除属性: $("p").removeAttr("title"); //删除p元素的title属性。
9、样式操作
(1)获取、设置样式:$("p").attr("class");// class为页面样式类型,可以获取也可以通过属性修改的方式进行修改
(2)追加样式: $("p").addClass("another class"); // 给元素p追加一个样式。
这里注意如果追加的样式中与原来的样式无冲突则表现为合并样式,如果有冲突则表现为覆盖原有的样式。
(3)移除样式: $("p").removeClass("xxx"); // 移除xxx样式。
$("p").removeClass("aaaa bbbb"); //同时删除aaa和bbb两个样式,中间用空格分开即可。
(4)切换样式:$("p").toggleClass("aaaa"); //假设原来p元素的样式为bbb 那么此函数就会将p元素由aaaa与bbb中来回切换。
(5)判断是否有某种样式:$("p").hasClass("xxxxx");
10、设置和获取HTML、文本和值
(1)html()方法:$("p").html(); //获取到p中html代码,取到的值中包含html元素标签值。 如果带参数那么就是修改p元素的html代码。
(2)text()方法:与前者类似,但是只获取到内容,不包含html页面元素值。
(3)val()方法:返回元素的值,可以是文本也可以是单选框多选框等等。
$("#single").val("二号"); //这里为将id是single的单选框中选中的值设为“二号”
11、遍历节点:
(1)children(): $("body").children(); //获取到body下所有的子元素
(2)next():$("p").next(); // 获取到p元素后紧邻的同辈元素。
(3)prev() :$("p").orev(); //获取到p元素前紧邻的同辈元素。
(4)siblings(): $("#li2").siblings(); //获取到id为li2的元素的同辈所有元素,常见于导航栏li样式变换操作。
除此之外还有很多遍历方法,此处不一一列举说明了。
12、CSS-DOM操作:
$("p").css("color"); //获取到p元素的color样式。
$("p").css({"fontSize":"30px","backgroundColor":"red"}); //可以设置多个css样式,以{}包裹,逗号分隔。
$("p").position().left(); // 获取到p元素向左便宜的像素,也可以设置偏移的值。
三、常用于样式操作的jQuery事件
1、鼠标的悬停事件
2、获取焦点/失去焦点事件
一、DOM操作的分类
1、DOM Core:用于处理网页和标记性语言编写出来的文档。 JS中的getElementById()、getAttribute()等方法都属于DOM Core的组成部分。
2、HTML-DOM:提供记号来描述HTML元素,例如:document.forms element.src 这种都属于HTML-DOM操作。
3、CSS-DOM:针对CSS的操作,设置页面元素样式,例如:element.style.color="red";
二、jQuery中的DOM操作
1、查找节点(实际上就是jQuery选择器的功能)
(1)查找元素节点:$("p").text(); //查找到p元素的内容。
(2)查找属性节点:$("p").attr("title"); //获取到p元素的titile属性值。
2、创建节点
(1)创建元素节点:$("<li></li>"); //这样就创建了一个空的元素节点,也可以写成 $("</li>")。
(2)创建文本节点:$("<li>kewen</li>"); //这样就创建了带文本内容的节点。
(3)创建属性节点:$("<li title='kewen'>kewen</li>"); //这就是带属性和文本内容的节点。
3、插入节点
(1)append():向元素内部追加内容
$("p").append("<b>kewen</b>"); //结果为 <p><b>kewen</b></p>;
(2)appendTo():将xxx内容追加到某个元素内,与append()的写法相反
$("<b>kewen</b>").appendTo("p"); //结果为 <p><b>kewen</b></p>;
(3)prepend():向元素内前置内容
(4)prependTo():将xxx内容前置于某个元素内,与prepend()写法相反
(5)after():在元素之后添加xxx,注意位于元素后而不是元素内。
(6)insertAfter():与上一条相反的写法,将xxx添加到某个元素后
(7)before():在元素之前添加xxx
(8)insertBefore():将xxx添加到某个元素之前
4、删除节点
(1)remove() : 删除某元素并将删除的对象返回,可以定义一个变量保存用于恢复页面元素,但是绑定的事件和活动不能恢复。
(2)detach():类似于去激活,只是页面不显示,实际内容都存在,可以用append()方法恢复回来,且事件和活动都还在。
(3)empty():清空元素,啥都不剩。
5、复制节点
$("#kewen").clone().appendTo("ul"); //将id为kwen的这个元素复制一份,追加到ul元素中去。
$("#kewen").clone(true).appendTo("ul"); //将id为kwen的这个元素包括绑定的事件复制一份,追加到ul元素中去。
6、替换节点
(1)replaceWith(): $("p").replaceWith("<Strong>kewen</Strong>"); // 将p元素的内容替换为粗体的“kewen”
(2)replaceAll(): $("<Strong>kewen</Strong>").replaceWith("p"); // 将p元素的内容替换为粗体的“kewen”
7、包裹节点:
(1)wrap() : $("strong").wrap("<b></b>"); // 用b标签将strong元素包括起来
(2)wrapAll() :将所有的元素用一个元素包裹起来,wrap()则是每一个元素包裹一个标签。
(3)wrapInner : 将元素内的内容用标签包裹。 $("strong").wrap("<b></b>"); //结果为 <Strong><b></b></Strong>
8、属性操作
(1)获取属性和设置属性: $("p").attr("title") // 获取到p元素的title属性。 ("p").attr("title","new title") //将p元素中的title属性设置为 "new title"。
(2)删除属性: $("p").removeAttr("title"); //删除p元素的title属性。
9、样式操作
(1)获取、设置样式:$("p").attr("class");// class为页面样式类型,可以获取也可以通过属性修改的方式进行修改
(2)追加样式: $("p").addClass("another class"); // 给元素p追加一个样式。
这里注意如果追加的样式中与原来的样式无冲突则表现为合并样式,如果有冲突则表现为覆盖原有的样式。
(3)移除样式: $("p").removeClass("xxx"); // 移除xxx样式。
$("p").removeClass("aaaa bbbb"); //同时删除aaa和bbb两个样式,中间用空格分开即可。
(4)切换样式:$("p").toggleClass("aaaa"); //假设原来p元素的样式为bbb 那么此函数就会将p元素由aaaa与bbb中来回切换。
(5)判断是否有某种样式:$("p").hasClass("xxxxx");
10、设置和获取HTML、文本和值
(1)html()方法:$("p").html(); //获取到p中html代码,取到的值中包含html元素标签值。 如果带参数那么就是修改p元素的html代码。
(2)text()方法:与前者类似,但是只获取到内容,不包含html页面元素值。
(3)val()方法:返回元素的值,可以是文本也可以是单选框多选框等等。
$("#single").val("二号"); //这里为将id是single的单选框中选中的值设为“二号”
11、遍历节点:
(1)children(): $("body").children(); //获取到body下所有的子元素
(2)next():$("p").next(); // 获取到p元素后紧邻的同辈元素。
(3)prev() :$("p").orev(); //获取到p元素前紧邻的同辈元素。
(4)siblings(): $("#li2").siblings(); //获取到id为li2的元素的同辈所有元素,常见于导航栏li样式变换操作。
除此之外还有很多遍历方法,此处不一一列举说明了。
12、CSS-DOM操作:
$("p").css("color"); //获取到p元素的color样式。
$("p").css({"fontSize":"30px","backgroundColor":"red"}); //可以设置多个css样式,以{}包裹,逗号分隔。
$("p").position().left(); // 获取到p元素向左便宜的像素,也可以设置偏移的值。
三、常用于样式操作的jQuery事件
1、鼠标的悬停事件
$("#kewen").mouseover(function() { //鼠标划过对应的事件 }).mouseout(function(){ //鼠标移走对应的事件 })
2、获取焦点/失去焦点事件
$("#kewen").focus(function() { //鼠标划过对应的事件 });
$("#kewen").blur(function(){ //鼠标移走对应的事件 })
相关文章推荐
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
- 锋利的jQuery读书笔记-第6章 jQuery与Ajax的应用
- 锋利的jquery读书笔记--jquery选择器
- 锋利的jQuery读书笔记---jQuery中操作DOM
- 锋利的jQuery读书笔记-第2章 jQuery选择器
- 锋利的jquery读书笔记---jquery的dom操作
- 锋利的jQuery读书笔记-第4章 jQuery中的事件和动画
- 锋利的jQuery读书笔记-第5章 jQuery对表单、表格的操作及更多应用
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
- 锋利的jQuery读书笔记-第1章 认识jQuery
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
- 锋利的jQuery读书笔记-第7章 jQuery插件的使用和写法
- 锋利的jQuery读书笔记---jQuery中动画
- 锋利的jQuery读书笔记-第11章 jQuery性能优化和技巧
- 锋利的jQuery读书笔记---jQuery中的事件
- 锋利的jQuery——DOM对象与jQuery对象的区别
- 锋利的Jquery【读书笔记】 -- 第一章
- JQuery-复选框的操作(摘自<锋利的JQuery>)
- 锋利的jQuery-1--jQuery对象和DOM对象以及相互转化