Python全棧之學(xué)習(xí)JS(3)
更新時(shí)間：2022年01月23日 16:31:34 作者：熬夜泡枸杞
這篇文章主要為大家介紹了Python全棧之JS，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
1. dom節(jié)點(diǎn)
1.1 dom節(jié)點(diǎn)獲取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM document object model 文檔頂級節(jié)點(diǎn)</title>
</head>
<body>
<div id="box">
<p class="p1" >張三</p>
<p class="p2">李四</p>
<p class="p3">趙劉</p>
<p name="ceshi1"></p>
<p name="ceshi1"></p>
</div>
<div>
<input type="text" name="username" />
<input type="password" name="pwd" />
<p1>112233</p1>
<box>55666</box>
</div>
<script>
console.log(document)
// ### 1 通過id獲取div節(jié)點(diǎn)對象
var box = document.getElementById("box");
console.log(box);
// ### 2 通過類名獲取節(jié)點(diǎn)對象 [返回的是數(shù)組]
var p2 = document.getElementsByClassName("p2");
console.log(p2 , typeof(p2));
// 獲取李四節(jié)點(diǎn)對象
lisi = p2[0];
console.log(lisi)
// 獲取王五節(jié)點(diǎn)對象
wangwu = p2[1];
console.log(wangwu);
// ### 3.通過標(biāo)簽獲取節(jié)點(diǎn)對象 [返回的是數(shù)組]
var p = document.getElementsByTagName("p");
console.log(p)
console.log(p[1])
// ### 4.通過標(biāo)簽身上的name屬性 [返回的是數(shù)組] 一般用在input表單中
var ceshi1 = document.getElementsByName("username")[0];
console.log(ceshi1);
// ### 通過css選擇器獲取對應(yīng)的元素節(jié)點(diǎn)
// ### 5.querySelector ,只獲取找到的第一個(gè);
var p1 = document.querySelector(".p1");
console.log(p1)
var box = document.querySelector("#box");
console.log(box)
// input表單有兩個(gè),但是只獲取第一個(gè);
var input = document.querySelector("input");
console.log(input);
// ### 6.querySelectorAll 獲取所有找到的元素節(jié)點(diǎn),返回?cái)?shù)組
var all = document.querySelectorAll("input[name=username]")[0];
console.log(all);
</script>
</body>
</html>
1.2 節(jié)點(diǎn)元素層級關(guān)系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>節(jié)點(diǎn)元素層級關(guān)系</title>
</head>
<body>
<div id="box">
<p>
<input type="text" name="username" />
<input type="password" name="pwd" />
</p>
<p class="p1" >張三</p>
<p class="p2">李四</p>
<p class="p3">趙劉</p>
<p name="ceshi1"></p>
<p name="ceshi1"></p>
</div>
<script>
// ### 獲取對應(yīng)的節(jié)點(diǎn)元素
console.log(document)
console.log(document.documentElement); // html
console.log(document.documentElement.children)
// 找html里面所有的子節(jié)點(diǎn)children
var html_children = document.documentElement.children
console.log(html_children) // head , body
body = html_children[1];
console.log(body); // head , body
var div = body.children[0]
console.log(div);
var p0 = div.children[0]
console.log(p0)
var input = p0.children
console.log(input)
var input1 = input[0]
console.log(input1)
// 獲取下一個(gè)節(jié)點(diǎn)對象nextSibling
console.log(input1.nextSibling.nextSibling);
// 獲取下一個(gè)元素節(jié)點(diǎn)對象 nextElementSibling
var input2 = input1.nextElementSibling;
console.log(input2);
// 獲取上一個(gè)節(jié)點(diǎn)對象 previousSibling
console.log(input2.previousSibling)
// 獲取上一個(gè)元素節(jié)點(diǎn)對象 previousElementSibling
console.log(input2.previousElementSibling)
// 獲取input2父節(jié)點(diǎn)元素對象;
console.log(input2.parentElement)
</script>
</body>
</html>
1.3 修改_清空內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 修改/清空內(nèi)容</title>
</head>
<body>
<button onclick="func1()">修改內(nèi)容</button>
<button onclick="func2()">清空內(nèi)容</button>
<div id="box" style="border:solid 1px red;">
<p>我是最帥的最有錢的<a href="#">最有味的</a>男人</p>
</div>
<script>
// innerHTML 獲取標(biāo)簽里面所有內(nèi)容 [標(biāo)簽 + 文本]
// innerText 獲取標(biāo)簽里面所有字符串[文本]
var p = document.querySelector("#box p");
// console.log把數(shù)據(jù)展現(xiàn)在控制臺
console.log(p);
// document.write 把數(shù)據(jù)以字符串的形式展現(xiàn)在瀏覽器
document.write(p);
// 點(diǎn)擊button1觸發(fā)如下任務(wù) , 修改
function func1(){
var content = p.innerHTML;
var content = p.innerText;
console.log(content);
// p.innerHTML = `我被修改了 <a href=''>點(diǎn)我中大獎(jiǎng)</a>...1`;
p.innerText = `我被修改了 <a href=''>點(diǎn)我中大獎(jiǎng)</a>...2`;
}
// 點(diǎn)擊button2觸發(fā)如下任務(wù) , 清空
function func2(){
p.innerHTML = '';
}
</script>
</body>
</html>
1.4 隱藏顯示密碼效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隱藏顯示密碼效果</title>
</head>
<body>
<input type="password" name="pwd" value="111" class="abcd" /> <button onclick="change()" id="btn" >點(diǎn)我顯示密碼</button>
<div>
<img src="images/oneal1.jpg" />
</div>
<script>
// 效果1: 顯示隱藏密碼
var password = document.querySelector("input[name=pwd]")
console.log(password);
console.log(password.type);
console.log(password.name);
console.log(password.value);
console.log(password.className)
function change(){
var btn = document.querySelector("#btn")
console.log(btn);
if(password.type=="password"){
password.type = "text";
btn.innerHTML = "點(diǎn)我隱藏密碼";
}else{
password.type= "password";
btn.innerHTML = "點(diǎn)我顯示密碼";
}
}
// 效果2:點(diǎn)擊換圖片
var img = document.querySelector("img");
console.log(img)
img.onclick = function(){
console.log(img.src) // http://127.0.0.1:5500/images/oneal1.jpg
var arr = img.src.split("/")
imgname = arr[arr.length - 1]
console.log(arr , imgname);
if(imgname == "oneal1.jpg"){
img.src = "images/bakeli.jpg";
}else{
img.src = "images/oneal1.jpg";
}
}
</script>
</body>
</html>
2. 全選_反選_不選
2.1 全選_反選_不選
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全選,反選,不選</title>
<style>
*
{margin:0px;padding:0px;}
ul
{list-style: none;}
#ul1 li
{float:left;}
#ul1 li button
{width:80px;height:30px;}
#ul1 li button:hover
{background-color: tan;}
#ul2
{clear:both;}
</style>
</head>
<body>
<ul id="ul1">
<li><button>全選</button></li>
<li><button>不選</button></li>
<li><button>反選</button></li>
</ul>
<ul id="ul2">
<li><input type="checkbox" /> 看電影 </li>
<li><input type="checkbox" /> 吃面 </li>
<li><input type="checkbox" /> 燙頭 </li>
<li><input type="checkbox" /> 跑步 </li>
<li><input type="checkbox" /> 籃球 </li>
</ul>
<script>
// 獲取btn節(jié)點(diǎn)對象
var btn1 = document.querySelector("#ul1 li:nth-child(1) button");
var btn2 = document.querySelector("#ul1 li:nth-child(2) button");
var btn3 = document.querySelector("#ul1 li:nth-child(3) button");
// 全選
btn1.onclick = function(){
// 獲取#ul2 li 里的input
/*
var data_lst = document.getElementById("ul2").getElementsByTagName("input");
console.log(data_lst)
*/
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 獲取數(shù)組當(dāng)中每一個(gè)input節(jié)點(diǎn)元素對象
for(var input of data_lst){
//console.log(input.checked)
// 設(shè)置節(jié)點(diǎn)input的checked屬性為true;
input.checked = true;
}
}
// 不選
btn2.onclick = function(){
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 獲取數(shù)組當(dāng)中每一個(gè)input節(jié)點(diǎn)元素對象
for(var input of data_lst){
//console.log(input.checked)
// 設(shè)置節(jié)點(diǎn)input的checked屬性為true;
input.checked = false;
}
}
// 反選
btn3.onclick = function(){
var data_lst = document.querySelectorAll("#ul2 li input");
console.log(data_lst)
// 獲取數(shù)組當(dāng)中每一個(gè)input節(jié)點(diǎn)元素對象
for(var input of data_lst){
if(input.checked === true){
input.checked = false;
}else{
input.checked = true;
}
}
}
</script>
</body>
</html>
2.2 js控制css的相關(guān)屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js控制css的相關(guān)屬性</title>
<style>
.box
{border:solid 1px red;}
.box_new
{position: absolute; left:200px;}
</style>
</head>
<body>
<button id="box1">點(diǎn)擊我換顏色</button>
<button id="box2">點(diǎn)擊我隱藏</button>
<button id="box3">點(diǎn)擊我顯示</button>
<button id="box4">點(diǎn)擊邊框換圓角</button>
<button id="box5">點(diǎn)擊加樣式</button>
<div class="box" style="width:300px;height:200px;background-color: yellow;font-size:40px;">你好評</div>
<script>
var box = document.querySelector(".box");
console.log(box);
// js的dom對象獲取相關(guān)的css屬性
// 獲取方法一
console.log(box.style.width);
console.log(box.style.backgroundColor);
// 獲取方法二
console.log(box.style["width"]);
console.log(box.style["background-color"]);
console.log(box.style["font-size"]);
// 獲取方法三 getComputedStyle 獲取該節(jié)點(diǎn)對象的所有樣式
console.log( window.getComputedStyle(box)["font-size"] , "<===getComputedStyle===>");
console.log( window.getComputedStyle(box).fontSize , "<===getComputedStyle===>");
// 事件綁定
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
var box4 = document.getElementById("box4");
var box5 = document.getElementById("box5");
box1.onclick = function(){
box.style.backgroundColor = "red";
}
box2.onclick = function(){
box.style.display = "none";
}
box3.onclick = function(){
box.style.display = "block";
}
box4.onclick = function(){
//box.style.borderRadius = "100%";
var point = 0;
var t = setInterval( function(){
box.style.borderRadius = `${point}%`;
if(point < 100){
point++;
}else{
clearInterval(t)
console.log("結(jié)束了... ")
}
} , 50)
}
/* 重點(diǎn) 添加樣式*/
box5.onclick = function(){
// box.className = "box box_new";
box.className += " box_new";
}
</script>
</body>
</html>
2.3 js事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js事件</title>
<style>
*{margin:0px;padding:0px;}
.box
{width:100px;height:100px;background: green;position: absolute;left:0px;}
</style>
</head>
<body>
<!-- 1.事件的靜態(tài)綁定 -->
<button onclick="func1()">按鈕1</button>
<div class="box"></div>
<script>
var box = document.getElementsByClassName("box")[0];
var t;
console.log(box);
function func1(){
var left = parseInt(window.getComputedStyle(box).left)
console.log(left ,typeof(left));
// console.log(box.style.left);
t = setInterval(function(){
left += 10;
box.style.left = `${left}px`;
} , 50)
}
// 2.事件的動態(tài)綁定
// onmouseover 鼠標(biāo)指針懸停在指定元素上時(shí)觸發(fā)
box.onmouseover = function(){
clearInterval(t);
}
// onmouseout 鼠標(biāo)指針離開指定元素時(shí)觸發(fā)
box.onmouseout = function(){
func1()
}
</script>
</body>
</html>
3. 模態(tài)框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模態(tài)框</title>
<style>
.box {
position:fixed;
width:100%;
height:100%;
top:0px;
background-color: greenyellow;
display: none;
}
.content
{
border:solid 1px red;
width:500px;
height:500px;
background-color:tan;
margin:auto;
margin-top:14%;
}
</style>
</head>
<body>
<button id="login">登錄</button>
<div class="box">
<div class="content" >
<span class="close">X</span>
<br />
<span>賬號: <input type="text" /></span>
<br / >
<span>密碼: <input type="password" /></span>
</div>
</div>
<script>
var btn = document.getElementById("login");
var box = document.querySelector(".box");
var close = document.querySelector(".close");
btn.onclick = function(){
console.log(11)
box.style.display = "block";
}
close.onclick = function(){
box.style.display = "none";
}
</script>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了Python模擬登入的N種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
python實(shí)現(xiàn)在列表中查找某個(gè)元素的下標(biāo)示例
這篇文章主要介紹了python實(shí)現(xiàn)在列表中查找某個(gè)元素的下標(biāo)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Django中更改默認(rèn)數(shù)據(jù)庫為mysql的方法示例
這篇文章主要介紹了Django中更改默認(rèn)數(shù)據(jù)庫為mysql的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了python按行讀取文件并找出其中指定字符串的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Python統(tǒng)計(jì)單詞出現(xiàn)的次數(shù)
最近經(jīng)理交給我一項(xiàng)任務(wù)，統(tǒng)計(jì)一個(gè)文件中每個(gè)單詞出現(xiàn)的次數(shù)，列出出現(xiàn)頻率最多的5個(gè)單詞。本文給大家?guī)砹藀ython 統(tǒng)計(jì)單詞次數(shù)的思路解析，需要的朋友參考下吧2018-04-04
Python功能點(diǎn)實(shí)現(xiàn):函數(shù)級/代碼塊級計(jì)時(shí)器
今天小編就為大家分享一篇關(guān)于Python功能點(diǎn)實(shí)現(xiàn):函數(shù)級/代碼塊級計(jì)時(shí)器，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
pyqt5中QThread在使用時(shí)出現(xiàn)重復(fù)emit的實(shí)例
今天小編就為大家分享一篇pyqt5中QThread在使用時(shí)出現(xiàn)重復(fù)emit的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-06-06
iter()是Python的內(nèi)置函數(shù),用于生成迭代器,允許逐個(gè)訪問元素,節(jié)省內(nèi)存使用,iter()可以應(yīng)用于文件對象,實(shí)現(xiàn)逐行讀取,此外,iter()還可以與自定義結(jié)束標(biāo)記結(jié)合使用,適用于處理固定塊數(shù)據(jù)讀取,相較于其他文件讀取方法,iter()方法簡單高效,適合處理大文件,減少內(nèi)存占用2024-10-10
在本篇文章中小編給大家分享了關(guān)于python占位符怎么輸入的相關(guān)知識點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2019-05-05
在Python中,有多種降維方法可以使用,本文就來介紹八種降維方法以及使用場景,具有一定的參考價(jià)值,感興趣的可以一下,感興趣的可以了解一下2023-10-10