Web前段——jquery操作HTML_web中jquery的html-CSDN博客

本文链接：https://blog.csdn.net/qq_41448891/article/details/83504293

请自行替换jQuery

jQuery获取内容和属性

获取内容的三个方法

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

获取属性

attr()方法
获取元素内容和属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript" >
        $(document).ready(function () {
            $(".one").click(function () {
                alert("text: "+$(".name").text());
            });
            $(".two").click(function () {
                alert("html:"+$(".name").html());
            });
        });
    </script>
</head>
<body>
    <p class="name">this is a test where was <b>B</b></p>
    <button class="one">显示文本</button>
    <button class="two"type="button">显示html</button>
</body>
</html>

回调函数的两个参数，当前元素的下标一节原始值
.text(function(i,origText){});

jQuery——添加元素

append()-在所选元素的结尾插入内容
prepend()-在所选元素的开头插入内容
after()-在所选元素的之后插入内容
before()-在所选元素之前插入内容

jQuery-删除

remove() -删除被选元素（及其子元素）
empty()-删除被选元素的子元素

$("div").empty();
$("div")remove();

jQuery-CSS类

addClass()–添加一个类
removeClass()–从被选元素中删除一个或多个类
toggleClass()–对被选元素进行添加/删除类的操作
css()-设置或者返回样式属相
设置多个CSS属性$(“p”).css({
“background-color”:“yellow”,
“font-size”:“200%”
});
更多内容请走这扇门——?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" rel="stylesheet">
        .color{
            background-color: lightgreen;
            color:red;
        }
    </style>
    <script src="../jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".change").click(function () {
                $("p").toggleClass("color");
            });
        });
    </script>
</head>
<body>
    <p>fdhis</p>
    <p>fhdvsd</p>
    <p>difospo[s</p>
    <button type="button" class="change">跟换CSS属相</button>
</body>
</html>

— jQuery——尺寸

method	describe
width()/height()	设置或返回元素的高度或宽度(不包括内边距,边框,外边距
innerWidth()/innerHeight()	返回元素的宽度或高度(包括内边距)
outerWidth()/outerHeight()	返回元素的宽度/高度(包括内,外边距,边框)