jquery入门基础之jquery HTML

最新推荐文章于 2024-02-05 22:25:28 发布

Dream_Mir_Hui_Gir

最新推荐文章于 2024-02-05 22:25:28 发布

阅读量201

点赞数 1

分类专栏：原创文章标签： jquery

本文链接：https://blog.csdn.net/qq_41486775/article/details/98350761

版权

原创专栏收录该内容

29 篇文章 1 订阅

订阅专栏

本文介绍了jQuery中关于HTML的操作，包括获取和设置元素的文本内容、值，添加和删除元素，以及操作CSS类。重点讲解了append、prepend、after和before方法用于元素的插入，remove和empty用于元素的删除，以及如何使用css、addClass、removeClass和toggleClass来处理CSS类。

摘要由CSDN通过智能技术生成

jquery入门基础之jquery HTML

1：jquery获取html属性和内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

<head>
    <script>
        $(document).ready(function () {

           alert($("p").text());

           $(".bu1").click(function () {
               alert($("h5").html());
           });

           $(".bu2").click(function () {
               /*A+B代表相邻兄弟选择器
               * A>b代表子代选择器
               * A B代表后代选择器
               * A~B代表A后面的所有B元素*/
              alert($("form>input").val());
           });
        });
    </script>
 </head>
    
<body>
    <p>我是一个段落p标签</p>
    <h5>我是一个<b>h5</b>标题标签b </h5>
    <form action="#">
        用户名<input type="text" placeholder="请输入" value="表单的内容">
    </form>
    <button class="bu1">点我获取h5的内容</button>
    <br>
    <button class="bu2">点我获取表单的内容</button>

</body>

2：jquery设置html属性和内容

<head>
    <meta charset="UTF-8">
    <title>写博客</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {

           $("p").text("更新p标签的内容");

           $(".bu1").click(function () {
               $("h5").html("<b>hello 小辉</b>");
           });

           $(".bu2").click(function () {
               /*A+B代表相邻兄弟选择器
               * A>b代表子代选择器
               * A B代表后代选择器
               * A~B代表A后面的所有B元素*/
               $("form>input").val("hello 小辉，你要努力");
           });
        });
    </script>
</head>
<body>

    <p>我是一个段落p标签</p>
    <h5>我是一个<b>h5</b>标题标签b </h5>
    <form action="#">
        用户名<input type="text" placeholder="请输入" value="表单的内容">
    </form>
    <button class="bu1">点我更新内容</button>
    <br>
    <button class="bu2">点我更新表单的内容</button>

</body>

运行结果:
在这里插入图片描述

3.jquery添加元素
append() 向html元素结尾内嵌内容
prepend()向html元素的开头内嵌内容
after()向html元素外部添加元素
before()向html元素前面添加元素

			$(".bt3").click(function () {
                $("h1").prepend("前缀内容");
            });

            $(".bt4").click(function () {
                $("h1").append("后缀内容");
            });

            $(".bt5").click(function () {
                $("h1").after(" <h2>我是后面加进来的</h2>");
            });

            $(".bt6").click(function () {
                $("h1").before("   <h3>我是加在你前面的</h3>");
            });

    <h1>我是一个h1</h1>
    
    <button class="bt3">prepend</button>
    <button class="bt4">append</button>
    <button class="bt5">after</button>
    <button class="bt6">before</button>

运行结果:
在这里插入图片描述
*值得注意的是:可以一次性添加若干新元素像这样 append（元素1，元素2，元素3），当然其他三个也可以，而添加元素的方式可以采用html创建文本，也可以使用jquery，还可以使用dom创建文本（先create元素，再innerHTML或者innerTtxt）*具体如下图
在这里插入图片描述 jquery删除元素
remove（）删除被选元素及其子元素||remove（过滤）删除符合参书当中的给定要求的元素及其子元素
empty（）删除被选元素的子元素

    <script>
        $(document).ready(function () {
           $("ul").remove();//既删除被选元素又删除被选元素的子元素
           $("ol").empty();//删除被选元素的子元素
        });
    </script>

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

<ol>
    <li>e</li>
    <li>f</li>
    <li>g</li>
</ol>

通过f12开发者工具可以发现只剩下ol元素
在这里插入图片描述
4：jquery CSS类
css() - 设置或返回样式属性
addClass()-像被选元素添加一个或者多个类
removeClass（）-从被选元素删除一个或多个类
toggleClass-对被选元素进行添加删除类的切换操作

    <style>
        .a{
            color: aqua;
            font-size: x-large;
        }
        .b{
            font-style: italic;/*设置字体样式为斜体*/
            font-size: 50px;/*设置字体大小为50px*/
        }
    </style>


$("button").click(function () {
        $("p").addClass("a");
        
        $("h2,h3").addClass("b");
        
        $("p").removeClass("a");//删除所有带有class=“a”的p元素
        
        $("h2,h3").toggleClass("b");/*toggleClass方法起的作用是首先检测被选择器选中的元素当中有咩有对应的class
           如果没有，就添加，相当于addClass，
          如果有一个与参数值相同的class属性值，那么它的作用就相当于removeClass*/
          
        $("div").css({"width":"200px","height":"100px","background-color":"red","border":"1px solid pink"});
        
        console.log($("div").css("width"));/*将获取的css属性值打印控制台*/
 });


<p >我是一个p标签</p>
<h2 >我是一个h2标签</h2>
<h3>我是一个h3标签</h3>
<h3 class="b">我是一个h3标签</h3>
<button>为元素添加按钮</button>

点击按钮前
在这里插入图片描述
点击按钮后

5:jquery尺寸
话不多说，贴两张图，应该就都懂了