jQuery属性

最新推荐文章于 2022-10-20 12:37:50 发布

噢啦噢啦噢啦

最新推荐文章于 2022-10-20 12:37:50 发布

阅读量224

点赞数

分类专栏： HTML.

本文链接：https://blog.csdn.net/qq_35860368/article/details/53679214

版权

HTML. 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .as{
            color: red;
        }
    </style>
</head>
<body>
    <p name="test" title="index-1">this is p</p>
    <span id="span1">span <a href="">点我</a></span>
    <ul id="ul1">
        <li class="as">首页</li>
        <li>伟业</li>
        <li>下一页</li>
    </ul>

    <input type="text" name="username"/>
    <input type="button" id="btn"/>
    <script src="js/jQuery-2.2.2-min.js"></script>
    <script>
        /*var op = document.getElementsByName("test")[0];
        /!*对象.属性   op["下标"]*!/
        console.info(op.title);
        console.info(op["title"]);*/

        /*attr()一个参数获取属性值，两个参数这是属性值*/
        var value = $("[name=test]").attr("title");
        console.info(value);

$("[name=test]").attr("title","test1");

/*移除属性*/
$("[name=test]").removeAttr("title");

        /*动态添加class属性*/
        /*$("#span1").attr("class","as");*/
        $("#span1").addClass("as");
        /*将class设置为“”，removeAttr()直接移除属性;*/
        $("#span1").removeClass("as");

        /*addClass方法设置class属性，调用方法的时候可以传递一个函数，最后返回一个值*/
        $("#ul1 li").addClass(function(){
            var res = "index"+$(this).index();
            return res;
            });

/*toggleClass()*/
$("#ul1 li").toggleClass("as");

/*var value = document.getElementById("ul1").innerHTML;

        console.info(value);*/
        /*html(),封装了js里面innerHTML属性*/
        console.info($("#ul1").html());

$("#ul1").html("<li>123</li>");

/*text();获取到元素内部的文本内容*/
console.info($("#span1").text());

        /*val()获取到文本框的值，js里面value属性*/
        $("#btn").on("click",function(){
            var value = $("input[name=username]").val();
            console.info(value);
        })

</script>
</body>
</html>