jQuery的DOM操作之笔记总结
jQuery的DOM操作之笔记总结
首先我们来介绍一下什么是DOM
简述：
1.DOM全称Document Object Model（文档对象模型）。
2.每个文档都是一棵DOM结构的树，文档里的很多元素，就像树上的很多节点，或是分叉的树枝，我们可以通过jQuery对任意的节点进行操作，并且可以控制它的样式和属性。
内容结构：
1. 节点操作 2. CSS样式操作 3. 属性操作 4.内容和值操作5. Dom遍历
1. 节点操作
查找、创建、插入、删除、复制、替换、包裹、属性、清空节点
查找元素节点:
你最喜欢的运动是
- 游泳
- 足球
- 跑步
var $li=$("ul li:eq(1)");
var li_text=$li.text();
alert(li_text);
查找属性节点:
attr() 方法也用于获取/设置/改变属性值。
var $pra=$("p");
var p_text=$pra.attr(“title”); //获取属性
alert(p_text);
$("button").click(function(){
$(“#w3s”).attr(“href”,“http://www.w3school.com.cn/jquery”);
//设置单个属性
});
$("button").click(function(){ $("#w3s").attr({
//设置多个属性
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial" });
});
1、append( )方法
方法 作用：向匹配的元素内部的末尾追加内容。追加的内容如果包含HTML标签，则会创建该元素。
例如： 原HTML代码：
- 第一条内容
然后执行jQuery代码：
$("ul").append("
- 新的一条内容
");//这里选择器选择的是
元素
最后结果：
- 第一条内容
- 新的一条内容
2、prepend( )方法
作用：向匹配的元素内部的开头插入内容。
注意：这里是在开头前置内容，而append()是在末尾追加内容。
例如： 原HTML代码：
- 第一条内容
然后执行jQuery代码：
$("ul").prepend("
- 新的一条内容
");//这里选择器选择的是
元素
最后结果：
- 新的一条内容
- 第一条内容
3、after( )方法
作用：在匹配的元素的后面插入内容，而不是像append()和prepend()是在元素的内部插入。
例如： 原HTML代码：
- 第一条内容
然后执行jQuery代码：
$("li").after("
- 又是一条新的内容
");//这里选择器选择的是
- 元素
最后结果：
- 第一条内容
- 又是一条新的内容
4、before( )方法
作用：在匹配的元素的前面插入内容。after()是在后面插入，before()是在前面插入。
例如： 原HTML代码：
- 第一条内容
然后执行jQuery代码：
$("li").before("
- 又是一条新的内容
");//这里选择器选择的是
- 元素
最后结果：
- 又是一条新的内容
- 第一条内容
5、insertBefore( )方法
作用：insertBefore() 方法在一个指定的子节点之前插入一个节点。insertAfter()是在后面插入，
例如： 原HTML代码：
- 这是第一条 内容
- 这是第二条 内容
- 这是第三条 内容
然后执行jQuery代码：
$new=$("
- 这是新插入的节点
");$li=$("ul li:eq(1)"); //$li代表第二个
$new.insertBefore($li)最后结果：
- 这是第一条 内容
- 这是新插入的节点
- 这是第二条 内容
- 这是第三条 内容
6、remove( )方法
作用：删除所有匹配的元素，以及它所包含的所有子节点，然后返回一个指向已被删除的节点的引用，因此可以以后再使用这些元素。
例如： 原HTML代码：
- 第一条内容
先执行jQuery代码： var drops = $("ul").remove(); //先删除，返回一个引用
第一个结果：为空
然后添加一行jQuery代码： $("body").append(drops); //再将该引用添加到页面中
第二个结果：
- 第一条内容
7、empty( )方法
作用：清空匹配元素的所有子节点的内容，但不是删除节点。
例如： 原HTML代码：
- 第一条内容
然后执行jQuery代码：
$("li").empty();
结果：
显示只有
- 标签默认的符号一个点“.”，但是没有文字内容
8. Clone([true])
作用：clone() 方法生成被选元素的副本，包含子节点、文本和属性。
$(function(){
$("ul li").click(function() {
$(this).clone([true]).appendTo("ul");
})
});
备注： true克隆出来的副本还可以继续克隆，flase只能克隆一次,不写默认为false
9. replaceWith(): 替换节点
$("p").replaceWith("你最不喜欢的水果是?")
10、包裹节点
wrap
wrapAll
wrapInner
$("p").wrap("
")$("p").wrapAll("
")$("p").wrapInner("")
2.css样式操作
1、css( )方法
作用：获取或者设置元素的单个或多个样式属性。
说明：无论是通过HTML元素的style属性设置的内联样式，还是外部CSS文件导入的样式
都可以通过css()方法获取到它们的样式属性。
(1). 获取元素的某个样式属性：css(样式名)
例如：$("a").css('color'); 获取元素的样式颜色
(2). 设置元素的单个样式属性：css(样式名, 样式属性)
例如：$("a").css('color', 'blue'); 设置元素的颜色为蓝色
(3). 同时设置元素的多个样式属性：css({“样式名1”:”样式属性1”, “样式名2”:”样式属性2”, …})
说明：样式名/属性组要包含在大括号中
例如：$("a").css({'color':'blue', 'font-size':'14px'}); 将元素设为蓝色，并且字体大小改为14px
2、width( )方法
作用：设置元素的宽度。如果不带参数则为获取元素的宽度。
例如：
$("#box").width(); //获取id="box"的元素的宽度
$("#box").width('100px'); //设置id="box"的元素的宽度为100px
3、height( )方法
作用：设置元素的高度。如果不带参数则为获取元素的高度。
例如：
$("#box").height(); //获取id="box"的元素的高度
$("#box").height('200px'); //设置id="box"的元素的高度为200px
4、addClass( )方法
作用：向匹配的元素追加指定的一个或多个类。
(1). 向元素添加一个类：addClass(类名)
例如：
HTML代码：
This is title
jQuery代码：$("p").addClass('big');
结果：
This is title
(2). 向元素添加多个类：addClass(类名1 类名2 ...)
说明：多个类名之间用空格分隔
例如：
HTML代码：
This is title
jQuery代码：$("p").addClass('big bold');
结果：
This is title
5、removeClass( )方法
作用：从匹配的元素中删除指定的一个或多个类。
(1). 删除元素的一个类：removeClass(类名)
例如：HTML代码：
This is title
jQuery代码：$("p").removeClass('red');
结果：
This is title
(2). 删除元素的多个类：removeClass(类名1 类名2 ...) 多个类名之间用空格分隔
例如：HTML代码：
This is title
jQuery代码：$("p").removeClass('big bold');
结果：
This is title
(3). 删除元素所有的类：removeClass( ) 不带参数
例如：HTML代码：
This is title
jQuery代码：$("p").removeClass();
结果：
This is title
6 toggleClass( )方法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。
$("button").click(function(){
$("p").toggleClass(“none");
});
7、offset( )方法
作用：获取/设置元素在当前视窗的偏移值,即top与left 。
$(selector).offset({top:100,left:0})
var offset=$("div").offset();
var left = offset.left;
var top = offset.top;
var num=0;
$(“:button:contains('+')").click(function(){
num+=10;
$("div").offset({left:num});
})
$(“:button:contains('-')").click(function(){
num-=10;
$("div").offset({left:num});
})
8、position( )方法
作用：获取元素相对于最近一个position样式为absolute或relative的父节点的相对偏移
$("button:contains('+')").click(function(){
var add = $("div").position().left+=10;
$("div").css("left",add+"px")
})
$("button:contains('-')").click(function(){
var sub = $("div").position().left-=10;
$("div").css("left",sub+"px")
})
9、scrollTop( )、scrollLeft()方法
作用：获取元素的滚动条距顶端及距左端的距离
$(function(){
$("button").click(function(){
$("html,body").scrollTop(200)
})
})
3.属性操作
查找属性节点:
attr() 方法也用于获取/设置/改变属性值。
var $pra=$("p");
var p_text=$pra.attr(“title”); //获取属性
alert(p_text);
$("button").click(function(){
$(“#w3s”).attr(“href”,“http://www.w3school.com.cn/jquery”);
//设置单个属性
});
$("button").click(function(){ $("#w3s").attr({
//设置多个属性
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial" });
});
CSS样式操作：获取或修改颜色、字体、高度、宽度等样式属性
4.内容和值操作
内容和值操作：获取或设置元素内的HTML代码、文本和值
1、html( )方法
作用：获取或者设置某个元素中的HTML内容。类似于javascript中的innerHTML属性。
不带参数时为获取元素的HTML内容。
例如：
HTML代码：
内容
jQuery代码：$("p").html('新的内容');
运行结果：新的内容
2、text( )方法
作用：获取或者设置某个元素中的文本内容。类似于javascript中的innerText属性。
不带参数时为获取元素的文本内容。
注意：这里如果有HTML标签，会被当成纯文本，而不会被解析。
例如：
HTML代码：
内容
jQuery代码：$("p").text('新的内容');
运行结果：新的内容
3、val( )方法
作用：获取或者设置某个表单元素的值，如文本框(多行)、单选框、下拉列表等。类似于javascript 中的value属性。不带参数时为获取元素的value属性。
例如：
HTML代码：
运行jQuery代码：$("input").val("请再次输入您的名称"); //修改元素的value属性
运行结果：请再次输入您的名称
4、 defaultValue方法[勿用此属性，js]
作用：属性可设置或返回文本框或密码域的默认值。
jQuery文档操作
