jQuery学习笔录3（jQuery学习笔记——DOM【1.DOM Core】）
DOM是Document Object Model的缩写，是文本对象模型的意思。
一 概述
1 DOM 能够让开发者获取和操作网页中的数据，脚本和表现层对象。
dom结构，树形的 ，如下图
DOM操作分3个方面：DOM Core， HTML- DOM , CSS- DOM
jQuery中DOM Core的操作
1查找元素节点
1）查找元素节点
var $li=$("ul li:eq(0)");//查找元素节点，获取<ul>里第1个<li>节点
2）查找属性节点
使用attr()方法来获取它的各种属性
var $para=$("p");
var p_txt=$para.attr("title");
3）动态添加元素节点
i 创建新的元素
ii 将新的元素插入到文档中，将新的元素插入到文档最简单的方法是，让其作为文档中某个节点的子节点
$("HTML标记字符串")：创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回。
$("HTML标记字符串").append("新建元素")
$("ul").append($li_1)
除了append()之外，还有别的方法可以将新的节点插入到文档中，
比如 appendTo(),before()。
4）删除元素节点
remove() 和 empty()
remove()删掉元素节点 以及他下面的所有子节点都一并删掉
$("ul li:eq(3)").remove()
empty() 清空节点，及元素中所有的后代节点。
5）复制节点
clone(),如果想让复制后的节点同样拥有复制功能，这样写：clone(true)
6)替换节点
replaceWith(), replaceAll()
7)包裹节点
wrap(),wrapAll(),wrapInner()
$("strong").wrap("<em></em>")//用<em>标签把strong括起来
firebug中看到的：
<em> <strong>你最爱的水果呢？</strong> </em>
2获取属性和设置属性
1)如果要获取p元素的属性，只要给attr()传递一个参数（属性名称）。
var $para=$("p")//获取p元素
var $p_tit=$para.attr("title")//获取<p>元素节点属性title
2)设置属性，传递2个参数：1个属性名称 ，1个属性的值
$("ul li[title=香蕉]").attr("title","your turn");//设置属性值
类似获取属性，设置元素属性值的方法：html(),text(),val(),css()等。
3)删除属性
removeAttr()
3样式操作
1）用样式A替换样式B
$("p").attr("class","A") //class="A"
2)添加样式 addClass("C")
$("p").addClass("testColor");
3)删除样式 removeClass("A")
$("p").removeClass("testColor").removeClass("myClass");
4设置和获取html、文本和值
$("p").html();
相当于js 的innerHTML()，抓取元素中【HTML内容】:文本内容 + p元素内的标签 html
$("p").text();
相当于js的innerText() ,读取或设置元素的【文本内容】
$(this).val();
类似js的value属性，设置和抓取元素的【值】，无论是textbox 还是select ，如果元素为多选，则返回一个包含选择值的数组
5）获取焦点
$("#mailaddress").focus()
6)失去焦点
$("#mailaddress").blur()
4遍历节点，遍历节点方法有很多：parent(),parents(),next(),children,prev(),siblings()等——详见jQuery API
1） parent()：获取匹配元素的父元素，包含父元素里面的内容
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>对象，因为p标签的父标签是div.
又例：
alert("parent")
var li3=$("li").parent();//匹配元素的父元素
alert(li3.html());
2 ）chlidren():只抓该元素下一级的元素
<p>一个段落<strong>haha<em>dd</em></strong></p>
var v_p=$("p").children();
alert(v_p.length);得到的是：1个元素，就是<strong>，<em>不考虑
3 ）next() :抓匹配元素后面紧邻的同辈元素
var p1=$("p").next(); 结果是<ul>
4）prev() : 抓匹配元素前面紧邻的同辈元素
var ul1=$("ul").prev(); 结果是<p>
5 ）siblings() :抓取匹配元素前后所有的同辈元素
var p=$("p").siblings();
alert(p.html());
6 ）closest() ： 用来获得最近的匹配元素，检查当前元素是否匹配，匹配直接返回元素本身，不匹配向上查找父元素，直到有匹配的，没有就返回空jquery对象
$(window.document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
$(e.target).closest("li").css({"fontSize":"18px","backgroundColor":"#888888"});
}) 点到<li> ，添加css样式
具体代码1：查找节点
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDomAttr.aspx.cs" Inherits="jQueryDom_jQueryDom1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="../jQuery_JQueryCore/script/jquery-1.3.2.min.js" type="text/javascript">
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
<li title ='苹果'>苹果</li>
<li title='橘子'>橘子</li>
<li title='菠萝'>菠萝</li>
</ul>
</div>
</form>
</body>
</html>
<script language="javascript">
var $li=$("ul li:eq(0)");//查找元素节点，获取<ul>里第1个<li>节点
var li_txt=$li.text();
alert(li_txt);
var $para=$("p");
var p_txt=$para.attr("title"); //查找属性节点
alert(p_txt);
var $li_1=$("<li>西红柿</li>");//动态添加元素节点,元素要闭合
var $li_2=$("<li title='香蕉'>香蕉</li>")
$("ul").append($li_1);
$("ul").append($li_2);//相当于 $("ul").append($li_1).append($li_2)
alert("添加好了")
$("ul li:eq(3)").remove();//获取第4个<li>元素节点，从网页中删掉
alert("删除第4个")
var $li=$("ul li:eq(1)").remove();//第2个元素删掉
alert("第2个删掉 ok-》再添加上")
$li.appendTo("ul")//再把刚刚删掉的元素添加到<ul>元素
alert("删掉 属性title=菠萝的")
var $liPropery=$("ul li").remove("li[title=菠萝]");
$liBase=$("ul li:eq(1)");
$litest=$("<li title=test>Test</li>")
$litest.insertAfter($liBase);
alert("将苹果移动到第二位置上")
$li_one=$("ul li[title=苹果]");
$li_two=$("ul li:eq(1)");
$li_two.insertBefore($li_one);
alert("empty用法：清空test");
$("ul li[title=test]").empty();
alert("复制苹果节点");
$("ul li[title=苹果]").clone().appendTo("ul");
alert("点击苹果，复制苹果节点") ;
$("ul li").click(function(){
$(this).clone().appendTo("ul")
});
alert("点击苹果，复制苹果节点,并且复制后的苹果也具有可复制功能")
$("ul li").click(function(){
$(this).clone(true).appendTo("body")
});
alert("替换节点");
$("p").replaceWith("<strong>你最爱的水果呢？</strong>");
$("strong").wrap("<em></em>");//用<em>标签把strong括起来
alert("获取属性");
var $para=$("p");//获取p元素
var $p_title=$para.attr("title");//获取<p>元素节点属性title
alert("p元素的title："+$p_title);
$("ul li[title=香蕉]").attr("title","your turn");//设置属性值
$("ul li[title=your turn]").attr({"id":"li_Tests","name":"li_Test"});//设置多个属性值
alert("删除属性")
$("ul li[title=your turn]").removeAttr("id")//删除ul li title是香蕉的 ID属性
</script>
具体代码2：属性样式操作
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMCss.aspx.cs" Inherits="jQueryDom_jQueryDOMCss" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
<style>
.myClass{
color:green;
font-size:14px;
}
.pNew{
background-color:pink;
color:red;
}
.testColor{
color:white;
}
#mailaddress{
text-shadow:white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<p class="myClass" title="选择你喜欢的水果"><em>你喜欢啥水果</em></p>
<button type="button" id="changCss" name="changCss">切换样式</button><br />
<input type="text" id="mailaddress" value="请输入邮箱地址" />
<input type="text" id="pwd" value="请输入密码" />
<input type="button" value="登录" />
</div>
</form>
</body>
</html>
<script>
$(p).css("color");//获取<p>元素的样式颜色
var p_class=$("p").attr("class")//获取p元素的class
$("p").attr("class","pNew");//将原来的myClass 替换成 pNew, <p class="myClass" => <p class="pNew"
$("p").addClass("testColor");//在原来的基础上添加 myClass样式，合并样式.后面的样式覆盖前面的样式，color：yellow；如果合并的样式是myClass 字体则为red。
$("p").addClass("myClass");//样式从上到下继承：myClass->pNew->testColor
$("p").removeClass("testColor").removeClass("myClass");//$("p").removeClass() 当不带参数的时候则是删掉p元素的所有样式
$("#changCss").click(function(){
$("p").toggleClass("testColor")//因为浏览器对button的type理解不一致，所以强制button type之前，FireFox认为我的button是submit，样式效果只在一瞬间
});
var $hasClasses=$("p").hasClass("pNew");//判断有没有pNew这个样式，有返回true。等价于$("p").is(".pNew");
alert($hasClasses);
//设置和获取html 、文本和值
//html()：相当于js 的innerHTML()，抓取元素中【HTML内容】:文本内容 + p元素内的标签 html
var $p_html=$("p").html();
alert($p_html);
$("p").html("<strong>这是嘛？</strong>")//替换掉水果句
//text()：相当于js的innerText() ,读取或设置元素的【文本内容】
var $p_text=$("p").text();
alert($p_text);
$("p").text("<h1>小糊涂神</h1>")//page show：<h1>小糊涂神</h1>
//val()：类似js的value属性，设置和抓取元素的【值】，无论是textbox 还是select ，如果元素为多选，则返回一个包含选择值的数组
$("#mailaddress").focus(function(){//focus 得到焦点
//$(this).val("") //就锁定焦点清空了。
var t_address=$(this).val();
if(t_address == "请输入邮箱地址")
{
$(this).val("");
}
})
$("#mailaddress").blur(function(){//失去焦点
var t_address=$(this).val()
if(t_address == "")
{
$(this).val("请输入邮箱地址")
}
})
</script>
具体代码3：children遍历
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMchild.aspx.cs" Inherits="jQueryDom_jQueryDOMchild" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>一个段落<strong>haha<em>dd</em></strong></p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</form>
</body>
</html>
<script>
//遍历节点：parent(),find(),filter()等
//chikdren()只抓该标签下一级的元素<em>不考虑
var v_body=$("body").children();
var v_p=$("p").children();
//alert(v_p.html)
var v_ul=$("ul").children();
//alert(v_body.length);//2个元素
//alert(v_p.length);//1个元素
//alert(v_ul.length);//3个元素
for(var i=0;i<v_ul.length;i++)
{
//alert(v_ul.eq(i).html())//v_ul[i].innerHTML
}
//next() 抓匹配元素后面紧邻的同辈元素
var p1=$("p").next(); //<ul>
//prev() 抓匹配元素前面紧邻的同辈元素
var ul1=$("ul").prev();//<p>
//siblings() 抓取匹配元素前后所有的同辈元素
var p=$("p").siblings();
alert(p.html());
//closest() 用来获得最近的匹配元素，检查当前元素是否匹配，匹配直接返回元素本身，不匹配向上查找父元素，直到有匹配的，没有就返回空jquery对象
//
$(window.document).bind("click",function(e){
$(e.target).closest("li").css("color","red");
$(e.target).closest("li").css({"fontSize":"18px","backgroundColor":"#888888"});
})
//alert("parent")
var li3=$("li").parent();//匹配元素的父元素
//alert(li3.html());
</script>
具体代码4 ：eg
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQueryDOMeg.aspx.cs" Inherits="jQueryDom_jQueryDOMeg" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select><br /><br />
<select id="multiple" multiple="multiple" style="height:100px">
<option selected ="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select><br />
<input type="checkbox" value="check1" />多选1
<input type="checkbox" value="check2" />多选2
<input type="checkbox" value="check3" />多选3
<input type="checkbox" value="check4" />多选4<br />
<input type="radio" value="radio1" name="radio1" />单选1
<input type="radio" value="radio2" name="radio1" />单选2
<input type="radio" value="radio3" name="radio1" />单选3<br />
</div>
</form>
</body>
</html>
<script>
$("#single").val("选择1号");
$("#single").val("选择2号");//val()从上往下读的
$("#multiple").val(["选择2号","选择3号"]);
$("#single option:eq(2)").attr("selected",true);
$("[value=radio2]:radio").attr("checked",true);
$("[type=checkbox]").val(["check2","check3"]);//$(":checkbox").val(["check2","check3"])//给checkbox赋值，选中
</script>