摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="前端課件/jQuery/jquery-3.3.1.min.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="前端課件/jQuery/jquery-3.3.1.min.js"></script> <style type="text/css"> /*.box{color: red;} .main{font-size: 24px;font-weight: bold;}*/ .bb{color: red;} </style> </head> <body> <script> //jQuery的操作屬性其原理還是對于DOM的操作 //通過對象的關系,對節(jié)點樹中的元素的屬性進行操作的方法有以下 //addClass()該方法向被選中的元素添加一個或多個類 //removeClass()該方法從被選中的元素中移除一個或多個類 //attr()該方法設置或者返回被選中元素的屬性值 //removeAttr()該方法從被選中的元素中移除屬性 //hasClass()該方法檢查被選中的元素是否包含指定的class //toggleClass()該方法對被選中元素進行添加刪除類的切換操作 //設置內容 //text()該方法返回或者設置選中的元素的文本內容 //html()該方法返回或者設置被選中的元素的內容(類似innerHTML 可以包括html標簽) //val()該方法返回或者設置被選中元素的值 $(document).ready(function(){ // $('p').addClass('box main') //多個類空格隔開 // $('p').removeClass('box main') // alert($('p').attr('title')) // $('p').attr('title','你好') // 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()) // $('span').text('大家好 我是小西瓜') // alert($('p').html()) $('p').html('<h1>helloworld!</h1>') // alert($('input').val()) $('input').val('我是被修改的值') }) </script> <!--<p title="content">PHP中文網</p> <img src="image/img.jpg" style="width: 300px;"> <button>點擊刪除圖片</button> <div class="one">你好</div> <button>點擊</button>--> <span>大家好 我是小襪子</span> <b>歡迎大家</b> <p>php中文網</p> <button>點擊切換</button> <input type="text" name="" value="我是元素的值"> </body> </html>
主要學習到了控制class、控制屬性、控制文本元素內容、控制值的方法,addClass()、removeClass()
一個是添加class一個是移除class,attr()、removeAttr()一個是設置返回屬性一個是移除屬性,hasClass()
是檢測是否存在class,返回值是true和false,toggleClass是添加和刪除class,text()返回或設置文本,html()返回或設置元素,val()是返回或設置值。