jQuery控制HTML

最新推荐文章于 2024-11-07 13:38:59 发布

xiao____ming

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量135

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/xiao____ming/article/details/107109023

版权

<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020/7/3
  Time: 15:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>jquery控制html</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                // 一、添加标签
                // append() - 在被选元素的结尾插入内容
                // $('ul').append('<li>毛瑞</li>');
                // prepend() - 在被选元素的开头插入内容
                // $('ul').prepend('<li>毛瑞</li>');
                // after() - 在被选元素之后插入内容
                // $('li:eq(2)').after('<li>毛瑞</li>');
                // before() - 在被选元素之前插入内容
                // $('li:eq(2)').before('<li>毛瑞</li>');
                // 二、删除标签
//         remove() - 删除被选元素（及其子元素）
//                 $('ul').remove();
//         empty() - 从被选元素中删除子元素
//                 $('ul').empty();
//         三、设置或获取html标签的内容
//         text() - 设置或返回所选元素的文本内容
                //1.获取内容
                // console.log($('#span1').text());
                //2.设置内容
                // $('#span1').text('这是改变后的内容');
//         html() - 设置或返回所选元素的内容（包括 HTML 标记）
                //1.获取内容
                // console.log($('ul').html());//会连同<li>标签和里面的值一起打印
                //2.设置内容
                // $('#span1').html('这是改变后的内容');
//         val() - 设置或返回表单字段的值
                //1.获取内容
                // console.log($('#text').val());
                //2.设置内容
                // $('#text').val('这是改变后的值');
//         四、添加属性与获取属性值
//         attr("placeholder","请输入用户名");
                //1.添加属性
                // $('#text1').attr('placeholder','请输入内容');
//         attr("placeholder");
                //2.获取属性值
                // console.log($('#text').attr('value'));
//         五、移除属性
//         removeAttr()
                $('#text').removeAttr('value');
            });
        });
    </script>
</head>
<body>
<ul>
    <li>郭富城</li>
    <li>黎明</li>
    <li>刘德华</li>
    <li>张学友</li>
</ul>
<span id="span1">text() - 设置或返回所选元素的文本内容</span>
<input type="text" id="text" value="val() - 设置或返回表单字段的值">
<input type="text" id="text1" >
<BUTTON id="btn">点击</BUTTON>
</body>
</html>