Python學習 Day 047 - BOM & jQUery
阿新 • • 發佈：2018-11-12
主要內容:
- 1.BOM
- 2.
- 4.
1.BOM
1.1BOM介紹
JavaScript基礎分為三個部分：
-
ECMAScript：JavaScript的語法標準。包括變數、表示式、運算子、函式、if語句、for語句等。
-
DOM：文件物件模型，操作網頁上的元素的API。比如讓盒子移動、變色、輪播圖等。
-
BOM：瀏覽器物件模型，操作瀏覽器部分功能的API。比如讓瀏覽器自動滾動。
(1)什麼是BOM
BOM：Browser Object Model，瀏覽器物件模型。
BOM的結構圖:
從上圖也可以看出：
-
window物件是BOM的頂層(核心)物件，所有物件都是通過它延伸出來的，也可以稱為window的子物件。
-
DOM是BOM的一部分。
window物件：
-
window物件是JavaScript中的頂級物件。
-
全域性變數、自定義函式也是window物件的屬性和方法。
-
window物件下的屬性和方法呼叫時，可以省略window。
1.2 BOM 的常見內建方法和內建物件。
(1) 彈出系統對話方塊
alert(); //不同瀏覽器中的外觀是不一樣的 confirm(); //相容不好 prompt(); //不推薦使用
(2)開啟視窗,關閉視窗
//開啟視窗 window.open(url,target) //url:要開啟的地址, target :新視窗的位置。可以是：_blank 、_self、 _parent 父框架
(3)程式碼示例
<title>Title</title>
</head>
<body>
<button onclick="window.open('https://www.luffycity.com/')">路飛學城</button>
<button>開啟百度</button>
<button onclick="window.close()">關閉</button>
<button>關閉</button>
</body>
<script type="text/javascript">
var
1.3 location物件
(1)location物件的屬性
-
href：跳轉
-
hash 返回url中#後面的內容，包含#
-
host 主機名，包括埠
-
hostname 主機名
-
pathname url中的路徑部分
-
protocol 協議 一般是http、https
-
search 查詢字串
location.herf 屬性舉例
</head>
<div> asdlfaf</div>
<body>
<script>
var div = document.getElementsByTagName("div")[0];
div.onclick = function (){
//點選div時，跳轉到指定連結 當前網頁開啟網址
location.href = "http://www.baidu.com"
// window.open("http://www.baidu.com","_blank"); //方式二
}
</script>
</body>
5秒後自動跳轉到百度。
有時候，當我們訪問一個不存在的網頁時，會提示5秒後自動跳轉到指定頁面，此時就可以用到location。舉例：
<script> setTimeout(function () { location.href = "http://www.baidu.com"; }, 5000); </script>
(2)location 物件方法
location.reload(): 重新載入
<script> console.log(2222); // console.log(window.location); setInterval(function(){ //頁面全域性重新整理 不建議 使用 可以用它除錯 //更希望的是 區域性重新整理（ajax技術 與後端互動的核心技術） location.reload(); },2000) </script>
window.navigator 的一些屬性可以獲取客戶端的一些資訊。
-
userAgent：系統，瀏覽器)
-
platform：瀏覽器支援的系統，win/mac/linux
例子：
console.log(navigator.userAgent);
console.log(navigator.platform);
(4)history物件
1、後退：
-
history.back()
-
history.go(-1)：0是重新整理
2、前進：
-
history.forward()
-
history.go(1)
用的不多。因為瀏覽器中已經自帶了這些功能的按鈕：
1.4 client offset scroll 系列
(1)client系列
2.
(1)
jQuery是一個快速，小巧，功能豐富的JavaScript庫。它通過易於使用的API在大量瀏覽器中執行，使得HTML文件遍歷和操作，
事件處理動畫和Ajax更加簡單。通過多功能性和可擴充套件性的結合，
jQuery改變了數百萬人編寫JavaScript的方式。 jquery 中 98%的都是方法 只有兩個屬性: 索引 length
(2) 為什麼要使用jquery?
JavaScript書寫程式碼的不足
-
window.onload 事件有事件覆蓋的問題，因此只能寫一個事件。
-
程式碼容錯性差。
-
瀏覽器相容性問題。
-
書寫很繁瑣，程式碼量多。
-
程式碼很亂，各個頁面到處都是。
-
動畫效果很難實現。
(3)jQuery的下載
- https://jquery.com/ 下載對應的jQuery
- https://www.bootcdn.cn/ 通過cdn的方式引入
- https://www.npmjs.com
<div id = "box" class="box"></div> <script type="text/javascript" src="./libs/jquery-3.3.1.js"></script> <script> (function(a,b){ alert(1) })(1,2); console.log($); console.log(jQuery) </script>
(5)jQuery的入口函式
<script>
/*
//window.onload有事件覆蓋
window.onload = function () {
alert(1)
}
window.onload = function () {
alert(2)
}
*/
</script>
</head>
<body>
<script src="./libs/jquery-3.3.1.min.js"></script>
<script>
// $(document).ready(function(){
// alert(1)
// })
// ;
// $(document).ready(function(){
// alert(2)
// });
// $(window).ready(function(){
// alert(2)
// })
$(function(){
alert(1)
})
</script>
</body>
小結:
//入口函式 文件載入完成之後 會呼叫 $(document).ready(function(){ }) //等待圖片載入完成之後 才執行 $(window).ready(function(){ }) //簡便寫法 文件載入完成之後 會呼叫 $(function(){ })
3.1 基礎選擇器
<title>Title</title>
</head>
<body>
<div class = "box" id = "wrap">
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
<p class="active">alex</p>
</div>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
//jQuery的選擇器(獲取DOM物件 注意,它獲取的是jQuery物件而不是jsDOM物件)
$("div")[0].style.backgroundColor = "red";
console.log($("#wrap")); //id選擇器
console.log($(".box")); //類選擇器
console.log($("#wrap .active")); //後代選擇器
// 獲取到jQuery物件,click時間
$("#wrap .active").click(function(){
// console.log(this.innerText); //錯誤寫法因為獲取到的是jQuery物件而不是結束DOM物件
// //isdom =>jQuery物件
// console.log($(this));
console.log($(this).text()); //點選獲取jqery物件的text值
$(this).text("haha"); //將獲取當前點選的jQuery值修改
console.log($(this).text("haha"));
})
})
</script>
</body>
小結:
- 標籤選擇器 $('div')
- id選擇器$('#box')
- class選擇器
- 後代
- 子代
- 組合
- 交集
- 兄弟 + ~
3.2基本過濾器
<title>Title</title>
</head>
<body>
<ul>
<li>天龍八部</li>
<li>射鵰英雄傳</li>
<li>神鵰俠侶</li>
<li>倚天屠龍記</li>
</ul>
<input type="text">
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
//獲取值 ,eq()的使用
console.log($("li:eq(1)").css("color"));
//設定單個值或者多個值
// $("li:eq(1)").css("color","red");
//通過字典的形式給物件設定多個值
$("li:eq(1)").css({
"color":"red",
"background-color":"blue"
});
//屬性選擇器
$("input[type='text']").css({
backgroundColor:"yellow"
})
})
</script>
小結:
- eq(index) index從0開始 選取匹配的元素 - gt(index) 大於index的元素 - lt(index) 小於index的元素 - odd 奇數 - even 偶數 - first 第一個 - last 最後一個
3.3 篩選選擇器
<ul>
<li>天龍八部</li>
<li class="item">
<a href="">蕭峰</a>
</li>
<li>倚天屠龍記</li>
<li>射鵰英雄傳</li>
</ul>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
//查的是後代,
console.log($("ul").find("a"));
//查詢的是親兒子 如果指定親兒子,就在children('選擇器'),想獲取所有的親兒子 不用寫引數
console.log($("ul").children());
//查詢的是親爸
console.log($("a").parent());
//$(`li:eq(${index})`)
console.log( $('ul li').eq());
})
</script>
小結:
- find() 查詢的是後代 - children()查詢的是親兒子 - eq() 選擇匹配的元素 - siblings() 選取兄弟元素(除了自己本身) - parent() 查詢的是親爹
siblings()方法的用途
<title>Title</title>
<style>
div{
display: none;
}
div.active{
display: block;
}
</style>
</head>
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<div class="active">
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<script src="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
$("button").click(function(){
console.log($(this).css("backgroundColor","red"));
//獲取索引
let i = $(this).index()
//返回了jquery物件
//鏈式程式設計
$(this).css("backgroundColor","red").siblings("button").css("backgroundColor","#666");
$("div").eq(i).addClass("active").siblings("div").removeClass("active");
})
})
</script>
另外:升級版的選項卡
<title>Title</title>
</head>
<body>
<ul>
<li>
<a href="javascript:void(0)">1</a>
</li>
<li>
<a href="javascript:void(0)">1</a>
</li>
<li>
<a href="javascript:void(0)">1</a>
</li>
<li>
<a href="javascript:void(0)">1</a>
</li>
</ul>
<script src ="./libs/jquery-3.3.1.js"></script>
<script>
$(function(){
$("ul li").click(function(){
$(this).find("a").css("color","red").parent().siblings("li").find("a").css("color","blue");
})
})
</script>
4.