jQuery-初识⑤

jQuery操作元素和内容和样式

1.显示获取的是HTML的内容——相当于底层innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //声明函数
        function testHtml() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //获取元素的内容
            alert(showdiv.html());
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素html</h3>
    <input type="button" value="测试获取元素内容——HTML" onclick="testHtml()">
    <hr>
    <div id="showdiv">
        <b>Have a good day!</b>
    </div>
</body>
</html>

——————————————————————————————————————————————————————--

2.修改HTML内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //声明函数
        function testHtml() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //获取元素的内容
            alert(showdiv.html());
        }
        function testHtml2() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //修改元素内容（函数需要传参）
            showdiv.html("<b>今天是个美好的一天！</b>");
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素html</h3>
    <input type="button" value="测试获取元素内容——HTML" onclick="testHtml()">
    <input type="button" value="测试修改元素内容——HTML" onclick="testHtml2()">

    <hr>
    <div id="showdiv">
        <b>Have a good day!</b>
    </div>
</body>
</html>

点击修改按钮后HTML内容改变

可以实现代码拼接效果

showdiv.html("<b>今天是个美好的一天！</b>");改为：

showdiv.html(showdiv.html()+"<b>今天是个美好的一天！</b>");

3.获取元素内容，只包含text部分，没有b、i这种标签特点的显示——testText

4.修改元素内容，修改内容为 <i>今天是个美好的一天！</i> 但是结果显示i标签没有被解析（没有变斜体）

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        //声明函数
        function testHtml() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //获取元素的内容
            alert(showdiv.html());
        }
        function testHtml2() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //修改元素内容（函数需要传参）
            showdiv.html(showdiv.html()+"<b>今天是个美好的一天！</b>");
        }
        function testText() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //获取元素内容
            alert(showdiv.text());
        }
        function testText2() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //修改元素内容
            showdiv.text("<i>今天是个美好的一天！</i>")
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素html</h3>
    <input type="button" value="测试获取元素内容——HTML" onclick="testHtml()">
    <input type="button" value="测试修改元素内容——HTML" onclick="testHtml2()">
    <input type="button" value="测试获取元素内容——HTML" onclick="testText()">
    <input type="button" value="测试修改元素内容——HTML" onclick="testText2()">

    <hr>
    <div id="showdiv">
        <b>Have a good day!</b>
    </div>
</body>
</html>

效果3：

效果4：

——————————————————————————————————————————————————————

jQuery操作元素的样式

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #showdiv{
            width: 300px;
            height: 300px;
            border: solid 1px ;
        }
        .common{
            width: 300px;
            height: 300px;
            border: solid 1px ;
            background: purple;
        }
        .dd{
            font-size: 30px;
            font-weight: bold;
        }
    </style>
    <script src="js/jquery-3.3.1.js" type="text/javascript" charset="UTF-8"></script>
    <!--声明js代码域-->
    <script type="text/javascript">
        //jQuery操作样式--css（）
        function testCss() {
            //获取元素对象
            var showdiv = $("#showdiv");
            //操作样式--增加
            showdiv.css("background-color","orange");
            //操作样式的获取_这里显示的是div的宽度
            alert(showdiv.css("width"));
            //操作样式的修改-给一个已知存在的属性并赋值新的属性值
            showdiv.css("width","30");
        }
        //使用json用法 方便添加css样式
        function testCss2() {
            //获取元素对象
            var div = $("#div01");
            //操作样式
            div.css({"border":"solid 1px","width":"300px","height": "300px"})
        }
        //jQuery操作样式--addClass（）类选择器______等效于className
        function testAddClass() {
            var div = $("#div01");
            //操作样式-添加类选择器的名称
            div.addClass("common");
        }
        function testAddClass2() {
            var div = $("#div01");
            //操作样式-添加类选择器的名称
            div.addClass("dd");
        }
        function testRemoveClass() {
            //获取元素对象
            var div = $("#div01");
            //删除元素
            div.removeClass("dd");
        }
    </script>
</head>
<body>
    <h3>jQuery操作元素样式</h3>
    <input type="button" value="操作样式-css" onclick="testCss()">
    <input type="button" value="操作样式-css--json" onclick="testCss2()">
    <input type="button" value="操作样式-css--addClass()" onclick="testAddClass()">
    <input type="button" value="操作样式-css--addClass2()" onclick="testAddClass2()">
    <input type="button" value="操作样式-css--removeClass()" onclick="testRemoveClass()">

    <div id="showdiv"></div>
    <div id="div01">I am div01!</div>
    <!--function里面添加类选择器的效果实际就是    <div id="div01" class="common dd">I am div01!</div>-->

</body>
</html>

jQuery操作元素和内容和样式

猜你喜欢