01第一課題
壹 · JQuery的介紹
Write less,Do more
1.Jquery是目前使用最為廣泛的javascript函數庫，jquery是一個函數庫，一個js文件，頁面用script標籤引入即可，
<script type="text/javascript" src="jquery-3.4.1.js">
2.JQuery加載
將獲取元素的語句寫到頁面頭部，會因為元素還沒有加載而出錯，就要用ready來進行解決，他的速度會比原生的window.onload更快
慄子：
<script type="text/javascript">
$(document).ready(function){
..........................
}
可以簡寫為：
$(function(){
******************
})
</script>
3.jquery選擇器
jquery選擇器可以快速的選擇元素，選擇規則與css一致，使用length屬性判斷是否選擇成功
$(document)
//選擇整個文檔對象
$("li")
//選擇所有的li元素
$("#myId")
//選擇id為myId的網頁元素
$(".myClass")
//選擇class為myClass的網頁元素
$('input [name=first]')
//選擇name屬性等於first的input元素
$('#ul1 li span')
//選擇id為ul1元素下的所有li下的span元素
貳·屬性操作
1.jquery樣式操作必須和按鈕點擊觸發之後進行配合使用
$(document).ready(function{
2.//綁定click事件內部的this指的是原生對象
3.//使用jquery對象用$(this)
$("#butt").click(function(){
4.//獲取div樣式
$("#div1").css("width");
$("#div1").css("color");
5.//設置div樣式
$("div1").css("font-size","20px");
$("div1".css({"color":"yellow","background":"cyan"});
6.//操作樣式類名
//為id名為div的元素添加一個div2的樣式
$("#div1").addClass("div2");
//移除id為div1的對象的class名為div2的樣式
$("#div1").removeClass("div2");
//重複切換anotherClass的樣式
$("#div1").toggleClass("anotherClass");
<div id="div1">jackson</div>
<button id="butt">click</button>
叄·
//1.用html設置或者取出文字內容
alert($("#div1").html());
$("#div1").html("<span>flower</span>")
//2.用text設置或者獲取文字內容『
alert($("#div1").text())
$("#div1").text("<span>jackson</span>")
//3.用attr取出或者設置某個屬性的值
$("#image").attr("src");
$("#image").attr({"alt":"圖片","title":"巴斯光年"})
<img src="images/巴斯光年.jpg">
肆·jquery的特殊效果
動畫效果
1.fadeIn( )淡入舉例
$("#div1").fadeIn(1000,'swing',function(){
alert("done!");
fadeIn();//淡入
fadeOut;//淡出
fadeToggle();//切換淡入淡出
hide();//隱藏元素
toggle();//依次展示或隱藏某個元素
slideDown();//向下展開
slideUp();//向上展開
slideToggle();依次展開或者捲起某個元素
2.尺寸相關、滾動事件
1、獲取和設置元素的尺寸
width()、height() 獲取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true) 包括padding和border以及margin的width和height
2、獲取元素相對頁面的絕對位置
offse()
3、獲取可視區高度
$(window).height();
4、獲取頁面高度
$(document).height();
5、獲取頁面滾動距離
$(document).scrollTop(); $(document).scrollLeft();
6、頁面滾動事件
$(window).scroll(function(){ ...... })
伍·jquery動畫
通過animate方法可以設置元素某屬性值上的動畫，可以設置一個或多個屬性值，動畫執行完成後會執行一個函數。
$('#div1').animate({width:300, height:300},1000,swing,function(){ alert('done!');});
參數可以寫成數字表達式：
$('#div1').animate({width:'+=100', height:300},1000,swing,function(){ alert('done!');});
陸·jquery事件
1.事件函數列表：
blur() 元素失去焦點focus() 元素獲得焦點change() 表單元素的值發生變化click() 滑鼠單擊dblclick() 滑鼠雙擊mouseover() 滑鼠進入（進入子元素也觸發）mouseout() 滑鼠離開（離開子元素也觸發）mouseenter() 滑鼠進入（進入子元素不觸發）mouseleave() 滑鼠離開（離開子元素不觸發）hover() 同時為mouseenter和mouseleave事件指定處理函數mouseup() 鬆開滑鼠mousedown() 按下滑鼠mousemove() 滑鼠在元素內部移動keydown() 按下鍵盤keypress() 按下鍵盤keyup() 鬆開鍵盤load() 元素加載完畢ready() DOM加載完成resize() 瀏覽器窗口的大小發生改變scroll() 滾動條的位置發生變化select() 用戶選中文本框中的內容submit() 用戶遞交表單toggle() 根據滑鼠點擊的次數，依次運行多個函數unload() 用戶離開頁面
//綁定事件將相對應事件綁定只要滑鼠點上去的話觸發的事件是彈出文本內容
$("#div2").bind("mouseover click",function(event){
alert($(this).html());
$(this).unbind("mouseover");
<div id="div2">文化人侃時尚</div2>
2.主動觸發與自定義事件
主動觸發 可使用jquery對象上的trigger方法來觸發對象上綁定的事件。
自定義事件 除了系統事件外，可以通過bind方法自定義事件，然後用tiggle方法觸發這些事件。
//給element綁定hello事件element.bind("hello",function(){alert("hello world!");});//觸發hello事件element.trigger("hello");
微信公眾號：文化人侃時尚