加载DOM
<script type="text/javascript"> function one() { alert("one"); } function two() { alert("two"); } /* jQery加载DOM就绪后就能注册事件,而JS加载DOM完成后才能注册事件 jQuery加载DOM就绪注册事件 */ //方式一 $(document).ready(function () { one(); }) $(document).ready(function () { two(); }) 方式二 $(function () { one(); }) $(function () { two(); }) //方式三 $().ready(function () { one(); }) $().ready(function () { two(); }) </script>
绑定事件
<script type="text/javascript"> //绑定单击事件 // $(function () { // $("#panel h5.head").bind("click", function () { //给<h5>绑定click事件 // //$(this).next("div.content").show(); //点击后显示文本内容 // if ($(this).next("div.content").is(":visible")) { //判断是否显示 // $(this).next("div.content").hide(); // } else { // $(this).next("div.content").show(); // } // }); // }); //绑定鼠标事件() // $(function () { // $("#panel h5.head").bind("mouseover", function () { //给<h5>绑定click事件 // $(this).next("div.content").show(); // }).bind("mouseout",function(){ // $(this).next("div.content").hide(); // }); // }); //简写上述事件 // $(function () { // $("#panel h5.head").mousemove(function () { // $(this).next("div.content").show(); // }).mouseout(function () { // $(this).next("div.content").hide(); // }); // }) //合成事件 //hover(function1(),function2()) //模拟光标悬停事件,移动到元素时触发第一个函数,移除元素时触发第二个函数 // $(function () { // $("#panel h5.head").hover(function () { // $(this).next("div.content").show(); // }, function () { // $(this).next("div.content").hide(); // }); // }); //toggle(fn1,fn2,fn3) //第一次单击触发第一个函数,第二次触发第二个,依次。。。 // $(function () { // $("#panel h5.head").toggle(function () { // $(this).next("div.content").show(); // }, function () { // $(this).next("div.content").hide(); // }); // }); //toggle() 点击切换元素的可见状态 $(function () { $("#panel h5.head").toggle(function () { $(this).addClass("highlight"); //添加class为"highlight"的样式 $(this).next("div.content").toggle(); }, function () { $(this).removeClass("highlight"); //移除class为"highlight"的样式 $(this).next("div.content").toggle(); }) }); //one()绑定事件,点击以后自动移除,只能点击一次 $(function () { $("#button").one("click", function () { //执行操作 }) }) //绑定多个事件 $(function () { $("div").bind("mouseover mouseout", function () { $(this).toggleClass("over"); //切换样式 }); }); </script>
事件冒泡(事件对象)
<%--事件冒泡 --%> <script type="text/javascript"> //点击内层绑定事件 外层也被触发 // $(function () { // $("span").bind("click", function () { // var txt = $("#msg").html() + "<p>内层span元素被单击</p>"; // $("#msg").html(txt); // }); // $("#content").bind("click", function () { // var txt = $("#msg").html() + "<p>外层div元素被单击</p>"; // $("#msg").html(txt); // }); // $("body").bind("click", function () { // var txt = $("#msg").html() + "<p>body元素被单击</p>"; // $("#msg").html(txt); // }); // }); //停止冒泡事件 $(function () { $("span").bind("click", function (event) { var txt = $("#msg").html() + "<p>内层span元素被单击</p>"; $("#msg").html(txt); //事件对象 event.stopPropagation(); //停止冒泡事件 可用return false 替换 event.preventDefault(); //组织默认行为(提交表单) 可用return false 替换 event.type(); //获取事件类型 event.target(); //获取触发事件的元素 event.relatedTarget(); //获取mouseover和moveout的触发元素 event.pageX(); //获取光标相对于页面X的坐标 event.pageY(); //获取光标相对于页面Y的坐标 event.which(); //获取点击鼠标的按键:1=左,2=中,3=右 event.metaKey(); //获取Ctrl键 event.originalEvent(); //获取原始的事件对象 }); $("#content").bind("click", function () { var txt = $("#msg").html() + "<p>外层div元素被单击</p>"; $("#msg").html(txt); }); $("body").bind("click", function () { var txt = $("#msg").html() + "<p>body元素被单击</p>"; $("#msg").html(txt); }); }); </script>
移除事件
<%--移除事件 --%> <script type="text/javascript"> //同一个元素绑定多个事件 $(function () { $("#button").bind("click", function () { //绑定函数1 }).bind("fous", function () { //绑定函数2 }) }) //为绑定的click事件指定变量 $(function(){ $("#button1").click(myFun=function(){ //执行操作 }) }) //b移除按钮上以前注册的事件 $("#delAll").click(function () { $("#button1").unbind(); //点击id为delAll的按钮移除id为button1按钮的事件 移除全部事件 $(#button1).unbind("click",myFun) ; //删除绑定的myFun事件 }) </script>
模拟事件(自动触发)
<%--模拟事件(自动触发) --%> <script type="text/javascript"> $(function () { $("#panel h5.head").click(function () { $(this).next("div.content").show(); }); $("#panel h5.head").trigger("click"); //自动点击 }); </script>
添加事件的命名空间
<%--添加事件的命名空间 --%> <script type="text/javascript"> $(function () { $("div").bind("click.plugin", function () { $("body").append("<p>click事件</p>"); }).bind("mouseover.plugin", function () { $("body").append("<p>moveover事件</p>"); }).bind("mouseout", function () { $("body").append("<p>mouseout事件</p>"); }) $("#button1").click(function () { $("div").unbind(".plugin"); //移除命名空间是.plugin的事件 $("div").unbind("click!"); //移除不包含命名空间的click }) }); </script>