Jquery之事件

Jquery之事件

一、事件的相關分類

1，瀏覽器事件：

ready、resize,scroll

2、鼠標事件

click、bdclick、hover、blur、focus、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup

3、鍵盤事件

keydown、keypress、keyup

二、使用示例

1，click事件

操作按鈕：

1

<label for="" id="click1">點擊標籤</label>

script代碼：

1 2 3 4 5 6 7

<script>     $(function () {         $("#click1").click(function(){             alert('你點擊我了');         });     }); </script>

2、hover事件

操作按鈕：

1

<label for="" id="hover1">懸停標籤</label>

script代碼：

1 2 3 4 5 6 7 8 9 10

<script>     $(function () {         $("#hover1").hover(function(){             alert('你來了');         },function(){             alert('不送');         });             }); </script>

3、blur事件

輸入框：

1

<input type="text" id="input1" name="maizi" placeholder="輸入東西1"/>

script代碼 

1 2 3 4 5 6 7 8

<script>     $(function () {         $("#input1").blur(function(){             alert('blur 事件');         });             }); </script>

4、focus事件

輸入框：

1

<input type="text" id="input1" name="maizi" placeholder="輸入東西1"/>

script代碼：

1 2 3 4 5 6 7 8

<script>     $(function () {         $("#input1").focus(function(){             alert('focus 事件');         });             }); </script>

5、keyup事件

輸入框：

1

<input type="text" id="input2" name="maizi" placeholder="輸入東西up"/> <span>顯示效果：</span><span id="target1"></span>

script代碼：

1 2 3 4 5 6 7 8 9

<script>     $(function () {         $("#input2").keyup(function(){             $("#target1").text($(this).val());         });           }); </script>

6、keydown事件

輸入框：

1 2

<input type="text" id="input3" name="maizi" placeholder="輸入東西down"/> <span>顯示效果：</span><span id="target1"></span>

script代碼：

1 2 3 4 5 6 7 8 9

<script>     $(function () {         $("#input3").keydown(function(){             $("#target1").text($(this).val());         });             }); </script>

7、keypress事件

輸入框：

1 2

<input type="text" id="input4" name="maizi" placeholder="輸入東西press"/>  <span>顯示效果：</span><span id="target1"></span>

script代碼：

1 2 3 4 5 6 7 8

<script>     $(function () {         $("#input4").keypress(function(){             $("#target1").text($(this).val());         });             }); </script>