jQuery隨筆 常見簡單效果

常見的jquery效果練習

1、全選、反選、全不選

2、從左到右，從右到左

3、新增刪除記錄

注：各個元素獲取的方式可以不同，只是明白大概思路以及熟悉用到的知識點

一、全選、反選、全不選

1、效果

2、思路

$(

function()
);$(
'#checkednobtn').
click
(function ())
; $(
'#checkedrevbtn').
click
(function ())
if($(
':checkbox[name="items"]:checked'
).length==$item.length)
else})
; $checkedallbox.
click
(function ())
; $item.
click
(function (
)else})
$('#sendbtn').
click
(function ())
})})
;

$item.

prop
('checked'
,true)
;//一次性設定了所有的checked為選中狀態，對立使用的是attr(屬性名,屬性名對應的值)
$item.
each
(function (
))

2、思路：

3、**

$(

function()
);})
;//全部新增到右邊
$("button:eq(1)").
click
(function()
);})
;//選中刪除到左邊
$("button:eq(2)").
click
(function()
);})
;//全部刪除到左邊
$("button:eq(3)").
click
(function()
);})
;});
"left"
>
"multiple" name=
"sel01"
>
"opt01"
>選項1
<
/option>
"opt02"
>選項2
<
/option>
"opt03"
>選項3
<
/option>
"opt04"
>選項4
<
/option>
"opt05"
>選項5
<
/option>
"opt06"
>選項6
<
/option>
"opt07"
>選項7
<
/option>
"opt08"
>選項8
<
/option>
<
/select>
選中新增到右邊<
/button>
全部新增到右邊<
/button>
<
/div>
"rigth"
>
"multiple" name=
"sel02"
>
<
/select>
選中刪除到左邊<
/button>
全部刪除到左邊<
/button>
<
/div>三、新增刪除記錄
1、效果
2、思路
3、**
$(function (

} var $employeetable = $(

'#employeetable');

$('#addempbutton').

click

(function ())

; $(

'a')

.click

(del);}

)

jquery 簡單的動畫效果

在html中預設的所有的元素都是不能動的 所以要實現動畫效果，必須要將positon 設定為 fixed relative absolute 才能實現 ex hide click function slow this parents ex fadeout 100 動畫在執行完成之後動作才會繼續往下做...

jQuery之簡單動畫效果

1 show 顯示動畫 語法 show speed,callback number string,function speend為動畫執行時間，單位為毫秒。也可以為slow normal fast callback可選,為 當動畫完成時執行的函式。show speed,easing callback...

JQuery簡單學習 5 JQuery效果

jquery 是為事件處理特別設計的。jquery 事件函式 隱藏 顯示 切換 滑動 以及動畫 例項 jquery hide 演示簡單的 jquery hide 函式。jquery hide hide me contact helen bennett garden house crowther wa...