當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Python 【第八章】：JavaScript 、Dom、jQuery

發布時間：2025/4/9 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 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 根據標簽名獲取標簽集合

間的查找：

parentNode // 父節點 childNodes // 所有子節點 firstChild // 第一個子節點 lastChild // 最后一個子節點 nextSibling // 下一個兄弟節點 previousSibling // 上一個兄弟節點parentElement // 父節點標簽元素 children // 所有子標簽 firstElementChild // 第一個子標簽元素 lastElementChild // 最后一個子標簽元素 nextElementtSibling // 下一個兄弟標簽元素 previousElementSibling // 上一個兄弟標簽元素

例子：

class 操作

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><div class="c1 c2 c3">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 實現

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title></title> </head> <body><input type="button" onclick="Add();" /><ul><li>123</li><li>456</li><li>789</li></ul><script src="jquery-1.12.4.js"></script><script>$(function(){/*$('li').click(function () {alert($(this).text());});*/$("ul").delegate("li","click",function(){alert($(this).text());});});function Add(){var tag = document.createElement('li');tag.innerText = '666';$('ul').append(tag);}</script> </body> </html>

4、return false; 當前事件如果 return false 后面事件就不執行這個機制在jqurey 中也一樣執行

轉載于:https://www.cnblogs.com/yaabb163/p/6082961.html

總結

以上是生活随笔為你收集整理的Python 【第八章】：JavaScript 、Dom、jQuery的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：《C与指针》第七章练习
下一篇： Hibernate 系列教程9-自关联