一、jQuery介紹
1、簡介
jQuery是目前使用最廣泛的javascript函數庫。據統計,全世界排名前100萬的網站,有46%使用jQuery,遠遠超過其他庫。微軟公司甚至把jQuery作爲他們的官方庫。
之前的js代碼和HTML是寫在一起的，現在可以把js代碼獨立出來，創建一個js目錄，裏面用來放單獨的js代碼，然後在HTML的head里加入:<script type="text/javascript" src="目錄名/文件名.js"></script> pycharm裏鼠標把文件移入head中也可以實現此句話。
2、優勢
將獲取元素的語句寫到頁面頭部head,會因爲元素還沒有加載而出錯,jquery提供了ready方法解決這個問題,它的速度比原生的 window.onload 更快。
二、jQuery基本語法
選擇某個網頁元素,然後對它進行某種操作，jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功。
- 擇某個網頁元素,然後對它進行某種操作：
![在這裏插入圖片描述]()
- 選擇器修飾過濾：
![在這裏插入圖片描述]()
- 選擇器函數過濾:
![在這裏插入圖片描述]()
- 選擇器轉移：
- 同一個函數完成取值和賦值：
- jQuery屬性操作，設置html內容
![在這裏插入圖片描述]()
![在這裏插入圖片描述]()
- 設置屬性值：
![在這裏插入圖片描述]()
三、 應用案例
1、基於jquery實現Tab選項卡：
HTML文件：
<!--聲明HTML-->
<!DOCTYPE html>
<!--html文檔-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沈楚琪的web瀏覽器 </title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="css.css">
<script>
$(function () {
$('.nav li').mouseenter(function () {
$(this).addClass('current');
$(this).siblings().removeClass("current");
var index = $(this).index();
var contentli = $('.content li ').eq(index);
contentli.siblings().removeClass('show');
contentli.addClass('show')
})
})
</script>
</head>
<body>
<div class="box">
<ul class="nav">
<li class="current ">主頁</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="content">
<li class="show"><img src="1.jpg" alt=""></li>
<li><img src="2.png" alt=""></li>
<li><img src="3.png" alt=""></li>
<li><img src="4.png" alt=""></li>
</ul>
</div>
</body>
</html>
css.css樣式文件
*{
margin: 0;
padding: 0;
}
.box{
width: 450px;
height: 300px;
border: 1px solid lightgray;
margin: 50px auto;
}
.nav li {
list-style: none;
width: 110px;
height: 50px;
background-color: lightgray;
color: #2f0099;
text-align: center;
line-height: 50px;
float: left;
border: 1px solid white;
}
.nav li:hover{
background-color: darkgray;
}
.nav .current{
background-color: darkgray;
}
.content li{
list-style: none;
display: none;
}
.content .show{
display: block;
}
.content li img{
width: 450px;
height: 250px;
}
實現效果：
2、基於jqurey實現電影排行榜：
<!--聲明HTML-->
<!DOCTYPE html>
<!--html文檔-->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沈楚琪的web瀏覽器 </title>
<script type="text/javascript" src="js.js"></script>
<link rel="stylesheet" href="css.css">
<script>
$(function () {
$(' li ').mouseenter(function () {
$(this).addClass('current');
});
$('li ').mouseleave(function () {
$(this).removeClass('current');
});
})
</script>
</head>
<body>
<div class="box">
<h1>HTML語法</h1>
<ul>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
這是關於heml語法的介紹。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
這是關於heml語法的介紹。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
這是關於heml語法的介紹。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
這是關於heml語法的介紹。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
<li>
<span>1</span> HTML
<div class="content">
<img src="5.png">
<p>
這是關於heml語法的介紹。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
</p>
</div>
</li>
</ul>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
}
.box{
width: 300px;
height: 450px;
border: 1px solid gray;
margin: 50px auto;
}
.box li {
list-style: none;
padding: 10px 10px;
border: 1px dashed gray;
}
.box li span{
background-color: darkgray;
/*行內塊元素 形成盒子來指定大小*/
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
}
/*li 標籤前三個背景顏色修改*/
.box li:nth-child(-n+3) span{
background-color: dodgerblue;
}
.content img{
width: 80px;
height: 120px;
float: left;
}
.content p{
width: 180px;
height: 120px;
float: right;
font-size: 12px;
}
.content{
margin: 5px;
overflow: hidden;
display: none;
}
/*只寫.current 表示讓列表顯示出來，但是列表已經顯示出來，需要讓列表中的內容顯示，因此需要加入.content*/
.current .content {
display: block;
}
Bootstrap簡介
1、介紹
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的
優點：
- 移動設備優先：自 Bootstrap 3 起，框架包含了貫穿於整個庫的移動設備優先的樣式。
- 瀏覽器支持：所有的主流瀏覽器都支持 Bootstrap。
- 容易上手：只要您具備 HTML 和 CSS 的基礎知識，您就可以開始學習 Bootstrap。
- 響應式設計：Bootstrap 的響應式 CSS 能夠自適應於臺式機、平板電腦和手機。更多有關響應式設計的內容詳見 Bootstrap 響應式設計
- 它爲開發人員創建接口提供了一個簡潔統一的解決方案。
- 它包含了功能強大的內置組件，易於定製。
- 它還提供了基於 Web 的定製。
- 它是開源的。
包含的內容:
- 基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
- CSS：Bootstrap 自帶以下特性：全局的 CSS 設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
- 組件：Bootstrap 包含了十幾個可重用的組件，用於創建圖像、下拉菜單、導航、警告框、彈出框等等。
- JavaScript 插件：Bootstrap 包含了十幾個自定義的 jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
- 定製：您可以定製 Bootstrap 的組件、LESS 變量和 jQuery 插件來得到您自己的版本。
2、Bootstrap引入
在訪問國外的網下載時，太慢了，使用國內CDN加速服務
使用時複製link標籤添加到html中