不卡少妇一二三区,区在线久久

JQuery
一.Hello JQuery
JQuery是一個(gè)javascript的框架，是對(duì)jvascript的一種封裝。通過JQuery可以非常方便的操作html的元素
1.jquery.min.js
<script src="http://how2j.cn/study/jquery.min.js"></script>
要使用Jquery需要導(dǎo)入一個(gè)第三方的javascript庫 jquery.min.js
2.理解 $(function(){ }) //文檔完全加載完后運(yùn)行的jQuery代碼表示文檔加載，由$ ();和function(){ }兩部分構(gòu)成，合起來就是 $(function(){ }); 這是為了防止文檔在完全加載(就緒)之前運(yùn)行jQuery代碼。也就是說，寫在這里的JQuery代碼都是文檔加載好之后的，就不會(huì)有獲取一個(gè)還沒有加載好的圖片這種問題了，另一種寫法：$ (document).ready(function(){ });也由兩部分組成 $(document).ready();和function(){} 3.通過id獲取元素 JQuery通過$ ("#id")獲取例 document.write( $("#d") ); 注意：通過 document.getElementById獲取到的是DOM的元素節(jié)點(diǎn)，而通過$ (#id)獲取到的是一個(gè)JQuery對(duì)象
4.增加監(jiān)聽器
$("#b1").click(function(){alert("點(diǎn)擊了按鈕");}); //JQuery增加click事件的監(jiān)聽兩部分組成$ ("#b1").click();和function(){alert("點(diǎn)擊了按鈕");}
b1按鈕的點(diǎn)擊事件彈出對(duì)話框的函數(shù)
5.隱藏與顯示
$("#d").hide();$ ("#d").show();
通過$("#d")拿到div對(duì)象后，直接調(diào)用hide()和show()方法，即可實(shí)現(xiàn)隱藏和顯示。

二.常見方法
1.取值通過JQuery對(duì)象的val()方法取值
$("#input1").val() 相當(dāng)于 document.getElementById("input1").value; 2.獲取元素內(nèi)容，如果有子元素，保留標(biāo)簽$ ("#d1").html() 通過html()獲取元素內(nèi)容，如果有子元素，保留標(biāo)簽
3.獲取元素內(nèi)容，如果有子元素，不包含元素標(biāo)簽
$("#d1").text() 通過text()獲取元素內(nèi)容，如果有子元素，不包含標(biāo)簽

三.CSS
1.增加class
通過addClass()增加一個(gè)樣式中的class
$("#d").addClass("pink"); .pink{} 2.刪除class 通過removeClass() 刪除一個(gè)樣式中的class$ ("#d").removeClass("pink");
3.切換class
通過toggleClass() 切換一個(gè)樣式中的class 切換指存在就刪除，不存在就添加
$("#d").toggleClass("pink"); 4.通過css函數(shù)，直接設(shè)置樣式$ ("#d1").css("background-color","pink"); 設(shè)置單一樣式
$("#d2").css({"background-color":"pink","color":"green"}); 設(shè)置多種樣式
參數(shù)是{}包含的屬性值對(duì)，屬性值對(duì)之間用逗號(hào)(,)分割。屬性值之間用冒號(hào)(:)分割，屬性和值都需要用引號(hào)“”

四.選擇器
1.元素
$("tagName") 根據(jù)標(biāo)簽名選擇所有該標(biāo)簽的元素$ ("div").addClass("pink");
2.id
$("#id") 根據(jù)id選擇元素，id應(yīng)該是唯一的，如果id重復(fù)，則只會(huì)選擇第一個(gè)$ ("#d1").addClass("pink");
3.類
$(".className") 根據(jù) class 選擇元素$ (".d").addClass("pink");
4.層級(jí)
$("selector1 selector2") 選擇selector1下的selector2元素$ ("div#d3 span").addClass("pink");
5.最先最后
$(selector:first) 滿足選擇器條件的第一個(gè)元素$ (selector:last) 滿足選擇器條件的最后一個(gè)元素
$("div:first").addClass("pink");$ ("div:last").addClass("pink");
6.奇偶
$(selector:odd) 滿足選擇器條件的奇數(shù)元素$ (selector:even) 滿足選擇器條件的偶數(shù)元素
(因?yàn)槭腔愕模缘谝慌诺南聵?biāo)其實(shí)是0(是偶數(shù)))
$("div:odd").toggleClass("pink");$ ("div:even").toggleClass("green");
7.可見性
$(selector:hidden)滿足選擇器條件的不可見的元素$ (selector:visible)滿足選擇器條件的可見的元素
注意：div:visible和div:visible(有空格)是不同的意思
div:visible表示選中個(gè)可見的div div :visible(有空格) 表示選中div下可見的元素
$("div:visible").hide();$ ("div:hidden").show();
8.屬性
$(selector[attribute]) 滿足選擇器條件的有某屬性的元素$ (selector[attribute=value]) 滿足選擇器條件的屬性等于value的元素
$(selector[attribute!=value]) 滿足選擇器條件的屬性不等于value的元素$ (selector[attribute^=value]) 滿足選擇器條件的屬性以value開頭的元素
$(selector[attribute$ =value]) 滿足選擇器條件的屬性以value結(jié)尾的元素
$(selector[attribute*=value]) 滿足選擇器條件的屬性包含value的元素

