在JS中,瀏覽器已經為我們提供了document對象
document對象代表整個網頁,該對象由瀏覽器提供,可以直接使用
<body>
<button id="btn">我是一個按鈕</button>
<script>
// 在JS中,瀏覽器已經為我們提供了document對象
// document對象代表整個網頁,該對象由瀏覽器提供,可以直接使用
// getElementById()是document的方法,通過方法可以根據元素的id屬性獲取一個元素
var btn=document.getElementById('btn');
// 修改btn的innerHTML屬性
btn.innerHTML="I'm Button";
// alert(btn.innerHTML);
// alert(btn);
// 通過JS來修改button中的文字
</script>
</body>
JS中,可以將對象分為“內部對象”、“宿主對象”和“自定義對象”三種。
1,內部對象
js中的內部對象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類對象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。
其中Global和Math這兩個對象又被稱為“內置對象”,這兩個對象在腳本程序初始化時被創建,不必實例化這兩個對象。
2.宿主對象
宿主對象就是執行JS腳本的環境提供的對象。對于嵌入到網頁中的JS來說,其宿主對象就是瀏覽器提供的對象,所以又稱為瀏覽器對象,如IE、Firefox等瀏覽器提供的對象。不同的瀏覽器提供的宿主對象可能不同,即使提供的對象相同,其實現方式也大相徑庭!這會帶來瀏覽器兼容問題,增加開發難度。
瀏覽器對象有很多,如Window和Document,Element,form,image,等等。
3.自定義對象
顧名思義,就是開發人員自己定義的對象。JS允許使用自定義對象,使JS應用及功能得到擴充
事件(event)
- 事件指用戶和瀏覽器的交互瞬間
- 在網頁中,像點擊鼠標、縮放窗口、點擊鍵盤、移動鼠標...
- 可以在事件時來對事件做一些處理,對其進行響應
<body>
<!-- 設置事件響應的方式一:
- 可以通過在元素的事件屬性中設置js代碼的形式來響應事件
https://developer.mozilla.org/zh-CN/docs/Web/Events -->
<!--<button id="btn" onmouseenter="alert('你點我干嘛!');">點我一下</button>-->
<button id="btn">點我一下</button>
<script>
/*設置事件響應的方式二:
- 可以在script標簽來設置事件的響應*/
// 獲取要設置事件的對象
var btn=document.getElementById('btn');
// 可以為元素對應的事件屬性設置響應函數形式來處理事件
btn.onclick=function () {
alert('哈哈哈');
};
</script>
</body>
網頁的加載是按照自上向下的順序一行一行加載的
Window.onload 函數只能綁定一個!
如果將script標簽寫在網頁的上方,它會優先于body加載
編寫DOM相關的代碼時,有兩個編寫位置:
1.編寫在body標簽的最后
2.編寫在window.onload=function(){}的響應函數中
// 希望還是將代碼寫在網頁上邊
// 希望這些代碼,可以在網頁加載完畢之后在執行
// load事件表示資源加載,當資源加載完畢后事件會觸發
window.onload=function () {
// window的load事件,會在網頁加載完畢后觸發
// 可以將希望在網頁加載完才執行的代碼,統一設置在load事件的響應函數中
// 這樣即可確保代碼在網頁加載完成后才執行
//獲取id為btn的元素
var btn=document.getElementById('btn');
//為btn綁定單擊響應函數
btn.onclick=function () {
alert('哈哈哈哈');
};
};
<script>
//定義一個函數,用來解決綁定代碼重復的問題
/*
參數:
id 要綁定單擊事件的按鈕的id
callback 事件的響應函數
*/
function myClick(id, callback){
var btn=document.getElementById(id);
btn.onclick=callback;
}
window.onload=function () {
//為id為btn01的按鈕綁定一個單擊響應函數
//獲取按鈕對象
var btn01=document.getElementById('btn01');
// 為其綁定單擊響應函數
btn01.onclick=function () {
// getElementById()用來根據id屬性來獲取一個元素
// 查找#bj節點
var bj=document.getElementById('bj');
// innerHTML 可以用來查看和設置元素內部的html代碼
alert(bj.innerHTML);
};
// 為btn02綁定一個單擊響應函數
var btn02=document.getElementById('btn02');
btn02.onclick=function () {
// 查找所有li節點
// getElementsByTagName() 用于根據標簽名來獲取一組元素節點對象
// 返回是一個類數組對象,所有符合條件的元素都會一起返回
var lis=document.getElementsByTagName('li');
// 遍歷數組
for(var i=0; i<lis.length; i++){
alert(lis[i].innerHTML);
}
};
//為id為btn03的按鈕綁定一個單擊響應函數
var btn03=document.getElementById('btn03');
btn03.onclick=function () {
// 查找name=gender的所有節點
// getElementsByName() 根據元素的name屬性來獲取一組元素節點對象
var inps=document.getElementsByName('gender');
// 遍歷inps
for(var i=0; i<inps.length; i++){
// 獲取自結束標簽的innerHTML,會返回空串
// alert(inps[i].innerHTML);
/*
讀取一個元素的屬性:
元素.屬性名
例子:
name屬性 元素.name
value屬性 元素.value
id屬性 元素.id
特殊:
class屬性 元素.className
修改屬性:
元素.屬性名=屬性值
*/
// alert(inps[i].className);
alert(inps[i].value);
}
};
//為btn04綁定一個單級響應函數
var btn04=document.getElementById('btn04');
btn04.onclick=function () {
// 獲取id為city的節點
var city=document.getElementById('city');
// 查找#city下所有li節點
var li=city.getElementsByTagName('li');
// li=document.querySelectorAll('#city li');
alert(li.length);
};
// 為btn05綁定一個單擊響應函數
var btn05=document.getElementById('btn05');
btn05.onclick=function () {
// 獲取id為city的元素
var city=document.getElementById('city');
// 返回#city的所有子節點
// childNodes 是元素的屬性,可以用來獲取當前元素的所有子節點
// childNodes會返回當前元素的所有子節點(包括元素和文本)
// IE8以下的瀏覽器不會將空白的文本節點當成子節點
var cns=city.childNodes;
//遍歷cns
// for(var i=0; i<cns.length; i++){
// alert(cns[i]);
// }
// alert(cns.length);
/*
children 是元素的屬性,用來獲取當前元素的子元素
*/
var cr=city.children;
alert(cr.length);
};
// 為id為btn06的按鈕綁定一個單擊響應函數
myClick('btn06', function () {
// 獲取id為phone的元素
var phone=document.getElementById('phone');
// 返回#phone的第一個子節點
// firstChild用于獲取元素的第一個子節點(包括空白的文本節點)
// lastChild 用于獲取當前元素的最后一個子節點
// firstElementChild 用來獲取當前元素的第一個子元素
// lastElementChild 用來獲取當前元素的最后一個子元素
var fc=phone.firstChild;
var fec=phone.firstElementChild;
alert(fec);
});
myClick('btn07',function () {
//獲取id為北京元素
var bj=document.getElementById('bj');
// 返回#bj的父節點
// parentNode 用來獲取一個元素的父節點
var pn=bj.parentNode;
// innerText用來獲取標簽內部的文本內容,會自動去除html標簽
alert(pn.innerText);
});
myClick('btn08',function () {
// 獲取id為android的元素
var and=document.getElementById('android');
// 返回#android的前一個兄弟節點
// previousSibling 用來獲取當前元素的前一個兄弟節點
// previousElementSibling 用來獲取當前元素的前一個兄弟元素
// nextSibling 獲取當前元素的下一個兄弟節點
// nextElementSibling 獲取當前元素的下一個兄弟元素
var prev=and.previousSibling;
prev=and.previousElementSibling;
// and.nextElementSibling
alert(prev);
});
// 返回#username的value屬性值
myClick('btn09',function () {
// 獲取id為username的元素
var um=document.getElementById('username');
alert(um.value);
});
// 設置#username的value屬性值
myClick('btn10',function () {
var um=document.getElementById('username');
um.value="老弟可真帥啊!";
});
// 返回#bj的文本值
myClick('btn11',function () {
// 獲取id為bj的元素
var bj=document.getElementById('bj');
// alert(bj.innerHTML);
// alert(bj.innerText);
// bj.innerHTML='深圳';
// 獲取bj的第一個子節點
// var fc=bj.firstChild;
// 文本節點的nodeValue,表示的是文本節點中的文字
// alert(fc.nodeValue);
alert(bj.firstChild.nodeValue);
});
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜歡哪個城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>東京</li>
<li>首爾</li>
</ul>
<br>
<br>
<p>
你喜歡哪款單機游戲?
</p>
<ul id="game">
<li id="rl">紅警</li>
<li>實況</li>
<li>極品飛車</li>
<li>魔獸</li>
</ul>
<br />
<br />
<p>
你手機的操作系統是?
</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="haha" type="radio" name="gender" value="male" >
Male
<input class="haha" type="radio" name="gender" value="female">
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde">
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj節點</button></div>
<div><button id="btn02">查找所有li節點</button></div>
<div><button id="btn03">查找name=gender的所有節點</button></div>
<div><button id="btn04">查找#city下所有li節點</button></div>
<div><button id="btn05">返回#city的所有子節點</button></div>
<div><button id="btn06">返回#phone的第一個子節點</button></div>
<div><button id="btn07">返回#bj的父節點</button></div>
<div><button id="btn08">返回#android的前一個兄弟節點</button></div>
<div><button id="btn09">返回#username的value屬性值</button></div>
<div><button id="btn10">設置#username的value屬性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
<style>
#outer{
width: 520px;
background-color: #bfa;
margin: 50px auto;
text-align: center;
}
img{
vertical-align: bottom;
margin: 10px;
}
</style>
<script>
window.onload=function () {
// 點擊按鈕切換圖片,點擊上一張切換到上一張,點擊下一張切換到下一張
// 獲取圖片標簽
var img=document.getElementsByTagName('img')[0];
// 切換圖片實際上就是修改img的src屬性
// img.src="img/3.jpg";
// 創建一個數組,用來存儲圖片的路徑
var imgPath=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
//創建一個變量用來存儲當前顯示的圖片的索引
var current=0;
// 設置圖片的信息
var info=document.getElementById('info');
info.innerHTML='一共 '+imgPath.length+' 張圖片,當前第 '+(current+1)+' 張';
//為兩個按鈕綁定單擊響應函數
var prev=document.getElementById('prev');
var next=document.getElementById('next');
// 如何做到在五張圖片之間切換?
prev.onclick=function () {
// 上一張
// 索引自減
current--;
//判斷current是否小于0
if(current < 0){
current=imgPath.length - 1;
}
// 修改img的src來切換圖片
img.src=imgPath[current];
// 圖片切換完畢,修改信息
info.innerHTML='一共 '+imgPath.length+' 張圖片,當前第 '+(current+1)+' 張';
};
next.onclick=function () {
// 下一張
// 索引自增
current++;
//判斷current是否大于4
if(current > imgPath.length - 1){
current=0;
}
img.src=imgPath[current];
info.innerHTML='一共 '+imgPath.length+' 張圖片,當前第 '+(current+1)+' 張';
};
};
</script>
</head>
<body>
<div id="outer">
<p id="info">一共 5 張圖片,當前第 1 張</p>
<img src="img/1.jpg" alt="冰棍">
<button id="prev">上一張</button>
<button id="next">下一張</button>
</div>
</body>
getElementsByName()它返回的是一個實時更新的數組 所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加
querySelector()- 可以根據選擇器的字符串去頁面中查詢元素
- 會返回滿足選擇器的第一個元素
querySelectorAll() //兩種都是靜態獲取
- 根據選擇器獲取一組元素節點對象
<script>
//getElementsByName()它返回的是一個實時更新的數組 所有的getElementsXxx的方法都是這個特點==頁面代碼加載完成后才更新添加
// 如果在網頁中添加新的符合條件的元素,它會自動被添加到數組中
window.onload=function () {
// getElementsByClassName() 用于根據元素的class屬性值來獲取一組元素節點對象
var box1=document.getElementsByClassName('box1');
// alert(box1.length);
// for(var i=0; i<box1.length; i++){
// box1[i].innerHTML='哈哈哈哈哈哈';
// }
/*
querySelector()- 可以根據選擇器的字符串去頁面中查詢元素
- 會返回滿足選擇器的第一個元素
querySelectorAll() //兩種都是靜態獲取
- 根據選擇器獲取一組元素節點對象
*/
var result=document.querySelector('.box1');
result=document.querySelectorAll('.box1');
result=document.querySelector('[class=box1]');
result=document.querySelector('div');
result=document.querySelector('div:nth-child(2)');
// alert(result.innerHTML);
/*
document.all 是一個過時的屬性
它表示頁面中的所有元素
可以使用 document.getElementsByTagName('*') 來代替
document.body 獲取頁面中的body元素
document.documentElement 獲取頁面的根元素html
*/
// alert(document.all.length);
// var all=document.getElementsByTagName('*');
// alert(all.length);
// alert(document.body);
// alert(document.getElementsByTagName('body')[0]);
alert(document.documentElement);
};
</script>
</head>
<body>
<div class="box1">1</div>
<div class="box1">2</div>
<div class="box1">3</div>
<div class="box1">4</div>
</body>
歡迎關注我的原創文章:小伙伴們!我是一名熱衷于前端開發的作者,致力于分享我的知識和經驗,幫助其他學習前端的小伙伴們。在我的文章中,你將會找到大量關于前端開發的精彩內容。
學習前端技術是現代互聯網時代中非常重要的一項技能。無論你是想成為一名專業的前端工程師,還是僅僅對前端開發感興趣,我的文章將能為你提供寶貴的指導和知識。
在我的文章中,你將會學到如何使用HTML、CSS和JavaScript創建精美的網頁。我將深入講解每個語言的基礎知識,并提供一些實用技巧和最佳實踐。無論你是初學者還是有一定經驗的開發者,我的文章都能夠滿足你的學習需求。
此外,我還會分享一些關于前端開發的最新動態和行業趨勢。互聯網技術在不斷發展,新的框架和工具層出不窮。通過我的文章,你將會了解到最新的前端技術趨勢,并了解如何應對這些變化。
我深知學習前端不易,因此我將盡力以簡潔明了的方式解釋復雜的概念,并提供一些易于理解的實例和案例。我希望我的文章能夠幫助你更快地理解前端開發,并提升你的技能。
如果你想了解更多關于前端開發的內容,不妨關注我的原創文章。我會不定期更新,為你帶來最新的前端技術和知識。感謝你的關注和支持,我們一起探討交流技術共同進步,期待與你一同探索前端開發的奇妙世界!
#2023年度創作挑戰#
錯,是我,你沒有走錯片場,從今天開始,打算在自己公眾號里寫一些自己學習HTML、CSS、JS過程中的一些心得和代碼。
今天算是第一天吧,是照著別人的視頻一邊抄一邊寫的。時間有點倉促,沒來得及做注釋。雖然代碼各種不規范,但是好歹運行成功了(封面圖和下圖為證)。以此紀念吧!
<!DOCTYPE html>
<html>
<head>
<title>2018年11月8日</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
@font-face{
font-family: "qingshu";
src:url("MFQingShu_Noncommercial-Regular.ttf");//本地字體
}
#pp{
font-family: "qingshu";
margin: 0;
padding:0;
width: 600px;
height: 600px;
background: orange;
line-height: 600px;
font-size: 100px;
text-align: center;
text-shadow: 5px 5px blue;
transform: scale(0.5) translate(200px,50px);
transform: scale(0.5) rotate(180deg);
box-shadow: 10px;
}
h3{
margin-left: 200px;
}
</style>
<script type="text/javascript">
window.onload=function Time(){
var time=new Date;
var hour=time.getHours();
var min=time.getMinutes();
var sec=time.getSeconds();
document.getElementById("pp").innerHTML="時間:"+hour+":"+min+":"+sec;
setTimeout(window.onload,1000)
}
</script>
</head>
<body>
<h3>
2018年11月8日練習
</h3>
<p id="pp"></p>
</body>
</html>
最后,希望看完的各位,不要取關。。。
為了開原創,加上了,昨晚上寫的廢話。。。
人也許只有選對了路,才會覺得努力不會白費。即便路上掙扎和苦悶,但是,你做的事情如果真的是自己想做的事情,這些困難都不事兒。
一直覺得,人最可怕的莫過于自己都不知道自己喜歡啥。。。
追逐夢想并不是最累的,尋找到真正屬于自己的道路才是最辛苦的。因為期間,你將經歷無數次選擇以及伴隨而來的內心的情緒起伏和失望。
發現自己很多時候,內心對很多人很多事都是充滿敬畏感的。但是自己的外在表現卻又是對大多人和事不屑一顧。。。這也許就是傳說中的心口不一吧!
也許你覺得領導交代給你的工作,是信任你,幫你提高個人能力,或者說是給你鍛煉和學習的機會。
然而,事實并不是這樣的。領導只是面對要解決的問題,只是在尋找合適去做這件事情或者其他人不愿意做的人。至于領導口中的鍛煉和學習,只是嘴里的漂亮話而已。
還有,領導總喜歡拿一些非常基礎的工作來測試你的工作態度。
這個做法尤其喜歡用在新來的員工身上,這些工作還要求新來的不能投機取巧,要用最笨方法去做,名曰磨練和考驗。
這些做法看似沒啥問題,可是人做很多事都會有慣性。這些“新來的”也許半年后還在做這些基礎工作。
而對于一些比較牛的技術人員,對于這些工作,大多數會選擇拒絕,他們可以找到更高層級的工作,而不是每天被這些瑣事所累!
對于這些人,他們甚至直接出錢把這些瑣事交給閑人去做。
這種境界,也只有到了這個高度的人才能體會到。
然而,如今的一些小公司,大多數領導和員工的能力都不強,于是只能交代給你最基礎的工作,工資當然也是最基礎的。
對于這些瑣事,你也并不愛做,但卻不得不做。因為你已經會做而且已經做的爛熟于心了。
而尋找其本質,你只不過是幫領導干活的一個勞動工具而已。談那么多的理想,都是扯淡。
最近覺得,自己的狀態一直是被公司的工作所綁架了,其中包括時間和精力。
我這人吧,心不狠,又不會拒絕別人。自己的工作也可能會因為時間有限或者業務不精干的一塌糊涂。所以,我這人一直活得太累。
人能活在這個世界上,都不容易。每個人都是在辛苦的過著日子。也許你擅長人際關系,你去搞銷售,搞管理。
你擅長做事情或者琢磨東西,那就去做技術或者研發。
那些看似被你成為成長的工作大部分是在利用和浪費你的時間而已,因為,你真的不一定能從中學到東西。你也無法面面俱到,全都做好。
所以,我覺得人這一輩子,還是找到自己擅長的事情,并把它變成自己喜歡去做也愿意做好的事情。
總之,面對自己完全不感興趣的工作,給自己的生活和心靈留點時間和空間吧!進而尋找到自己的一技之長,這樣才能在社會中立足。
最后,路終歸是自己走的,開心與否,只有自己知道,與他人無關。。。
2018年11月9日 00:15
HTML DOM 允許 JavaScript 改變 HTML 元素的內容。
改變 HTML 輸出流
JavaScript 能夠創建動態的 HTML 內容:
今天的日期是: Thu Aug 25 2016 09:23:24 GMT+0800 (中國標準時間)
在 JavaScript 中,document.write() 可用于直接向 HTML 輸出流寫內容。
實例
<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
絕對不要在文檔加載完成之后使用 document.write()。這會覆蓋該文檔。 |
改變 HTML 內容
修改 HTML 內容的最簡單的方法時使用 innerHTML 屬性。
如需改變 HTML 元素的內容,請使用這個語法:
document.getElementById(id).innerHTML=新的 HTML
本例改變了 <p>元素的內容:
實例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
</body>
</html>
本例改變了 <h1> 元素的內容:
實例
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新標題";
</script>
</body>
</html>
實例講解:
上面的 HTML 文檔含有 id="header" 的 <h1> 元素
我們使用 HTML DOM 來獲得 id="header" 的元素
JavaScript 更改此元素的內容 (innerHTML)
改變 HTML 屬性
如需改變 HTML 元素的屬性,請使用這個語法:
document.getElementById(id).attribute=新屬性值
本例改變了 <img> 元素的 src 屬性:
實例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
實例講解:
上面的 HTML 文檔含有 id="image" 的 <img> 元素
我們使用 HTML DOM 來獲得 id="image" 的元素
JavaScript 更改此元素的屬性(把 "smiley.gif" 改為 "landscape.jpg")
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。