[START]

▼ 首先當然是引入ckeditor檔案 跟Form

<script src="/js/ckeditor/ckeditor.js"></script>
<!-- textarea記得加上class="ckeditor" 這樣就可以使用預設的ckeditor了 -->
<form id="form1" name="form1" action="/goupdate" method="post">
<textarea id="editor1" name="editor1" class="ckeditor"></textarea>
<input type="submit" value="送出">
</form>

▼ javascript需要加上一行

//接著就是寫上server端接收上傳圖片的路徑 -> 這邊就是/upload
CKEDITOR.replace('editor1'
    ,{filebrowserImageUploadUrl : '/upload'}
);

▼ server端(這裡使用PHP)接收上傳圖片部分 也就是上面說的/upload

// 檔案的name預設是upload (我不知道去哪改耶XD 有人知道嗎?)
$fileNameLong = $_FILES['upload']['name'];
//
//  作了一些對圖片的處理後
//
$pathToSave = '/var/www/htdoc/photo/myimage.jpg';
move_uploaded_file($_FILES['upload']['tmp_name'],  $pathToSave);
// 再做一些處理後
// 如果上傳成功就是沒有錯誤訊息
$errorMsg = '';
// 這邊記得回傳給ckeditor
echo "<script>";
if($errorMsg==''){
    // $fileUrl是圖片網址 就自己先處理好吧
    $fileUrl = "http://www.mysite.com/photo/myimage.jpg";
    echo "window.parent.CKEDITOR.tools.callFunction(2,'" . $fileUrl . "','');";
} else {
    echo "alert('".$errorMsg."');";
}
echo "</script>";

都順利的話 最後回傳給ckeditor後
會帶入到工具列[影像]裡面的[影像資訊]頁籤
他會把URL跟圖片預覽都帶進去
再自己做處理囉
接著再按確定
就會插入進文章了

[END]

可以在application/config/config.php中找到下面這幾行

$config['csrf_protection'] = TRUE;
$config['csrf_token_name'] = 'csrf_test_name';
$config['csrf_cookie_name'] = 'csrf_cookie_name';
$config['csrf_expire'] = 7200;

原本$config['csrf_protection']預設是FALSE 改成TRUE就可以打開了
開啟之後 會自動幫你在cookie中存一個值
cookie的name在上面說的config.php中可以設定
之後傳送表單就要連這個token一起傳才行

以下用jquery的ajax功能示範

$(function(){
    $('#btn').click(function(){
	    $.ajax({
	        type:'POST'
	        ,url:'/ajax' //ajax接收的server端
	        ,data:$('#form').serialize()+'&csrf_test_name='+ getCookie('csrf_test_name')
	        ,success:function(data){
			alert(data.msg);
	        }
	        ,dataType:'json'
	    });
    });
});

function getCookie(name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
    if(arr != null) return unescape(arr[2]); return null;
}

getCookie()是用js取出cookie的值
這是在網路上找到的 可以直接拿去用

而csrf_test_name就是在config.php中可以設定的參數
將這個cookie抓出來一起送出表單
就可以正常使用了

有任何指教歡迎留言~

referer : http://ericlbarnes.com/blog/post/codeigniter_csrf_protection_with_ajax

==================
update
==================
依據這頁http://codeigniter.com/forums/viewthread/163976/ 某樓提供的方法
可以使用以下方法取得token_name以及值

<input type="hidden" name="<?php echo $this->security->csrf_token_name?>" value="<?php echo $this->security->csrf_hash?>" />

滿方便的
另外還有一點就是
如果是用CI內建的form helper
在開啟csrf_protection時 會自動幫你加入這個token的值
我本身是沒有在用啦
如果有在用的人 就會比較方便囉 (或許根本就不會發現這個問題XD)
==================
以上是update的資訊
==================

今天用這個jquery輪播的plugin
http://jqueryfordesigners.com/jquery-infinite-carousel/
他裡面有bind()了一個跳頁數的method
但是我折騰了一兩個小時 都不知道怎麼用阿！！！NO！！！

上個廁所突然豁然開朗 原來是要用trigger()阿！！！(摸鬍子)
以下是剪貼官網的範例

$('#foo').bind('custom', function(event, param1, param2) {
    alert(param1 + "\n" + param2);
});
$('#foo').trigger('custom', ['Custom', 'Event']);

