jQuery small note

關於jQuery

jQuery 就是一個 JavaScript的函式庫，這個JavaScript函式庫有很多很多function，所以給他一個名字叫jQuery。

所以語法就同JavaScript啦~。

Link Html and JavaScript Files

• <script type='text/javascript' src='script.js'></script>

script.js

• $(document).ready(function(){
  
  ....
  
  });

$()

• $('selector') # $() 代表將要有事要發生了！，()內是發生的對像。jQuery object。
  
  # 把他放到變數裡，再作使用 Ex : $varName = $('selector'); 。



• 'selector'
  
  
  
  
  
  • '#idName' # html元素的id。
  
  
  
  • '.className' # html元素的class。
  
  
  
  • document # html文件本身。
  
  
  
  • this # ↓↓↓↓↓↓↓↓↓↓↓↓
    
    
    
    
    
    • $(document).ready(function() {
      
      $('div').click(function() {
      
      $(this).fadeOut('slow'); #這邊$(this) 指的是上一行的$('div')。
      
      });
      
      });
    
    
    
    
    
    
  
  
  
  • element:first-child #所有兄弟element中的第一個。
  
  
  
  • element:nth-child(N) #所有兄弟element中第N個。
  
  
  
  • '[property=value]' # 中括號表示要取的對像的條件是，其html標籤的屬性(property)和這屬性的值(value)要一樣。
  
  
  
  
  
  



• 'selector1, selector2, ...' # 一次複選多個element以逗號分隔，這稱為compound selector。



• 用來新增element
  
  
  
  
  
  • $('<htmlTag>') # 建立一個htmlTag標籤在html中
  
  
  
  • $('<htmlTag>Some Text</htmlTag>') # 建立一個htmlTag標籤(標籤包含SomeText文字)在html中。
  
  
  
  • $('<htmlTag>').text('Some Text') # 同上一行。
  
  
  
  
  
  

事件處理 Event Handler

• element.ready(function) # 當element準備完成的時候執行function。
  
  
  
  
  
  • $(document).ready(function(){ ... }); # 當html準備完成時執行function。
  
  
  
  
  
  



• element.on('event', 'selector', function) # 預先定義指定的selector的event事件要做的function。
  
  
  
  
  
  • $(document).on('click', '.item', function(){...}) # 所有class為item的element被按下時執行function。(因為是預先定義所以之後在jQuery動態加入的item也有效)。
  
  
  
  
  
  



• //----------------------------------------//



• element.mouseenter(fucntion) # 當滑鼠移到element時執行function。



• element.mouseleave(function) # 當滑鼠離開element時執行function。



• element.hover(function [, function2] ) # ↓↓↓↓↓↓↓↓↓↓↓
  
  
  
  
  
  • element.hover(function) # 當滑鼠移到或離開elemnt時執行function。
  
  
  
  • element.hover(mouseenterFunction, mouseleaveFunction) # 當滑鼠移到element時執行mouseenterFunction，離開時執行mouseleaveFunction)。
  
  
  
  
  
  



• element.click(fucntion) # element擊點時執行function。



• element.dblclick(fucntion) # element雙擊時執行function。



• element.focus(function) # element取的焦點時執行function。



• element.keydown(function([key])) # element按鍵按下時執行function。(可以用key.which來判斷按下的鍵值)。



• element.keyup(fucntion([key])) # element按鍵起來時執行function。



• element.keypress(fucntion([key])) # element按鍵擊點時執行function。

顯示函數

• element.show() # 顯示element。



• element.hide() # 穩藏element。



• element.toggle() #切換'顯示'和'穩藏'的狀態在element。



• element.slideDown([speed]) # 顯示element，用slideDown(滑落)的方式。



• element.slideUp([speed]) # 穩藏element，用slideUp(滑升)的方式。



• element.slideToggle([speed]) #切換顯示、穩藏element，用slideDown和slideUp的方式。



• element.fadeIn() # 顯示element，用fadeIn(逐漸淡入(從透明到不透明))的方式。



• element.fadeOut() # 穩藏element，用fadeOut(逐淡出(從不透明到透明))的方式。



• element.fadeTo(speed, percentage) # 以speed的速度改變element的不透明度到percentage百分比(0->透明, 1->不透明)，
  
  
  
  
  
  • $('div').fadeTo('fast', 1);
  
  
  
  
  
  



• element.animate(style,time) #把element逐漸變成設的的style，time預設是毫秒。

class

• element.addClass('className') # 為element加上Class。



• element.removeClass('className') # 為element移除Class。



• element.toggleClass('className') # 切換adding and removing一個Classh在element。

加入函數 !!!!這是加入，不是新增!!!!

• element.appendTo(where) # 在where裡面的最後端element。
  
  相等於 where.append(element)
  
  
  
  
  
  • <a href='#'>XD</a>
    
    --->$('a').append('123');
    
    <a href='#'>XD123</a>
  
  
  
  
  
  



• element.prependTo(where) # 在指where裡面的最前端加入element。
  
  相等於 where.prepend(element)
  
  
  
  
  
  • <a href='#'>XD</a>
    
    --->$('a').prepend('321');
    
    <a href='#'>321XD</a>
  
  
  
  
  
  



• where.after(element) # 在指where後面的最前端加入element。
  
  
  
  
  
  • <a href='#'>XD</a>
    
    --->$('a').after('123');
    
    <a href='#'>XD</a>123
  
  
  
  
  
  



