jQuery簡介及事件、屬性

jquery介紹 :

jQuery是目前使用最廣泛的javascript函數庫,jquery是一個函數庫,一個js文件,頁面用script標簽引入這個js文件就可以使用。

jquery加載 :

將獲取元素的語句寫到頁面頭部,會因為元素還沒有加載而出錯,jquery提供了ready方法解決這個問題,它的速度比原生的 window.onload 更快。

1、http://jquery.com/官方網站

2、https://code.jquery.com/版本下載

完整寫法以及簡便寫法:


1

jquery選擇器 :

jquery用法思想一:

選擇某個網頁元素,然后對它進行某種操作

jquery選擇器:

jquery選擇器可以快速地選擇元素,選擇規則和css樣式相同,使用length屬性判斷是否選擇成功。

$(document) //選擇整個文檔對象

$('li') //選擇所有的li元素

$('#myId') //選擇id為myId的網頁元素

$('.myClass') // 選擇class為myClass的元素

$('input[name=first]') // 選擇name屬性等于first的input元素

$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

對選擇集進行修飾過濾(類似CSS偽類):

$('#ul1 li:first') //選擇id為ul1元素下的第一個li

$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數行

$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li

$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li

$('#myForm :input') // 選擇表單中的input元素

$('div:visible') //選擇可見的div元素

對選擇集進行函數過濾:

$('div').has('p'); // 選擇包含p元素的div元素

$('div').not('.myClass'); //選擇class不等于myClass的div元素

$('div').filter('.myClass'); //選擇class等于myClass的div元素

$('div').first(); //選擇第1個div元素

$('div').eq(5); //選擇第6個div元素

選擇集轉移:

$('div').prev('p'); //選擇div元素前面的第一個p元素

$('div').next('p'); //選擇div元素后面的第一個p元素

$('div').closest('form'); //選擇離div最近的那個form父元素

$('div').parent(); //選擇div的父元素

$('div').children(); //選擇div的所有子元素

$('div').siblings(); //選擇div的同級元素

$('div').find('.myClass'); //選擇div內的class等于myClass的元素

jquery樣式操作 :

? jquery用法思想二:

同一個函數完成取值和賦值

操作行間樣式:

// 獲取div的樣式

$("div").css("width");

$("div").css("color");

//設置div的樣式

$("div").css("width","30px");

$("div").css("height","30px");

$("div").css({fontSize:"30px",color:"red"});

特別注意:

選擇器獲取的多個元素,獲取信息獲取的是第一個,比如:$("div").css("width"),獲取的是第一個div的width。

操作樣式類名:

$("#div1").addClass("divClass2") //為id為div1的對象追加樣式divClass2

$("#div1").removeClass("divClass")? //移除id為div1的對象的class名為divClass的樣式

$("#div1").removeClass("divClass divClass2") //移除多個樣式

$("#div1").toggleClass("anotherClass") //重復切換anotherClass樣式

jquery屬性操作 :

1、html() 取出或設置html內容

?取出html內容

var $htm = $('#div1').html();

?設置html內容

$('#div1').html('添加文字');

2、text() 取出或設置text內容

?取出文本內容

var $htm = $('#div1').text();

設置文本內容

$('#div1').text('添加文字');

3、attr() 取出或設置某個屬性的值

取出圖片的地址

var $src = $('#img1').attr('src');

?設置圖片的地址和alt屬性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

綁定click事件:

給元素綁定click事件,可以用如下方法:

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

? ? // 內部的this指的是原生對象

? ? // 使用jquery對象用 $(this)

jquery特殊效果 :

fadeIn() 淡入

? ? $btn.click(function(){

? ? ? ? $('#div1').fadeIn(1000,'swing',function(){

? ? ? ? ? ? alert('done!');

? ? ? ? });

? ? });

fadeOut() 淡出

fadeToggle() 切換淡入淡出

hide() 隱藏元素

show() 顯示元素

toggle() 依次展示或隱藏某個元素

slideDown() 向下展開

slideUp() 向上卷起

slideToggle() 依次展開或卷起某個元素

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • jquery介紹 : jQuery是目前使用最廣泛的javascript函數庫,jquery是一個函數庫,一個js...
    dream_seeker閱讀 197評論 0 0
  • jquery介紹 jQuery是目前使用最廣泛的javascript函數庫。據統計,全世界排名前100萬的網站,有...
    1263536889閱讀 366評論 0 1
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 27,642評論 1 45
  • //------------------------- 第一章 認識JQuery ----------------...
    米塔塔閱讀 747評論 0 9
  • 折翼飛花瑟瑟垂,盈盈嬌態惹憐悲。 蛻生幾度思如夢,羽落一朝身式微。 經雨洗,待霜揮,人間自信滿芳菲。 輕狂天賦隨心...
    木木思語閱讀 460評論 4 7