$("div[id]").toggleClass("border"); 給有id屬性的div切換邊框$ ("div[id='pink']").toggleClass("border"); 給id=pink的div切換邊框
$("div[id!='pink']").toggleClass("border"); 給有id!=pink屬性的div切換邊框$ ("div[id^='p']").toggleClass("border"); 給有id以p開頭的div切換邊框
$("div[id$ ='k']").toggleClass("border"); 給有id以k結(jié)尾的div切換邊框
$("div[id*='ee']").toggleClass("border"); 給有id包含ee的div切換邊框

9.表單對(duì)象
表單對(duì)象選擇器指的是選中form下出現(xiàn)的輸入元素
:input 會(huì)選擇所有的輸入元素，不僅僅是input標(biāo)簽開始的那些，還包括textarea，select，button
:button 會(huì)選擇type=button的input元素和button元素
:radio 會(huì)選擇單選框
:checkbox會(huì)選擇復(fù)選框
:text 會(huì)選擇文本框，但不會(huì)選擇文本域
:submit 會(huì)選擇提交按鈕
:image 會(huì)選擇圖片型提交按鈕
:reset會(huì)選擇重置按鈕
$(function(){$ (".b").click(function(){
var value = $(this).val();$ ("td[rowspan!=13] "+value).toggle(500); }); });
注意：$("td[rowspan!=13] 后面有一個(gè)空格，表示層級(jí)選擇器，
意思是獲取滿足rowspan屬性的屬性值不為13的td元素下的所有元素
如果沒有出錯(cuò)，toggle(500)表示在顯示與隱藏之間來回切換，生效時(shí)間是500毫秒
submit會(huì)把<button>元素選中，因?yàn)樵谝恍g覽器中，<button>元素的type默認(rèn)值是submit，
所以會(huì)選中它

10.表單對(duì)象元素
：enabled 會(huì)選擇可用的輸入元素注:輸入元素的默認(rèn)狀態(tài)都是可用
：disabled會(huì)選擇不可用的輸入元素
：checked會(huì)選擇被選中的單選框和復(fù)選框注：checked在部分瀏覽器上(火狐，chrome)也可以選中selected的option
：selected會(huì)選擇被選中的option元素

11.當(dāng)前元素
在監(jiān)聽函數(shù)中使用 $(this)，即表示觸發(fā)該事件的組件$ (function() { $("#b1").click(function(){$ (this).hide(); }); });

五.篩選器
1.第一個(gè) 最后一個(gè) 第幾個(gè)
首先通過 $("div")選擇了多個(gè)div元素，接下來做進(jìn)一步的篩選， first()第一個(gè)元素，last()最后一個(gè)元素，eq(num)第num個(gè)元素注：num基0$ ("div").first().toggleClass("pink"); 切換第1個(gè)div背景色
$("div").last().toggleClass("pink"); 切換最后1個(gè)div背景色$ ("div").eq(4).toggleClass("pink"); 切換第5個(gè)div背景色
2.父祖先
parent() 選取最近的一個(gè)父元素
parents() 選取所有的祖先元素
$("#currentDiv").parent().toggleClass("b"); 改變parent()的邊框$ ("#currentDiv").parents().toggleClass("b"); 改變parents()的邊框
3.兒子后代
children():篩選出兒子元素(緊挨著的子元素)
find(selector):篩選出后代元素注：find()必須使用參數(shù)selector
$("#currentDiv").children().toggleClass("b");$ ("#currentDiv").find("div").toggleClass("b");
4.同級(jí)
sibings():同級(jí)(同胞)元素
$("#currentDiv").siblings().toggleClass("b");

