摘要:<!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>;