jquery操作属性

Original 2018-11-12 10:45:32 164
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>;

Release Notes

Popular Entries