首页 > 代码库 > JQuery基本知识（3）

JQuery基本知识（3）

2024-09-01 16:18:40   219人阅读

JQuery基本知识（3）

一、JQuery拥有可操作HTML元素和属性的强大方法。

1、JQuery DOM操作（DOM文档对象模型）

获取内容的方法:

text():设置或返回所选元素的文本内容

html():设置或返回所选元素的内容（包括HTML标记）

val():设置或返回表单字段的值。

attr():获取标签的属性值

它们有各自对应的回调函数

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery操作DOM</title>
        <script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                $("#btnText").click(function(){
                    alert("显示的文本是："+$("p").text());
                });
                $("#btnHtml").click(function(){
                    alert("显示的HTML是:"+$("p").html());
                });
                $("#btnVal").click(function(){
                    alert("显示值是："+$("#txt").val());
                });
                $("#btnAtt").click(function(){
                    alert("获取的属性值是："+$("#txt").attr("id"));
                });
            });
        </script>
    </head>
    <body>
        <p> <input type="text" id="txt" value="这是一个值" />这是一个富强民主的国家</p>
        <input type="button" value="text()"  id="btnText"/>
        <input type="button" value="html()"  id="btnHtml"/>
        <input type="button" value="val()"  id="btnVal"/>
        <input type="button" value="attr()"  id="btnAtt"/>
    </body>
</html>
View Code

设置内容的方法：

技术分享 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>JQuery设置DOM对象</title>
        <script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function(){
                $("#btn1").click(function(){
                    $("#test1").text("更换了text");
                });
                $("#btn2").click(function(){
                    $("#test2").html("<a href=http://www.mamicode.com/‘#‘>我是被添加的一个a标签");
                });
                $("#btn3").click(function(){
                    $("#test3").val("我的val值被更换了");
                });
                $("#btn4").click(function(){
                    $("#test3").attr("value","我是属性值");
                });
            });
        </script>
    </head>
    <body>
        <p id="test1">段落1</p>
        <p id="test2">段落1</p>
        <p >段落3<input type="text" value="测试的值" id="test3"></p>
        <input type="button" id="btn1" value="设置文本"/>
        <input type="button" id="btn2" value="设置HTML"/>
        <input type="button" id="btn3" value="设置值"/>
        <input type="button" id="btn4" value="改变属性值"/>
    </body>
</html>
View Code

 

2、JQuery的添加方法：

append():在被选元素的结尾插入内容

prepend():在备选要的开头插入内容

after():在被选元素之后插入内容

before():在被选之前插入内容

3、JQuery删除元素的方法

remove():删除被选元素及其子元素

empty():从被选元素中删除子元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="../js/jquery-3.1.1.min.js" type="text/javascript"></script>
        <title>JQuery添加的方法</title>
        <script>
            $(document).ready(function(){
                //append方法在被选中元素的结尾添加
                $("#btnAddL").click(function(){
                    $("p").append("<b>我的追加的文本哦</b>");
                });
                $("#btnList").click(function(){
                    $("ol").append("<li>我是新加的列表项</li>");
                });
                //prepend在被选中元素的开头进行添加
                $("#btnpre").click(function(){
                    $("p").prepend("<b>我的追加的文本哦</b>");
                });
                $("#btnListpre").click(function(){
                    $("ol").prepend("<li>我是新加的列表项</li>");
                });
                //删除整个元素
                $("#btnRemove").click(function(){
                    $("#div1").remove();
                });
                $("#btnEmpty").click(function(){
                    $("#div1").empty();
                });
            });
        </script>
    </head>
    <body>
        <div id="div1" style="border: 2px; width: 200px; height: 200px; background-color: dodgerblue;">
        <!--<img src="http://pic2.cxtuku.com/00/02/31/b945758fd74d.jpg">-->
        <p>这是一个段落</p>
        <p>这是二个段落</p>
        <ol>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>            
        </ol>
        </div>
        <input type="button" value="追加文本append" id="btnAddL">
        <input type="button" value="添加列表项append" id="btnList">    
        <input type="button" value="文本前追加prepend" id="btnpre">
        <input type="button" value="列表前添加prepend" id="btnListpre">    
        <input type="button" value="remove方法删除整个DIV" id="btnRemove" />
        <input type="button" value="empty清除选中元素的子元素" id="btnEmpty" />
    </body>
</html>

 

JQuery基本知识（3）


联系
我们