abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery操作属性val</title> &n
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery操作属性val</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> button{margin: 4px;cursor: pointer;} input{margin: 4px;color: blue;} </style> <script> $(function () { $("button").click(function () { var text = $(this).text(); $("input").val(text); }); }) </script> </head> <body> <div> <button>苹果</button> <button>橘子</button> <button>香蕉</button> </div> <input type="text" value="喜欢吃什么?"> </body> </html>
val()用于获取被选中元素的值;和attr()的区别是attr()返回的是属性值,例如可以使用attr()修改元素的宽,高属性等。
addClass()和removeClass()前者是添加一个或多个类名:$('div').addClass("box1 box2");//添加一个或多个类名;后者是删除一个或多个以及全部类名:$('div').removeClass();//删除全部类名
toggleClass()可以动态的切换(添加/删除)元素的类;
removeAttr()和前面的attr()相关,用于移除元素的属性值;
hasClass()用于检查是否包含指定的类;
text()和html()类似都是设置该元素的所有内容并替换掉原来的内容,但是html()比text()适用更多,比如同样:
$('p').html('<a href="https://www.baidu.com">百度一下</a>');
$('p').text('<a href="https://www.baidu.com">百度一下</a>');
html()结果是百度一下的超链接,而text()结果<a href="https://www.baidu.com">百度一下</a>;