jQuery对象 html(),css(),attr()_html $(this).attr() css() html()-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40714799/article/details/79448049

本文介绍jQuery的基本用法，包括如何创建jQuery对象，通过html(), css(), attr()等方法修改元素的内容和样式，以及如何使用each()方法遍历jQuery对象并进行样式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery</title>
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body id="body">
        <--$(); 这是jQuery 对象的写法-->
        <-- 封装 jQuery 对象：css 中能够定位的，基本都能封装成 jQuery 对象--> 

        <div id="div1">AAA</div>
        <div id="div2">BBB</div>
        <script type="text/javascript">
        //获取div标签的jQuery对象 
         var $d = $("div");
        // 将jQuery对象转换为常规DOM对象,[]中为角标，从0开始
         var div01 = $d[0];
         var div02 = $d[1];
        // jQuery的自带get()方法，转化为DOM对象
          var div001 = $d.get(0);

使用html(),css(),attr() 修改 jQuery 对象

        <a id="baidu" href=""></a>
        <script type="text/javascript">
            // 1.使用 html 方法修改文本，text()方法与html()方法结果相同
            $("#baidu").html("前往百度")
            // $("#baidu").text("已前往");
            // 2.使用 attr 方法修改属性值
            $("#baidu").attr("href","https://www.baidu.com");
            // 3.使用 css 方法修改样式
            $("#baidu").css("color","#6767e6");
        </script>



        <div id="div1">
            ddd
        </div>
        <div class="class1">
            cccc
        </div>
        <script type="text/javascript">
            var div1 = document.getElementById("div1");
            // DOM对象方法
            console.log(div1.innerHTML);
            // jQuery对象方法
            console.log($("#div1").text());
            console.log($(".class1").html());


//  当文档加载完成之后(html所有代码 加载完成之后)，会自动执行 ready 里面的匿名方法
             $("#body").ready(function(){
             console.log("第一个jQuery代码");
            alert("加载完成");
            $("#baidu").html("不去了！");
             })
        </script>

               <script type="text/javascript">
                        // 标签名存在器
            var $d = $("div");   
            // each（）方法遍历jQuery对象，并在控制台输出
            $d.each(function(index){
            console.log( index + ": " + $(this).text())
            })

            // each（）方法遍历jQuery对象，并修改css样式
            $d.each(function(index){
                if(index % 2 == 0){
                    $(this).css("color","red");
                }else{
                    $(this).css("color","blue")
                }
            })
            // 常规for循环遍历jQuery对象，并改变css样式
            for(var i = 0 ; i < $d.length; i ++){
                var s = $d[i];         
                if(i % 2 == 0){
                    s.style.color="yellow";
                }else{
                    s.style.color="#7600ff"
                }
            }
        </script>
    </body>
</html>