亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery的DOM操作

asal 2019-02-11 22:24:38 258
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ū)別

Nota Keluaran

Penyertaan Popular