abstrak:<!DOCTYPE html><html><head> <title>jQuery的DOM操作</title> <script src="http://code.jquery.com/jquery-3.1.1.js"></script> <script type="text/ja
<!DOCTYPE html>
<html>
<head>
<title>jQuery的DOM操作</title>
<script src="http://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 1. 當(dāng)input獲取焦點時
// $('#name').focus(function(){
// $(this).css('background','#ffffcc');
// });
// 2. 當(dāng)input失去焦點時
// $('#name').blur(function(){
// $(this).css('background','#d6d6ff');
// });
// 3. 當(dāng)input發(fā)生改變時
// $('#name').change(function(){
// $('[type]').css('background','red');
// });
// 4. 當(dāng)點擊切換按鈕時
// $('button').click(function(){
// $('p').slideToggle();
// });
// 5. 當(dāng)input按下按鍵時,改變文本域的顏色
// $('#name').keydown(function(){
// $(this).css('background','#FF6700');
// });
// 6. 當(dāng)input按下按鍵松開時,改變文本域的顏色
// $('#name').keyup(function(){
// $(this).css('background','blue');
// });
// 7. 當(dāng)按下鼠標(biāo)按鈕時,隱藏或顯示元素
// $('#btn2').mousedown(function(){
// $('p').slideToggle();
// });
// 8. 當(dāng)鼠標(biāo)指針移入元素時, 改變元素的背景色
// $('p').mouseover(function(){
// $('p').css('background','#ff6700');
// });
// 9. 當(dāng)鼠標(biāo)指針離開元素時, 改變元素的背景色
// $('p').mouseleave(function(){
// $('p').css('background','blue');
// });
// 10. 當(dāng)鼠標(biāo)指針在頁面中的位置
// $(document).mousemove(function(e){
// $('span').text(e.pageX + "," + e.pageY);
// });
// 11. 獲取元素屬性與改變屬性
$('.bg1').click(function(){
var a = $('#box').attr('class');
console.log(a);
$('#box').attr('class','bg2');
});
});
</script>
<style type="text/css">
.bg1{width: 100px;height: 100px;background: red;}
.bg2{width: 100px;height: 100px;background: blue;border-radius: 50%;border: 4px solid red}
</style>
</head>
<body>
<input type="text" id="name">
<p>我們都是追夢人</p>
<button>切換</button>
<hr>
<button id="btn2">點擊</button>
<hr>
<p>鼠標(biāo)位于坐標(biāo): <span></span> </p>
<hr>
<div id="box" class="bg1"></div>
</body>
</html>
Guru membetulkan:天蓬老師Masa pembetulan:2019-02-12 09:18:31
Rumusan guru:原生js中事件是屬性,jQuery中,事件封裝成一個方法,將執(zhí)行函數(shù)做為參數(shù)回調(diào), 這個要注意二者的區(qū)別