jquery總結（來自於一個講師的總結）

選擇器

基本選擇器：id class 標籤 eq()查找具體的列表中的元素：$(‘ul li:eq(n)’).eq(n)

 

層 ：div p,div>p

 

查找：find 選中元素中再查找子元素，parent查找直接父元素，parents向上查找好幾層父   元素

 

篩選：next()選中當前元素後面的元素條件是：緊跟在當前元素後面

 

　　　nextAll()選中當前元素後面的全部元素，無論有沒有其餘元素間隔

 

　　　Prev和prevAll選中當前元素前面符合條件的元素，使用原理和next相同，

 

　　　Siblings()在同一父元素下面的同級子元素，括號中不寫的話，就是全部同級元素，寫上  選擇條件，就是符合條件的同級元素

 

dom元素操做

內部插入元素：

　　append:   將後面元素做爲最後一個子元素插入到前面元素中

　　$(‘.div1’).append($(‘.img’))

　　$(‘.div1’).append(‘<img src=」img/1.jpg」/>’)

　　上面二者的區別：前者是將頁面已存在的元素，插入到符合條件的元素中，特色：         只有一個給元素，不會無限制插入，後者是每次觸發事件後都插入該標籤，無限多     　　個

　　appendTo: $(‘.img’).appendTo($(‘.div1’))將前者插入到後者中，做爲最後一個子元素

　　Prepend 將後面元素做爲第一個子元素插入到前面元素中，語法格式和append相同

　　prependTo 語法格式同上

外部插入：

　　After:在當前選中元素的後面插入同級元素

　　$(‘.div1’).after($(‘.img’))

　　insetAfter  $(‘.div1’).insetAfter($(‘.img’))，將$(‘.div1’)插入到$(‘.img’)的後面

　　Before :在當前選中元素的前面插入同級元素

　　insertBefore   $(‘.div1’).insetBefore($(‘.img’))，將$(‘.div1’)插入到$(‘.img’)的前面

 

事件

綁定事件：on和bind,格式：$(‘div’).on(‘click’,function(){}),此時on的使用方法和功能與bind相同，不能給腳本中後插入的元素綁定事件，解除綁定的方方分別對應off和unbind

若是on的格式爲$(‘div’).on(‘click’,’.img’,function(){})，此時on的功能和live、delegate同樣，能夠給腳本中後插入的元素委託事件。

事件委託：live和delegate解除方式分別對應die 、undelegate

$(‘div’).live(‘click’,’.img’,function(){})

$(‘div’).delegate(’.img’,‘click’,function(){})

注意：解除事件時，括號中不寫事件就將綁定元素上全部的綁定事件都解除

經常使用事件舉例：Blur:常常用於表單中的驗證，focus,聚焦事件：舉例   if($(‘:text’).val==’’){$(this).focus()}

鼠標事件mouseXXXXX，鍵盤事件keyXXXX，滾動scroll 改變窗口大小resize,   表單提交事件：$(‘form’).submit()

異步請求：Ajax

　　$.ajax({

　　　　Type:’get/post’,

　　　　Url:’template/index.php’,

　　　　Success:function(data){

　　　　　　　Data就是咱們請求過來的數據，能夠對它進行操做

　　　　　}

　　})

　　封裝好的兩種方式：get和post

　　$.get(‘url?name=jack’,function(data){

　　　　Data就是咱們請求過來的數據，能夠對它進行操做

 

　　})

　　$.post(‘url’,{name:’jack’,age:22},function(data){

　　　　Data就是咱們請求過來的數據，能夠對它進行操做

　　})

 

動畫效果

1.Show()和hide()這兩個改變元素的display,顯示就是block，隱藏就是none

2.slide:捲簾門，slideUp和slideDown改變的是元素的height值

3.fade：淡入淡出fadeOut和fadeIn 改變元素的opacity=1,淡出時opacity=0;

4.animate:自定義動畫：格式：$(‘div’).animate({除了顏色以外的其餘樣式},1000,function(){})

事件的參數event

event.preventDefault 阻止默認事件

event.stopPropagation();阻止冒泡事件

Event.pageX和event.pageY獲取鼠標在當前事件下的座標，從可視窗口到鼠標的位置

一般能夠用來作窗口移動，圖片移動效果

 

Jquery核心部分

全部的操做都基於選中元素的基礎上，

1.就是用選擇器選中目標元素，

2.肯定觸發條件：好比鼠標通過、單擊、聚焦等等

3.明確想要在該條件下幹什麼，就是執行語句

Css()和attr()分別針對樣式和屬性：

舉例：    

Html部分:

<div class="div1" >

<p>我是段落語句！</p>

<img src=’img/i.jpg’ alt=’one’ title=’img’/>

<div>

Css部分：

.div1{

Color:green;

Line-height:30px;

Cursor:move;

}

Jquery部分：當鼠標單擊圖片時，將該圖片換爲2.jpg,而且將鼠標樣式改成手的形狀

$(‘img’).click(function(){

$(this).attr(‘src’,’img/2.jpg’).css(‘cursor’,’pointer’)

})

腳本中若是有跨事件調用的變量，記住是定義的全局變量，局部變量的做用域有限，只在當前事件範圍下使用

 

獲取元素的對應值：

1.css()      獲取顏色的值：$(‘div’).css(‘color’); 設置邊框：$(‘div img’).css(‘border’,’1px soild red’);

2.Attr()  獲取類名:$(‘div’).attr(‘class’)    $(‘div’).attr(‘class’,’div2’)

3.Html() 獲取選中元素標籤之間的全部內容

4.Text()  獲取選中標籤之間的全部文本，包括子元素中的文本

5.Val()   獲取表單的value值，<textarea>標籤也是用val()獲取

 

獲取元素距離可視界面的距離：

Var x = $(‘div’).offset().left; 包括定位值和外補白的值

Var y = $(‘div’).offset().top;

 

獲取元素的寬高

Var x = $(‘div’).height();

Var x =$(‘div’).width();

outerHeight和innerHeight的區別：前者包括邊框，後者不包括邊框

scrollTop元素滾動高度：前提條件子元素內容超出父元素的大小，而且父元素被設置了具體寬高，且overflow:scroll

 

關於定位：

相對父元素定位：relative

絕對定位：相對於上一個設置定位的父元素而言，若是父元素都沒有設置定位，該元素         就相對於body進行定位，記住：給絕對定位時，必定要給父元素添加相對定位

絕對定位是脫離文檔流：不影響頁面其餘元素的佈局

Float也脫離文檔流

脫離文檔流的元素設置margin值無效

代碼習慣

1)定位要寫在最上方，影響元素性質的樣式，2.設置寬高3.設置元素內部的樣式

2)文件命名，儘可能英文定義。

3)類名儘可能通俗易懂，言簡意賅，先後格式要統一,駝峯形式是imgWrap, 或其餘img-wrap

4)不要直接img佈局，最好將img放在div中，這樣佈局穩定符合大衆習慣

5)看到有規律一系列的元素，通常是序列表ul