• where.before(element) # 在指where前面的最前端加入element。
  
  
  
  
  
  • <a href='#'>XD</a>
    
    --->$('a').before('321');
    
    321<a href='#'>XD</a>
  
  
  
  
  
  



• 幾個重要的例子
  
  
  
  
  
  • <div>Hey!</div>
    
    <p>1</p>
    
    <p id='p2'>2</p>
    
    <p>3</p>
    
    
    
    
    
    • --->$('#p2').append($('div')); # 把所有div加入到p2裡面最後一個。(這邊p2只有一個，所以造成移動的效果。)
      
      1
      
      2
      
      Hey!
      
      3
    
    
    
    • --->$('p').append($('div')); # 把所有div加入到所有p裡面最後一個。(這邊p有三個，所以造成移動+複製的效果。)
      
      1
      
      Hey!
      
      2
      
      Hey!
      
      3
      
      Hey!
    
    
    
    • --->$('#p2').append($('#p2')); #把p2加入到p2裡面最後一個。(目標是本身，所以沒有改變。)
      
      Hey!
      
      1
      
      2
      
      3
    
    
    
    • --->$('#p2').append($('p')); # 把所有的p加入到p2裡面最後一個。(這邊所有p移動到p2後面，p2不變(見上例)，其他的p移動到p2後面。)
      
      Hey!
      
      2
      
      1
      
      3
    
    
    
    • --->$('p').append($('<div>newDiv</div>')); # 把<div>newDiv<div>加入到所有p裡面最後一個。(這邊p有三個且$('<htmlTag>')為新增不是選擇，所以造成新增的效果。)
      
      Hey!
      
      1
      
      newDiv
      
      2
      
      newDiv
      
      3
      
      newDiv
    
    
    
    
    
    
  
  
  
  
  
  

修改函數

• element.text(string) # 修改element中的所有值成string。
  
  
  
  
  
  • $('p').text('List') #在所有<p>中把文字設成"List"。
  
  
  
  
  
  



• element.html(string) # 修改element中的HTML值為string(其中string若有html標籤則會當做標籤)。



• element.val(string) # 修改element的值(這邊限定表單)。



• element.height('100px') # 修改element的高為100px(數字與單位皆可改動)。



• element.width('50px') # 修改element的寬為500px(數字與單位皆可改動)。



• element.css('property', 'value') # 修改element的css屬性。
  
  
  
  
  
  • element.css('width','600px') # 寬改成600px。
  
  
  
  • element.css({'width':'600px''}) #同上一行，大括號表示css參數。
  
  
  
  • element.css({'width':'60px', 'height':'20px'}) # 改成寬60px高20px，用大括號可以表示多組css。
  
  
  
  
  
  

text, html, val

• <ul id='ul1'>ul
  
  <li>li1</li>
  
  <li>li2</li>
  
  <li>li3</li>
  
  </ul>
  
  <ul id='ul2'></ul>
  
  以下顯示ul2的內容
  
  
  
  
  
  • --->$('#ul2').text($("#ul1").text()); # .text取到的值不包含標籤，所以取到的值為ul li1 li2 li3。
    
    ul li1 li2 li3
  
  
  
  • --->$('#ul2').text($("#ul1").html()); # .text存值時會把html標籤當文字處理，.html取到的值包含標籤。
    
    ul <li>li1</li> <li>li2</li> <li>li3</li>
  
  
  
  • --->$('#ul2').html($("#ul1").text()); #
    
    ul li1 li2 li3
  
  
  
  • --->$('#ul2').html($("#ul1").html()); # .html存值時會把html標籤當html標籤處理，所以會顯式出ul li的格式。
    
    
    ul
    
    
    • li1
    
    
    
    • li2
    
    
    
    • li3
    
    
    
    
    
    
  
  
  
  
  
  
  
  
  

取值函數

• element.text() # 取得element的文字(不包含html值)。(如果element很多個則回傳全部的文字)。(文字就是不包含HTML標籤)。



• element.html() # 取得element的HTML值並回傳。(如果element很多個則回傳第一個的HTML值)。(HTML值就是包含HTML標籤)。



• element.val() # 取得element的值(這邊限定表單)。(如果element很多個則回傳第一個的值)。



• element.css('cssName') # 取得element的css中屬性為cssName的值。

刪除函數

• element.remove() # 移除該element。



• element.empty() # 移除該element的所有子元素，但本身不移除。

jQuery UI (http://jqueryui.com/)

• element.effect('explode') # 爆炸特效。



• element.effect('bounce', {times: n}, 'speed') # 彈跳特效，次數，速度。



• element.effect('slide') # 滑入特效，左至右。



• elementDiv.accordion() # 折疊面板，結構<div id='外圍div'><h3>標題</h3><div id='內容div'>...</div></div>



• element.draggable() # 使element可拖動。



• element.resizable() # 使element可改變大小。



• elementUlOl.selectable() # 使element可選擇。



• elementUlOl.sortable() # 使element可以用拖曳的方式換位子。

.next() #選擇下一個sibling(兄弟) element。

.prev() #選擇上一個sibling element。

.first() #選擇第一個sibling element。

.last() #選擇最後一個sibling element。

.children([selector]) #選擇子element。

.siblings([selector]) #選擇sibling element。







.length #回傳字串長度。