<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery.1.11.1.min.js"></script>
</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>
<script type="text/javascript">
//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>