jQuery框架学习笔记一

来源:互联网 时间:1970-01-01

jQuery框架学习笔记一,有需要的朋友可以参考下。

首先JQuery是什么?

JQuery是JavaScript的函数库,它支持HTML元素的选取和操作,css操作,js特效操作,DOM遍历和修改,Ajax(可以实时的改变网页的内同)等。。。

JQuery的使用也非常的简单

<script src="jquery-2.1.4.min.js"></script>
1、jQuery选择器及常用事件
$(document).ready(function(){ //页面加载完毕 //$("#btn1").click(function(){ //id为btn1的标签的点击事件 执行function函数 // alert("hello world!"); //弹出对话框 //}); //$("#btn1").dblclick(function(){ //id为btn1的标签的双击事件 执行function函数 // alert("hello world!"); //弹出对话框 //}); // $("#btn1").mouseenter(function(){//鼠标移动到元素上边时触发的事件 // $(this).hide(); //隐藏事件 // } // ); $("#btn1").mouseleave(function(){//鼠标从元素上方移开时触发的function$(this).hide(); //隐藏事件} );});
2、绑定事件
当代码特别多,事件特别多时 $("#btn1").click这种事件消耗内存比较大,所以推荐使用绑定事件
HTML代码
<input type="button" value="按钮1" id="btn1"><input type="button" value="按钮2" id="btn2">

js代码
$(document).ready(function(){ //$("#btn1").bind("click",clickHandler1);//绑定事件 //$("#btn1").bind("click",clickHandler2); //$("#btn1").unbind("click");//解绑事件 在这一标签上的所有点击事件都将失效 //$("#btn1").unbind("click",clickHandler1);//解绑特定的事件 //1.7版本之后 推荐使用on off来绑定和解绑事件 和上边一个效果 $("#btn1").on("click",clickHandler1); $("#btn1").on("click",clickHandler2); $("#btn1").off("click"); $("#btn1").off("click",clickHandler1);});function clickHandler1(){ alert("第一个绑定事件");}function clickHandler2(){ alert("第二个绑定事件");}

3、jQuery选择器和事件之事件目标和冒泡
html代码:
<div style="width: 500px; height: 500px; background-color: aqua"> <ul><li>苹果</li><li>苹果</li><li>苹果</li><li>苹果</li> </ul></div>
js代码:
$(document).ready(function(){ $("body").bind("click",bodyHandler); $("div").bind("click",divHandler1);$("div").bind("click",divHandler2);});function divHandler2(event){ conLog(event);}function divHandler1(event){ conLog(event); //event.stopPropagation();//阻止事件向父控件传递 event.stopImmediatePropagation();//阻止一切事件}function bodyHandler(event){ conLog(event);}function conLog(event){ console.log(event);}

4、jQuery之自定义事件
var ClickMeBtn;$("document").ready(function(){ ClickMeBtn = $("#btn"); //简化代码 ClickMeBtn.click(function(){ var e = jQuery.Event("MyEvent"); //自定义事件ClickMeBtn.trigger(e); }) ClickMeBtn.bind("MyEvent",function(event){ //调用自定义事件console.log(event); })});



版权声明:本文为博主原创文章,未经博主允许不得转载。



相关阅读:
Top