Jquery事件汇总、网页入口

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

　　//html

<select id="s1" size="2" style="width: 400px;height: 200px;">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

<select id="s2" size="2" style="width: 400px;height: 200px;"></select>

　<div class="box">div</div>
　<button class="btn">removeclick</button>

<button id="add">添加</button>

<button id="del">删去</button>

　　//Jquery事件有如下

　　click、dblclick（双击）、mouseover、mouseout、mousemove、mousedown、

　　mouseup、keydown、keyup、focus、blur、change、submit、reset、scroll、on、off、contextmenu(鼠标右键事件)

　　//例子

$("#add").click(function(){ 　　　　　　　　　　//将事件绑定在按钮身上

　　 var opt = $("#s1 option:selected").clone(true);　　// 克隆选中option

　　opt.appendTo($("#s2"));　　　　　　　　　　 //把 opt 添加到 s2

　 });

$("#del").click(function(){ 　　　　　　//删除按钮点击的时候，事件在点击时触发

　　var opt = $("#s2 option:selected");

　　 opt.remove();　　　　　　　　　 // opt 被移除

　})

　　//上面2个函数网页效果如下

　　$(".box").click(function(){

　　$(this).css("color","red");

　 });

　// 绑定事件（时间类型，事件处理函数）

　 $(".box").on("mouseover",function(){

　　 $(this).css("background-color","green");

});

$(".btn").click(function(){

　　 // off 解除绑定事件 　

$(".box").off();// 参数为事件类型解除该类型的事件

});

　　//网页入口

　　$(document).ready(function(){

　　　　 //编写代码

　　 })

　　//简写

　　$(function(){

　　 //编写代码

　　 })

　　$().ready(function(){

　　//编写代码

　　 })

　　//上面3种方式都是一样的功能，可以根据自己的喜好，选择其中的一种。所有标签加载完自动执行上面函数

　　　//这个也是网页入口，等页面所有标签、图片什么的加载完自动执行这个函数

　　　window.onload = function(){

　　　　　　alert("亲，你看到我了");
　　　　}

</script>

</body>

</html>

巴特西

Jquery事件汇总、网页入口

最新文章

热门文章