abstract:<!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的操作 通过对象的关系,对节点数中的元素的属性进行操作的方法有以下: addClass() 该方法想被选中的元素添加 个或者多个类 removeClass() 该方法从被选中的元素移除 个或者多个类 attr() 该方法设置或者返回被选中元素的属性值 removeAttr() 该方法从被选中的元素中移除属性 hasClass() 该方法检查被选中的元素是否包含指定class toggleClass() 该方法被选中元素进行添加删除类的切换的操作 设置内容: text() 该方法返回或者设置选中的元素的文本内容 html() 该方法返回或者设置被选中的元素的内容(例如:innerHTML可以包括html标签) val() 该方法返回或者设置被选元素的值 */ $(document).ready(function(){ //addClass() 给一个没有添加css的p标签利用jq添加到我们css的.box属性,注意addClass('不要加.号')可以多个或单个多个用空格隔开即可 // $('p').addClass('box mian') //removeClass() 此方法将 box mian这两个类被删除了 // $('p').removeClass('box mian') // 弹出我们的attr获取到的p标签的title的属性值 // alert($('p').attr('title')) //attr获取被选中的元素的title进行修改 // $('p').attr('title','设置新给的属性值') // 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('元素替换内容') // $('span').text('恭喜您替换成功!') // $('元素').html('可替换标签') // $('p').html('<h1>替换成功!标签元素</h1>') // $('元素').val('替换成功!我是元素的新值'),设置新值还是会返回一次初始化值 $('input').val('替换成功!我是元素的新值') }) </script> </head> <body> <!-- <p title="attr测试反馈值">web前端学习计划</p> <img src="../../../课件/jQuery课件以及源码/jQuery/images/1.jpg"> <button>点击删除图片</button> <div>您好</div> <button>点击</button> --> <span>web前端学习计划</span> <b>欢迎进入高阶学习中</b> <p>我是皮标签</p> <input type="text" value="我是元素的值"> <button>点击切换</button> </body> </html>