1. 查找节点 查找节点可以通过jQuery选择器完成
2. 查找属性 attr()方法用来获取匹配元素的属性值
eg. $("p").attr("title") //用来获取p元素的title属性3. 创建节点 动态创建的新元素节点不会被自动的添加到文档中，需要其他方法将其插入到文档中。
3.1 元素节点
$(html) --> $("<p></p>")
3.2 文本节点
$(html) --> $("<p>文本节点</p>")
3.3 属性节点
$(html) --> $("<p title="para">文本节点</p>")
4. 插入节点
| 方法 | 描述 |
|---|---|
| append() | 向每个匹配的元素内部追加内容 $("ul").append("<li title="item">newLast</li>") |
| appendTo() | 将所有匹配的元素追加到指定的元素中 $(A).appendTo(B)，将A追加到B中 |
| prepend() | 向每个匹配的元素内部前置内容 $("ul").prepend("<li title="item">newFirst</li>") |
| prependTo() | 将所有匹配的元素前置到指定的元素中 $(A).prependTo(B)，将A前置到B中 |
| after() | 向每个匹配的元素之后插入内容 $("p").after("<p title="para">newParaLast</li>") |
| insertAfter() | 将所有匹配的元素插入到指定的元素后面 $(A).insertAfter(B)，将A插入到B后面 |
| before() | 向每个匹配的元素之前插入内容 $("p").before("<p title="para">newParaFirst</li>") |
| insertBefore() | 将所有匹配的元素插入到指定的元素前面 $(A).insertBefore(B)，将A插入到B后面 |
5. 删除节点
| 方法 | 描述 |
|---|---|
| remove() | 从DOM中删除所有匹配的元素 该方法的返回值是一个指向已被删除的节点的引用，因此可以在以后再使用这些元素 var $li = $("ul li:eq(2)").remove(); //获取第二个li元素后，将其从网页中删除 |
| detach() | 从DOM中删除所有匹配的元素，但它会将所有绑定的事件、附加的数据都会保留下来 $("ul li").click(function() { |
| empty() | 清空节点，他能清空元素中的所有后代节点 $("ul li:eq(2)").empty() |
var $li = $(this).clone(true).appendTo("body") //参数true，表示复制元素的同时复制元素中所绑定的事件7. 替换节点
| 方法 | 描述 |
|---|---|
| replaceWith() | 将所有匹配的元素都替换成HTML或DOM元素 $(A).replaceWith(B)，B替换A |
| replaceAll() | 将所有匹配的元素都替换成HTML或DOM元素 $(A).replaceAll(B)，A替换B |
8. 包裹节点
| 方法 | 描述 |
|---|---|
| wrap() | 将所有的元素进行单独的包裹 $(A).wrap(B),用B标签把A元素包裹起来 <strong title="item">文本</strong> |
| wrapAll() | 将所有匹配的元素用一个元素来包裹 $(A).wrapAll(B),用B标签把所有的A元素包裹起来 <strong title="item">文本</strong> |
| wrapInner() | 将每一个匹配的元素的子内容用其他结构化的标记包裹起来 <strong title="item">文本</strong> |
8. 属性操作
8.1 获取属性和设置属性 attr()方法
$("p").attr("title"); //获取p元素的title属性 $("p").attr("title","para"); //设置单个属性值 $("p").attr({"title":"para","name":"myName"}); //"名/值"对的对象设置为匹配元素的属性8.2 删除属性 removeAttr()方法
jQuery1.6中新增prop()、removeProp()，分别用来获取在匹配的元素集中的第一个元素的属性值和为匹配的元素删除设置的属性。$("p").removeAttr("title"); //删除p元素的title属性
9. 样式操作
9.1 获取样式和设置样式
class为标签的属性，所以可以通过attr()方法来获取与设置样式
<p class="myclass" title="para">文本</p> $("p").attr("class","high"); 运行后： <p class="high" title="para">文本</p>9.2 追加样式 addClass()方法 --> 追加class类
CSS规定：1、如果给一个元素添加了多个class类，那么就相当于合并了它们的样式
2、如果有不同的class设定了同一样式的属性，则后者覆盖前者
<p class="myclass" title="para">文本</p> $("p").addClass("high"); 运行后： <p class="myclass high" title="para">文本</p>9.3 移除样式 removeClass()方法 --> 从匹配的元素中删除全部或指定的class类
移除指定类：
<p class="myclass high" title="para">文本</p> $("p").removeClass("high"); 运行后： <p class="myclass" title="para">文本</p>移除所有的类：
1、$("p").removeClass("high").removeClass("myclass"); 2、$("p").removeClass("high myclass")； 3、$("p").removeClass()；
9.4 切换样式 toggle()方法 toggleClass()方法
toggle()方法 ：
$toggleBtn.toggle(function(){ //code1 },function(){ //code2 })toggle()方法在这里的作用是交替执行code1与code2两个函数，主要是控制行为上的重复切换
toggleClass()方法：控制样式的重复切换，如果存在则删除它，不存在则添加它。
$("p").toggleClass("high"); //重复切换类名"high"9.5 判断是否含有某个样式 hasClass()方法
$("p").hasClass("high");返回值：true | false
10. 设置和获取HTML、文本和值
10.1 html()方法 类似于JavaScript中的innerHTML属性，用来读取或者设置某个元素中的HTML内容。
<p class="myclass"><strong>文本</strong></p> var $p_html = $("p").html(); alert($p_html); 结果： <strong>文本</strong>如果需要设置HTML代码，也可使用该方法，不过需要为该方法传递一个参数。
$("p").html("<strong>文本2</strong>");10.2 text()方法 --> innerText属性，用来读取或设置某个元素内的文本内容。
与html()方法相似，若为某个元素设置文本内容，需要为该方法传递一个参数。<p class="myclass"><strong>文本</strong></p> var $p_text = $("p").text(); alert($p_text); 结果： 文本$("p").text("文本3");10.3 val()方法 -->value属性
<input type="text" id="address" value="请输入邮箱地址" /> <script type="text/javascript"> $(function(){ $("#address").focus(function(){ var txt_val = $(this).val(); if(txt_val == "请输入邮箱地址") { $(this).val = " "; }$("p").prev(); //获取p元素前面的同辈元素
});$("#address").blur(function(){var txt_val = $(this).val();if(txt_val == " ") {$(this).val = "请输入邮箱地址";}})});</script>11. 遍历节点
11.1 children()方法 用于取得匹配元素的子元素集合
$("p").children(); //获取p元素的所有子元素的个数11.2 next()方法 该方法用于获取匹配元素后面紧邻的同辈元素
$("p").next(); //获取p元素后的同辈元素11.3 prev()方法 该方法用于获取匹配元素前面紧邻的同辈元素
$("p").prev(); //获取p元素前的同辈元素11.4 siblings()方法 该方法用于获取匹配元素前后所有的同辈元素
$("p").siblings(); //获取p元素前后所有的同辈元素11.5 closest()方法 该方法用于获取最近的匹配元素
首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，逐级向上知道找到匹配选择器的元素。
$(document).bind("click",function(e){ $(e.target).closest("li").css("color","red"); })11.6 parent()、parents()与closest()区别
方法 描述 parent() 获得集合中每个匹配元素的父级元素
返回一个元素节点
parents() 获得集合中每个匹配元素的祖先元素
当找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点
closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素
与parents()方法相似，不同点在于它只返回匹配元素的第一个元素节点
11.7 其他遍历节点方法
find() | filter() | nextAll() | prevAll()等方法
12. CSS-DOM操作 读取和设置style对象的各种属性 --> css()方法
$("p").css("color"); //获取p元素的样式颜色无论color属性是外部CSS导入，还是直接拼接在HTML元素中，css()方法都可以获取属性style里的其他属性。
$("p").css("color","red"); //设置p元素的样式颜色css()与attr()方法类似，也可以同时设置多个样式属性
$("p").css({"color":"red","fontSize":"30px"}); //同时设置p元素的字体大小和颜色height()方法 设置元素的高度 获取的高度值与样式的设置有关，可能会得到“auto”，也可能得到“10px”之类的字符串；
$("element").css("height"); 获取元素的height属性 获取的高度值则是元素在页面中的实际高度，与样式的设置无关，而且不带单位。
12.1 offset()方法 获取元素在当前视窗的相对偏移，返回的对象包含两个属性值：left | top
var offset = $(element).offset(); //获取p元素的offset() var left = offset.left; //左偏移 var top = offset.top; //右偏移12.2 position()方法 获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，返回的对象包含两个属性：left | top
var position = $(element).position(); //获取p元素的position() var left = position.left; //左偏移 var top = position.top; //右偏移12.3 scrollTop()方法和scrollLeft()方法 获取元素滚动条距顶端的距离和距左侧的距离
var $p = $("p"); var scrollTop = $p.scrollTop(); //距顶端的距离 var scrollLeft = $p.scrollLeft(); //距左侧的距离另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置
$("p").scrollTop(300); $("p").scrollLeft(300);
案例：
<script type="text/javascript">
$(function(){
var x=10;
var y=20;
$("a.tooltip").mouseover(function(e) {
this.myTitle=this.title;
this.title="";
var imgTitle=this.myTitle?"<br />"+this.myTitle:"";
var tooltip="<div id='tooltip'><img src='"+this.href+"' alt='产品预览图'>"+imgTitle+"</div>";
$("body").append(tooltip);
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function(){
this.title=this.myTitle;
$("#tooltip").remove();
}).mousemove(function(e){
$("#tooltip")
.css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
});
</script>
<style type="text/css">
body{
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
border:1px solid #AAAAAA;
}
/* tooltip */
#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:2px;
display:none;
color:#fff;
}
</style>
</head>
<body>
<ul>
<li><a href="images/apple_1_bigger.jpg" class="tooltip" title="apple ipod"><img src="images/apple_1.jpg" alt="apple ipod"></a></li>
<li><a href="images/apple_2_bigger.jpg" class="tooltip" title="apple ipod nano"><img src="images/apple_2.jpg" alt="apple ipod nano"></a></li>
<li><a href="images/apple_3_bigger.jpg" class="tooltip" title="apple iphone"><img src="images/apple_3.jpg" alt="apple iphone"></a></li>
<li><a href="images/apple_4_bigger.jpg" class="tooltip" title="apple Mac"><img src="images/apple_4.jpg" alt="apple Mac"></a></li>
</ul>
</body>
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
