Javascript學習筆記,想學web前端開發

mb6138253b21b3b 2021-09-19 20:39:35 阅读数:484

javascript web 前端

[](

)7、操作元素之改變元素內容



<style> div, p { width: 300px; height: 30px; line-height: 30px; color: #fff; background-color: pink; } </style>
<body>
<button>顯示當前系統時間</button>
<div>某個時間</div>
<p>1123</p>
<script> // 當我們點擊了按鈕, div裏面的文字會發生變化 // 1. 獲取元素  var btn = document.querySelector('button'); var div = document.querySelector('div'); // 2.注册事件 btn.onclick = function() { // div.innerText = '2019-6-6'; div.innerHTML = getDate(); } function getDate() { var date = new Date(); // 我們寫一個 2019年 5月 1日 星期三 var year = date.getFullYear(); var month = date.getMonth() + 1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']; var day = date.getDay(); return '今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]; } // 我們元素可以不用添加事件 var p = document.querySelector('p'); p.innerHTML = getDate(); </script>
</body>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.

[](

)8、innerText 和 innerHTML的區別



<div></div>
<p>
我是文字
<span>123</span>
</p>
<script> // innerText 和 innerHTML的區別  // 1. innerText 不識別html標簽 非標准 去除空格和換行 var div = document.querySelector('div'); // div.innerText = '<strong>今天是:</strong> 2019'; // 2. innerHTML 識別html標簽 W3C標准 保留空格和換行的 div.innerHTML = '<strong>今天是:</strong> 2019'; // 這兩個屬性是可讀寫的 可以獲取元素裏面的內容 var p = document.querySelector('p'); console.log(p.innerText); console.log(p.innerHTML); </script>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.

[](

)9、操作元素之修改元素屬性



<style> img { width: 300px; } </style>
<button id="ldh">劉德華</button>
<button id="zxy">張學友</button> <br>
<img src="images/ldh.jpg" alt="" title="劉德華">
<script> // 修改元素屬性 src // 1. 獲取元素 var ldh = document.getElementById('ldh'); var zxy = document.getElementById('zxy'); var img = document.querySelector('img'); // 2. 注册事件 處理程序 zxy.onclick = function() { img.src = 'images/zxy.jpg'; img.title = '張學友思密達'; } ldh.onclick = function() { img.src = 'images/ldh.jpg'; img.title = '劉德華'; } </script>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.

[](

)10、分時問候並顯示不同圖片案例



<style> img { width: 300px; } </style>
</head>
<body>
<img src="images/s.gif" alt="">
<div>上午好</div>
<script> // 根據系統不同時間來判斷,所以需要用到日期內置對象 // 利用多分支語句來設置不同的圖片 // 需要一個圖片,並且根據時間修改圖片,就需要用到操作元素src屬性 // 需要一個div元素,顯示不同問候語,修改元素內容即可 // 1.獲取元素 var img = document.querySelector('img'); var div = document.querySelector('div'); // 2. 得到當前的小時數 var date = new Date(); var h = date.getHours(); // 3. 判斷小時數改變圖片和文字信息 if (h < 12) { img.src = 'images/s.gif'; div.innerHTML = '親,上午好,好好寫代碼'; } else if (h < 18) { img.src = 'images/x.gif'; div.innerHTML = '親,下午好,好好寫代碼'; } else { img.src = 'images/w.gif'; div.innerHTML = '親,晚上好,好好寫代碼'; } </script>
</body>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.

[](

)11、操作元素之錶單屬性設置



<body>
<button>按鈕</button>
<input type="text" value="輸入內容">
<script> // 1. 獲取元素 var btn = document.querySelector('button'); var input = document.querySelector('input'); // 2. 注册事件 處理程序 btn.onclick = function() { // input.innerHTML = '點擊了'; 這個是 普通盒子 比如 div 標簽裏面的內容 // 錶單裏面的值 文字內容是通過 value 來修改的 input.value = '被點擊了'; // 如果想要某個錶單被禁用 不能再點擊 disabled 我們想要這個按鈕 button禁用 // btn.disabled = true; this.disabled = true; // this 指向的是事件函數的調用者 btn } </script>
</body>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.

[](

)12、仿京東顯示隱藏密碼


●點擊眼睛按鈕,把密碼框類型改為文本框就可以看見裏面的密碼。

●一個按鈕兩個狀態,點擊一次,切換為文本框,繼續點擊一次切換為密碼框。

●算法:利用一個flag變量,來判斷flag的值,如果是1就切換為文本框,flag設置為0,如果是0就切換為密碼框,flag設置為1。


<style> .box { position: relative; width: 400px; border-bottom: 1px solid #ccc; margin: 100px auto; } .box input { width: 370px; height: 30px; border: 0; outline: none; } .box img { position: absolute; top: 2px; right: 2px; width: 24px; } </style>
</head>
<body>
<div class="box">
<label for="">
<img src="images/close.png" alt="" id="eye">
</label>
<input type="password" name="" id="pwd">
</div>
<script> // 1. 獲取元素 var eye = document.getElementById('eye'); var pwd = document.getElementById('pwd'); // 2. 注册事件 處理程序 var flag = 0; eye.onclick = function() { // 點擊一次之後, flag 一定要變化 if (flag == 0) { pwd.type = 'text'; eye.src = 'images/open.png'; flag = 1; // 賦值操作 } else { pwd.type = 'password'; eye.src = 'images/close.png'; flag = 0; } } </script>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.

[](

)13、操作元素之修改樣式屬性



<style> div { width: 200px; height: 200px; background-color: pink; } </style>
</head>
<body>
<div></div>
<script> // 1. 獲取元素 var div = document.querySelector('div'); // 2. 注册事件 處理程序 div.onclick = function() { // div.style裏面的屬性 采取駝峰命名法  this.style.backgroundColor = 'purple'; this.style.width = '250px'; } </script>
</body>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.

[](

)14、關閉二維碼案例



<style> .box { position: relative; width: 74px; height: 88px; border: 1px solid #ccc; margin: 100px auto; font-size: 12px; text-align: center; color: #f40; /* display: block; */ } .box img { width: 60px; margin-top: 5px; } .close-btn { position: absolute; top: -1px; left: -16px; width: 14px; height: 14px; border: 1px solid #ccc; line-height: 14px; font-family: Arial, Helvetica, sans-serif; cursor: pointer; } </style>
</head>
<body>
<div class="box">
淘寶二維碼
<img src="images/tao.png" alt="">
<i class="close-btn">×</i>
</div>
<script> // 1. 獲取元素  var btn = document.querySelector('.close-btn'); var box = document.querySelector('header'); // 2.注册事件 程序處理 btn.onclick = function() { box.style.display = 'none'; } </script>
</body>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.

[](

)15、循環精靈圖


Javascript學習筆記,想學web前端開發_程序員


<style> * { margin: 0; padding: 0; } li { list-style-type: none; } .box { width: 250px; margin: 100px auto; } .box li { float: left; width: 24px; height: 24px; background-color: pink; margin: 15px; background: url(images/sprite.png) no-repeat; } </style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script> // 1. 獲取元素 所有的小li  var lis = document.querySelectorAll('li'); for (var i = 0; i < lis.length; i++) { // 讓索引號 乘以 44 就是每個li 的背景y坐標 index就是我們的y坐標 var index = i * 44; lis[i].style.backgroundPosition = '0 -' + index + 'px'; } </script>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.

[](

)16、顯示隱藏文本框內容



<style> input { color: #999; } </style>
</head>
<body>
<input type="text" value="手機">
<script>
// 1.獲取元素
### ajax
1)ajax請求的原理/ 手寫一個ajax請求?
2)readyState?
3)ajax异步與同步的區別?
4)ajax傳遞中文用什麼方法?
![Javascript學習筆記,想學web前端開發_前端_02](https://s7.51cto.com/images/20210919/1632054626860850.jpg)
![Javascript學習筆記,想學web前端開發_Web_03](https://s6.51cto.com/images/20210919/1632054626990082.jpg)
**[CodeChina開源項目:【大廠前端面試題解析+核心總結學習筆記+真實項目實戰+最新講解視頻】](https://ali1024.coding.net/public/P7/Web/git)**
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
版权声明:本文为[mb6138253b21b3b]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210919203935306r.html