Python 【第八章】：JavaScript 、Dom、jQuery
JavaScript
放置位置
body內部最下面，這樣可以避免javascript鏈接失效時，長時間加載不到頁面html內容
?
變量：
var a =123 局部變量
a = 123 全局變量
?
作用域：
沒有塊級作用域，只有函數作用域
?
DOM部分
直接查找：
document.getElementById 根據ID獲取一個標簽 document.getElementsByName 根據name屬性獲取標簽集合 document.getElementsByClassName 根據class屬性獲取標簽集合 document.getElementsByTagName 根據標簽名獲取標簽集合?
間的查找：
?
例子：
<div id ="i3"><div>234</div><div>456</div></div>
?
?
?
?
?
class 操作
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><div class="c1 c2 c3">123</div><!--<div class="c1 c2">123</div>--> </body> </html>?
className // 獲取所有類名 classList.remove(cls) // 刪除指定類 classList.add(cls) // 添加類?
?
?
?ID操作
?例子搜索文本框
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><input id="i1" type="text" value="請輸入關鍵字" onfocus="Focus();" onblur="Blur();" /><input id="i2" type="text"/><script type="text/javascript">function Focus(){//console.log('Focus');//獲取標簽，清空var tag = document.getElementById('i1');if(tag.value == "請輸入關鍵字"){tag.value = "";}}function Blur(){//console.log('blur');var tag = document.getElementById('i1');var val = tag.value;if(val.trim().length == 0){tag.value = "請輸入關鍵字";}}</script> </body> </html>?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title><style>.hide{display: none;}.menu{width: 200px;height: 600px;border: 1px solid #dddddd;overflow: auto;}.menu .item .title{height: 40px;line-height: 40px;background-color: #2459a2;color: white;}</style> </head> <body><div class="menu"><div class="item"><div class="title" onclick="ShowMenu(this);">菜單一</div><div class="body"><p>內容一</p><p>內容一</p><p>內容一</p><p>內容一</p><p>內容一</p></div></div><div class="item"><div class="title" onclick="ShowMenu(this);">菜單二</div><div class="body hide"><p>內容二</p><p>內容二</p><p>內容二</p><p>內容二</p><p>內容二</p><p>內容二</p></div></div><div class="item"><div class="title" onclick="ShowMenu(this);">菜單三</div><div class="body hide"><p>內容三</p><p>內容三</p><p>內容三</p><p>內容三</p><p>內容三</p><p>內容三</p></div></div></div><script src="jquery-1.12.4.js"></script><script>function ShowMenu(ths){// console.log(ths); // Dom中的標簽對象//$(ths) // Dom標簽對象轉換成jQuery標簽對象（便利）//$(ths)[0] // jQuery標簽對象轉換成Dom標簽對象 $(ths).next().removeClass('hide');$(ths).parent().siblings().find('.body').addClass('hide');}</script> </body> </html>?
?
javascript ?作用域鏈 ?執行前已創建
?
JavaScript的作用域在被執行之前已經創建，日后再去執行時只需要按照作用域鏈去尋找即可。
示例一：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | xo =?'alex'; function?Func(){ ????var?xo =?"seven"; ????function?inner(){ ????????console.log(xo); ????} ????return?inner; } var?ret = Func(); ret(); // 輸出結果： seven |
上述代碼，在函數被調用之前作用域鏈已經存在：
- 全局作用域 -> Func函數作用域 -> inner函數作用域
當執行【ret();】時，由于其代指的是inner函數，此函數的作用域鏈在執行之前已經被定義為：全局作用域 -> Func函數作用域 -> inner函數作用域，所以，在執行【ret();】時，會根據已經存在的作用域鏈去尋找變量。
示例二：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | xo =?'alex'; function?Func(){ ????var?xo =?"eirc"; ????function?inner(){ ????????console.log(xo); ????} ????xo =?'seven'; ????return?inner; } var?ret = Func(); ret(); // 輸出結果： seven |
上述代碼和示例一的目的相同，也是強調在函數被調用之前作用域鏈已經存在：
- 全局作用域 -> Func函數作用域 -> inner函數作用域
不同的時，在執行【var ret = Func();】時，Func作用域中的xo變量的值已經由 “eric” 被重置為 “seven”，所以之后再執行【ret();】時，就只能找到“seven”。
示例三：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | xo =?'alex';<br> function?Bar(){ ????console.log(xo); } function?Func(){ ????var?xo =?"seven"; ????? ????return?Bar; } var?ret = Func(); ret(); // 輸出結果： alex |
上述代碼，在函數被執行之前已經創建了兩條作用域鏈：
- 全局作用域 -> Bar函數作用域
- 全局作用域 -> Func函數作用域
當執行【ret();】時，ret代指的Bar函數，而Bar函數的作用域鏈已經存在：全局作用域 -> Bar函數作用域，所以，執行時會根據已經存在的作用域鏈去尋找。
?
?
DOM事件優先級
事件：
1、this，當前觸發事件的標簽
2、全局事件綁定 window.onKeyDown = function(){}
3、event，包含事件相關內容
4、默認事件
自定義優先：a,form ? 這些標簽，綁定自定事件優先執行，再到標簽默認事件
默認優先：checkbox 這個例外，是checkbox默認事件優先于自定義事件執行。
?
JQUERY 部分
例子：點按扭響應表格編輯。
?
?
?
?
?
如果
如果@A與@B先后次序改變，創建可編輯文本框顯示內容為 undefined?
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>動態</title><link href="css/comme.css" rel="stylesheet" type="text/css"/> </head> <body><input type="button" onclick="checkabc();" value="編輯"/> <table border="2" style="margin-left: 100px;margin-top: 50px;"><thead><tr><th>選擇</th><th>主機名</th><th>端口</th><th>狀態</th></tr></thead><tbody id="tt1"><tr><td><input type="checkbox"/> </td><td edit="true" id="abc">v1</td><td>v11</td><td edit="true" edit-type="select" sel-val="1" globa-key="STATUS">在線</td></tr><tr><td><input type="checkbox"/></td><td edit="true">v1</td><td>v11</td><td edit="true" edit-type="select" sel-val="2" golbal-dey="STATUS">下線</td></tr><tr><td><input type="checkbox"/></td><td edit="true">v1</td><td>v11</td><td edit="true" edit-type="select" sel-val="1" golbal-dey="STATUS">在線</td></tr></tbody></table><script type="text/javascript" src="jquery-1.12.4.js"></script> <script>function checkabc(){//通過選擇器先找到#tt1 再通過find 找#abc 這個id ，最后通過each內調用 回調函數，把位置 定到要編輯table格內 $("#tt1").find("#abc").each(function(){//$(this).text()先獲取單元格內信息 @Avar orgin_value = $(this).text();//使用文件形式創建html內容。@Bvar temp = "<input value='"+ orgin_value+"' />";//如果@A與@B先后次序改變，創建可編輯文本框顯示內容為 undefine $(this).html(temp);})}</script></body> </html>?
DOM 與jquery互換
DOM 添加上 $變成jquery，反過來jquery 對象取[0] 這個標簽就轉為DOM元素。
?
事件：
終止執行事件
<input typ="submit()' onclient = 'return check();' ?#當return 為flase就表示終止。不再捃后臺事件。
?
事件綁定
1、如何使用jQuery綁定
綁定事件： 方法一： $('.item .title').click(function(){ // this,$(this) $(this).next().removeClass('hide'); $(this).parent().siblings().find('.body').addClass('hide'); });?
?? 方法二： $('.item .title').bind('click', function () {$(this).next().removeClass('hide');$(this).parent().siblings().find('.body').addClass('hide'); })?
2、當文檔加載完畢后，自動執行
$(function(){
...
});
3、延遲綁定 ? ? ? ? ?實現原理由 委托?delegate 實現
?
?
4、return false; 當前事件如果 return false 后面事件就不執行 這個機制在jqurey 中也一樣執行
?
轉載于:https://www.cnblogs.com/yaabb163/p/6082961.html
總結
以上是生活随笔為你收集整理的Python 【第八章】：JavaScript 、Dom、jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 《C与指针》第七章练习
- 下一篇： RequireJS首次加载偶尔失败