回顧選擇器
基礎(chǔ)選擇器
1.元素選擇器
元素名(標簽名)
如：
? ? ? h1
? ? ? div
? ? ? a
? ? ? span
? ? ? input
? ? ? form
? ? ? option
? ? ? select
2.id選擇器
在html里面? 使用id=“cc”
使用#來查找 id選擇器
如：#cc
3.類選擇器
在HTML里面使用class設(shè)置
在CSS和JS里面 查找 使用.類選擇器的名字
如：.haha
如：<div class = "haha"></div>
后代選擇器
只要是 某個元素中的 子元素? 都可以選擇上
后代選擇器是通過空格隔開的? ? 如：.xx .title{}、div a{}、#ff .vv{}
兩個選擇器之間是有空格的
子類選擇器
只能選擇直接子元素
父元素的選擇器>子元素的選擇器
如：
.item>p
交集選擇器
div.top
都包含
p.top
并集選擇器
html,body
.top,.nav
屬性選擇器
input[type=password]
選擇器名[屬性名=屬性值]
子類第幾個元素
：first-child
：nth-child
注意分清交集和后代
DOM
1.查詢DOM元素
1.document.querySelector("選擇器")
? 查找到的是第一個元素
2.document.querySelectorAll("選擇器")
? 偽數(shù)組
3.id選擇器
document.getElementById("不需要加#");
4.通過類選擇器查找
document.getElementByClassName("div");
? 偽數(shù)組
5.通過元素名查找
document.getElementByTagName("div");
? 偽數(shù)組
2.創(chuàng)建DOM元素
document.createElement("標簽的名字")
步驟
1.創(chuàng)建dom元素
var 變量名= document.createElement("標簽的名字")；
2.放內(nèi)容
dom.innerText = "wenben"
放文本
dom.innerHTML = "<div>< img src="" ></div>"
放HTML里的字符串
dom.src="";
dom.appendChild(子元素)；
dom 不一定是父元素
3.放到父元素中
父元素.appendChild(dom);
<ul class="nav"></ul>
<script>
//在nav里面? 創(chuàng)建一個li? 里面放入? 首頁? 文字
? ? var nav = document.querySelector(".nav");
? ? var li = document.createElement("li");
? ? li.innerText = "首頁";
? ? nav.appendChild(li);
</script>
<ul class="goods"></ul>
//商品goods
? ? var goods =document.querySelector(".goods");
? ? var goodsItem = document.createElement("li");
? ? goods.appendChild(goodsItem);
創(chuàng)建日期對象
獲取當前日期
var date = new Date();
new 通過類名 創(chuàng)建對象的關(guān)鍵字
Date 日期類
通過日期類? -> 創(chuàng)建一個當前的日期對象
日期
年
月
? ? ? 得加1
日
周
? ? ? 大寫的M
時
分
? ? ? 小寫的M
秒
毫秒
? ? ? 獲取將來 過去的時間（指定時間）
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
時間戳
1970年-某個時間的? 毫秒數(shù)
時間戳 轉(zhuǎn) 日期對象
new Date(1288336112000)
var date = new Date();
date.setTime(1288336112000);
日期對象 轉(zhuǎn) 時間戳
var date = new Date();
date.getTime();
JS操作HTML
1.創(chuàng)建 HTML
document.createElement("標簽名");
如
var p = document.createElement("p");
屬性
在js也同樣可以獲取或設(shè)置屬性
如
div.style.opacity = 0.6;
var image = document.createElement("img");
image.src = "https://www.baidu.com/img/dong_f17b19f600dbf0bfc9b8bed5836f50be.gif";
< img? src="1.jpg">
注意：
創(chuàng)建完得標簽 需要放到指定 才能顯示
步驟
1.創(chuàng)建HTML標簽
var image = document.createElement("img");
2.放到某個容器
document.body.appendChild(image);
拼接dom對象
2.獲取HTML
功能
用js修改樣式
修改里面的內(nèi)容
添加事件
查詢標簽
var d = document.querySelector("選擇器")
3.刪除HTML
清空標簽/插入標簽
xx.innerHTML = ""；
4.替換HTML
1.窗口對象
window窗口包含的部分
瀏覽器可視的范圍
1.導(dǎo)航
2.歷史記錄
3.屏幕大小
4.位置
窗口對象? 是Window的實例對象
注意：
1.定義的全局變量
是定義到window對象上面的
可以通過window.xx訪問
2.在最外面定義的函數(shù)
是定義到了window對象上面
可以通過window.xx訪問
this 就表示-> window對象
尺寸
window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動條)
window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動條)
如果IE 5、6、7、8
document.documentElement.clientHeight
document.documentElement.clientWidth
事件
resize
屏幕尺寸發(fā)生改變的時候調(diào)用
load
等窗口里的資源? 加載完成的時候調(diào)用
2.Location位置定位
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 （80 或 443）
80
web頁面的默認端口
443
https
加密? 超文本傳輸協(xié)議
普通的http不需要開啟443
21
FTP
文件傳輸協(xié)議? fail
3306
mysql數(shù)據(jù)庫默認
location.protocol 返回所使用的 web 協(xié)議（http: 或 https:）
location.search 返回搜索的結(jié)果（http GET方法的參數(shù)）
頁面之間傳參
location.href
本頁的位置
指定頁面要跳轉(zhuǎn)到的位置
端口號
不管是在哪一個行業(yè)，想要熟練的掌握一門技術(shù)，學(xué)習(xí)和堅持才是真正可以走向成功的唯一捷徑。