六.屬性
1.獲取
通過attr()獲取一個(gè)元素的屬性
<h1 id="h" align="center" game="LOL">居中標(biāo)題</h1>
$("#h").attr("align") 獲取align屬性$ ("#h").attr("game") 獲取自定義屬性 game
2.修改
通過attr(attr,value)修改屬性
$("#h").attr("align","right") ; 修改align屬性為right 3.刪除通過removeAttr(attr)刪除屬性$ ("#h").removeAttr("align"); 刪除align屬性
4.prop與attr的區(qū)別
$("#c").attr("game") 獲取屬性值結(jié)果為L(zhǎng)OL$ ("#c").prop("game") 獲取屬性值結(jié)果為undefined
$("#c").attr("checked") 當(dāng)選中屬性時(shí)，獲取值checked，當(dāng)未選中屬性時(shí)，獲取值checked$ ("#c").prop("checked") 當(dāng)選中屬性時(shí)，獲取值true，當(dāng)未選中屬性時(shí)，獲取值false
<input type="checkbox" id="c" game="LOL" checked="checked">
與prop一樣attr也可以用來獲取與設(shè)置元素的屬性。區(qū)別在于，對(duì)于自定屬性和選中屬性的處理。
選中屬性指的是checked，selected這兩種屬性。1.對(duì)于自定義屬性attr能夠獲取，prop不能獲取
2.對(duì)于選中屬性：attr只能獲取初始值，無論是否變化，prop能夠訪問變化后的值，并且以true|false的
布爾型返回，所以在訪問表單對(duì)象屬性的時(shí)候，應(yīng)該采用prop而非attr.

七.效果
1.顯示隱藏切換
顯示隱藏切換分別通過show(),hide(),toggle()實(shí)現(xiàn)，也可以加上毫秒數(shù)，表示延時(shí)操作，比如show(2000).
$("#d").hide(); 立即隱藏$ ("#d").show(); 立即顯示
$("#d").toggle(); 立即切換$ ("#d").show(1000); 延時(shí)顯示
$("#d").hide(1000); 延時(shí)隱藏$ ("#d").toggle(1000); 延時(shí)切換
2.向上滑動(dòng) 向下滑動(dòng) 滑動(dòng)切換
向上滑動(dòng) 向下滑動(dòng) 滑動(dòng)切換分別通過slideUp(),slideDown(),slideToggle()實(shí)現(xiàn)，也可以加上毫秒數(shù)，表示延時(shí)操作，比如slideUp(2000).
$("#d").slideUp(); 向上滑動(dòng)$ ("#d").slideDown(); 向下滑動(dòng)
$("#d").slideToggle(); 滑動(dòng)切換$ ("#d").slideUp(2000); 延時(shí)向上滑動(dòng)
$("#d").slideDown(2000); 延時(shí)向下滑動(dòng)$ ("#d").slideToggle(2000); 延時(shí)滑動(dòng)切換
3.淡入淡出淡入淡出切換指定淡入程度
淡入淡出淡入淡出切換指定淡入程度分別通過fadeIn(),fadeOut(),fadeToggle() fadeTo(實(shí)現(xiàn))
也可以加上毫秒數(shù)，表示延時(shí)操作，比如fadeIn(2000)
fadeTo跟的參數(shù)是0-1之間的小數(shù).0表示不淡入，1表示全部淡入
$("#d").fadeIn()；淡出$ ("#d").fadeOut(); 淡入
$("#d").fadeToggle(); 淡入淡出切換$ ("#d").fadeIn(2000); 延時(shí)淡出
$("#d").fadeOut(2000); 延時(shí)淡入$ ("#d").fadeToggle(2000); 延時(shí)滑淡入淡出切換
$("#d").fadeTo("slow",0.2); fadeTo
4.自定義動(dòng)畫效果
通過animate可以實(shí)現(xiàn)動(dòng)畫效果，animate()第一個(gè)參數(shù)為css樣式，animate()第二個(gè)參數(shù)為延時(shí)毫秒
注：默認(rèn)情況下，html中的元素都是固定的，并且無法改變位置的，為了使用animate()自定義動(dòng)畫動(dòng)畫效果，需要通過css把元素的position設(shè)置為relative，absolute或者fixed
div.animate({left:'100px'},2000); 向右移動(dòng)100px
div.animate({left:'0px',top:'50px',height:'50px'},2000); 向左下移動(dòng)50px，同時(shí)高度變小
5.回調(diào)函數(shù)
效果方法都提供對(duì)回調(diào)函數(shù)callback()的支持,只需要在調(diào)用效果方法的最后一個(gè)參數(shù)傳入一個(gè)function，當(dāng)效果結(jié)束的時(shí)候，就會(huì)調(diào)用該function
div.animate({left:'100px'},2000);
div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
alert("動(dòng)畫演示結(jié)束"); });

