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>

<p 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>

<p 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>

<p 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>

<p 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>

效果如下:

时间: 2024-08-08 02:51:29

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

jQuery中dom操作(待续)

一.查找DOM节点 查找节点非常容易,使用选择器就能轻松完成各种查找工作.例:查找元素节点p返回p内的文本内容$("p").text();例:查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值. 二.新建DOM节点 1.创建元素节点 创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上.先创建元素点,创建元素节点使用Jquery的工厂函数$()来完成,格式如下

HTML 学习笔记 JQuery(DOM 操作3)

设置和获取HTML 文本 和 值 1.html()方法 类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的HTML内容 例子 <html> <head> <meta charset="UTF-8"> <title></title> <script src="../js/jquery-2.1.1.min.js"></script> </head

js,jQuery和DOM操作的总结(二)

jQuery的基本操作 (1)遍历键值对和数组 var arr = [9, 8, 7, 6, 5, 4]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值,第二个参数是索引 }) //=========================================// var keyWord = { "name": "老牛", "age"

jQuery学习----------DOM操作

DOM操作之创建元素: DOM: var ele = document.createElement("element") 例子:document.createElement("div") jQuery: var $ele = $("element")    //返回的是一个jQuery对象 例子:$("<div></div>") DOM操作之输入文本: DOM: var txt = document.c

第3章 jQuery的DOM操作

一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获取属性:elem.getAtrribute('title') 2.html-DOM document.div elem.src 3.CSS-DOM elem.style.color='red' 二. jQuery的DOM操作 1.查找节点 (1)元素节点 1 2 alert($('ul li:eq(

jQuery常用dom操作

操作属性节点(type属性不支持修改和删除) attr('name')——取值(如果jq对象是多个,则只取得第一个值,例如:$('.class').attr('name')——只获得第一个class的name属性值) attr('name','value')——赋值 如果参数是json对象,那么则会同时修改多个属性值,例如:var kv = {name:'username',value:'tom'}; $('#username').attr(kv); 还可以通过函数的返回值来修改属性值,例如:$

Jquery的dom操作与原生dom的转换

本片文章包含了 jquery常见dom操作. q与原生dom对象的区别与转换 伪数组对象的知识 如有错误,烦请指正. 增 以下方法共性:可以一次添加多个内容,内容可以是DOM对象.HTML string. jQuery对象 创建元素 var obj = $('<div class="test"><p><span>Done</span></p></div>'); 两种方法可以创建元素 直接写入html 传入一个原生d

jQuery的DOM操作小案例

案例一:下拉列表左右选择 <body> <div> <select style="width:60px" multiple size="10" id="leftID"> <option>选项A</option> <option>选项B</option> <option>选项C</option> <option>选项D</o

jQuery进行DOM操作记录

1.在元素内部插入DOM元素 ①插入到元素内部原有元素之后 append(content)      返回值:jQuery  参数-content:要插入的元素String,Element,jQuery 为每一个匹配的元素内添加一些元素,参数既可以是字符串也可以是jQuery对象,如下: $("#1").append("input type='button' value='确定'/>")   在1的内部元素的后面添加一个按钮 $("#1")