天天看點

11--2

11--2

jquery文檔就緒函數(onload、ready)、動态添加樣式、三種方法和它的屬性、基本篩選器、内容、可見性

文檔就緒函數

$:jquery的标志

onload:加載頁面中所有的内容,包含外部資源(圖檔、文檔等等檔案)

先加載頁面中所有内容及外部資源,再加載js代碼

ready(文檔就緒函數):加載頁面中的内容,不包含外部資源()

先加載頁面中所有的标簽内容,再加載js代碼,最後加載外部資源

文檔就緒函數的三種方法

文檔就緒函數第一種書寫格式

$(document).ready(function(){

alert("文檔就緒函數第一種書寫方法");

})

//文檔就緒函數第二種書寫方法

$().ready(function(){

alert("文檔就緒函數第二種書寫方法");

//文檔就緒函數第三種書寫方法

$(function(){

alert("文檔就緒函數第三種書寫方法");

屬性

$("#btn1").click(function() {

//隐藏圖檔

$("#img1").hide(); //隐藏

$("#btn2").click(function() {

$("#img1").show(); //顯示

$("#btn3").click(function() {

$("#img1").toggle(2000);//交替顯示和隐藏

$("#btn4").click(function() {

$("#img1").fadeOut(1000);//淡出 --隐藏

$("#btn5").click(function() {

$("#img1").fadeIn();//淡入 ---顯示

$("#btn6").click(function() {

$("#img1").fadeToggle(2000) //交替淡入淡出

$("#title").click(function(){

$("#contents").slideToggle();//下滑式交替顯示和隐藏

/*動态添加樣式*/

//css("css屬性名","css屬性值"):設定對象的css樣式

//addClass("新的class名稱"):添加樣式對象(要添加的樣式必須預先定義好再使用)

基本篩選器

:first  擷取比對的第一個元素

:not(selector)  去除所有與給定選擇器比對的元素 

:even 比對所有索引值為偶數的元素,從 0 開始計數

:odd 比對所有索引值為奇數的元素,從 0 開始計數

:eq(index) 比對一個給定索引值的元素,從 0 開始計數

:gt(index) 比對所有大于給定索引值的元素,從 0 開始計數

:lt(index) 比對所有小于給定索引值的元素,從 0 開始計數

:lang1.9+

:last 擷取比對的最後個元素

:header 給頁面内所有标題加上背景色

:animated 隻有對不在執行動畫效果的元素執行一個動畫特效

:focus 比對目前擷取焦點的元素。

:root1.9+

:target1.9+

内容

:contains(text) 比對包含給定文本的元素

:has(selector) 比對含有選擇器所比對的元素的元素

:empty 查找所有不包含子元素或者文本的空元素

:parent 查找所有含有子元素或者文本的 td 元素

可見性

:hidden 查找隐藏的元素

:visible 查找所有可見的元素