<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>11.15jQuery选择器之特殊选择器$(this)</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<!--JavaScript的实现-->
<script>
window.onload = function(){
//获取DOM对象
var jsdiv = document.getElementById('jsdiv');
//为对象添加事件
jsdiv.onclick = function(){
//当前对象是jsdiv,可以用this替换
//测试单击事件
//alert("测试单击事件！");
//设置当前对象的背景
this.style.background = 'pink';
//改变字体颜色
jsdiv.style.color = 'red';
};
};
</script>
<!--jQuery的实现-->
<script>
$(function(){
//获取jQuery对象
var $jqdiv = $('#jqdiv');
//为对象添加事件
$jqdiv.click(
//参数是函数
function(){
//当前对象$jqdiv,可以用$(this)替换
//设置当前对象背景
$(this).css('background-color','yellow');
//改变字体颜色
$jqdiv.css('color','green');
}
);
});
</script>
<style>
div{
width:200px;
height:200px;
background-color:#CCC;
border:2px solid #000;
margin:5px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="jsdiv">
JavaScript中单击改变背景与字体颜色
</div>
<div id="jqdiv">
jQuery中单击改变背景与字体颜色
</div>
</body>
</html>
