摘要:<!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é)