JQuery（二）val()、html()、text()

小小野生程序员

于 2024-07-22 17:45:58 发布

阅读量372

点赞数 2

文章标签： jquery html 前端

本文链接：https://blog.csdn.net/weixin_47276069/article/details/140466328

版权

属性操作：val()、html()、text()：

val():获取页面元素的value属性值。
val(值):为页面元素设置value属性值
html():获取页面元素的html代码，如果有标签，一并获取。
html(值)：为页面元素设置html代码。如果有标签，则进行解析
text():获取页面元素的纯文本内容。如果有标签，忽略
text(值):为页面元素设置文本内容。如果有标签，原样输出

val用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性val操作页面</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    //获取到页面元素的value属性值
                    /*var name = $("#username").val();
                    alert(name);
                    var pwd = $("#pwd").val();
                    alert(pwd);
                    var sex = $("input[type='radio']:checked").val();
                    alert(sex);*/
                    var kecheng = $("select option:selected").val();
                    alert(kecheng);
                })
                $("#btn2").click(function(){
                    $("#username").val("李四");
                })
            })
        </script>
    </head>
    <body>
        <form action="" method="">
            用户名：<input type="text" id="username" value=""/><br/>
            密码：<input type="password" id="pwd" value=""/><br/>
            性别：<input type="radio" id="nan" value="男" name="sex"/>男
                  <input type="radio" id="nv" value="女" name="sex"/>女
                  <br/>
            课程选择：
                <select id="kecheng">
                    <option>--请选择--</option>
                    <option value="数学" selected>数学</option>
                    <option value="英语">英语</option>
                    <option value="语文">语文</option>
                </select>
            <hr />
            <input type="button" value="获取val的值" id="btn1"/>
            <input type="button" value="设置val()的值" id="btn2"/>
            
        </form>
    </body>
</html>

text用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性text操作页面</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    var str = $("#divId1").text();
                    alert(str);
                })
                $("#btn2").click(function(){
                    $("#divId2").text("<span style='color:red;'>第二个极客营</span>");
                })
            })
            
        </script>
    </head>
    <body>
        <input type="button" value="获取text()的值" id="btn1"/>
        <input type="button" value="设置text()的值" id="btn2"/>
        <div id="divId1"><span>欢迎大家来到极客营</span></div>
        <div id="divId2"></div>
    </body>
</html>

html用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性html操作页面</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    var str = $("#divId1").html();
                    alert(str);
                })
                $("#btn2").click(function(){
                    $("#divId2").html("<span style='color:red;'>第二个极客营</span>");
                })
            })
            
        </script>
    </head>
    <body>
        <input type="button" value="获取html()的值" id="btn1"/>
        <input type="button" value="设置html()的值" id="btn2"/>
        <div id="divId1"><span>欢迎大家来到极客营</span></div>
        <div id="divId2"></div>
    </body>
</html>

遍历函数：

方式一：$(ele).each(fn);

方式二：

$.each($ele,fn);
　　回调函数fn：function(index,docEle)
　　　　参数index：遍历的索引值
　　　　参数docEle：遍历当前对象 docile==this

方式一用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>遍历方式一$(ele).each(fn)的页面</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            //遍历方式一：$(ele).each(fn)
            $(function(){
                $("#checkAll").click(function(){
                    var checkAll = this.checked;//这是全选的状态
                    $("input[name='hobby']").each(function(){
                        this.checked = checkAll;//把全选的状态值赋值给当前遍历对象的状态
                    })
                })
            })
        </script>
    </head>
    <body>
        兴趣爱好：<input type="checkbox" id="checkAll"/>全选/不全选<br />
        <hr />
        <input type="checkbox" value="足球" name="hobby" checked/>足球
        <input type="checkbox" value="篮球" name="hobby"/>篮球
        <input type="checkbox" value="排球" name="hobby"/>排球
        <input type="checkbox" value="羽毛球" name="hobby"/>羽毛球
        <input type="checkbox" value="乒乓球" name="hobby"/>乒乓球
    </body>
</html>

