- Jquery框架
Jquery 是 JavaScript框架.
Jquery功能:HTML標籤選取，標籤操作，CSS操作，事件操作，動畫設置，
DOM操作.ajax等
Jquery是輕量級,核心思想:”寫得少，做得多”
- jQuery的語法
$:表示jquery框架的標識符
$(選擇器或標籤對象).方法();
- jQuery選擇器
Id選擇器:$(“#id選擇器名”)
Class選擇器$(“.class名字”)
標籤選擇器:$(“標籤名”)
通配符:$(“*”):選取所有標籤
分組:$(“div,h1”):選取 div 和h1
派生:$(“div h2”):選取div中h2
當前標籤:$(this);
$(“p:first”):選取第一個P標籤
$(“ul li:first”):選取ul中第一個li標籤
$(“ul li:first-child”):選取每個ul中第一個li標籤
$(“[屬性]”):選取帶有此屬性的標籤
$(“[href]”):選取到a標籤
$(“[屬性 = ‘值’]”):選取此屬性= ‘值’的標籤
比如: $(“a[target = ‘_blank’]”):選取a標籤中，target的值是_blank的標籤
$(“div:even”):偶數的位置的div標籤
$(“div:odd”):奇數的位置的div標籤
$(“div:eq(0)”):下標爲0的div標籤
四．文檔就緒事件
<script>
//加載完頁面標籤之後，在加載jquery方法
$(document).ready(function () {
//事件綁定 到標籤中
});
// 簡寫
$(function () {
})
目的：
- 代碼是從上往下執行，防止提前運行Jquery方法，先加載document:DOM 文檔對象模型，頁面中的標籤
- 先加載頁面中的標籤，在加載或者運行jquery方法;
JavaScript中:
Onload事件:<body onload=””></body>
JS中: window.onload = function(){ };
注意:
Jquery預加載的速度比onload更早.
Jquery預加載:只用加載DOM標籤之後，就會執行
Onload等所有內容都加載完成，纔會執行
五．Jquery事件
以JavaScript中的事件的on後的動作作爲jquery事件的方法名
1.常用的jquery事件
點擊事件:click()
雙擊事件:dbclick()
鼠標懸停事件:mouseenter()
鼠標移開事件:mouseleave()
鍵盤事件:keydown,keyup()
表單事件:獲取焦點focus(),失去焦點blur(),表單提交submit()
值發生改變Change(),
Hover()
// hover()方法，模擬懸停事件
$("#p1").hover(function () {
alert("懸停");
},function () {
alert("離開");
});
})
2.使用事件的語法
指定綁定事件的對象:$(選擇器)
綁定事件：$(選擇器).事件名(function(){
//事件觸發的方法
})
語法:$(選擇器).事件名(事件觸發的方法);
Click();
Eg:$(“#id”).click(function(){
$(this).css(“color”,”red”);
})
- Jquery效果
隱藏與顯現
Hide()和show();
Hide(時間,本方法執行完後調用的方法);
Toggle():在隱藏與顯現之間切換
淡入淡出
實現元素的淡入淡出
Fadeln()淡入
Fadeout()淡出
fadeToggle()淡入淡出切換
fadeTo()：漸變成給定透明度的值(0-1之間)
Fadeln()淡入:淡入已隱藏的元素-->以透明度0變成1
Fadeout()淡出:淡出已顯現的元素-->以透明度1變成0
Fadeln(時間,回調函數)
時間:毫秒,”fast”,”slow”;
fadeTo("fast",0.5,"swing");
fadeTo(時間，透明度值，速度，回調函數)實際調用animate({opcity:透明度值}，時間，速度，回調函數)方法
滑動
滑動方法:
slideDown():向下滑動顯示
slideUp():向上滑動隱藏
slideToggle():滑動切換隱藏與顯現
語法:slideDown(時間,回調函數);
動畫
Animate
$("#but1").click(function () { $("#d1").animate({width:"+=100px",height:"toggle"},1000,"linear");
});
可使用相對值:比如:”+=100px”或者”-=100px”
可使用切換值:height = “toggle”;
Toggle:從0到當前值的切換