首先當然是bind一個新的method
可以是click, focus 這些javascript原本就有的
或是自己取名字也行~ (上面的例子就是custom)

要觸發 就是用.trigger()囉
有參數的話 後面第二個參數用一個陣列帶入！
收工！
不錯不錯
希望不會再忘了

範例下載

http://jquery.com/
這本書是以jQuery 1.2.1版為基礎

ch.1 Introuducing jQuery 
jQuery概略介紹

ch.2 Creating the wrapped element set 
建立elements set

ch.3 Bringing pages to life with jQuery 
讓頁面上的東西更生動

ch.4 Events are where it happens! 
events的操作

ch.5 Sprucing up with animations and effects 
動畫及效果

ch.6 jQuery utility functions 
通用函式

ch.7 Extending jQuery with custom plugins 
自訂擴充plugin

ch.8 Talk to the server with Ajax 
ajax介紹

ch.9 Prominent, powerful,and practical plugins
plugin介紹
http://docs.jquery.com/Plugins 
http://jquery.com/plugins/most_popular 

簡單地說明了ajax運作的過程

首先先介紹jQuery中ajax最簡單的一個command

url是要求的網址
parameters是以object形式帶入的參數
如果有值是使用POST method，省略的話則是使用GET method
callback是當load好的值已經被放入elements後執行的function
這個function有三個參數 response text、the status code跟the XHR instance

$('.injectMe').load('/someResource #div');

這個例子會讀取/someResource頁面的東西
並將內容填入所有class=injectMe的elements中
有一點可以提的是 在url這個參數中 如果只是要取得該頁面上部份的內容時
可以在後面加上selector
像這個例子就是取得/someResource中<div>裡的內容

而如果要使用表單中的值帶入參數
可以利用serialize()來將要傳送的值轉成query string

<form id="form1" name="form1">
<input type="text" name="myname" value="joe">
<input type="text" name="age" value="18">
<input type="text" name="city" value="taipei">
</form>

var str = $("#form1").serialize();
//str會轉成這樣
// myname=joe&age=18&city=taipei

而serializeArray()則是會返回一個object

var myobj = $("#form1").serializeArray();

myobj會轉成這樣
[{name: 'myname', value:'joe'},{name: 'age', value:'18'},{name: 'city', value:'taipei'}]

舉一個賣鞋的頁面來練習load()

以get method連線

$.get(
	'getmydata.php',
	{a:1, b:2, c:3},
	function(data){alert(data);}
);

url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status

url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status
與$.get()相同 但是是返回JSON形式的值

以post method連線
url是要求的網址
parameters是參數(Object或是字串)
callback是返回的function 這個function可以有兩個參數 第一個是返回的內容 第二個是status

前一節介紹的是簡易的ajax連線方式
這節則是會介紹比較詳細 可以設定較多細節的方式

可以帶的參數很多
這裡舉較常使用的三個
其他的可以到docs看

$.ajax({
  url: "test.js",
  type: "GET",
  dataType: "script"
});

url是要求的網址
type是POST或是GET
dataType是返回值的形式 可以填入的有xml、xml、xml、json、jsonp、text

$.ajaxSetup()設定同一個頁面中$.ajax()可以共用的參數
可以帶入的參數也就是前一小節(8.4.1)所說的參數
這個不會影響到load()
而設定type時也不會影響到$.get()跟$.post()

除了可以用$.ajaxSetup()預設參數外
還有在ajax連線中的不同階段可以使用的function
ajaxStart()、ajaxSend()、ajaxSuccess()、ajaxError()、ajaxComplete()、ajaxStop()
可以到docs看

是一個綜合練習的例子

使用自訂擴充的plugin可以讓程式及設計有一致性
而且建立重複使用的設計有很多優點
繼承進而擴充了jQuery裡原本就存在的功能更是可以讓事情變得更簡單

要建立自訂擴充的plugin需要一定的規範及規則
以確保可以與其他plugin甚至是其他js lib正常地運作
Extending jQuery包含了像是Utility functions或是Methods兩種形式

為了避免plugin的檔名與原本已經在使用或是其他人建立的檔名重複
這邊提了三點建議
1.以jquery為開頭(可以避免與不是以jQuery為基礎的其他js檔重複)
2.接著可以寫這個plugin的名字
3.最後以.js結尾
以書中的例子來說
如果要寫一個名為Fred的plugin
其檔名可以命名為jquery.fred.js

