val():获取/设置元素的value属性值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="http://www.likecs.com/js/jquery-3.3.1.min.js"></script> <script> $(function () { // 获取myinput的value值 // 通过id选择器获取元素对象 var value = $("#myinput").val(); alert(value); // 获取mydiv的标签体内容,使用html方法 alert($("#mydiv").html()); // 获取mydiv文本内容 alert($("#mydiv").text()); }); </script> </head> <body> <input type="text" value="张三" /><br /> <div><p><a href="#">标题标签</a></p></div> </body> </html> 属性操作1.通用属性操作
attr(): 获取/设置元素的属性
removeAttr():删除属性
prop():获取/设置元素的属性
removeProp():删除属性
attr和prop的区别如果操作的是元素的固有属性,则建议使用Prop
如果操作的是元素自定义的属性,则建议使用attr
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>获取属性</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script src="http://www.likecs.com/js/jquery-3.3.1.min.js"></script> <style type="text/css"> div,span{ width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float:left; font-size: 17px; font-family:Roman; } div.mini{ width: 30px; height: 30px; background: #CC66FF; border: #000 1px solid; font-size: 12px; font-family:Roman; } div.visible{ display:none; } </style> <script type="text/javascript"> $(function () { //获取北京节点的name属性值 //name是标签体的属性,li标签中没有name属性,所以是自定义的属性,建议使用attr //获取标签元素,使用方法attr获取属性值 var value = $("#bj").attr("name"); alert(value); //设置北京节点的name属性的值为dabeijing var value1 = $("#bj").attr("name","dabeijing"); //新增北京节点的discription属性 属性值是didu var value2 = $("#bj").attr("discription","didu"); //删除北京节点的name属性并检验name属性是否存在 $("#bj").removeAttr("name") //获得hobby的的选中状态,checked是固有属性,建议使用prop var checked = $("#hobby").prop("checked"); alert(checked); }); </script> </head> <body> <ul> <li xxx="yyy">北京</li> <li>天津</li> </ul> <input type="checkbox"/> </body> </html> 2.对class属性的操作1.addClass():添加class属性值
2.removeClass():删除class属性值