Jquery的Dom操作

Original 2019-04-28 13:49:11 203
abstract:<!DOCTYPE html><html><head> <title>hover和toggle事件切换</title> <meta charset="utf-8"> <script type="text/javascript" src="../jquery-3.4.0.m

<!DOCTYPE html>

<html>

<head>

<title>hover和toggle事件切换</title>

<meta charset="utf-8">

<script type="text/javascript" src="../jquery-3.4.0.min.js"></script>


<script >

$(document).ready(function(){

$('.one').addClass('bb aa')

$('.one').removeClass('bb')

$('.one').text('hello world')

$('.one').html('<h1>hello world!</h1>')

$('.one').dblclick(function(){

$(this).css('background','red')

})

a=0

$(window).resize(function(){

$('b').text(':'+a++)

})

$('.two').hover(

function(){

$(this).addClass('bb')

},

function(){

$(this).css('color','#fff')

})

$('button').click(function(){

$('.there').toggle().css('background','pink')

})

})

</script>


<style type="text/css">

div{width: 200px;height: 200px;background: lightblue}

.aa{background: pink;font-size: 16px;}

.bb{color: red}

</style>

</head>

<body>

<div class="one">块级元素哦</div>

<div class="two">

页面被调整大小<b></b>

</div>

<br>

<div class="there" style="display: none;"></div>

<button>切换按键</button>

</body>

</html>


{C0}X)GNZ5Y(B8}8AR97YRI.png



Correcting teacher:查无此人Correction time:2019-04-29 09:17:35
Teacher's summary:完成的不错。jq每行语句结束要增加;号。继续加油。

Release Notes

Popular Entries