另一個有用的方法 可以上jQuery收集plugin的地方找找看
如果看到相同的名字就可以避免重複囉

同樣的避免function名字與別人重複到
也是一樣的方法

jQuery('#myitem').show();

如果是自己在寫jQuery的script時
常常會使用$來代替jQuery的寫法
但是在寫plugin時
則是可以使用jQuery來寫
以避免不確定性(例如同頁面有使用prototype.js)囉
或是如前一章6.2所提的

(function($){
//
// 在這裡使用$
//
})(jQuery);

寫在這裡面時就可以用$囉

在使用plugin時可能會需要傳入不同的參數來運用
但是有時只需要用預設值就好了

//例如有一個function有7個參數
function complex(p1,p2,p3,p4,p5,p6,p7) {/* ... */}
//
//但有時只需要填入p1或是p7的值來使用
complex(valueA,null,null,null,null,null,valueB);
//
//甚或是這樣
complex(valueA,null,valueC,valueD,null,null,valueB);

這樣會造成傳入及讀取參數的複雜度
所以可以使用下面的方法來取代

complex(valueA, {
  p3: valueC,
  p4: valueD,
  p7: valueB
});

將一定要傳入的參數如同之前一樣的設定置放
而把其他有時候可以省略的參數合併放在一個object中
這樣便不用在意是第幾個參數省略
或是傳入了多少個參數了

在plugin裡要使用參數的時候
可以利用6.3.6講到的$.extend()

function complex(p1,options){
  var settings = $.extend({
    option1: defaultValue1,
    option2: defaultValue2,
    option3: defaultValue3,
    option4: defaultValue4,
    option5: defaultValue5,
    option6: defaultValue6
  },options||{});
  //其他script
}

因為$.extend()裡排在後面的object會把前面的object中有相同的property值蓋過去
所以如果有填入參數 就會使用填入的參數
不然就是使用預設的參數
而有一點要注意的是||{}這個地方
當完全沒有填入參數時
就都使用plugin中的預設值

(function($){
//
// 在這裡使用$
//
})(jQuery);

就如同7.2.2講的
如果在plugin中有大量使用到jQuery自己本身的method
可以使用上面這樣的方法
就可以在裡面使用$ 而不受到干擾

這兩小節各別有一個Utility functions類型的自訂擴充練習

要建立wrapper methods是使用$.fn
下面是一個簡單的例子

(function($){
  $.fn.makeItBlue = function() {
    return this.css('color','blue');
  }
})(jQuery);

通常來說 除非是特殊需要
否則return的值仍是該wrapped set
這樣才能繼續在chain中使用這組elements

這兩小節各別有一個wrapper method類型的自訂擴充練習

(function($){
  //將settings定義在這裡 才能讓其他的methods(如下面的showPhoto)使用到
  var settings;
  //主要的plugin
  $.fn.photomatic = function(callerSettings) {
    //如同7.2.3所講的參數用法一樣
    settings = $.extend({
      photoElement: '#photomaticPhoto',
      lastControl: null
    }, callerSettings || {});
    //plugin所執行的功能
    settings.thumbnails = this.filter('img');
    settings.thumbnails.click(function(){ showPhoto(this.index); });
    //如果有需要 可以給一個初始值
    showPhoto(0);
    //返回同樣的wrapped set
    return this;
  };
  //將重複性的功能另外寫一個method
  var showPhoto = function(index) {
    settings.photoElement
      .attr('src',settings.transformer(settings.thumbnails[index].src));
    settings.current = index;
  };
})(jQuery);

在7.4.2中 講解的例子架構大概是上面這樣(有刪掉部份的東西)

這章會介紹除了操作elements外的utility functions

這節要介紹三個jQuery flags
$.browser
$.boxModel
$.styleFloat

檢測使用者所用的瀏覽器
一開始是先介紹使用判斷method的方法

if (element.attachEvent) {
  element.attachEvent('onclick',someHandler);
}
else if (element.addEventListener) {
  element.addEventListener('click',someHandler);
}
else {
  throw new Error('event handling not supported');
}

而這個可能發生的問題是 method可以使用
但是裡面帶的參數因為不同的瀏覽器而有不同的意義
所以jQuery提供了一個辨識瀏覽器的方法

if($.browser.msie){
	alert('這是IE瀏覽器');
}

