web前端【第九篇】JS的DOM对象三
一、JS中for循環遍歷測試
for循環遍歷有兩種
第一種:是有條件的那種,例如 ? ?for(var i = 0;i<ele.length;i++){}
第二種:for (var i in li ){}
現在我們來說一下測試一下第二種(數組和obj的)
//測試for循環 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <script>var arr = [11,22,33,44,55];var obj = {'username':'zzz','agr':20}; //js中的這個類似字典的不叫字典,而是一個對象for (var i in obj){console.log(i); //拿到的是鍵console.log(obj[i]) //值}for (var j in arr){console.log(j); //拿到索引console.log(arr[j]) //拿到值} </script> </body> </html>二、獲取value屬性值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>獲取value值</title> </head> <body> <input type="text" id="c1"> <select name="pro" id="s1"><option value="1">河北省</option><option value="2">河南省</option><option value="3">北京省</option> </select> <button>show</button> <script>var ele_button=document.getElementsByTagName("button")[0];ele_button.οnclick=function () {var ele_input=document.getElementById("c1");var ele_select=document.getElementById("s1");console.log(ele_select.value)}; </script> </body> </html>
三、表格示例(全選,反選,取消)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格示例</title> </head> <body> <button class="select">全選</button> <button class="reserve">反選</button> <button class="cancel">取消</button> <table border="1"><tr><td><input type="checkbox" class="check"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox" class="check"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox" class="check"></td><td>111</td><td>222</td><td>333</td></tr><tr><td><input type="checkbox" class="check"></td><td>111</td><td>222</td><td>333</td></tr> </table> <script> // 方式一:分別給每個button增加事件var ele_select = document.getElementsByClassName('select')[0];var ele_reserve = document.getElementsByClassName('reserve')[0];var ele_cancel = document.getElementsByClassName('cancel')[0];var ele_input = document.getElementsByClassName('check');//全選ele_select.onclick = function () {for (var i = 0; i < ele_input.length; i++) {//添加一個checked屬性ele_input[i].checked = 'checked'}};//取消ele_cancel.onclick = function () {for (var i =0;i<ele_input.length;i++){//刪除checked屬性,直接設置為空就行了ele_input[i].checked = ''}};//反選ele_reserve.onclick = function () {for (var i = 0; i < ele_input.length; i++) {var ele = ele_input[i];if (ele.checked) {//如果選中了就設置checked為空ele.checked = '';}else {//如果沒有就設置checked = checkedele.checked = 'checked';}}};//方式二:方式一的優化循環增加事件 // var ele_button = document.getElementsByTagName('button'); // var ele_input = document.getElementsByClassName('check'); // for(var i=0;i<ele_button.length;i++) { // ele_button[i].onclick = function () { // if (this.innerHTML == '全選') { // for (var i = 0; i < ele_input.length; i++) { // //添加一個checked屬性 // ele_input[i].checked = 'checked' // } // } // else if (this.innerHTML == '取消') { // for (var i = 0; i < ele_input.length; i++) { // //刪除checked屬性,直接設置為空就行了 // ele_input[i].checked = '' // } // } // else { // for (var i = 0; i < ele_input.length; i++) { // var ele = ele_input[i]; // if (ele.checked) {//如果選中了就設置checked為空 // ele.checked = ''; // } // else {//如果沒有就設置checked = checked // ele.checked = 'checked'; // } // } // } // } // }</script> </body> </html>
四、模態對話框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.back{background-color: white;height: 2000px;}.shade{position: fixed;top: 0;bottom: 0;left:0;right: 0;background-color: grey;opacity: 0.4;}.hide{display: none;}.models{position: fixed;top: 50%;left: 50%;margin-left: -100px;margin-top: -100px;height: 200px;width: 200px;background-color: wheat;}</style> </head> <body> <div class="back"><input class="c" type="button" value="click"> </div><div class="shade hide handles"></div><div class="models hide handles"><input class="c" type="button" value="cancel"> </div><script>var eles=document.getElementsByClassName("c");var handles=document.getElementsByClassName("handles");for(var i=0;i<eles.length;i++){eles[i].οnclick=function(){if(this.value=="click"){for(var j=0;j<handles.length;j++){handles[j].classList.remove("hide");}}else {for(var j=0;j<handles.length;j++){handles[j].classList.add("hide");}}}}</script></body> </html>五、搜索框 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>模擬placeholder屬性的功能</title> </head> <body> <input type="text" placeholder="username" id="submit"> <input type="text" value="username" id="submit1"> <script> // var ele = document.getElementById('submit1');var ele = document.getElementById('submit1');ele.onfocus = function () {//先獲取焦點,點擊輸入框就獲取到焦點,光標一上去就把值設成空this.value=""};ele.onblur = function () { // 當光標不點擊那個輸入框的時候就失去焦點了//當失去焦點的時候,判斷當前的那個值是不是為空,是否含有空格 // 如果為空或者有空格,用trim()去掉空格。然后賦值為usernameif (this.value.trim()==""){this.value='username'}} </script> </body> </html>
六、tab切換
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>tab</title><style>*{margin:0; padding:0; list-style:none;}body{font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;}h3{text-align: center;color:darkcyan;margin-top: 30px;letter-spacing: 5px;}.box{width: 1000px;margin:50px auto 0px;}#title{line-height: 40px;background-color: rgb(247,247,247);font-size: 16px;font-weight: bold;color: rgb(102,102,102);}#title span{float: left;width: 166px;text-align: center;}#title span:hover{/*color: black;*/cursor: pointer;}#content{margin-top: 20px;}#content li{width: 1050px;display: none;background-color: rgb(247,247,247);}#content li div{width: 156px;margin-right: 14px;float: left;text-align: center;}#content li div a{font-size: 14px;color: black;line-height: 14px;/* float: left;*/display: inline-block;margin-top: 10px;}#content li a:hover{color: #B70606;}#content li div span{font-size: 16px;line-height: 16px;/*float: left;*/display: block;color: rgb(102,102,102);margin-top: 10px;}#content img{float: left;width: 155px;height: 250px;}#title .select{background-color: #2459a2;color: white;border-radius: 10%;}#content .show{display: block;}.show span{color: red!important;font-size: 30px;}</style> </head><body><h3 id="wel">京東商城歡迎您</h3><!-- direction="right up down left" --> <!-- behavior:滾動方式(包括3個值:scroll、slide、alternate) --> <!-- 說明:scroll:循環滾動,默認效果;slide:只滾動一次就停止;alternate:來回交替進行滾動。 --> <!-- scrollamount="5" 滾動速度 --><marquee behavior="scroll" direction="right">歡迎您苑昊先生</marquee><script>function test(){var mywel = document.getElementById("wel");var content = mywel.innerText;var f_content = content.charAt(0);var l_content = content.substring(1,content.length);var new_content = l_content + f_content;mywel.innerText = new_content;}// setInterval("test();", 500); </script><div class="box"><p id="title"><span class="select">家用電器</span><span>家具</span><span>汽車</span><span>食品</span><span>女鞋</span><span>醫療保健</span></p><ul id="content"><li class="show"><div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容聲(Ronshen)冰箱</a><span>價格:5600</span></div><div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣機"><a href="#">海爾洗衣機</a><span>價格:5400</span></div><div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="電飯煲"><a href="#">福庫(CUCKOO)電飯煲</a><span>價格:3999</span></div><div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能電視"><a href="#">三星智能電視</a><span>價格:8999</span></div><div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="凈水器"><a href="#">凈水器</a><span>價格:1300</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空氣凈化器"><a href="#">空氣凈化器</a><span>價格:5300</span></div></li><li><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙發"><a href="#">沙發</a><span>價格:2900</span></div></li><li><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div><div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="長安汽車"><a href="#">長安汽車</a><span>價格:12900</span></div></li><li><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉興粽子"><a href="#">嘉興粽子</a><span>價格:1</span></div></li><li><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div><div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>價格:439</span></div></li><li><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div><div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="匯仁 腎寶片"><a href="#">匯仁 腎寶片</a><span>價格:322</span></div></li></ul></div><script>var title=document.getElementById('title');var content=document.getElementById('content');var category=title.getElementsByTagName('span');var item=content.getElementsByTagName('li');for (var i = 0; i < category.length; i++) {category[i].index=i;category[i].οnclick=function(){for (var j = 0; j < category.length; j++) {category[j].className='';item[j].className='';}this.className='select';item[this.index].className='show';}}</script> </body> </html>
四、作用鏈域
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>作用鏈域</title> </head> <body> <script>var s = 12;function f() {console.log(s); //undefinedvar s=12;console.log(s);//12}f(); </script> </body> </html>
js的作用域
作用域是JavaScript最重要的概念之一,想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。
任何程序設計語言都有作用域的概念,簡單的說,作用域就是變量與函數的可訪問范圍,即作用域控制著變量與函數的可見性和生命周期。在JavaScript中,變量的作用域有全局作用域和局部作用域兩種。
作用域
1. 全局作用域(Global Scope)
在代碼中任何地方都能訪問到的對象擁有全局作用域,一般來說一下幾種情形擁有全局作用域:
(1)最外層函數和在最外層函數外面定義的變量擁有全局作用域
var name="yuan";function foo(){var age=23;function inner(){console.log(age);}inner();}console.log(name); // yuan//console.log(age); // Uncaught ReferenceError: age is not definedfoo(); // 23inner(); // Uncaught ReferenceError: inner is not defined(2)所有末定義直接賦值的變量自動聲明為擁有全局作用域,例如:
var name="yuan";function foo(){age=23;var sex="male"}foo();console.log(age); // 23console.log(sex); // sex is not defined變量blog擁有全局作用域,而sex在函數外部無法訪問到。
(3)所有window對象的屬性擁有全局作用域
一般情況下,window對象的內置屬性都都擁有全局作用域,例如window.alert()、window.location、window.top等等。
2.?局部作用域(Local Scope)
和全局作用域相反,局部作用域一般只在固定的代碼片段內可訪問到,最常見的例如函數內部,所有在一些地方也會看到有人把這種作用域成為函數作用域.
如示例1中的age與inner都只有局部作用域。(js中if、for沒有自己的作用域)
作用域鏈(Scope Chain)
在JavaScript中,函數也是對象,實際上,JavaScript里一切都是對象。函數對象和其它對象一樣,擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]],由ECMA-262標準第三版定義,該內部屬性包含了函數被創建的作用域中對象的集合,這個集合被稱為函數的作用域鏈,它決定了哪些數據能被函數訪問。
示例演示
please have a try:
//-----**********************例1*********************************var s=12;function f(){console.log(s);var s=12; // if s=12console.log(s)}f();//-----**********************例2*********************************var s=10; function foo(){console.log(s);var s=5;console.log(s);function s(){console.log("ok")}// 函數的定于或聲明是在詞法分析時完成的,執行時已不再有任何操作console.log(s); }foo();//-----***********************例3********************************function bar(age) {console.log(age);var age = 99;var sex= 'male';console.log(age);function age() {
alert(123)};console.log(age);
return 100; }result=bar(5);//-----********************************************************
結果分析
我相信大家一定會有想不到的結果,接下來我們就以最復雜的例3來分析整個過程。
當一個函數創建后,它的作用域鏈會被創建此函數的作用域中可訪問的數據對象填充。在函數bar創建時,它的作用域鏈中會填入一個全局對象,該全局對象包含了所有全局變量,如下圖所示:
解析到函數調用時,即bar(5),會生成一個active object的對象,該對象包含了函數的所有局部變量、命名參數、參數集合以及this,然后此對象會被推入作用域鏈的前端,當運行期上下文被銷毀,活動對象也隨之銷毀。新的作用域鏈如下圖所示:
過程解析:
function bar(age) {console.log(age);var age = 99;var sex="male";console.log(age);function age(){alert(123);} ;console.log(age);return 100; }result=bar(5);一 詞法分析過程(涉及參數,局部變量聲明,函數聲明表達式):1-1?、分析參數,有一個參數,形成一個?AO.age=undefine;1-2?、接收參數?AO.age=5;1-3?、分析變量聲明,有一個?var age,?發現?AO?上面有一個?AO.age?,則不做任何處理1-4 、分析變量聲明,有一個?var sex,形成一個?AO.sex=undefine;1-5 、分析函數聲明,有一個?function age(){}?聲明, 則把原有的?age?覆蓋成?AO.age=function(){}; 二 執行過程:2-1?、執行第一個?console.log(age)?時,當前的?AO.age?是一個函數,所以輸出的一個函數2-2?、這句?var age=99;?是對不?AO.age?的屬性賦值,?AO.age=99?,所以在第二個輸出的age是?99;2-3?、同理第三個輸出的是?99,?因為中間沒有改變?age?值的語句了。注意:執行階段:function age(){alert(123)} ;不進行任何操作,將執行語句復制給age這部操作是在詞法分析時,即運行前完成的。?
?
?
轉載于:https://www.cnblogs.com/xiaohema/p/8455498.html
總結
以上是生活随笔為你收集整理的web前端【第九篇】JS的DOM对象三的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 180217_JAVA学习_TreeSe
- 下一篇: Lucene——Field.Store(