回顧選擇器
基礎(chǔ)選擇器
? 1.元素選擇器
? 元素名(標(biāo)簽名)
? ? 如:
? ? 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>
后代選擇器
? 只要是 某個(gè)元素中的 子元素? 都可以選擇上
? 后代選擇器是通過空格隔開的? ? 如:.xx .title{}靖秩、div a{}翻翩、#ff .vv{}
? 兩個(gè)選擇器之間是有空格的
子類選擇器
? 只能選擇直接子元素
? 父元素的選擇器>子元素的選擇器
? ? 如:
? ? .item>p
交集選擇器
? div.top
? 都包含
? p.top
并集選擇器
? html,body
? .top,.nav
屬性選擇器
? input[type=password]
? 選擇器名[屬性名=屬性值]
子類第幾個(gè)元素
? :first-child
? :nth-child
注意分清交集和后代
1.查詢DOM元素
1.document.querySelector("選擇器")
? 查找到的是第一個(gè)元素
2.document.querySelectorAll("選擇器")
? 偽數(shù)組
3.id選擇器 document.getElementById("不需要加#");
4.通過類選擇器查找document.getElementByClassName("div");
? 偽數(shù)組
5.通過元素名查找document.getElementByTagName("div");
? 偽數(shù)組
2.創(chuàng)建DOM元素
document.createElement("標(biāo)簽的名字")
步驟
? 1.創(chuàng)建dom元素
? var 變量名= document.createElement("標(biāo)簽的名字")驱还;
? 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)建一個(gè)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)建日期對(duì)象
獲取當(dāng)前日期
? var date = new Date();
new 通過類名 創(chuàng)建對(duì)象的關(guān)鍵字
Date 日期類
通過日期類? -> 創(chuàng)建一個(gè)當(dāng)前的日期對(duì)象
? 日期
? 年
? 月
? ? 得加1
? 日
? 周
? ? 大寫的M
? 時(shí)
? 分
? ? 小寫的M
? 秒
? 毫秒
獲取將來 過去的時(shí)間(指定時(shí)間)
? new Date(1288336112000)
? var date = new Date();
date.set
Time(1288336112000);
時(shí)間戳
1970年-某個(gè)時(shí)間的? 毫秒數(shù)
時(shí)間戳 轉(zhuǎn) 日期對(duì)象
? new Date(1288336112000)
? var date = new Date();
date.setTime(1288336112000);
日期對(duì)象 轉(zhuǎn) 時(shí)間戳
? var date = new Date();
date.getTime();
JS操作HTML
1.創(chuàng)建 HTML
? document.createElement("標(biāo)簽名");
? 如
? 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)建完得標(biāo)簽 需要放到指定 才能顯示
? ? 步驟
? ? 1.創(chuàng)建HTML標(biāo)簽
? ? ? var image = document.createElement("img");
? ? 2.放到某個(gè)容器
? ? ? document.body.appendChild(image);
? ? ? 拼接dom對(duì)象
2.獲取HTML
? 功能
? 用js修改樣式
? 修改里面的內(nèi)容
? 添加事件
? 查詢標(biāo)簽
? var d = document.querySelector("選擇器")
3.刪除HTML
? 清空標(biāo)簽/插入標(biāo)簽
? xx.innerHTML = ""型奥;
4.替換HTML
1.窗口對(duì)象
window窗口包含的部分
? 瀏覽器可視的范圍
? 1.導(dǎo)航
? 2.歷史記錄
? 3.屏幕大小
? 4.位置
窗口對(duì)象? 是Window的實(shí)例對(duì)象
注意:
? 1.定義的全局變量
? 是定義到window對(duì)象上面的
? ? 可以通過window.xx訪問
? 2.在最外面定義的函數(shù)
? 是定義到了window對(duì)象上面
? ? 可以通過window.xx訪問
? ? this 就表示-> window對(duì)象
尺寸
? window.innerHeight - 瀏覽器窗口的內(nèi)部高度(包括滾動(dòng)條)
? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度(包括滾動(dòng)條)
? 如果IE 5、6击奶、7渔呵、8
? document.documentElement.clientHeight
? document.documentElement.clientWidth
事件
? resize
? 屏幕尺寸發(fā)生改變的時(shí)候調(diào)用
? load
? 等窗口里的資源? 加載完成的時(shí)候調(diào)用
2.Location位置定位
location.hostname 返回 web 主機(jī)的域名
location.pathname 返回當(dāng)前頁面的路徑和文件名
location.port 返回 web 主機(jī)的端口 (80 或 443)
? 80
? web頁面的默認(rèn)端口
? 443
? https
? ? 加密? 超文本傳輸協(xié)議
? ? 普通的http不需要開啟443
? 21
? FTP
? ? 文件傳輸協(xié)議? fail
? 3306
? mysql數(shù)據(jù)庫默認(rèn)
location.protocol 返回所使用的 web 協(xié)議(http: 或 https:)
location.search 返回搜索的結(jié)果(http GET方法的參數(shù))
? 頁面之間傳參
location.href
? 本頁的位置
? 指定頁面要跳轉(zhuǎn)到的位置
端口號(hào)