jquery的html,val,text,attr平时使用很多,用户设置内容使用。现在学习一下使用方法。
先贴上一段Html代码
<body>
<form id="form1" action="#">
<select id="select1" name="test" multiple="multiple" style="height:100px">
<option>浙江</option>
<option selected="selected">湖南</option>
<option>北京</option>
<option selected="selected">天津</option>
<option>广州</option>
<option>湖北</option>
</select>
<br/>
<input type="checkbox" name="newsletter" checked="true" value="test1" />test1</input>
<input id="input1" name="name" type="text" value="dd" ></inut>
</form>
<div id="div1">
<input id="input1" name="name" type="text" value="dd" >Pl</inut>
<p><b>Hello</b> fine</p>
</div>
</body>
1、html方法,类似于javascript众的InnerHtml属性,可以用来读取或者设置某个元素中的HTML内容。有两种用法,不带参数的,它表示提取里面的html代码,带参数的表示设置其html代码,传的是string或返回string的函数。
例:
$('#div1').html() 返回:<input id="input1" name="name" type="text" value="dd" >Pl</inut>
<p><b>Hello</b> fine</p>
$('#div1').html('<h1>H1</h1>') 设置div的内容为html代码'<h1>H1</h1>';
2、val方法,设置或提取具有value属性的html代码,也支持select或其它(可自己测试)。与html类型,带参数表示设置,可用传入string或返回string的函数。
例:
$('#input1').val() 返回: dd
$('#select1').val() 返回: 选择了selected的Array数组
$('#input1').val('ss') 设置id为input1的value为ss
3、text方法,类似于javascript众的InnerText方法,可以用来读取或者设置某个元素的文本内容 。使用方法与val类似。
4、attr方法,来获取和设置元素的各种属性。带一个string参数的是返回这个属性的值,带两个参数的是设置这个属性的值。也可直接使用json来设置其属性,这样方便多了。
例:
$('#input1').attr('value') 返回 dd
$('#input1').attr('value','新') 设置其value为新
$('#input1').attr({name:'new',value:'新'}) 设置基name为new,value为新
总结
方法html,val,text用法相似,不带参数是取值,带参数是设值。
jquery很强大。
写的不足或错误之处,欢迎大家指出,一起交流学习!
分享到:
相关推荐
attr和prop方法用于操作属性,val()、text()和html()用于操作值和内容,而class方法则用于操作样式类。通过实例代码和解释,相信大家能够更好地理解和应用这些方法来处理网页元素的动态交互。如果对文中内容有任何...
然后,你可以使用`.html()`, `.text()`, `.attr()`, `.val()`等方法来修改元素的内容、文本、属性或值。 2. **事件处理**:jQuery提供了简洁的事件绑定机制。例如,`$("button").click(function() {...})`用于监听...
通过jQuery提供的val()方法和attr()方法,我们可以轻松获取或设置input元素的值。 首先,要获取表单中input元素的值,最常用的方法是使用jQuery的val()方法。当使用 $("#id") 选择器选中了一个元素后,可以使用 ....
3. **内容操作(Content Manipulation)**:`.html()`, `.text()`, `.val()`分别用于获取或设置元素的HTML内容、文本内容和表单值。 三、jQuery高级应用 1. **Ajax操作(Ajax Handling)**:`.ajax()`, `.get()`, ...
可以使用 `$("#select_id option[text='jQuery']").attr("selected", true)` 方法设置 Select 的 Text 值为 jQuery 的项选中。 三、 jQuery 添加/删除 Select 的 Option 项 jQuery 也提供了方法来添加或删除 ...
在jQuery中,`attr()`, `prop()`, 和 `val()` 都是用来获取或设置HTML元素属性的方法,但在处理特定属性如"value"时,它们之间存在微妙的差异。这篇文章将详细探讨这三种方法在获取input元素value值时的不同之处。 ...
本文将详细解析如何使用jQuery获取表单元素的各种值,包括文本框(TEXT)、文本区域(AREA TEXT)、复选框(CHECKBOX)、单选按钮(RADIO)、下拉列表(SELECT)以及表格(TABLE)中的数据。 ### 文本框(TEXT) ...
jQuery 文档操作方法详解 jQuery 文档操作方法是 jQuery 库中的一组强大且实用的函数,用于操作 HTML 和 XML 文档中的元素。这些方法可以帮助开发者快速高效地操作文档结构,提高开发效率和代码质量。本文将对 ...
2. **内容操作**: `html()`, `text()`, `val()`用于获取或设置元素的内容、文本或表单值。 3. **DOM遍历**: `parent()`, `children()`, `siblings()`, `next()`, `prev()`等方法帮助遍历DOM结构。 4. **DOM插入**:...
`$(this).attr()`和`$(this).val()`是两个常用的jQuery方法,用于处理DOM元素的属性(attributes)和值(values)。下面将详细介绍这两个方法的使用及其在实际开发中的应用。 一、`$(this).attr(key)` 和 `$(this)....
本篇文章将深入探讨jQuery方法,特别是涉及到DOM操作、属性处理、内容修改和元素遍历等方面的方法。 1. DOM操作 - `$(p).addClass(css中定义的样式类型)`:这个方法用于给一个或多个`<p>`元素添加指定CSS类,从而...
10. jQuery对象的方法:包括.val()、.html()、.text()、.attr()、.css()等,用于操作DOM元素的各种属性和方法。 11. jQuery选择器:包括$('#myDiv')、$('.myClass')、$('input[type="text"]')等,用于选择DOM元素。...
以下是对标题“jquery常用的方法”中提到的一些主要jQuery方法的详细解释: 1. **添加样式**: `$(”p”).addClass(css中定义的样式类型)` - 这个方法用于向指定的元素添加CSS类,例如`addClass("highlight")`可以将...
- html:获取或设置元素的内容(HTML内容),与text方法相比,html会解析字符串中的HTML标签。 - removeAttr:用于移除元素的属性。 - removeClass:移除元素的指定样式类名。 - text:获取或设置元素的文本内容...
### 快速学习JQuery #### 什么是JQuery? JQuery是一种流行的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等操作。通过使用JQuery,开发者可以更轻松地实现网页的动态效果和交互...
对于DOM操作,`$(DOM).css()`、`.val()`、`.text()`和`.html()`分别用于设置和获取元素的样式、值、文本内容和innerHTML。`attr()`方法用于读取或设置元素的属性,而`removeAttr()`用于删除属性。 在JQuery中,...
text( [val] ) 值 val( [val] ) CSS CSS css(name) css(properties) css(name, value) 位置 offset() position() scrollTop( [val] ) scrollLeft( [val] ) 尺寸 height( [val] ) width( [val] ) ...
本文将深入探讨jQuery中关于Select选择器的使用,包括获取与设置选择的Text和Value、添加/删除Option项,以及表单元素的控制方法,帮助你快速掌握jQuery的核心技能。 一、jQuery获取Select选择的Text和Value 1. ...