jQuery 属性操作
一.标签属性操作
attr() 设置属性值,或返回被选元素的属性值 (//getAttrbute() setAttrbute()) 路径的相对地址
removeAttr() 移除属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <img src="./xiaohua.jpg" alt="" > <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { //attr //获取值 console.log($('img').attr('src')); //./xiaohua.jpg //设置值 $('img').attr('alt','美女'); //./xiaohua.jpg //设置多个标签属性值 $('img').attr({ 'aaa':'美女', 'bbbb':'个哈哈哈' }); //移除 removeAttr() setTimeout(()=>{ //移除单个属性 // $('img').removeAttr('alt'); //移除多个属性 $('img').removeAttr('alt aaa bbbb'); },3000) }) </script> </body> </html>
注意: 不要使用attr() 或者prop()来设置类名
二.对象属性操作
prop() 设置(// oDiv,id)
removeProp() 删除(// oDiv.id = '')
方法设置或返回被选元素的属性和值.
当方法用于返回属性值时,返回第一个匹配元素的值
当方法用于设置属性时, 则为匹配元素集合设置一个或多个属性/值对.
语法:
返回属性的值>>
$(selector).prop(property)
设置属性和值>>
$(selector).prop(property,value)
设置多个属性和值>>
$(selector).prop({property:value, property:value,...})
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ border: 1px solid red; } </style> </head> <body> <img src="./xiaohua.jpg" alt="" class="box"> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { //获取值 console.log($('img').prop('src')); $('img').prop('aaaa','美女'); $('img').prop({ 'bbb':'哈哈', 'aa':'嘿嘿' }); //移除 removeProp() 删除一个属性 $('img').removeProp('aa'); $('img').removeProp('bbb'); console.log($('img')); setTimeout(()=>{ },3000) }) </script> </body> </html>
三.类的操作
addClass() 添加类
removeClass() 移除类
toggleClass() 添加/移除类 如果存在(不存在)就删除(添加)一个类。
$('div').addClass("box");//追加一个类名到原有的类名 $('div').addClass("box box2");//追加多个类名 $('div').removeClass('box');//移除指定的类(一个或多个) $('div').removeClass(); //移除全部的类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box{ width: 200px; height: 200px; background-color: red; display: none; } div.active{ display: block; } </style> </head> <body> <button>显示</button> <div class="box"></div> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { var isHide = true; $('button').click(function () { /* if (isHide){ $('.box').addClass('active aa vbbb addad'); isHide = false; }else{ $('.box').removeClass('active aa vbbb'); isHide = true; } */ $('.box').toggleClass('active'); }) }) </script> </body> </html>
四.值得操作
text() 设置文本的内容 (//innerText)
html() 设置文本又设置标签 (//innerHTML)
val() 用于表单控件中获取设置值,比如input textarea select等等(//value)
注意: 如果不传参,表示获取值 如果传参数,表示设置值.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box { width: 200px; height: 200px; background-color: red; display: none; } div.active { display: block; } .ac{ font-size: 24px; } </style> </head> <body> <button id="show">显示</button> <button id="del">移除标签</button> <div class="box"> </div> <input type="text" value="嘿嘿嘿"> <script src="./libs/jquery-3.3.1.js"></script> <script> $(function () { var isHide = true; $('#show').click(function () { if (isHide) { $('.box').addClass('active aa vbbb addad'); isHide = false; //获取文本的值 console.log($(this).text()); //只设置文本 var name = 'alex2333' $(this).text('隐藏'); $('.box').html(`<ul> <li id="" class="ac"><a href="">哈哈哈</a></li> <li>${name}</li> <li>alex</li> <li>alex</li> </ul>`) } else { $('.box').removeClass('active aa vbbb'); isHide = true; $(this).text('显示'); } }) $('#del').mouseenter(function () { $('.box').html(''); }) //获取值 console.log( $('input[type=text]').val()); //设置值 $('input[type=text]').val('alex'); console.log( $('input[type=text]').val()); }) </script> </body> </html>
五.样式属性操作
$(selector).css()
如果有一个参数,参数是字符串表示获取值,参数是对象,表示设置多个值
如果有两个参数, 表示设置值
六.操作input中value的值(重点)
$(selector).val() 设置和获取值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action=""> <input type="radio" name="sex" value="112"/>男 <!-- 设置cheked属性表示选中当前选项 --> <input type="radio" name="sex" value="11" checked=""/>女 <input type="radio" name="sex" value="11"/>gay <input type="checkbox" value="a" checked=""/>吃饭 <input type="checkbox" value="b"/>睡觉 <input type="checkbox" value="c" checked=""/>打豆豆 <!-- 下拉列表 option标签内设置selected属性 表示选中当前 总结: 如果option中没有value 设置当前的值 通过标签的文本设置 如果有值通过value --> <select name="timespan" id="timespan" class="Wdate" multiple="multiple"> <option selected>alex</option> <option selected="">wusir</option> <option>wulaoban</option> <!--<option selected="selected">Multiple</option>--> <!--<option>Multiple2</option>--> <!--<option selected="selected">Multiple3</option>--> </select> <select name="" id="fruit"> <option>香蕉</option> <option>苹果</option> </select> </select> <input type="text" name="" id="" value="111"/> </form> <script type="text/javascript" src="./libs/jquery-3.3.1.js"></script> <script type="text/javascript"> $(function () { // 一、获取值 //1.获取单选框被选中的value值 console.log($('input[type=radio]:checked').val()) // // //2.复选框被选中的value,获取的是第一个被选中的值 console.log($('input[type=checkbox]:checked').eq(1).val()) // // //3.下拉列表被选中的值 // var obj = $("#timespan option:selected"); // // 获取被选中的值 var time = obj.val(); console.log(time); // // 获取文本 var time_text = obj.text(); console.log("val:" + time + " text" + time_text); //4.获取文本框的value值 // console.log($("input[type=text]").val())//获取文本框中的值 // 二.设置值 //1.设置单选按钮和多选按钮被选中项 // $('input[type=radio]').val(['112']); $('input[type=checkbox]').val(['a', 'b']); //2.设置下拉列表框的选中值,必须使用select /*因为option只能设置单个值,当给select标签设置multiple。 那么我们设置多个值,就没有办法了,但是使用select设置单个值和多个值都可以 */ // $('select').val(['2','3']) // $('select').val([ "Multiple2", "Multiple3" ]); // $('select').val([ "alex", "wulaoban" ]); //3.设置文本框的value值 // $('input[type=text]').val('试试就试试') // $('#fruit').val('苹果'); // $('#fruit').val(['苹果','哈哈哈']); }) </script> </body> </html>
关于下拉列表:
<select name="timespan" id="timespan" class="Wdate" multiple="multiple" > <option value ='1' selected>alex</option> <option value = '2' selected="">wusir</option> <option value = '3'>wulaoban</option> </select> 总结: 1.如果option中的属性有value,优先使用value设置 $('#timespan').val(['1','3']);//选中1 和3选项 2.如果没有value,那么使用标签的文本内容设置 $('#timespan').val(['alex','wulaobnan']) //选中1 和 3 选项