サマリー:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery操作屬性的方法</title> <script type="text/javascript" src=&quo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery操作屬性的方法</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> .box{color: red;} .main{font-size: 40px;font-weight: bold;} .bb{color: green;} </style> </head> <body> <script type="text/javascript"> // jQuery的操作屬性其原理還是對(duì)于DOM的操作 // 通過對(duì)象的關(guān)系,對(duì)節(jié)點(diǎn)樹中的元素的屬性進(jìn)行操作的方法有以下: // addClass() 該方法向被選中的元素添加一個(gè)或者多個(gè)類,多個(gè)類用空格隔開 // removeClass() 該方法從被選中的元素移除一個(gè)或者多個(gè)類,多個(gè)類用空格隔開 // attr() 該方法設(shè)置或者返回被選中的元素的屬性值 // removeAttr() 該方法從被選中的元素中移除屬性 // hasClass() 該方法檢查被選中的元素是否包含指定class // toggleClass() 該方法對(duì)被選中元素進(jìn)行添加刪除類的切換操作 // 設(shè)置內(nèi)容: // text() 該方法返回或者設(shè)置被選中的元素的文本內(nèi)容 // html() 該方法返回或者設(shè)置被選中的元素的內(nèi)容(類擬innerHTML 可以包括HTML標(biāo)簽) // val() 該方法返回或者設(shè)置被選中的元素的值 $(document).ready(function(){ $('p').addClass('box main')//多個(gè)類,用空格隔開 // $('p').removeClass('box') // alert($('p').attr('title')) // $('p').attr('title','nihao') // alert($('p').attr('title')) // $('button').click(function(){ // $('img').removeAttr('src') // }) // $('button').click(function(){ // alert($('div').hasClass('one')) // }) $('button').click(function(){ $('span,b,p').toggleClass('bb') }) // alert($('span').text()) $('b').text('在線玩家') // alert($('p').html()) $('p').html('<h1>歡迎來到魚樂游戲中心</h1>') // alert($('input').val()) $('input').val('我是被修改后的值') }) </script> <!-- <p title="content">php中文網(wǎng)</p> <img src="images/1.png"> <button>點(diǎn)擊刪除圖片</button> <div>您好</div> <button>點(diǎn)擊</button> --> <span>大家好 我是小雅兒</span><br> <b>歡迎來到</b> <p>php中文網(wǎng)</p> <button>點(diǎn)擊切換</button> <input type="text" value="我是默認(rèn)的值"> </body> </html>