Jquery学习第一步

来源：互联网发布：社交网络系统编辑：程序博客网时间：2024/05/22 13:45

最近有做毕业设计有空闲时间，除了答辩以外，还想稍微学一学前段的一些基础知识，jQuery，requireJS，vue.js一步一步学习吧，活到老学到老！

这里先介绍一下第一天学习的Jquery，都比较基础：

1.简单例子：jquery可以从cdn上引入，也可以下载包在导入项目，jquery要是最先加载的js

html代码：

<p>点我隐藏</p>

js代码：

js代码：$(document).ready(function(){$("p").click(function(){$(this).hide();})})$(document).ready(function(){$("button").click(function(){$(".class").text("XXXX");$("#id").text("YYY");});})

2.事件绑定bind和unbind

js代码：

$(document).ready(function(){$("#clickBtn").bind("click",clickHandler1);$("#clickBtn").bind("click",clickHandler2);$("clickbtn").unbind("click",clickHandler1);//只接触绑定的clickHandler1,clickHandler2正常执行，不指定则全部解绑//和时间绑定是一样的效果//$("#clickBtn").on("click",clickHandler1);//$("#clickBtn").on("click",clickHandler2);//$("clickbtn").off("click",clickHandler1);//只接触绑定的clickHandler1,clickHandler2正常执行，不指定则全部解绑});function clickHandler1(e){console.log("clickHandler1")}function clickHandler2(e){console.log("clickHandler2")}

3.jquery自定义事件

js代码：

var ClickMeBtn;$(document).ready(function(){ClickMeBtn = $("#ClickMeBtn");ClickMeBtn.click(function(){var e = Jquery.Event("MyEvent");ClickMeBtn.trigger(e);});ClickMeBtn.bind("MyEvent",function(event){console.log(event);});});

4.jquery事件目标与冒泡（其实就是去掉并发事件）

html代码：

<body><div style="height:300px;width:300px;"></div></body>

js代码：

$(document).ready(function(){$("body").bind("click",bodyHandler);$("div").bind("click",divHandler1);$("div").bind("click",divHandler2);});function bodyHandler(event){conlog(event);}function divHandler1(event){conlog(event);event.stopPropagation();//阻止父级事件event.stopImmediatePropagation();//阻止除了自己的所有事件}function divHandler2(event){conlog(event);}function conlog(event){console.log(event);}

1 0