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

javascript

前端JavaScripts基础知识点

發布時間：2024/1/23 javascript 21 豆豆

生活随笔收集整理的這篇文章主要介紹了前端JavaScripts基础知识点小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1放大鏡 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰士$</title><style>.smallBox {position: relative;width: 400px;height: 250px;margin-left: 100px;margin-top: 100px;float: left;}.smallBox img {width: 400px;}.bigBox {position: relative;width: 800px;height: 500px;margin-left: 50px;margin-top: 100px;float: left;border: 1px solid #ccc ;overflow: hidden;}.move {position: absolute;left:0;top:0;width: 120px;height: 120px;background-color: rgba(234,23,56,0.4);}#bigPic {position: absolute;left: 0;top:0;}</style> </head> <body>  <div class="smallBox"><img src="images/2-small.jpg" alt="" id="smallPic"><div class="move"></div> </div> <div class="bigBox"><img src="images/2-big.jpg" alt="" id="bigPic"> </div><script>window.onload = function () {/** 1:陰影塊隨著鼠標動---》獲取鼠標位置** */console.log(document.body)var img = document.getElementsByClassName('move')[0]var bigBox = document.getElementById('bigPic')console.log(img.offsetWidth);document.function(e){}document.onmousemove = function (e) {//獲取鼠標坐標事件對象 e 保存著事件的具體信息img.style.left = e.clientX-100 -img.offsetWidth/2+'px' ;img.style.top = e.clientY-100-img.offsetHeight/2+'px';// alert(img.style.left,img.style.top)if (parseInt(img.style.left)<0){img.style.left=0}if (parseInt(img.style.left)>280){img.style.left=280+'px'}if (parseInt(img.style.top)<0){img.style.top=0}if (parseInt(img.style.top)>130){img.style.top=130+'px'}bigBox.style.left=-parseInt(img.style.left)*(480/280)+'px'bigBox.style.top=-parseInt(img.style.top)*(250/130)+'px'console.log(e.clientX,e.clientY)}}</script> </body> </html>

2樣式操作

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰士$</title><style>.smallBox {position: relative;width: 400px;height: 250px;margin-left: 100px;margin-top: 100px;float: left;}.smallBox img {width: 400px;}.bigBox {position: relative;width: 800px;height: 500px;margin-left: 50px;margin-top: 100px;float: left;border: 1px solid #ccc ;overflow: hidden;}.move {position: absolute;left:0;top:0;width: 120px;height: 120px;background-color: rgba(234,23,56,0.4);}#bigPic {position: absolute;left: 0;top:0;}</style> </head> <body>  <div class="smallBox"><img src="images/2-small.jpg" alt="" id="smallPic"><div class="move"></div> </div> <div class="bigBox"><img src="images/2-big.jpg" alt="" id="bigPic"> </div><script>window.onload = function () {/** 1:陰影塊隨著鼠標動---》獲取鼠標位置** */console.log(document.body)var img = document.getElementsByClassName('move')[0]var bigBox = document.getElementById('bigPic')console.log(img.offsetWidth);document.function(e){}document.onmousemove = function (e) {//獲取鼠標坐標事件對象 e 保存著事件的具體信息img.style.left = e.clientX-100 -img.offsetWidth/2+'px' ;img.style.top = e.clientY-100-img.offsetHeight/2+'px';// alert(img.style.left,img.style.top)if (parseInt(img.style.left)<0){img.style.left=0}if (parseInt(img.style.left)>280){img.style.left=280+'px'}if (parseInt(img.style.top)<0){img.style.top=0}if (parseInt(img.style.top)>130){img.style.top=130+'px'}bigBox.style.left=-parseInt(img.style.left)*(480/280)+'px'bigBox.style.top=-parseInt(img.style.top)*(250/130)+'px'console.log(e.clientX,e.clientY)}}</script> </body> </html>

3、省市聯動

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰士$</title> </head> <body><select name="province" id="province"><option value="0">北京</option><option value="1">河南省</option><option value="2">河北省</option><option value="3">廣東省</option> </select><select name="city" id="city">//不能提前寫好 </select> <script src="獲取元素.js"></script> <script>window.onload = function () {//1:下拉列表改變 onchange 給你要改變那個列表加 //下拉列表改變onchange給你要改變那個列表加//2:數據城市數組var str = ''; //空串var cities = [['朝陽區','海淀區','大興區'],['洛陽市','開封市','鄭州市'],['張家口市','石家莊市','保定市'],['東莞市','珠海市','深圳市'] ];my$('#province').onchange = function () {//在改變之后 str清空// onchange改變時下拉列表改變時str = '';//1:遍歷對應的市 ---文字/*得到被選中的元素檢測那個元素有selected屬性 *///seleccted選中的默認被選中selected默認被選中selectedfor(var i =0;i<this.options.length;i++){if(this.options[i].selected){var index = this.options[i].value}// options選擇期權 options選擇期權options選擇}console.log(index)for(var i = 0;i<cities.length;i++){if(i == index ){ //?var cs = cities[index]/* console.log(cities[index])*///遍歷每一個城市裝到option標簽里for(var j= 0;j<cities[index].length;j++){//拼接字符串str+="<option value="+ j+">"+ cities[index][j]+" </option>"}console.log(str)}}my$('#city').innerHTML = str;for(var i=0;i<cities.length;i++){if(i==index){var cs=cities[index]for ( var j=0;j<cities[index].length;j++){str+='<option value'}}}//2:option標簽//3:追加到name=city的下拉列表里}//初始化函數function init() {for (var i=0;i<cities[0].length;i++){var o=document.createElement('option')o.innerText=cities[0][i];my$('#city').appendChild(o)}}init(); } </script> </body> </html>

4、插入節點

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰士$</title> </head> <body> <button id="btn">刪除節點</button> <div class="fa"><span class="gege"></span><span class="last"></span> </div> <script src="獲取元素.js"></script> <script>//插入節點兄弟關系之前之后var myp = document.createElement('p')myp.innerText = '我是p元素'//起了類名myp.setAttribute('class','myp') //insertBefore(創建的節點,參考節點)my$('.fa').insertBefore(myp,my$('.last'));my$('#btn').onclick = function () {//移除元素父元素.removeChild('子元素')my$('.fa').removeChild( my$('.myp'))} </script> </body> </html>

5、節點添加操作

6、定時器

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$美少女戰士$</title> </head> <body> <script>//1:永久定時返回定時器標識整數//window.setInterval(function(){// 每隔多長時間執行的代碼// }, 1000(ms))//2: 一次性定時返回定時器標識整數/** setTimeout(function(){1s之后執行一次},1000)*** */var i =0;/* var timer1 = window.setInterval(function () {i++;console.log(i)if(i===10){//清除定時器 clearInterval(標識)clearInterval(timer1)}},1000) */var timer2 = window.setTimeout(function () {console.log('我是一次性定時器，執行一次')//clearTimeout(timer2)},2000)/* var timer2 = window.setInterval(function () {i++;console.log(i)if(i===10){//清除定時器 clearInterval(標識)}},1000)*/</script> </body> </html>

總結

以上是生活随笔為你收集整理的前端JavaScripts基础知识点的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：前端JavaScript基础知识点
下一篇：前端JavaScripts基础知识点轮播