3.1 DOM 操作分类
①DOM Core
包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute() )
- //获取表单对象docuement.getElementsByTagName("form");
- //获取某元素的src属性element.getAttribute("src");
②html DOM
专属 HTML_DOM 属性,提供一些更简明的记号来描述各种 HTML 元素属性(只能用来处理 web 文档)
- //获取表单document.forms//HTML_DOM提供了一个forms对象
- //获取元素的src属性element.src
③CSS_DOM
CSS_DOM 是针对 CSS 的操作,该技术主要作用是获取和设置 style 对象的各种属性
- element.style.color = "red";
3.2jQuery 中的 DOM 操作
示例
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <p title="选择你最喜欢的水果">
- 你最喜欢的水果?
- </p>
- <ul>
- <li title="苹果">
- 苹果
- </li>
- <li title="橘子">
- 橘子
- </li>
- <li title="菠萝">
- 菠萝
- </li>
- </ul>
- </body>
- </html>
3.2.1 查找节点
1 查找元素节点
- var $li = $("ul li:eq(1)"); //获取ul中的第二个li节点
- var li_txt = $li.text(); //获取第二个li元素节点的文本内容
- alert(li_txt); //打印文本内容
2 查找属性节点
使用 attr() 方法来获取各种属性值
- var$para = $("p")
- varp_txt = $para.attr("title");
- alert(p_txt);
3.2.2 创建节点
1 创建元素节点
例如创建 2 个 <li> 元素节点,并将其添加到 <ul> 中
使用 jQuery 的工厂函数 $() 完成
- $(html)
- //$(html) 方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery 对象后返回
①创建 <li>
- var$li_1 = $("
- ");
- var$li_2 = $("
- ");
②添加到 ul 中
- $("ul").append($li_1);
- $("ul").append($li_2);
- //或者采用连写
- $("ul").append($li_1).append($li_2);
* 创建单标签元素时,要采用 XHTML 格式
- $("br/");
2 创建文本节点
- var$li_1 = $("
- 香蕉
- ");
- var$li_2 = $("
- 雪梨
- ");
- $("ul").append($li_1);
- $("ul").append($li_2);
3 创建属性节点
创建属性节点与文本节点类似,也是在元素节点创建时一起创建
- var$li_1 = $("
- 香蕉
- ");//属性 title = '' 要用单引号
- var$li_2 = $("
- 雪梨
- ");
- $("ul").append($li_1);
- $("ul").append($li_2);
3.2.3 插入节点
方法 |
描述 |
示例 |
append() |
向每个匹配的元素内部追加内容 将 B 追加到 A |
<p> 我想说 </p> $("p").append("<b> 你好 </b>"); 结果:<p> 我想说 </p><b> 你好 </b> |
appendTo() |
将 A 追加到 B |
<p> 我想说 </p> $("<b> 你好 </b>").append("p"); 结果:<p> 我想说 </p><b> 你好 </b> |
prepend() |
前置内容 |
<p> 我想说 </p> $("p").prepend("<b> 你好 </b>"); 结果:<b> 你好 </b><p> 我想说 </p> |
prependTo() |
将 A 前置到 B |
<p> 我想说 </p> $("<b> 你好 </b>").prependTo("p"); 结果:<b> 你好 </b><p> 我想说 </p> |
after() |
在每个匹配的元素之后插入内容(将 B 插入到 A 后) |
<p> 我想说 </p> $("p").after("<b> 你好 </b>"); 结果:<p> 我想说 </p><b> 你好 </b> |
insertAfter() |
将 A 插入到 B 后 |
<p> 我想说 </p> $("<b> 你好 </b>").after("p"); 结果:<p> 我想说 </p><b> 你好 </b> |
before() |
在匹配元素之前插入内容 |
<p> 我想说 </p> $("p").before("<b> 你好 </b>"); 结果: <b> 你好 </b><p> 我想说 </p> |
insertBefore() |
将 A 插入到 B 前面 |
<p> 我想说 </p> $("<b> 你好 </b>").insertBefore("p"); 结果: <b> 你好 </b><p> 我想说 </p> |
插入节点的方法不仅能将新创建的 DOM 元素插入到文档中,也能对原有 DOM 元素进行移动
①插入
- var$li_1 = $("
- 香蕉
- ");
- var$li_2 = $("
- 雪梨
- ");
- var$li_3 = $("
- 其他
- ");
- var$parent = $("ul");
- var$two_li = $("ul li:eq(1)");
- $parent.append($li_1); //append() 方法将创建的第1个<li>元素添加到父元素最后$parent.prepend($li_2);//prepend() 方法将创建的第2个<li>添加到父元素最前面$li_3.insertAfter($two_li);//insertAter() 方法将创建的第3个<li>元素插入到获取的<li> 元素之后
②移动
- var $one_li = $("ul li:eq(1)"); //获取第二个
- var $two_li = $("ul li:eq(2)"); //获取第三个
- $two_li.insertBefore($one_li); //将第三个移动到第二个之前
移动后
3.2.4 删除节点
remove() 和 empty()
1 remove() 方法
从 DOM 中删除所有匹配元素
- var $li = $("ul li:eq(1)").remove(); //获取第2个元素后删除
- $li.appendTo("ul"); //又重新添加到<ul>元素中
某个元素使用 remove() 方法删除后,该节点包含的所有后代将同时被删除,这个方法返回值是一个指向已被删除的节点的引用。因此可以在以后再使用这些元素 (用 remove() 方法删除后,还可以继续使用)
选择元素属性删除
- $("ul li").remove("li[title!=菠萝]");
2 empty() 方法
严格来讲,empty() 方法并不是删除节点,而是清空节点,能清空元素中的所有后代节点
3.2.5 复制节点
- $("ul li").click(function(){
- $(this).clone().appendTo("ul");//复制当前单击的节点,并将它追加到<ul>元素中})
被复制出的节点是不具备再次复制的功能,如果需要具备,可以在 clone() 中传入 true
- $("ul li").click(function(){
- $(this).clone(true).appendTo("ul");//复制当前单击的节点,并将它追加到<ul>元素中})
3.2.6 替换节点
replaceWith() 和 replaceAll()
- $("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
replaceAll() 只是颠倒了 replaceWith() 顺序
- $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
3.2.7 包裹节点
将节点用其他标记包裹起来 用 wrap()
- $("strong").wrap("");//用<b>标签把 <strong>元素包裹起来
- //得到结果: 你最喜欢的水果是?
包裹节点操作还有 2 个方法 wrapAll() 和 wrapInner()
①wrapAll() 方法
该方法会将所有的元素用一个元素来包裹。不同于 wrap() 方法,wrap() 方法是酱所有的元素单独包装
wrap() 单独包裹每个元素
- <strong title="选择你最喜欢的水果">
- 你最不喜欢的水果是?
- </strong>
- <strong title="选择你最喜欢的水果">
- 你最不喜欢的水果是?
- </strong>
- <ul>
- <li title="苹果">
- 苹果
- </li>
- <li title="橘子">
- 橘子
- </li>
- <li title="菠萝">
- 菠萝
- </li>
- </ul>
- $("strong").wrap("
- <b>
- </b>
- ");
结果
wrapAll() 包裹整个元素
- <strong title="选择你最喜欢的水果">
- 你最不喜欢的水果是?
- </strong>
- <strong title="选择你最喜欢的水果">
- 你最不喜欢的水果是?
- </strong>
- <ul>
- <li title="苹果">
- 苹果
- </li>
- <li title="橘子">
- 橘子
- </li>
- <li title="菠萝">
- 菠萝
- </li>
- </ul>
- $("strong").wrapAll("
- <b>
- </b>
- ")
结果
wrapInner() 包裹元素的子元素
- <strong title="选择你最喜欢的水果">
- 你最不喜欢的水果是?
- </strong>
- <strong title="选择你最喜欢的水果">
- 你最不喜欢的水果是?
- </strong>
- <ul>
- <li title="苹果">
- 苹果
- </li>
- <li title="橘子">
- 橘子
- </li>
- <li title="菠萝">
- 菠萝
- </li>
- </ul>
- $("strong").wrapInner("
- <b>
- </b>
- ")
结果
3.2.8 属性操作
在 jQuery 中,庸 attr() 方法来获取和设置元素属性,removeAttr() 方法来删除元素属性
1 获取属性和设置属性
- var $para = $("p");
- var p_txt = $para.attr("title"); //获取 p 元素的节点属性 title
- $("p").attr("title", "your title"); //设置单个属性值
- $("p").attr({
- "title": "your title",
- "name": "test"
- }); //设置多个属性
2 删除属性
- $("p").removeAttr("title"); //删除P元素的属性 title
3.2.9 样式操作
1 attr 获取样式和设置样式 2 追加样式 addClass
- $("p").attr("class","high")//使用attr() 为p元素设置class
- $("input:eq(2)").click(function(){
- $("p").addClass("high");
- }) //使用addClass追加样式
3 移除样式
- $("p").removeClass("high");//移除单个
- $("p").removeClass("high").removeClass("another");
- //或者$("p").removeClass("high another");//移除多个
- $("p").removeClass();//移除所有
4 切换样式 toggle()
- $toggleBtn.toggle(function() {
- //显示元素
- },
- function() {
- //隐藏元素
- })
toggleClass() 方法控制样式上的重复切换
- $("p").toggleClass("another"); //重复切换类名 "another"
5 判断是否含有某个样式
hasClass() 可以用来判断元素中是否含有某个 class,如果有,返回 true ,否则返回 false
- $("p").hasClass("another");
- $("p").is(".another"); //hasClass 相当于调用了 is() 方法
3.2.10 设置和获取 HTML、文本和值
1 html()
html() 类似于 JS 中的 innerHTML 属性,用来读取或者设置某个元素中的 HTML 内容
- 你最喜欢的水果
- varp_html = $("p").html();
- alert(p_html);
html() 设置元素的 HTML 代码
- $("p").html("你最不喜欢的水果是?"); //设置<p>元素的HTML代码
2 text()
类似于 JS 中的 innerText() ,可以用来设置某个元素中的文本内容。和 html() 用法一样
3 val()
类似于 JS 中 value()。
示例:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- </head>
- <body>
- <input type="text" id="address" value="请输入邮箱地址" name="">
- <br/>
- <br/>
- <input type="text" id="password" value="请输入邮箱密码" name="">
- <br/>
- <br/>
- <input type="button" value="登录" name="">
- <script type="text/javascript" src="jquery.min.js">
- </script>
- <script type="text/javascript">
- $("#address").focus(function() {
- var txt_value = $(this).val(); //获取地址文本框的值
- if (txt_value == "请输入邮箱地址") { //如果值=="请输入邮箱地址" 则清空
- $(this).val("");
- }
- }) $("#address").blur(function() {
- var txt_value = $(this).val();
- if (txt_value == "") {
- $(this).val("请输入邮箱地址");
- }
- })
- </script>
- </body>
- </html>
使用 defaultValue 属性来实现同样功能。defaultValue 属性包含该表单元素的初始值。
- $("#address").focus(function(){
- vartxt_value = $(this).val();//获取地址文本框的值
- if(txt_value==this.defaultValue){//如果值=="请输入邮箱地址" 则清空$(this).val("");
- }
- })
- $("#address").blur(function(){
- vartxt_value = $(this).val();
- if(txt_value == ""){
- $(this).val(this.defaultValue);
- }
- })
* this 指向当前的文本框, "this.defaultValue" 就是当前文本框的默认值
3.2.11 遍历节点
1 children() 方法
用于取得匹配元素的子元素集合
2 next() 方法
用于取得匹配元素后面紧邻的同辈元素
3 prev() 方法
用于取得匹配元素前面紧邻的同辈元素
4 siblings() 方法
用于取得匹配元素前后所有的同辈元素
3.2.12 CSS-DOM 操作
1 利用 CSS 直接获取元素的样式属性
- $("p").css("color"); //获取P元素的样式颜色
- $("p").css("color", "red") //获取并修改样式颜色
- $("p").css({
- "color": "red",
- "fontSize": "12px"
- }); //设置多个样式
2height() width()
- $("p").height();//获取元素高度
- $("p").height(100)//设置元素高度为100px
- //1.offset() 方法
- //获取元素在当前视窗的相对偏移,返回的对象包含2个属性,top和left。只对可见元素有效
- varoffset = $("p").offset();//获取元素的offset()
- varleft = offset.left;//获取左偏移
- vartop = offset.top;// 获取右偏移
- //2.position() 方法
- //获取元素相对于最近的一个position样式属性设置为 relative或absolute的祖父节点的相对偏移。用法同 offset()
- //scrollTop() 和 scrollLeft()
- //获取元素的滚动条距离顶端和距离左端的距离
- var$p = $("p");
- varscrollTop = $p.scrollTop();//距离顶端距离
- varscrollLeft = $p.scrollLeft();//距离左端距离
- //还可以设置滚动到指定位置$("p").scrollTop(300);//垂直滚动条到指定位置$('p').scrollLeft(300);//横向滚动条滚动到指定位置
来源: http://www.cnblogs.com/cimuly/p/7102066.html