abstrakt:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq操作屬性的方法</title> <script type="text/javascript" src="..
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jq操作屬性的方法</title> <script type="text/javascript" src="../jquery/jquery-3.3.1.min.js"></script> <style type="text/css"> .box{color:red;} .mian{font-size:40px;font-weight: bold;} </style> <script type="text/javascript"> /* jquery的操作熟悉其原理還是對于DOM的操作 通過對象的關(guān)系,對節(jié)點數(shù)中的元素的屬性進(jìn)行操作的方法有以下: addClass() 該方法想被選中的元素添加 個或者多個類 removeClass() 該方法從被選中的元素移除 個或者多個類 attr() 該方法設(shè)置或者返回被選中元素的屬性值 removeAttr() 該方法從被選中的元素中移除屬性 hasClass() 該方法檢查被選中的元素是否包含指定class toggleClass() 該方法被選中元素進(jìn)行添加刪除類的切換的操作 設(shè)置內(nèi)容: text() 該方法返回或者設(shè)置選中的元素的文本內(nèi)容 html() 該方法返回或者設(shè)置被選中的元素的內(nèi)容(例如:innerHTML可以包括html標(biāo)簽) val() 該方法返回或者設(shè)置被選元素的值 */ $(document).ready(function(){ //addClass() 給一個沒有添加css的p標(biāo)簽利用jq添加到我們css的.box屬性,注意addClass('不要加.號')可以多個或單個多個用空格隔開即可 // $('p').addClass('box mian') //removeClass() 此方法將 box mian這兩個類被刪除了 // $('p').removeClass('box mian') // 彈出我們的attr獲取到的p標(biāo)簽的title的屬性值 // alert($('p').attr('title')) //attr獲取被選中的元素的title進(jìn)行修改 // $('p').attr('title','設(shè)置新給的屬性值') // alert($('p').attr('title')) //$聲明獲取('button')連接上.click(function(){此處寫的是方法}) // $('button').click(function(){ //聲明獲取到的img元素連接上removeAttr刪除的方法,刪除掉圖片的路徑 // $('img').removeAttr('src') // }) // $('button').click(function(){ // alert( $('div').hasrClass('one')) // }) // $(document).ready(function(){ // $('button').click(function(){ // $('span,b,p').toggleClass('box') // }) // }) // $('元素').text('元素替換內(nèi)容') // $('span').text('恭喜您替換成功!') // $('元素').html('可替換標(biāo)簽') // $('p').html('<h1>替換成功!標(biāo)簽元素</h1>') // $('元素').val('替換成功!我是元素的新值'),設(shè)置新值還是會返回一次初始化值 $('input').val('替換成功!我是元素的新值') }) </script> </head> <body> <!-- <p title="attr測試反饋值">web前端學(xué)習(xí)計劃</p> <img src="../../../課件/jQuery課件以及源碼/jQuery/images/1.jpg"> <button>點擊刪除圖片</button> <div>您好</div> <button>點擊</button> --> <span>web前端學(xué)習(xí)計劃</span> <b>歡迎進(jìn)入高階學(xué)習(xí)中</b> <p>我是皮標(biāo)簽</p> <input type="text" value="我是元素的值"> <button>點擊切換</button> </body> </html>