• jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()


    1. html()方法:

    此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容。

    <html>  

    <head>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

    <title>Insert title here</title>  

    <script src="jQuery/jquery-1.10.2.js"></script>  

    <script type="text/javascript">  

        $(document).ready(function(){  

            alert($("p").html());  

        });  

    </script>  

    </head>  

    <body>  

    <title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>  

    </body>  

    </html>  

     

     

     

    如果需要设置某元素的html代码,也可以使用该方法,不过需要传入一个参数:

     

    <html>  

    <head>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

    <title>Insert title here</title>  

    <script src="jQuery/jquery-1.10.2.js"></script>  

    <script type="text/javascript">  

        $(document).ready(function(){  

            $("p").html("<strong>你最喜欢的水果是?</strong>");  

        });  

    </script>  

    </head>  

    <body>  

    <title="what kind of fruit do you like best?"></p>  

    </body>  

    </html>  

     

    2. text()方法:

    次方法类似于javascript中的innerText属性,可以用来读取或者设置某个元素中的文本内容。

     

    <html>  

    <head>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

    <title>Insert title here</title>  

    <script src="jQuery/jquery-1.10.2.js"></script>  

    <script type="text/javascript">  

        $(document).ready(function(){  

            alert($("p").text());  

        });  

    </script>  

    </head>  

    <body>  

    <title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>  

    </body>  

    </html>  

     

     

     

    如果需要为某元素设置文本内容,那么需要传递一个参数:

     

    <html>  

    <head>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

    <title>Insert title here</title>  

    <script src="jQuery/jquery-1.10.2.js"></script>  

    <script type="text/javascript">  

        $(document).ready(function(){  

            $("p").text("你最喜欢的水果是?");  

        });  

    </script>  

    </head>  

    <body>  

    <title="what kind of fruit do you like best?"></p>  

    </body>  

    </html>  

     

    3. val()方法:

    此方法类似于JavaScript中的value属性,可以用来设置或获取元素的值。无论元素是文本框,下拉列表还是单选框,它都可以发回元素的值。

    如果元素为多选,则返回一个包含所有选择的值的数组。

     

    <html>  

    <head>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

    <title>Insert title here</title>  

    <script src="jQuery/jquery-1.10.2.js"></script>  

    <script type="text/javascript">  

        $(document).ready(function(){  

            $("#address").focus(function(){  

                var txt_value=$(this).val();  

                if(txt_value=="请输入邮箱地址"){  

                    $(this).val("");  

                }  

            });  

            $("#address").blur(function(){  

                var txt_value=$(this).val();  

                if(txt_value==""){  

                    $(this).val("请输入邮箱地址");  

                }  

            });  

            $("#pwd").focus(function(){  

                var txt_value=$(this).val();  

                if(txt_value=="请输入邮箱密码"){  

                    $(this).val("");  

                }  

            });  

            $("#pwd").blur(function(){  

                var txt_value=$(this).val();  

                if(txt_value==""){  

                    $(this).val("请输入邮箱密码");  

                }  

            });  

        });  

    </script>  

    </head>  

    <body>  

    <input type="text" id="address" value="请输入邮箱地址" style="color:gray"><br>  

    <input type="text" id="pwd" value="请输入邮箱密码" style="color:gray"><br>  

    <input type="button" value="登录">  

    </body>  

    </html>  

    通过上面的例子可以发现val()方法不仅能设置元素的值,还能获取元素的值。而且val()方法还有另外一个用处,就是它能使select,checkbox和radio相应的选项被选中,在表单操作中经常会用到。

     

     

    <html>  

    <head>  

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  

    <title>Insert title here</title>  

    <script src="jQuery/jquery-1.10.2.js"></script>  

    <script type="text/javascript">  

        $(document).ready(function(){  

          

        });  

    </script>  

    </head>  

    <body>  

    <select id="single">  

    <option>选择1号</option>  

    <option>选择2号</option>  

    <option>选择3号</option>  

    </select>  

      

    <select id="multiple" multiple="multiple" style="height:130px">  

    <option selected="selected">选择1号</option>  

    <option>选择2号</option>  

    <option>选择3号</option>  

    <option>选择4号</option>  

    <option selected="selected">选择5号</option>  

    </select>  

    <br>  

    <input type="checkbox" value="check1"/>多选1  

    <input type="checkbox" value="check2"/>多选2  

    <input type="checkbox" value="check3"/>多选3  

    <input type="checkbox" value="check4"/>多选4  

    <br>  

    <input type="radio" value="radio1"/>单选1  

    <input type="radio" value="radio2"/>单选2  

    <input type="radio" value="radio3"/>单选3  

    </body>  

    </html>  

     

    该网页中的一些元素是默认选中的,可以通过val()方法来改变它们的选中项。

     

     

    <script type="text/javascript">  

        $(document).ready(function(){  

            $("#single").val("选择2号");  

            $("#multiple").val(["选择2号","选择3号"]);  

            $(":checkbox").val(["check2","check3"]);  

            $(":radio").val(["radio2"]);  

        });  

    </script>  

    效果如下:

     

  • 相关阅读:
    setInterval的停止与启动
    postgresql常用
    STM32学习笔记(四) RCC外设的学习和理解
    STM32学习笔记(九) 外部中断,待机模式和事件唤醒
    STM32的优先级的理解及其使用
    基于STM32的红外遥控重点解析
    红外协议之NEC协议
    常用运放选型一览表
    运放参数解释及常用运放选型
    算放大器分析----虚短和虚断(转载)
  • 原文地址:https://www.cnblogs.com/coderL/p/7486058.html
Copyright © 2020-2023  润新知