码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-09-06 18:17:18      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:font   javascrip   多选   strong   query   效果   csdn   tools   内容   

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>  

效果如下:

 

技术分享

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

标签:font   javascrip   多选   strong   query   效果   csdn   tools   内容   

原文地址:http://www.cnblogs.com/coderL/p/7486058.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!