Jquery学习第一步

最近有做毕业设计有空闲时间,除了答辩以外,还想稍微学一学前段的一些基础知识,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);
}






评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值