會有下面幾個值
$.browser.msie
$.browser.mozilla
$.browser.safari
$.browser.opera
$.browser.version
前面四個返回的是boolean值
是將瀏覽器歸類到四大類
如果為該類即返回true
其餘會是false
而有些瀏覽器因為版本不同 也可能會有差異 所以$.browser.version是使用的版本

建議是method方法也無法判別了才使用$.browser

$.boxModel返回一個boolean值
當是使用W3C standard box model時返回true
而使用IE box model(或是說traditional box model)時返回false
這個需要用到的時機
書中提到的是關於width跟height的解釋
使用W3C standard box model時
計算width跟height不會包含padding跟border的pixels
而IE box model則會包含
所以可能會造成elements的大小在不同瀏覽器看起來會不太一樣

在不同的瀏覽器對於float有不同的名字
在IE是styleFloat 其他的則是cssFloat
所以使用$.styleFloat就不用擔心這個問題了

element.style[$.styleFloat] = 'left';

不過通常使用css(‘float’)就可以了
$.styleFloat主要是給plugins或是extensions製作的人使用

在Ch1有稍微提到
如果在同個頁面上要使用其他的javascript library
可以使用$.noConflict()來避免衝突

var $j = jQuery.noConflict();

這樣就可以使用$j來代替jQuery或是$了

或是可以使用下面這樣

//要注意有帶參數$喔
(function($) { /* function body here */ })(jQuery);
//或是下面這個ready function
jQuery(function($){alert('$ = '+ $);});

在裡面就還是可以使用$來操作囉

$('#someField').val($.trim($('#someField').val()));

就像PHP中trim()的函式
將字串前後的空白都消除掉
在表單驗證中很常用到

對一個array或object中的值依序作處理

var anArray = ['one','two','three'];
$.each(anArray,function(n,value) {
  //do something here
});
var anObject = {one:1, two:2, three:3};
$.each(anObject,function(name,value) {
  //do something here
});

container是要處理的array或是object
callback是作處理的function
這個function會有兩個參數 第一個是index 第二個是value

以某個條件過濾一個array以生成另一個新的array

var arr = [ 1, 9, 3, 8, 6, 1, 5, 9, 4, 7, 3, 8, 6, 9, 1 ];
var newarr = $.grep(arr, function(n, i){
					      return (n > 5);
					    });
//新生成的newarr會是 [9, 8, 6, 9, 7, 8, 6, 9]

第一個參數array很明顯的就是要處理的array
第二個參數callback是作處理的function 會有兩個參數 第一個是value 第二個是index
第三個參數invert是個boolean值
如果省略invert或是填寫false時 當callback返回值為true的話 就會將這個值放進新生成的array中
如果invert填入true 則當callback返回值為false才會將這個值放進新生成的array中

var bigNumbers = $.grep(originalArray,'a>100');
//這時jQuery會自己建立一個function
function(a,i){return a>100;}
//而a就是value ,i就是index

如上所示 callback也可以簡寫為一個string

對一個array作處理並生成為一個新array
第一個參數array是要處理的array
第二個參數callback是作處理的function 會有兩個參數 第一個是value 第二個是index

//將array中的每個值都+1
var oneBased = $.map([0,1,2,3,4],function(value){return value+1;});
//callback如同$.grep()一樣 也是可以寫成一個string
var oneBased = $.map([0,1,2,3,4],'a+1');

而有一點要注意的是
如果callback返回值為null或是undefined
則這個值就不會被放進新array中
所以新的array元素個數是有可能比原本的array少

var characters = $.map(
  ['that','other thing'],
  function(value){return value.split('');}
);
//characters會是['t','h','a','t','o','t','h','e','r',' ','t','h','i','n','g']

如上所示 另一個可以提的是
如果callback處理值完之後 回傳的是一個array
則會將這些所有回傳的array都和在同一個新的array中

判斷一個array中有沒有某個值

var index = $.inArray(2,[1,2,3,4,5]);
//會返回1

第一個參數value是要判斷的值
當第二個參數array中遇到第一個值為value的時候 會返回其index
找不到的時候則會返回-1

var images = document.getElementsByTagName("img");
//這樣是一個NodeList

將一個array-like object(像是一個NodeList)轉換成array

將array中相同的值剔除掉

將數個object合併
下面是一個簡單的例子

