JQuery学习18篇(JQuery处理事件的特点)jquery事件与原生事件的比较

最新推荐文章于 2024-07-30 10:56:44 发布

程宇寒

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量181

点赞数

文章标签： JQuery javascript js jquery事件与原生事件的比较 JQuery处理事件的特点

本文链接：https://blog.csdn.net/czh500/article/details/103655597

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery学习18篇(JQuery处理事件的特点)jquery事件与原生事件的比较</title>
<link rel="stylesheet" type="text/css" href="inputAndDiv.css">
<style type="text/css">
input[type=button] {
	width: 100px;
}

input[type=checkbox] {
	width: 20px;
	height: 20px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
	<h3 style="color: #cd1636;">JQuery学习18篇(JQuery处理事件的特点)jquery事件与原生事件的比较</h3>
	<input id="test1" type="text" onclick="(function test(){alert('hello');})();"><br/>
	<input id="test2" type="text" onmouseover="(function test(){alert('hi');}());"><br/>
	<input id="test3" type="text" value="双击我"><br/>
	<input id="test4" type="text"><br/>
	<hr/>
	<input id="test5" type="text" value="江西省赣州市于都县渡江大道666号"><br/>
	<input id="test6" type="text" value="于都县"><br/>
	<hr/>
	<input id="userName" type="text" value="请输入用户名"><br/>
	<input id="email" type="text" value="请输入邮箱"><br/><br/>
	<input style="width: 320px;" type="button" id="button1" value="原生绑定(原生绑定和jquery绑定次数上的区别)">
	<input style="width: 320px;" type="button" id="button2" value="jquery绑定(原生绑定和jquery绑定次数上的区别)"><br/>
	<hr/>
	<div id="div1"><p>我老家在江西省贛州市于都县</p></div>
	<input style="width: 150px;" type="button" id="button3" value="Jquery的html()函数" onclick="testJqueryHtml();">
	<br/>
</body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var input_node = document.getElementById('test2');
input_node.onclick = function(){
	alert('江西省赣州市于都县');
// 	this.focus = function(){
// 		console.log('获得焦点了');
// 	};
this.onfocus = function(){
		console.log('获得焦点了');
	};
};

document.getElementById('test3').ondblclick = function(){
	alert('666');
};

document.getElementById('test4').onmouseover = function(){// 原生事件绑定
	console.log('鼠标移上来了');
	this.focus();// 原生事件触发
};

//绑定事件与触发事件的区别
document.getElementById('test5').onfocus = function() {//原生绑定
	this.style.background = 'Tomato';
};

document.getElementById('test5').onmouseover = function() {
	this.value = '';
	this.focus(); //原生触发
};

$('#test6').mouseover(function(){
	$(this).val(''); //传参则设置对象的value,不传参则获取对象的value
	$(this).css('background', 'MediumSeaGreen');
	console.log('****************************');
	console.log($(this).css('background'));
	console.log(this.style.background);
	$(this).focus();
});


//Jquery的html()函数
function testJqueryHtml(){
//$('选择器').html();//意思是取值
console.log($('#div1').html());
//$('选择器').html('值');//意思是设置值
$('#div1').html('<font size="16" color="red">江西省赣州市于都县赣南脐橙</font>');
console.log($('#div1').html());
}

console.log('***************************');
var inputNode_userName = document.getElementById('userName');
inputNode_userName.onmouseover = function(){// 原生事件绑定
	this.value = '';
	this.focus(); // 原生事件触发
};

console.log($("input[id='email']"));
console.log($('input[id="email"]')[0]);
console.log($('input[id=email]')[0]);

//jquery写法
$('input[id="email"]').mouseover(function(){
	console.log('鼠标移上来了........');
//修改value
	$(this).val('');// 修改value,如果不传参数则读其value
	$(this).focus();
});

//原生绑定和jquery绑定在次数上的区别
//原生绑定(只会执行最后一次的，类似于变量多次赋值，最后的赋值会覆盖前面的赋值)
document.getElementById('button1').onclick = function(){
	alert('江西省');
};

document.getElementById('button1').onclick = function(){
	alert('赣州市');
};

document.getElementById('button1').onclick = function(){
	alert('于都县');
};

//jquery绑定(绑定几次就执行几次)
$('#button2').click(function(){
	alert('赣南脐橙');
});

$('#button2').click(function(){
	alert('柿子饼');
});

$('#button2').click(function(){
	alert('酸枣糕');
});
</script>
</html>

程宇寒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习18篇(JQuery处理事件的特点)jquery事件与原生事件的比较

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>JQuery学习18篇(JQuery处理事件的特点)jquery事件与原生事件的比较</title><link rel="stylesheet" type="te...
复制链接

扫一扫