操作元素(属性)
属性操作
''' --------------------------属性 $("").attr(); $("").removeAttr(); $("").prop(); $("").removeProp(); --------------------------CSS类 $("").addClass(class|fn) $("").removeClass([class|fn]) --------------------------HTML代码/文本/值 $("").html([val|fn]) $("").text([val|fn]) $("").val([val|fn|arr]) --------------------------- $("").css("color","red") '''
注意：
<input id="chk1" type="checkbox" />是否可见 <input id="chk2" type="checkbox" checked="checked" />是否可见 <script> //对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。 //对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。 //像checkbox，radio和select这样的元素，选中属性对应“checked”和“selected”，这些也属于固有属性，因此 //需要使用prop方法去操作才能获得正确的结果。 // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // false // ---------手动选中的时候attr()获得到没有意义的undefined----------- // $("#chk1").attr("checked") // undefined // $("#chk1").prop("checked") // true console.log($("#chk1").prop("checked"));//false console.log($("#chk2").prop("checked"));//true console.log($("#chk1").attr("checked"));//undefined console.log($("#chk2").attr("checked"));//checked </script> attr和prop
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <div class="div1"></div> <script src="jquery-3.3.1.js"></script> <script> console.log($('.div1').hasClass('div1')) // true；$('P').hasClass('p1')判断P标签是否有class属性值为p1，返回布尔值 </script> <!--***********************属性操作***********************--> <div class="div2" con="c1"></div> <input type="checkbox">是否可见 <input type="checkbox" checked="checked">是否可见 <script> console.log($('.div2').attr('con')); // c1 $('.div2').attr('con','c2'); // 可以发现con属性值已经更改为c2 console.log($(':checkbox:first').attr('checked')); // undefined console.log($(':checkbox:last').attr('checked')); // checked console.log($(':checkbox:first').prop('checked')); // false console.log($(':checkbox:last').prop('checked')); // true console.log($('.div2').prop('con')); // undefined $('.div2').prop('con','c3'); // 上面已经显示了找不到，所以无法更改 // 结论：prop与attr用法相似，但是对于标签固有属性使用prop好一些，对于标签自定义属性使用attr好一些 </script> <div class="div3 hide">hello div</div> <script> $('.div3').removeClass('hide'); // 移除属性值 $('.div3').addClass('hide'); // 添加属性值 </script> <div id="id1"> aaaaaa <p>pppppp</p> </div> <script> console.log($('#id1').html()); // aaaaaa <p>pppppp</p> console.log($('#id1').text()); // aaaaaa pppppp $('#id1').html('<h1>hello</h1>'); // 把h1标签渲染了 $('#id1').text('<h1>hello</h1>'); // 直接把h1标签当作文本内容 </script> <input type="text" value="123"> <div value="456"></div> <script> console.log($(':text').val()); // 123 console.log($(':text').next().val()); // 什么都没打印 $(':text').val('789'); // 结论：val只能对有固有属性value的标签进行取值，如input/select/option </script> <div class="div4">hi</div> <script> $('.div4').css('color','red'); // $('.div4').css({'color':'yellow','background-color':'black'}); // 这种写法也可以 </script> </body> </html>