<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<!-- <link href="./css/xxx.css"></link>-->
<script src="../jquery-1.8.3.min.js"></script>
<title>Document</title>
</head>
<script language="JavaScript">
//选择器
/*
HTML DOM Document 对象
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对
在 HTML DOM （文档对象模型）中，每个部分都是节点：
文档本身是文档节点
所有 HTML 元素是元素节点(DIV,INPUT,UL等等)
所有 HTML 属性是属性节点（id="",name="",class=""等等）
HTML 元素内的文本是文本节点(文字，包含空格，换行符等)
注释是注释节点（注释）
Js节点属性与方法(尤其重要...JS操作元素的根本)
属性：
Attributes 存储节点的属性列表(只读)
childNodes 存储节点的子节点列表(只读)
dataType 返回此节点的数据类型
Definition 以DTD或XML模式给出的节点的定义(只读)
Doctype 指定文档类型节点(只读)
documentElement 返回文档的根元素(可读写)
firstChild 返回当前节点的第一个子节点(只读)
Implementation 返回XMLDOMImplementation对象
lastChild 返回当前节点最后一个子节点(只读)
nextSibling 返回当前节点的下一个兄弟节点(只读)
nodeName 返回节点的名字(只读)
nodeType 返回节点的类型(只读)
nodeTypedValue 存储节点值(可读写)
nodeValue 返回节点的文本(可读写)
ownerDocument 返回包含此节点的根文档(只读)
parentNode 返回父节点(只读)
Parsed 返回此节点及其子节点是否已经被解析(只读)
Prefix 返回名称空间前缀(只读)
preserveWhiteSpace 指定是否保留空白(可读写)
previousSibling 返回此节点的前一个兄弟节点(只读)
Text 返回此节点及其后代的文本内容(可读写)
url 返回最近载入的XML文档的URL(只读)
Xml 返回节点及其后代的XML表示(只读)
nextSibling 返回相领的节点
方法：
appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
cloneNode 返回当前节点的拷贝
createAttribute 创建新的属性
createCDATASection 创建包括给定数据的CDATA段
createComment 创建一个注释节点
createDocumentFragment 创建DocumentFragment对象
createElement 创建一个元素节点
createEntityReference 创建EntityReference对象
createNode 创建给定类型,名字和命名空间的节点
createPorcessingInstruction 创建操作指令节点
createTextNode 创建包括给定数据的文本节点
getElementsByTagName 返回指定名字的元素集合
hasChildNodes 返回当前节点是否有子节点
insertBefore 在指定节点前插入子节点
Load 导入指定位置的XML文档
loadXML 导入指定字符串的XML文档
removeChild 从子结点列表中删除指定的子节点
replaceChild 从子节点列表中替换指定的子节点
Save 把XML文件存到指定节点
selectNodes 对节点进行指定的匹配,并返回匹配节点列表
selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
transformNode 使用指定的样式表对节点及其后代进行转换
transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
Element 对象（元素节点）
在 HTML DOM 中，Element 对象表示 HTML 元素。
Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList 对象表示节点列表，比如 HTML 元素的子节点集合。
元素也可以拥有属性。属性是属性节点（参见下一节）。
Attr 对象（属性节点）
在 HTML DOM 中，Attr 对象表示 HTML 属性。
HTML 属性始终属于 HTML 元素。
Event 对象（事件）
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
1.获取节点：
1.1 基本选择器
1.1.1 元素选择器（）（对应Js：document.getElementsByTagName("XX")）
$(“P”); //选择P元素，注意P为大写；
1.1.2 ID选择器（对应Js：document.getElementById("XX")）
$(“#test”); //选择id="test"的元素；eg：<div id="test"></div>
1.1.3 CSS选择器（对应JS:document.getElementsByClassName("XX")）
$(“.articles”); //选择class=”articles”的元素；
1.1.4 混合选择器
方式一：
$("P",“#test”, ”.articles”); //标签、id与class混合选择，用 “,”分隔开；
方式二：
$("P#test.articles");
1.2 其他选择器
$(this) //当前HTML元素
$(“P”) //所有<P>元素
$(“p.intro”) //所有class=”intro”的<P>元素
$(“.intro”) //所有class=”intro”的元素
$(“ul li:first”) //每个<ul>的第一个<li>元素
$(“[href$=’.jpg’]”)//所有带有以“.jpg”结尾的属性值的href元素
$(“div#intro.head”)//id=”intro”的<div>元素中的所有class=”head”的元素
选择指定元素下的所有子元素
$(“#destinations li”); //选中id为destinations下所有的li子元素；
选择直属子元素
$(“#destionations > li”); //使用“>”符号选择直属子元素，与不加“>”符号的区别为//只为#destionations下一个层次的子元素，不包括子子元素；
伪选择器
first（第一个） last（最后一个） odd（奇数个） even（偶数个）
伪选择器的语法为在子元素名称后面加“：”号，加参数；
$(“#destionations li:frist”);
$(“#destionations li:last”);
$(“#destionations li:odd”);
$(“#destionations li:even”);
2.获取值：
2.1 元素节点文本值操作
对于内部的文本采用$("XX").html(),赋值$("XX").html("strValue");//js采用getElementByXX("XX").innerHTML以及innerHTML="XX"设置值
2.2 元素节点属性操作
2.2.1 属性节点取值
text() - 设置或返回所选元素的文本内容,(只返回文本节点，若非文本节点自动过滤)
html() - 设置或返回所选元素的内容（包括 HTML 标记）（返回所有内容，包括元素、文本、注释节点等）
val() - 设置或返回表单字段的属性名为value值（若没有改字段，返回""）
attr() - 设置/改变属性值。
2.2.2 属性节点赋值
text("XX") - 设置或返回所选元素的文本内容
html("XX") - 设置或返回所选元素的内容（包括 HTML 标记）
val("XX") - 设置或返回表单字段的值
attr("key","value",..) - 设置/改变属性值。可以同时改变多个属性值eg：$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
常用JS基本操作：
parentObj.childNodes ：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点（节点包括四种：元素节点，属性节点，文本节点，注释节点）。
parentObj.children ：获取已知节点的直接子节点数组()。
parentObj.firstChild ：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。（会获取到文本、注释节点）
parentObj.lastChild ：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。（会获取到文本、注释节点）
neighbourNode.previousSibling ：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
neighbourNode.nextSibling ：获取已知节点（neighbourNode）的下一个节点，同样支持递归。
：
childNode.parentNode ：获取已知节点的父节点。
*/
function test(){
//根据id获取对象
//alert("ById:"+document.getElementById("tid").innerHTML);
//根据tagName获取对象
//alert("ByTagName:"+document.getElementsByTagName("div")[0].innerHTML);
//IE不支持，Chorme支持，获取name的值，已经过期不用
//alert("ByName:"+document.getElementsByName("a")[0].innerHTML);
//根据Class的内容获取对象，取代ByName
//alert("ByClassName:"+document.getElementsByClassName("testClassName")[0].innerHTML);
//Jquery获取元素ByID
//alert("ByIdSelector:"+$("#tid").html());
//var #div = $("#tid");
var div1 = document.getElementById("tid");
//childNodes使用（获取当前对象的所有子节点(会包含文本节点，注释节点)）
var childStr = "";
for(var i=0;i<div1.childNodes.length;i++){
//undefined，<div>标签换行符导致，换行符也是节点，属于文本节点
//Node：1是元素节点,2是属性节点,3文本节点,4注释节点
if(div1.childNodes[i].nodeType==1){
//alert(div1.childNodes[i].tagName);
childStr= childStr + div1.childNodes[i].tagName;
}
}
//alert(childStr);
//children使用（获取当前对象的所有子节点(只会获取元素节点)）
var childStr1 = "";
for(var i=0;i<div1.children.length;i++){
//undefined，<div>标签换行符导致，换行符也是节点，属于文本节点
//alert(div1.children[i].tagName);
childStr1= childStr1 + div1.children[i].tagName;
}
//alert(childStr1);
//alert(div1.children[1].innerHTML);
//原生js获取子节点
//alert(div1.childNodes[1].tagName); //JS代码不能引用Jquery对象
//alert(div1.childNodes[1].innerHTML);//下标从一开始
//获取第一个节点的值（会获取到文本节点，注释节点）
//alert(div1.firstChild.nodeType);
//获取类Class节点对象
//alert($(" .cdClassName1").html());
//js取属性值
//alert("className-->"+div1.className);
//alert("style-->"+div1.style.color);
//alert("id-->"+div1.id);
//jquery取属性值
/*alert("tidtext()-->"+$("#tid").text());
alert("tidattr(class)-->"+$("#tid").attr("class"));
alert("tidattr(style)-->"+$("#tid").attr("style"));
alert("inputval-->"+$("input").val());
alert("tidhtml-->"+$("#tid").html());
*/
//选择器联合使用
alert($("div#tid.testClassName").text());
alert($("div","#tid",".testClassName").text());
}
</script>
<body>
<div id="tid" class="testClassName" style="color:blue" name="a">
<div id="cdId1" class="cdClassName1" style="color:red" name="b">111</div>
<!--
style是HTML中直接定义样式，class可用于引用定义好的css类(class)，实现重用等。
另外，在JS中，style就是用style关键字来使用
上例中是document.getElementById("div1").style
class要使用className关键字来使用
上例中是document.getElementById("div2").className
-->
<div id="cdId2" class="testClassName" name="b">
<ul>
<li>cdId1li1</li>
<li>cdId1li2</li>
<li>cdId1li3</li>
<li>cdId1li4</li>
</ul>
</div>
<div id="cdId3" class="cdClassName3" name="b"></div>
<div id="cdId4" class="cdClassName4" name="b"></div>
</div>
<input type="submit" value="测试" onClick="test()"/>
</body>
</html>
JS、Jquery选择器总结
最新推荐文章于 2023-11-29 08:47:53 发布
1337
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
