?jquery介紹
? ? jquery最大的價(jià)值就是兼容性好
? ? 主要使用于pc端
查看網(wǎng)站是否使用jquery
? ? window.$
獲取網(wǎng)站所使用的jquery的版本
? ? window.$.fn.jquery
jquery的入口函數(shù)
? ? $( function () {} )? 等同于 js的window.onload = function () {}
jquery的事件類(lèi)型
? ? $("div").click(? function (){} )? 點(diǎn)擊
? ? $("div").hide(1000)? 隱藏 參數(shù) - 隱藏的時(shí)間
? ? $("div").show( 1000 ) 顯示
? ? $("div").mouseover() 鼠標(biāo)移入
? ? $("div").mouseout() 鼠標(biāo)移出
? ? $("div").hover(function(){} , function (){})? 代表著移入與移出 - 第一個(gè)函數(shù)代表移入 第二個(gè)代表移出
jquery選擇器
? ? 1 $("div") 屬性選擇器
? ? 2 $(".div") 類(lèi)選擇器
? ? 3 $("#div") id選擇器
? ? 4 $("div:eq(0)") 偽類(lèi)選擇器 - 索引
? ? 4.1 $("li:even") 偽類(lèi)選擇器 - 偶數(shù)
? ? 5 $('[type="button"]')?
? ? 6 $(":disabled") 獲取到被禁用的元素
? ? 7 $(".father .son") 獲取到子元素.son
? ? 7.1 $(".father").children(".son") 取到子元素.son
? ? 8 $(".btn1,.btn2")? 并集選擇器 同時(shí)獲取到兩個(gè)元素
jquery的屬性方法
? ? 控制(修改)css的樣式? -? 以傳入一個(gè){}大括號(hào)對(duì)象的形式作為參數(shù) 里面的屬性值為 鍵值對(duì) 就可修改多個(gè)屬性值
? ? ????$("div").css( { width:200, height: 200, backgroundColor: "pink" } )
? ??獲取目標(biāo)元素的某一個(gè)值 并且彈出 -?如果只傳入一個(gè)屬性值 就是獲取該屬性的值
?????????var width =??$("div").css( "width" );
? ? ? ? ?alert( width );
? ? ?添加css類(lèi) - 添加的css類(lèi) 不需要添加. 或者# 并且可以添加多個(gè)類(lèi) 只要空格隔開(kāi)就行
? ? ? ? $("div").addClass("box");
? ? ?移除css類(lèi)
? ? ? ? $("div").removeClass("box");
? ? 檢測(cè)是否添加了css類(lèi) - 有則返回true 沒(méi)有則返回false
? ? ? ? $("div").hasClass("box");
? ? 切換css類(lèi) - 原理：添加類(lèi) / 移除類(lèi) - 可同時(shí)添加多個(gè)類(lèi)或移除多個(gè)類(lèi)
? ? ? ? $("div").toggleClass("box");
? ? .eq(索引值) 索引 - 獲取到索引為幾的元素
? ? ? ? $("div").eq(0).addClass("box");? 當(dāng)有兩個(gè)div時(shí) 只給第一個(gè)div添加box樣式
? ? $(this)代表當(dāng)前
? ??.siblings()選中兄弟元素 使用siblings實(shí)現(xiàn)jq排他效果
? ? ? ? <body>
? ? ? ? ? ? (button{$})*5? ?添加5個(gè)button元素
? ? ? ? </body>
? ? ? ? jq入口函數(shù)
? ? ? ? $(function () {
? ? ? ? ? ? 注冊(cè)事件
? ? ? ? ? ? $("button").click(function (){
? ? ? ? ? ? $(this) 代表當(dāng)前
? ? ? ? ? ? $(this).css( {backgroundColor: "pink"} );
? ? ? ? ? ? .siblings() 只會(huì)選中兄弟元素
? ? ? ? ? ? $(this).siblings().css( {backgroundColor: ""} )
????????})
? ? ? })
? ? .parent() 父級(jí)關(guān)系 通過(guò)函數(shù)形式查找父級(jí)
? ? ? ? $(this).parent().parent() - 找到當(dāng)前元素的父級(jí)的父級(jí)
? ? .parents( "body/html" ) 祖先 - 通過(guò)函數(shù)的形式查找到祖先 - 需要寫(xiě)入查找的祖先值
? ? .children() 子級(jí) - 通過(guò)函數(shù)的形式獲取子級(jí)元素
? ? ? ? $("div").children(".son")? 當(dāng)有兩個(gè)子元素時(shí) 可直接輸入需要獲取的子元素
? ? .index() 索引 - 通過(guò)函數(shù)的形式獲取到索引值
? ? ? ? $(this).index(); - 獲取當(dāng)前元素的索引值
? ? ??
? ? ? ??