方式二用法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>遍历方式二$.each($ele,fn)的页面</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            //遍历方式二$.each($ele,fn) 用的是最广泛的
            $(function(){
　　　　　　　　　　//给按钮绑定事件
                $("#checkAll").click(function(){
                    var checkAll = this.checked;//这是全选的状态
                    //$.each($ele,fn)：$ele：你要遍历的数组 i:遍历的下标  j:遍历的当前对象j==this
                    $.each($("input[name='hobby']"),function(i,j){
                        alert(i);
                        j.checked = checkAll;
                    })
                })
            })
        </script>
    </head>
    <body>
        兴趣爱好：<input type="checkbox" id="checkAll"/>全选/不全选<br />
        <hr />
        <input type="checkbox" value="足球" name="hobby" checked/>足球
        <input type="checkbox" value="篮球" name="hobby"/>篮球
        <input type="checkbox" value="排球" name="hobby"/>排球
        <input type="checkbox" value="羽毛球" name="hobby"/>羽毛球
        <input type="checkbox" value="乒乓球" name="hobby"/>乒乓球
    </body>
</html>

文档处理：内部插入

A.append(B) :将B插入到A内部后面

B.appendTo(A) :将B插入到A内部后面。
<A>
…….
<B></B>
</A>

//HTML 代码:
<p>I would like to say: </p>
//jQuery 代码:
$("p").append("<b>Hello</b>");
//结果:
[ <p>I would like to say: <b>Hello</b></p> ]

A.prepend(B):将B插入到A内部前面

B.prependTo(A):将B插入到A内部前面。
<A>
<B></B>
…………..
</A>

三种：将html添加至指定元素内部前面

//HTML 代码:
<p>I would like to say: </p>
//jQuery 代码:
$("p").prepend("<b>Hello</b>");
//结果:
[ <p><b>Hello</b>I would like to say: </p> ]

　　　将一个DOM元素前置入所有段落

//HTML 代码:
<p>I would like to say: </p>
<p>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>
//jQuery 代码:
$("p").prepend( $(".foo")[0] );
//结果:
<p><b class="foo">Hello</b>I would like to say: </p>
<p><b class="foo">Hello</b>I would like to say: </p>
<b class="foo">Hello</b>
<b class="foo">Good Bye</b>

　　　向所有段落中前置一个jQuery对象(类似于一个DOM元素数组)。

//HTML 代码:
<p>I would like to say: </p><b>Hello</b>
//jQuery 代码:
$("p").prepend( $("b") );
//结果:
<p><b>Hello</b>I would like to say: </p>

内部插入的案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery内部插入操作</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            //创建元素
            //document.createElement("option");
            $(function(){
                $("#btn").click(function(){
                    var node_A = $("#selectAll");
                    var newNode_B = $("<option value='武汉市'>武汉市</option>")
                    /*内部插入：
                     * A.append(B) :将B插入到A内部后面
                     * A.appendTo(B) :将A插入到B内部后面
                     * A.prepend(B):将B插入到A内部前面
                     * A.prependTo(B):将A插入到B内部前面
                     */
                    //node_A.append(newNode_B);
                    //newNode_B.appendTo(node_A);
                    node_A.prepend(newNode_B);
                    
                    /*外部插入：
                     * A.after(B):将B插入到A的后面
                     * A.before(B):将B插入到A的前面
                     * A.inserAfter(B)
                     * A.inserBefore(B)
                     */
                    $("#su").before(newNode_B);
                })
            })
        </script>
    </head>
    <body>
        城市选择：
        <select id="selectAll">
            <option value="无锡市">无锡市</option>
            <option value="苏州市" id="su">苏州市</option>
            <option value="常州市">常州市</option>
            <option value="南京市">南京市</option>
        </select>
        <br />
        <input id="btn" type="button" value="点我"/>
    </body>
</html>

删除：

两种方式：

　　$ele.empty()：清空元素内部所有内容（文本或者子元素），保留当前元素
　　$ele.remove()：删除当前元素

remove()用法一：

//从DOM中把所有段落删除
//HTML 代码:
<p>Hello</p> how are <p>you?</p>
//jQuery 代码:
$("p").remove();
//结果:
how are

remove()用法二：

//从DOM中把带有hello类的段落删除
//HTML 代码:
<p class="hello">Hello</p> how are <p>you?</p>
//jQuery 代码:
$("p").remove(".hello");
//结果:
how are <p>you?</p>

删除案例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery删除操作的页面</title>
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script>
            //    $ele.empty():清空元素内部所有的内容(文本或子元素),保留当前元素
            //  $ele.remove():删除当前元素
            $(function(){
                $("#btn1").click(function(){
                    $("#selectAll").empty();
                })
                $("#btn2").click(function(){
                    $("#selectAll").remove();
                })
            })
        </script>
    </head>
    <body>
        城市选择：
        b
        <br />
        <input id="btn1" type="button" value="点我empty"/>
        <input id="btn2" type="button" value="点我remove"/>
    </body>
</html>