var target =  { a: 1, b: 2, c: 3 };
var source1 = { c: 4, d: 5, e: 6 };
var source2 = { e: 7, f: 8, g: 9 };
$.extend(target,source1,source2);

如果沒有返回給一個新的object
則是會合併在第一個參數target
而這個例子中 target會變為{a: 1, b: 2, c: 4, d: 5, e: 7, f: 8, g: 9}
有一點要注意的是
如果objects中有相同的property 則後面的object的會蓋過前面的
(這個例子就是source1的c:4會蓋過target的c:4，source2的e:7會蓋過source1的e:6)

依據條件或是情況下再讀取其他的外部script 而不是在頁面load時就讀取script
第一個參數url是要讀取的script的路徑
第二個參數是讀取script完成後會執行的function

要簡單地顯示或隱藏elements 是使用show()以及hide()這兩個方法

$("#myimg").hide();
$("#myimg").show();

這裡還有提到一點就是
如果頁面上某個element要預設成隱藏
書裡推薦的是在頁面load完後再使用hide()將他隱藏
會比直接在style裡加display:none;好

這個小節利用一個巢狀列表 以顯示或是隱藏裡面的資訊來練習show()及hide()

還有一個可以切換顯示或是隱藏elements的方法 toggle()

$("#myimg").toggle();

當elements是隱藏的時候 使用toggle()會將他顯示 相反也是一樣

這節是要介紹比較不突兀的顯示或隱藏elements的方法
利用一些effect來讓這個動作比較平滑

$("#myimg").show('fast');
$("#myimg").hide(2000);

第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast)
如果省略的話 則是會像上節講的一樣直接隱藏
第二個參數callback是擺一個function 當這個動作完成時會執行

同樣的 show()跟toggle()的用法也是一樣
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast)
第二個參數callback是擺一個function 當這個動作完成時會執行

另一種顯示或隱藏的方法是改變elements的透明度直到完全透明或是完全顯示
fadeIn()跟fadeOut()

$("#myimg").fadeOut('fast');

(與show()、hide()、toggle()的參數用法一樣)
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數callback是擺一個function 當這個動作完成時會執行

另一個方法fadeTo()則是可以調整elements的透明度

$("#myimg").fadeTo('fast',0.5);

第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數opacity是透明度 他的範圍可以填入0.0 ~ 1.0
第三個參數callback是擺一個function 當這個動作完成時會執行

還有另一種顯示或隱藏的方法是將elements慢慢向上收回或是慢慢向下展開
slideDown()跟slideUp()及切換的slideToggle()

$("#myimg").slideDown(1000);
$("#myimg").slideToggle('slow');

(與show()、hide()、toggle()的參數用法一樣)
第一個參數speed可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
第二個參數callback是擺一個function 當這個動作完成時會執行

當要停止某個elements的動作時 要使用stop()

jQuery提供了一個方法animate() 可以讓我們自己設計想要elements作的動作

$('#animateMe').animate(
	{opacity:0,top:0}
  ,'slow'
  ,function(){ $(this).hide(); }
);

properties是填入一個object 而這個object要包含所有最後要達到css stlye
(例如elements的寬度要達到600px 之類的)
duration可以填入數字(以毫秒為單位)或是字串(slow、normal、fast) 沒填入的話預設是normal
easing是漸變的方式 有兩種內建的方式linear(線性)、swing(搖擺)
callback是擺一個function 當這個動作完成時會執行
options是填入一個object 而這個object則是可以填入上面講過的duration、easing跟complete(也就是上面說的callback)
還有另一個可以填入的是queue 如果設定為false 則這個動作會立即被執行(也就是如果後面也跟著另一個animate() 這個動作會同時執行)
[update]
如果要設定顏色的漸變 還要再裝plugin

先介紹一個改變尺寸的例子

$('.animateMe').each(function(){
	$(this).animate(
		{
			width: $(this).width() * 2,
			height: $(this).height() * 2
		},
		2000
	);
});

將class=animateMe的elements在2秒(2000毫秒)的時間內將長寬都各別變大為兩倍

介紹一個drop的例子

$('.animateMe').each(function(){
	$(this)
		.css('position','relative')
		.animate(
			{
				opacity: 0,
				top: $(window).height() - $(this).height() - $(this).position().top
			},
			'slow',
			function(){ $(this).hide(); });
});

