下拉菜單的事件 onchange
sele.onchange = function(){}
當改變的時候觸發事件
例：星座運勢
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>星座運勢</title>
<style type="text/css">
p,h2{
margin: 0;
padding: 0;
}
.box{
width: 278px;
height: 181px;
border: 1px solid #D2E1F1;
margin: 0 auto;
}
a{
text-decoration: none;
color: #0873c0;
}
.clearfix:after{
content: '';
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
.clearfix{
zoom:1;
}
.lucktab{
height: 38px;
line-height: 38px;
}
.lucktab h2{
font-size: 14px;
text-indent: 8px;
}
.luck{
width: 240px;
height: 50px;
padding: 0 19px;
}
.luleft{
float: left;
}
.luleft a{
display: block;
width: 50px;
height: 50px;
background: url("images/astroIcon.png") no-repeat;
}
.luright{
width: 180px;
height: 50px;
float: right;
}
.luright .yunshi{
width: 180px;
height: 18px;
margin-top: 6px;
}
.luright .yunshi p{
width: 65px;
height: 18px;
line-height: 18px;
float: left;
font-size: 12px;
font-family: "simsun";
}
.luright .yunshi .yuanshibg{
float: left;
width: 80px;
height: 13px;
background: url("images/yunshi.png") no-repeat;
margin-top: 2px;
}
.luright .yunshi .yunshicur{
width: 48px;
height: 13px;
background: url("images/yunshi.png") no-repeat left bottom;
}
.ft{
width: 240px;
height: 90px;
overflow: hidden;
padding: 0 19px;
}
.ft p{
margin-top: 8px;
height: 82px;
line-height: 26px;
font-family: "simsun";
font-size: 14px;
color: #323f5a;
}
</style>
<script type="text/javascript">
window.onload = function () {
var yunshis = [6,8,9,2,1,10,3,7,5,4,7,8];
var details = [
"今天的你要注意跟伴侶相處的態度不要太強勢，否則會影響你們的感情，財運不錯，可以抓住機會小賺...",
"今天的你工作會比較辛苦，注意勞逸結合，遇到難題會有前輩幫助你，人際交往中你可能比較強勢自我...",
"今天的你在人際交往中可能會吃虧，小心被他人利用，在工作中注意不要太過自我小心會冒犯到上司，...",
"今天的你工作中可能比較忙碌，上司給你安排了大量的工作，這對你來說是個考驗，今天你會感到伴侶...",
"今天的你魅力十足，周圍有一群人圍繞著你讓你分外開心，注意不要太忘乎所以，外出時注意安全，可...",
"今天你的心緒不佳，注意小心跟戀人發生爭執，可以轉移注意力，外出散心或者學習一項新的技能都是...",
"今天的你在工作中與同事的關系可能會感覺比較壓抑，要防止因小事與周圍的人發生摩擦，家中的長輩...",
"今天的你運勢不錯，好好工作會得到應有的回報，在與伴侶的相處中比較強勢、我行我素，這樣你的伴...",
"今天的運勢一般，上司會比較強勢，對你要求嚴格，要給自己加油打氣，提高自信努力把事情做好，在...",
"今天的你情緒不佳，要注意不要因小事與家人發生矛盾，在事業上可能要耗費很多精力來完成手頭的工...",
"今天的你要注意跟朋友之間可能會有矛盾，可能有外出工作的機會，一天的奔波會使你非常疲勞，可以...",
"今天的你可能會想要跟朋友呆在一起，但要注意防止因錢財傷了與朋友之間的感情，多反思一下自己的..."
];
function $(id){return document.getElementById(id);}
$("xingzuosel").onchange = function () {
$("lucklogo").style.backgroundPosition = "0 "+(-50*this.value)+"px";
$("current_yunshi").style.width = (yunshis[this.value]*8)+"px";
$("xingzuodetail").innerHTML = details[this.value];
}
}
</script>
</head>
<body>
<div class="box">
<div class="lucktab">
<h2><a href="#">星座運勢</a></h2>
</div>
<div class="luck clearfix">
<div class="luleft">
<a href="#" id="lucklogo"></a>
</div>
<div class="luright" id="zingzuosel">
<select id="xingzuosel">
<option value="0" selected="selected">白羊座(03.21-04.19)</option>
<option value="1">金牛座(04.20-05.20)</option>
<option value="2">雙子座(05.21-06.21)</option>
<option value="3">巨蟹座(06.22-07.22)</option>
<option value="4">獅子座(07.23-08.22)</option>
<option value="5">處女座(08.23-09.22)</option>
<option value="6">天秤座(09.23-10.23)</option>
<option value="7">天蝎座(10.24-11.22)</option>
<option value="8">射手座(11.23-12.21)</option>
<option value="9">摩羯座(12.22-01.19)</option>
<option value="10">水瓶座(01.20-02.18)</option>
<option value="11">雙魚座(02.19-03.20)</option>
</select>
<div class="yunshi">
<p>今日運勢：</p>
<div class="yuanshibg">
<div class="yunshicur" id="current_yunshi"></div>
</div>
</div>
</div>
</div>
<div class="ft">
<p>
<span id="xingzuodetail">今天的你在人際交往中可能會吃虧，小心被他人利用，在工作中注意不要太過自我小心會冒犯到上司，...</span>
<a href="#">[詳情]</a>
</p>
</div>
</div>
</body>
</html>
數組常用方法
我們經常要對數組進行操作，可能追加，也可能刪除 等等，如何操作呢？
添加 數組
var arr = [1,3,5];
我們想要 把7 這個數字 放到 這個數組的后面，得到 [1,3,5,7];
push()后面推進去
返回值：數組的新長度
push() 方法可向數組的末尾添加一個或多個元素，并返回新的長度。
var arr =[1,3,5] → arr.push(7) → 結果變成 : [1,3,5,7];
unshift()從數組的前面放入
返回值：數組的新長度
unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度
var arr = [1,3,5] → arr.unshift(0) → 結果變成 [0,1,3,5]
注意：
var dom = [1,3,5];
console.log(dom.push(7)); // 返回的是 數組的長度 4
刪除數組內容
pop()刪除最后一個元素
返回值：這個被刪除的元素
pop() 移除最后一個元素 ，返回值是最后一個值
var arr = [1,3,5] → arr.pop() → 結果 [1,3]
shift()刪除第一個元素
返回值：這個被刪除的元素
shift() 方法用于把數組的第一個元素從其中刪除，并返回第一個元素的值
var arr = [1,3,5] → arr.shift() → 結果 [3,5]
連接兩個數組
concat() 用于連接兩個或多個數組
返回值：連接后的新數組
該方法用于連接兩個或多個數組。它不會改變現有的數組，而僅僅會返回被連接數組的一個副本
var a1 = [3,8,5];
var a2 = ["aa","bb"];
console.log(a1.concat(a2));//[3,8,5,"aa","bb"]
console.log(a1);//[3,8,5]
console.log(a2);//["aa","bb"];
join() 把數組轉換為字符串
join() 將數組各個元素是通過指定的分隔符進行連接成為一個字符串
語法：arrayObject.join(separator)
返回值：轉換后的字符串
作用是將數組各個元素是通過指定的分隔符進行連接成為一個字符串。
數組名.join(符號)
數組轉換為字符串
參數 separator 可選。指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符。
var arr = [1,2,3];
console.log(arr.join(“-”)) 結果就是： 1-2-3 字符串
把字符串轉換為數組 split()
split() 方法用于把一個字符串分割成字符串數組
語法：stringObject.split(separator,howmany)
返回值：分割的數組
參數 separator 可選。指定要使用的分隔符。如果省略該參數，則使用逗號作為分隔符。howmany 可選。該參數可指定返回的數組的最大長度
join <=> split
var str = "12.aa.123.bb";
var aa = str.split(".");
console.log(aa);//["12", "aa", "123", "bb"]
DOM
javascript組成
DOM
DOM 為文檔提供了結構化表示，并定義了如何通過腳本來訪問文檔結構。目的其實就是為了能讓js操作html元素而制定的一個規范。
DOM 樹 ：
DOM相關概念
- DOM就是把HTML視為一個層次結構(樹形結構)的文檔
- 文檔(Document)：就是指HTML或者XML文件
- 節點(Node)：HTML文檔中的所有內容都可以稱之為節點
- 元素(Element)：HTML文檔中的標簽可以稱為元素
- 文檔元素(根元素)：文檔中的第一個元素，HTML文檔元素就是<html>
- 文本節點
- 屬性節點
訪問結點
- 我們學過幾個訪問節點 ：
-
getElementById()id 訪問節點 -
getElementsByTagName()標簽訪問節點 -
getElementsByClassName()類名 有兼容性問題
getElementsByClassName()主流瀏覽器支持，但是IE 6、7、8 不認識
怎么辦？ 我們自己封裝自己的 類 。
封裝getElementsByClassName方法
原理： （核心），我們要取出所有的盒子， 利用遍歷的方法 ， 通過每一個盒子的className 來判斷。 如果相等就留下。
- 自己封裝getElementsByClassName方法解決瀏覽器兼容性的問題
<script type="text/javascript">
window.onload = function () {
function MyGetElementsByClassName(className) {
var arr = [];//用于存放結果的數組
if (document.getElementsByClassName) {//瀏覽器支持
arr = document.getElementsByClassName(className);
} else {
var doms = document.getElementsByTagName("*");
console.dir(doms.length);
for (var i = 0; i < doms.length; i++) {
if (doms[i].className == className) {
arr.push(doms[i]);
}
}
}
return arr;
}
console.dir(MyGetElementsByClassName("demo"));
}
</script>
- 當一個標簽的class有多個樣式時，上面代碼不適用，修改如下：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
function MyGetElementsByClassName(className) {
var arr = [];//用于存放結果的數組
if (document.getElementsByClassName) {//瀏覽器支持
arr = document.getElementsByClassName(className);
} else {
var doms = document.getElementsByTagName("*");
console.dir(doms.length);
for (var i = 0; i < doms.length; i++) {
var classArr = doms[i].className.split(" ");//以空格切割
for(var j=0;j<classArr.length;j++){
if(classArr[j] == className){
arr.push(doms[i]);
}
}
}
}
return arr;
}
console.dir(MyGetElementsByClassName("demo"));
}
</script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div></div>
<div class="demo test"></div>
<div></div>
<div class="demo"></div>
</body>
</html>
- 實際項目中，我們經常會有這樣的需求，查找id=xxx標簽內的class包含xxx的標簽，
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
function getElementByIdInClass(className,id){
if(document.getElementsByClassName){
if(id){//有id
var idEle = document.getElementById(id);
return idEle.getElementsByClassName(className);
}else{
return document.getElementsByClassName(className);
}
}else{
var doms ;
if(id){
var idEle = document.getElementById(id);
doms = idEle.getElementsByTagName("*");
}else{
doms = document.getElementsByTagName("*");
}
var arr = [];
for(var i=0;i<doms.length;i++){
var classArr = doms[i].className.split(" ");
for(var j=0 ;j<classArr.length ; j++){
if(classArr[j] == className){
arr.push(doms[i]);
}
}
}
return arr;
}
}
console.log(getElementByIdInClass("demo","box"));
}
</script>
</head>
<body>
<div></div>
<div class="demo"></div>
<div id="box">
<div class="demo test"></div>
</div>
<div></div>
<div class="demo"></div>
</body>
</html>
判斷真假
我們用條件語句來判斷5大數據類型中的真假：
|數據| 結論|
|::|::|
|數字類型| 所有數字都是真，0是假|
|字符串| 所有字符串都是真，’ ’串是假|
|對象| 所有對象都是真，null是假|
|未定義| undefined是假，沒有真|
訪問關系
父節點
父節點
parentNode爺爺結點
dom.parentNode.parentNode;
兄弟結點
- 下一個兄弟結點
nextSibling：只有IE6、7、8支持 - 下一個兄弟結點
nextElementSibling：其他瀏覽器(除IE6、7、8以外的)支持 - 上一個兄弟結點
previousSibling：同理，只有IE6、7、8支持 - 上一個兄弟結點
previousElementSibling：其他瀏覽器(除IE6、7、8以外的)都支持
為了解決兼容性，我們一般這么寫
var div = dom.nextElementSibling || dom.nextSibling;//解決瀏覽器兼容性
必須先寫 正常瀏覽器(nextElementSibling ) 后寫 IE678(nextSibling)
子節點
- 第一個子結點
firstChild：只有IE6、7、8支持 - 第一個子結點
firstElementChild：其他瀏覽器(除IE6、7、8以外的)支持 - 最后一個子結點
lastChild：同理，只有IE6、7、8支持 - 最后一個子結點
lastElementChild：其他瀏覽器(除IE6、7、8以外的)都支持
同樣，為了解決兼容性，我們一般這么寫
var childDom = ulDom.firstElementChild || ulDom.firstChild;
孩子結點
- childNodes：選出全部的孩子
childNodes：它是標準屬性，它返回指定元素的子元素集合，包括HTML節點，所有屬性，文本節點 （嫡出）
火狐 谷歌等高本版會把換行也看做是子節點，但是，可以利用 nodeType == 1 時才是元素節點 ， 來判斷和獲取元素節點
nodeType == 1 元素節點
nodeType == 2 屬性節點
nodeType == 3 文本節點
- children 重要 選取所有的孩子 （只有元素節點）
這個更好 更適用 。
ie 6、7、8 注釋節點comment也包含在children中， 這個要避免開。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function () {
var ulDom = document.getElementsByTagName("ul")[0];
//chrome、IE9、10：13
//IE6、7、8:6
console.log(ulDom.childNodes.length);
//所有瀏覽器都是：6
console.log(ulDom.children.length);
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</body>
</html>
DOM的節點操作
- 新建節點
- 插入節點
- 刪除節點
- 克隆節點 等等
創建節點
var div = document.creatElement(“li”);
上面的意思就是 生成一個新的 li 標簽
插入節點
appendChild(); 添加孩子
意思： 添加孩子，添加放到盒子的最后面。
insertBefore(插入的節點，參照節點);
insertBefore(dom1,dom2);將dom1插入到dom2的前面
寫滿兩個參數：demo.insertBefore(test,childrens[0]);，放到了第一個孩子的前面
如果第二個參數 為 null 則 默認這新生成的盒子放到最后面。demo.insertBefore(test,null);
移除節點
removeChild(); 孩子節點
var da = document.getElementById("xiongda");
demo.removeChild(da);
克隆節點
cloneNode(); 復制節點
括號里面可以跟boolean類型的參數：
- 如果 里面是 true 深層復制， 除了復制本盒子，還復制子節點
- 如果為 false 淺層復制 只復制 本節點 不復制 子節點。
