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

jquery提升實(shí)例

原創(chuàng) 2019-01-12 22:21:04 294
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery提升實(shí)例</title> <style type="text/css">    
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jquery提升實(shí)例</title>
<style type="text/css">
    a{color:red;}
    #a{color:red;}
    .b{width:50px;height:60px;border:1px solid #ccc;background:yellow;display:inline-block;}
    .c{width:80px;height:80px;border:1px solid #ccc;}
    .add{color:pink;}
    .d{color:blue;}
    .k{display:inline-block;}
    .l{width:100px;height:100px;border:1px solid #ccc;background:yellow;}
    .m{background:green;}
    .db{width:100px;height:100px;border:1px solid #ccc;background:yellow;}

    
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<body>
	<script type="text/javascript">
	$(document).ready(function(){
       alert("a標(biāo)簽的顏色是:"+$('a').css('color'))//獲取a標(biāo)簽的顏色屬性
       $('#a').css('color','blue')//改變id=a的
       $('.b').css({'width':'70px','background':'green'})
       $('.c').addClass('add')//為c類的div添加add類屬性
       $('.d').removeClass('d')//移除d類的span標(biāo)簽大的d類屬性
       alert("id=e的span標(biāo)簽,name的值為:"+$('#e').attr('name'))
       $('#f').attr('name','good2')//修改id=f的name值為good2
       alert("修改后的id=f的name值為:"+$('#f').attr('name'))
       $('button').click(function(){
       $('.k').removeAttr('style')//刪除k類的style屬性
       })
       alert("div中是否有值為c的類:"+$('div').hasClass('c'))//用hasClass來確認(rèn)div中是否有c類
       $('.h').click(function(){
       	$('.l').toggleClass('m')//用toggleClass來切換添加和刪除m類屬性
       })
       $('p').text('星期二')//修改p標(biāo)簽內(nèi)的文字為星期二
       $('b').html('<b style="font-size:25px;">星期三</b>')//修改b標(biāo)簽內(nèi)容字體為25px
       alert("類為kk的input框內(nèi)的值是:"+$('.kk').val())//返回input框value的值
       $('.kk').val('非常好')//修改value值為非常好
       $('.u').blur(function(){
       	$('.u').css('background','red')//失去焦點(diǎn)后u類的input框背景色變紅
       })
       $('.u').focus(function(){
       	$('.u').css('background','blue')//獲得焦點(diǎn)后u類的inpu框背景色為藍(lán)色
       })
       // $('.u').change(function(){
       // 	$('.u').css('background','pink')//當(dāng)u類的input框的值發(fā)生變化時(shí),背景顏色為粉紅色
       // })
       $('.db').dblclick(function(){
         $('.db').css('background','red')//雙擊變紅色
       })

	})

	</script>
	<h3>jquery獲取/操作css的方法</h3>
	<a href="#">www</a><br>
	字體變色:<span id="a">good</span><br>
	div框變寬,變色:<div class="b"></div><br>
	<h3>jquery操作屬性的方法</h3>
    <div class="c">內(nèi)容1</div>
    <span class="d">內(nèi)容2</span><br>
    <span id="e" name="good">你好</span><br>
    <span id="f" name="good1">大家好</span><br>
    <button class="g">點(diǎn)我刪除后面的div框</button>
    <div style="width:100px;height:30px;border:1px solid #ccc;background:red" class="k"></div><br>
    點(diǎn)擊按鈕切換下面div框背景顏色:<button class="h">按鈕1</button><br>
    <div class="l"></div>
    <h3>設(shè)置內(nèi)容</h3>
    重新設(shè)置下面的星期:<p>星期一</p><br>
    設(shè)置下面的字號:<b>星期三</b><br>
    <input type="text" class="kk" value="很好">
    <h3>jquery的事件切換</h3>
    <input type="text" class="u"><br>
    雙擊下面的框,背景變色:<br>
    <div class="db"></div>
    


</body>
</html>


批改老師:天蓬老師批改時(shí)間:2019-01-13 09:50:16
老師總結(jié):jQuery最大的優(yōu)勢在于它的強(qiáng)大的選擇器功能與dom操作, 你的這么代碼,如果全部用原生實(shí)現(xiàn),代碼量至少增加一倍以上, 好好研究,好好學(xué)

發(fā)佈手記

熱門詞條