前端修煉——jQuery入門！
阿新 • • 發佈：2018-12-11
內容概述： 全域性變數和區域性變數， jQuery 介紹 獲取標籤 jQuery 操作樣式 點選事、this 關鍵字 動畫 animate
全域性變數和區域性變數
全域性變數
定義在函式外面
作用範圍：是全域性的
區域性變數
定義在函式裡面
作用的範圍是區域性，函式內部
可以在函式中直接修改全域性變數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" jquery 介紹
jQuery是目前使用最廣泛的javascript函式庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。
jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列相容低版本的瀏覽器，2.x、3.x系列放棄支援低版本瀏覽器，目前使用最多的是1.x系列的。
jquery是一個函式庫，一個js檔案，頁面用script標籤引入這個js檔案就可以使用。
使用：
<script src=“js/jquery-1.12.4.min.js”></script>
$(function(){程式碼功能})
jquery的口號和願望 Write Less, Do More（寫得少，做得多）
獲取標籤
jquery 選擇器：
jquery 選擇器可以快速地選擇元素，選擇規則和 css 樣式相同，使用length 屬性判斷是否選擇成功。
找標籤
$(“#id”) 通過 id 名找元素
$(“.類名”) 通過類名找元素
$(“ 標籤名”) 通過標籤名找元素
$(“div p”) 通過標籤名層級找元素
過濾
$(‘div’).has(‘span’); // 選擇包含span元素的div元素
$(‘div’).not(’.box’); // 選擇class不是 .box的div元素
$(‘li’).eq(2); // 選擇li標籤的第2個元素
轉移
prev() 當前元素的上一個
prevAll() 當前元素的上面所有的
next() 當前元素的下一個
nextAll() 當前元素的下面所有
parent() 當前元素的父元素
children() 當前元素的所有子元素
siblings() 當前元素的所有同級元素
find() 通過指定條件找當前元素的某一個子元素
判斷是否選擇到了元素
jquery有容錯機制，即使沒有找到元素，也不會出錯，可以用length屬性來判斷是否找到了元素,length等於0，就是沒選擇到元素，length大於0，就是選擇到了元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>,
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
var $div2 = $('.box');
var $li = $('li');
var $span = $('.box span')
var $div3 = $('div[class="box2"]');
var $div4 = $('div').has('span'); // 選擇包含span元素的div元素
var $div5 = $('div').not('.box'); // 選擇class不是 .box的div元素
var $li2 = $('li').eq(2); // 選擇li標籤的第2個元素
$div.css({'color':'red','font-size':30});
$div2.css({'color':'green','fontSize':'30px'});
$li.css({'background':'gold'});
$span.css({'color':'#666','font-size':50});
$div3.css({'color':'#aaa','font-size':20});
$div4.css({'text-indent':50});
$div5.css({'text-decoration':'underline'});
$li2.css({'list-style':'none'})
})
</script>
</head>
<body>
<div id="div1">這是第一個div</div>
<div class="box">這是第二個<span>div</span></div>
<div class="box">這是第三個div</div>
<div class="box2">這是第四個div</div>
<ul>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
$div.prev().css({'color':'red'}); // 選擇 id 前面緊挨的一個元素
$div.prevAll().css({'text-indent':40}); // 選擇id前面的所有元素
$div.next().css({'color':'blue'}); // 選擇id後面緊挨的一個元素
$div.nextAll().css({'text-decoration':'underline'}); // 選擇id後面所有的元素
$div.parent().css({'background':"#ccc"}); // 選擇id的父元素
$div.children().css({'color':'red','font-size':40}); // 選擇id的子元素
$div.siblings().css({'background':'gold'}); // 除選擇id外的所有元素
$div.find('.sp02').css({'font-weight':'bold'}); // 通過類找選擇id中的某一個子元素
})
</script>
</head>
<body>
<div>
<h2>這是一個 h2 標題</h2>
<p>這是一個段落</p>
<div id="div1">這是一個<span>div</span><span class="sp02">span02</span></div>
<h3>這是一個h3標題</h3>
<p>這個第二個段落</p>
</div>
</body>
</html>
jquery 操作樣式
行內style
css()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $div = $('#div1');
// 讀取樣式屬性
var sSize = $div.css('font-size');
// console.log(sSize); 16px
// 原生方法設定文字大小, 原生需要在標籤中宣告這個樣式屬性才可以獲取到
var sSize2 = document.getElementById('div1').style.fontSize;
// console.log(sSize2 );
// 寫樣式屬性，也叫做設定或修改樣式屬性
$div.css('color',"red");
$div.css({'font-size':30,'background':'#666'});
// 獲取多個元素的屬性值，得到的是第一個元素的屬性值
var $div2 = $('div');
var sSize3 = $div2.css('font-size');
console.log(sSize3);
})
</script>
</head>
<body>
<div id="div1">這是一個div</div>
</body>
</html>
類選擇器
addClass() 追加樣式
removeClass() 刪除樣式
toggleClass() 重複切換樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.big {
font-size: 30px;
}
.red {
color:red;
}
.noline {
text-decoration: none;
}
</style>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $a = $('#link01');
// 增加樣式類名
$a.addClass('big');
$a.addClass('red');
$a.addClass('noline');
// 刪除樣式類名
$a.removeClass('big');
$a.removeClass('red noline');
})
</script>
</head>
<body>
<a href="#" id="link01">這是一個連結</a>
</body>
</html>
點選事件，this 關鍵字
click() 點選事件
$(this) 當前點選的事件 this是原生js，
index() 獲取元素的索引
mouseover() 滑鼠移入
mouseout() 滑鼠移除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery-1.12.4.min.js"></script>
<script>
$(function(){
var $li = $('.list li');
var $p = $('p');
// 繫結 click 事件
$li.click(function(){
// this 指的是當前發生點選事件的那個物件，它是原生物件
// this.style.background = 'gold';
// $(this) 指的是當前發生點選事件的那個物件，它是 jquery 物件
$(this).css({'background':'red'});
// 獲取元素的索引值
console.log( $(this).index() );
})
$p.click(function(){
console.log($(this).index());
})
})
</script>
</head>
<body>
<ul class="list">
<li>列表文字</li>
<li>列表文字</li>
<li>列表文字