要先將elements的position設定為relative(因為這樣才能動)
改變class=animateMe的elements的透明度及高度
最後會被移到畫面的底部 並且透明度會變0(也就是完全透明)
然後再將elements隱藏起來

有一點可以提的是
如果將opacity:0改成opacity:"hide"
這個動作最後完成時會直接將elements隱藏
同時也不需要最後的callback的function

一個擴散並消失的例子
將前兩小節的功能結合在一起

$('.animateMe').each(function(){
	var position = $(this).position();
	$(this)
		.css({position:'absolute',top:position.top,
					left:position.left})
		.animate(
			{
        opacity: 'hide',
        width: $(this).width() * 5,
        height: $(this).height() * 5,
        top: position.top - ($(this).height() * 5 / 2),
        left: position.left - ($(this).width() * 5 / 2)
      },
      'normal');
});

因為在擴散的過程中 elements的位置會向右下方長大
所以同時也要改變位置 讓看起來的位置像沒有變一樣(真繞舌)
首先要改變position為absolute 並給定目前的top跟left
然後最終要到達的狀態是
opacity就跟前一小節講的一樣 hide的意思就是最後會隱藏起來
寬度跟高度則是變為原來的五倍
top跟left則是要計算成會讓elements的中心點像是沒有變一樣(也就是向四方擴散)

4.1.1 The DOM Level 0 Event Model
4.1.2 The DOM Level 2 Event Model
4.1.3 The Internet Explorer Event Model
解釋了DOM中event操作的方式
以及IE自己獨到的model
那就是這樣了 繼續讀下去
絕對不是我翻不出來XD

jQuery提供了統一的event操作方式

jQuery要對element綁定event是使用bind()

$("img").bind('click',function(event){alert('Hi there!');});

當按下<img>時 會觸發參數中的函式

eventType是event的類型(click、focus這些)
data是帶給listener的參數 可以省略
listener是觸發後執行的函式 如果第二個參數data省略的話 這就會變成第二個參數

而對於常用的event jQuery也提供了各自的方法
例如click event 如下

$("img").click(function(){alert('Hi there!');});

按下圖片時會alert
其他可以看官網

另一個跟bind()很像的是one()

用法跟bind()一樣
但是當這個函式被觸發一次之後 就會被自動地移除掉

而要移除的話是用unbind()

如果兩個參數都省略的話 就是移除掉這個element所有的event
有寫eventType的話 是看要移除哪個event
listener則是移除掉bind()所建立的函式

jQuery在event觸發後的函式中
也有可以觀察頁面上的方法
如要檢查有沒有按下ctrl鍵、alt鍵或是任何的數字字母鍵
以及滑鼠目前的座標等等
可是我找不到官網文件哪裡有寫 ._.

$("img").keypress(function(e){alert(e.keyCode);});

判斷按下了哪個鍵(該鍵的keyCode)

event的stopPropagation()
是阻止這個event往父節點的方向越往外觸發event
preventDefault()
則是停止這個event預設的任何動作
(這兩個應該是這樣吧 總覺得好像解釋的不太對= =a js真是博大精深XD)

觸發element的event

$("form:first").trigger("submit");

像是可以submit而不用按按鍵

jQuery同樣的也提供了多個簡便的使用方法
如click()、focus()、blur()
可以像使用trigger()一樣的觸發特定的event

$("input").click();

按下<input>時會觸發click event(可以先用bind()綁定click event)

另外兩個跟操作event有關的method

交互觸發不同的listener
下面是一個簡單的例子 顯示或隱藏一個id=say的element

$('#btn').toggle(
	function(event){
		$("#say").show();
	},
	function(event){
		$("#say").hide();
	}
);

按第一下會顯示 按第二下會隱藏 依序循環

另一個常用的event是當滑鼠移入跟移出element時要觸發的event
移入時是overListener
移出時則是outListener

$('#myimg').hover(reportover,reportout);

有一點要注意的是
element裡面如果有child elements時 是不會造成移出的效果
而是要移出該element才會有

這節是運用前面所學到的知識作一個綜合運用
一個點菜菜單
其中有一個用法可以看一下

$(':checkbox').click(function(){
	$('div',$(this).parents('div:first'))
	.css('display','block');
});

這個element $(‘div’,$(this).parents(‘div:first’)) 指的是
往this的parents(也就是從父層開始往外推出去)找第一個遇到的div
而這個找到的div中的div為返回的elements
(很繞舌XD)