八.事件
1.加載
頁面加載有兩種方式表示
第一種： $(document).ready(); 第二種：$ (); 圖片加載用load()函數(shù)
$(document).ready（）；$ (function(){ $("#img").load(function(){ }); }); 2.點(diǎn)擊 click()表示單擊 dblclick()表示雙擊注意：空白鍵和回車鍵也可以造成click事件，但是只要雙擊鼠標(biāo)才能造成dbclick事件$ ("#b").click(function(){}); 單擊事件
$("#b").dblclick(function(){ }); 雙擊事件 3.鍵盤 keydown 表示按下鍵盤 keypress表示按下鍵盤 keyup表示鍵盤彈起這三者的區(qū)別分別表現(xiàn)在發(fā)生的先后順序，獲取到的鍵盤按鈕值，已經(jīng)對(duì)輸入框的文本取值這三方面。先后順序：按照 keydown keypress keyup 順序發(fā)生鍵盤按鈕值：通過event對(duì)象的which屬性獲取鍵盤的值, keydown和keyup能獲取所有按鍵，不能識(shí)別大小寫 keypress不能獲取功能鍵，如F1 SHIFT等，能夠識(shí)別大小寫文本取值：keydown和keypress: 不能獲取最后一個(gè)字符 keyup:獲取所有字符例如：敲入ab，發(fā)生的先后順序是keydown,keypress，keyup，，，keydown和keyup取到大寫B(tài)的ascii碼表 66，keypress取到小寫b的ascii碼表98，keydown和keypress只能取到文本值a，keyup可以取到ab$ (function(){
$("#i").keydown(function(e){ keypress keyup var selector = "keydown"; clearTimeout(clearTimer);$ ("#"+selector+"Action").css("background-color","green");
$("#"+selector+"Action").html("順序: " + (++order ) );$ ("#"+selector+"Key").html(e.which);
$("#"+selector+"Value").html($ (this).val());
clearTimer= setTimeout(clear,4000);
});
4.鼠標(biāo)
mousedown 表示鼠標(biāo)按下
mouseup 表示鼠標(biāo)彈起
mousemove 表示鼠標(biāo)進(jìn)入 mouseenter 表示鼠標(biāo)進(jìn)入 mouseover表示鼠標(biāo)進(jìn)入
mouseleave表示鼠標(biāo)離開 mouseout表示鼠標(biāo)離開
進(jìn)入事件有3個(gè) mousemove mouseenter mouseover
mousemove：當(dāng)鼠標(biāo)進(jìn)入元素，每動(dòng)一下就會(huì)被調(diào)用
mouseenter ：當(dāng)鼠標(biāo)進(jìn)入元素，調(diào)用一下，在其中移動(dòng)，不調(diào)用，鼠標(biāo)經(jīng)過其子元素不會(huì)被調(diào)用
mouseover：當(dāng)鼠標(biāo)進(jìn)入元素，調(diào)用一下，在其中移動(dòng)，不調(diào)用，鼠標(biāo)經(jīng)過其子元素會(huì)被調(diào)用
mouseleave 和 mouseout的區(qū)別
mouseleave: 當(dāng)鼠標(biāo)經(jīng)過其子元素不會(huì)被調(diào)用
mouseout：當(dāng)鼠標(biāo)經(jīng)過其子元素會(huì)被調(diào)用
$("#move").mousemove(function(){}); 5.焦點(diǎn) focus() 獲取焦點(diǎn) blur() 失去焦點(diǎn)$ ("input").focus(function(){}); 獲取了焦點(diǎn)
$("input").blur(function(){}); 失去了焦點(diǎn) 6.改變 change() 內(nèi)容改變注：對(duì)于文本框，只有當(dāng)該文本失去焦點(diǎn)的時(shí)候，才會(huì)觸發(fā)change事件。$ ("#input1").change(function(){ });
7.提交
submit() 提交form表單時(shí)觸發(fā)的函數(shù)
$("#form").submit(function(){}); 8.綁定事件以上所有的事件處理，都可以通過on() 綁定事件來處理$ ("selector").on("event",function);
$("#b").on("click",function(){ }); 可對(duì)比$ ("#b").click(function(){});
9.觸發(fā)事件
$("selector").trigger("event"); 觸發(fā)事件，文件加載后之后，就觸發(fā)dbclick雙擊事件，而不是通過手動(dòng)雙擊$ ("#b").on("dblclick",function(){ $("#message").html("雙擊按鈕"); });$ ("#b").trigger("dblclick"); });

