jQuery控制HTML

    技术2023-11-10  85

    <%-- 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>
    Processed: 0.014, SQL: 9