jquery庫檔案
分為開發版和發布版
在頁面中引用jquery
使用jquery彈出提示框
jquery語法規則
工廠函式¥():將dom物件轉化為jquery物件
jquery操作頁面元素
使用addclass( )方法為元素新增樣式
使用css( )方法設定元素樣式
使用show( )、hide( ) 方法設定元素的顯示和隱藏
addclass()方法 --為元素新增樣式
語法:jquery 物件.addclass([樣式名]);
示例:$("tr:odd").addclass("odd");
css()方法 --設定元素樣式
語法:css() ;
示例:$(this).css();
設定元素的顯示和隱藏
語法:$(selector).show( );
$(selector).hide( );
示例:$(this).children("div").show();
$(this).children("div").hide();
jquery**分割
$等同於jquery
$(document).ready()等同於jquery(document).ready()
$(function(){})等同於jquery(function()})
鏈式操作 --對乙個物件進行多重操作,並將操作結果返回給該物件
示例:$("h2").css("background-color","#ccffff").next().css("display","block");
隱式操作
示例:$(document).ready(function() );
jquery選擇器分類
基本選擇器
示例:$("h1").css("color", "blue"); //標籤選擇器
$(".price").css(); //類選擇器
$("#author").css("clor", " #083499"); //id選擇器
$(".intro,dt,dd").css("color", " #ff0000"); //並集選擇器
$("*").css("font-weight", "bold"); //全域性選擇器
層次選擇器
示例:$(".textright p").css("color","red"); //後代選擇器
$(".textright>p").css("color", "red"); //子選擇器
$("h1+p").css("text-decoration", "underline"); //相鄰元素選擇器
$("h1~p").css("text-decoration", "underline"); //同輩元素選擇器
屬性選擇器
示例:$("#news a[class]").css("background","#c9cbcb");//a標籤帶有class屬性
$("#news a[class='hot']").css("background", "#c9cbcb"); // class為hot
$("#news a[class!='hot']").css("background", "#c9cbcb");// class不為hot
$("#news a[href^='www']").css("background","#c9cbcb");//以www開頭
$("#news a[href$='html']").css("background", "#c9cbcb");//以html結尾
$("#news a[href*='k2']").css("background","#c9cbcb"); //包含"k2"的元素
基本過濾選擇器
語法描述
示例:eq(index)
選取索引等於index的元素(index從0開始)
$("li:eq(1)" )選取索引等於1的元素
:gt(index)
選取索引大於index的元素(index從0開始)
$("li:gt(1)" )選取索引大於1的元素(注:大於1,不包括1)
:lt(index)
選取索引小於index的元素(index從0開始)
$("li:lt(1) " )選取索引小於1的元素(注:小於1,不包括1)
:header
選取所有標題元素,如h1~h6
$(":header" )選取網頁中所有標題元素
:focus
選取當前獲取焦點的元素
$(":focus" )選取當前獲取焦點的元素
:animated
選擇所有動畫
$(":animated" )選取當前所有動畫元素
示例:// 標題元素
$(".contain :header").css();
// 第乙個、最後乙個元素
$(".contain li:first").css();
$(".contain li:last").css("border","none");
// 偶數、奇數元素
$(".contain li:even").css("background","#f0f0f0");
$(".contain li:odd").css("background","#cccccc");
// 小於、大於某個索引值
$(".contain li:lt(2)").css();
$(".contain li:gt(3)").css();
可見性過濾選擇器
語法描述
示例:visible
選取所有可見的元素
$(":visible")選取所有可見的元素
:hidden
選取所有隱藏的元素
$(":hidden") 選取所有隱藏的元素
示例:$("p:hidden").show();
$("p:visible").hide();
Jquery 基礎 選擇器。
jquery選擇器繼承了css與path語言的部分語法,允許通過標籤,屬性名或者內容對dom元素進行快速,準確的選擇,而不必擔心瀏覽器的相容性。通過 selector 得到的物件,因為無論是對事件的處理 遍歷dom ajax,本質上都是對物件的操作。一 jquery選擇器優勢 1.簡潔寫法 2.支援...
jQuery基礎 選擇器
1 id 返回值單個元素的組成的集合 myid 說明 就是選擇html中的id myid 2 element 返回值集合元素 div 說明 可以返回例如 div input a 等中的值 3 class 返回值 集合元素 myclass 說明 就是選擇html中的iclass myclass 4 所...
jQuery基礎 選擇器
選擇器 功能返回值 idid選擇器 單個元素 element 元素選擇器 元素集合 class 類選擇器 元素集合 匹配所有元素 元素集合 selector1,selector2 將每乙個選擇器匹配到的元素合併後一起返回 元素集合 選擇器功能 返回值ancestor descendant 根據祖先元...