九.AJAX
1.提交AJAX請(qǐng)求
$(function(){$ ("#name").keyup(function(){
$.ajax({ url: "http://how2j.cn/study/checkName.jsp", data:{"name":$ (this).val()},
success: function(result){
$("#checkResult").html(result); } }); }); });$ .ajax采用參數(shù)集的方式{param1，param2，param3}不同的參數(shù)之間用，隔開
第一個(gè)參數(shù) url：表示訪問的page頁面 //只有第一個(gè)參數(shù)是必須的，其他參數(shù)都是可選
第二個(gè)參數(shù)data：表示提交的參數(shù)
第三個(gè)參數(shù)success：function(){} 表示服務(wù)器成功返回后對(duì)應(yīng)的響應(yīng)函數(shù)
2.使用get方式提交ajax
$.get 是$ .ajax的簡(jiǎn)化版，專門用于發(fā)送GET請(qǐng)求
$(function(){$ ("#name").keyup(function(){
$.get( "http://how2j.cn/study/checkName.jsp", //訪問的頁面 {"name":$ (this).val()}, //提交的數(shù)據(jù)
function(result){ //響應(yīng)參數(shù)
$("#checkResult").html(result); } ); }); }); 3.使用post方式提交ajax$ .get----> $.post 4.最簡(jiǎn)單的調(diào)用ajax的方式 load$ ("#id").load(page,[data]);
id: 用于顯示AJAX服務(wù)端文本的元素Id
page: 服務(wù)端頁面
data: 提交的數(shù)據(jù)，可選。在本例中，直接在page里加上了參數(shù)列表
$(function(){$ ("#name").keyup(function(){
var page = "http://how2j.cn/study/checkName.jsp?name="+ $(this).val();$ ("#checkResult").load(page);
});
});
5.格式化form下的輸入數(shù)據(jù)
serialize()：格式化form下的輸入數(shù)據(jù)，把輸入數(shù)據(jù)格式化成字符串
var data = $("#form").serialize(); //name=sad&age=sd&mobile=ds
name屬性值=輸入值&age屬性值=輸入值&mobile屬性值=輸入值

十.數(shù)組操作
1.遍歷
$.each 遍歷一個(gè)數(shù)組第一個(gè)參數(shù)是數(shù)組，第二個(gè)參數(shù)是回調(diào)函數(shù)i是下標(biāo)，n是內(nèi)容 var a = new Array(1,2,3);$ .each( a, function(i, n){
document.write( "元素[" + i + "] : " + n + "
" );
})
document.close();
2.去掉重復(fù)
$.unique() 去掉重復(fù)的元素注意：在執(zhí)行unique之前，要先調(diào)用sort對(duì)數(shù)組的內(nèi)容進(jìn)行排序 var a = new Array(5,2,4,2,3,3,1,4,2,5); a.sort();$ .unique(a);
3.是否存在 $.inArray$ .inArray 返回元素在數(shù)組中的位置，如果不存在返回-1
$.inArray(9,a) //返回元素9在數(shù)組a中的位置

十一.字符串操作
1.去除首尾空白 $.trim() 去除首尾空白

十二.JSON
1.將JSON格式的字符串，轉(zhuǎn)換為JSON對(duì)象
var s1= "{"name":"蓋倫","hp":616}"
var gareen = $.parseJSON(s1);

十三.對(duì)象轉(zhuǎn)換
已使用大量的JQuery對(duì)象的方法，比如show()、toggle()，而原生DOM對(duì)象不具備這些方法
同樣的DOM對(duì)象也具備JQuery對(duì)象所沒有的屬性和方法，比如checkd屬性
在某些場(chǎng)景下，需要對(duì)JQuery對(duì)象和DOM節(jié)點(diǎn)對(duì)象進(jìn)行互相轉(zhuǎn)換
1.JQuery轉(zhuǎn)DOM
通過get(0)或者[0] 把JQuery對(duì)象轉(zhuǎn)為DOM對(duì)象
var div= $("#d"); div為JQuery對(duì)象 var d = div[0]; d為DOM對(duì)象或 var div=$ ("#d"); div為JQuery對(duì)象
var d = div.get(0); d為DOM對(duì)象
2.DOM轉(zhuǎn)JQuery
通過 $() 把DOM對(duì)象轉(zhuǎn)為JQuery對(duì)象 var div= document.getElementById("d"); div為DOM對(duì)象 var d =$ (div); d為JQuery對(duì)象

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JQuery

JQuery

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JQuery

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av