zoukankan      html  css  js  c++  java
  • 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>  

    效果如下:

     

  • 相关阅读:
    3、Python文件操作工具 xlwt 工具
    2、Python文件操作工具 xlrd 工具
    1、关于python第三方工具操作xls和xlsx格式的excel文档选型的吐血经历
    设置python的默认编码方式为utf-8
    Python安装第三方库 xlrd 和 xlwt 。处理Excel表格
    I/O字符流
    I/O字节流
    读写锁实现线程安全缓存
    红黑树理解
    Task异常捕获
  • 原文地址:https://www.cnblogs.com/coderL/p/7486058.html
Copyright © 2011-2022 走看看