jQuery - 获取内容和属性
1. jQuery DOM 操作
jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
2. 获得内容- text()、html()以及 val()
三个简单实用的用于DOM操作的jQuery方法:
1) text() -设置或返回所选元素的文本内容
2) html() -设置或返回所选元素的内容(包括HTML标记)
3) val() -设置或返回表单字段的值
案例:获取文本内容、值 及属性值
案例代码
<html> <head> <meta charset="UTF-8"> <title>dom 获取表单值</title> <script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script> <script type="text/javascript" src="../../js/jquery-1.8.3.min.js" ></script> </head> <script type="text/javascript"> $(function(){ //文档就绪函数 $("#btn1").click(function(){ var t1 = $("#test").text(); alert("Text: "+t1); }); $("#btn2").click(function(){ var t1 = $("#test").html(); alert("html: "+t1); }); }); function getName(){ var t3 =$("#name").val(); alert("姓名为:"+t3); } function getSx(){ var t4 =$("#url").attr("href"); alert("获取属性(href)值为:"+t4); } </script> <body> <fieldset id="test01"> <legend>1.获取文本</legend> <div style="margin-top: 10px;"> <p id="test">获取DOM值<font color="blue">文本</font>。 </p> </div> <div style="margin-top: 10px;"> <input type="button" id="btn1" value="显示文本"/> <input type="button" id="btn2" value="显示HTML"/> </div> </fieldset> <fieldset id="test02" style="margin-top:10px;"> <legend>2.获取表单字段值</legend> <div style="margin-top: 10px;"> 姓名:<input type="text" id="name" value=""/> </div> <div style="margin-top: 10px;"> <input type="button" id="btn3" value="获取姓名" onclick="getName();"/> </div> </fieldset> <fieldset id="test03" style="margin-top:10px;"> <legend>3.获取属性值-attr()</legend> <a id="url" href="www.baidu.com">百度</a><br> <input type="button" id="btn4" value="获取属性值" onclick="getSx();"/> </fieldset> </body> </html>
(-end-)
相关推荐
`editable` 标签表明这个插件的核心特性是可以被编辑的,意味着用户不仅可以浏览预设的选项,还可以自定义输入内容,从而提高了用户在交互过程中的灵活性和效率。 下面我们将详细探讨 `jquery.editable-select` ...
`jquery.i18n.properties`插件的主要功能是在客户端动态加载和解析.properties文件,使得开发者能够方便地获取并显示与用户语言环境相关的文本内容。它支持多种特性,如自动检测用户浏览器的语言设置、加载多个语言...
**jQuery UI** 是一个强大的JavaScript库,用于构建用户界面,它基于流行的jQuery库。这个压缩包包含两个关键文件:`jquery-ui-...同时,随着技术的发展,推荐关注jQuery UI的更新版本,以获取最新的特性和性能优化。
例如,`$(selector).html()`用于获取或设置元素的HTML内容,`$(selector).append()`和`.prepend()`可以向元素内部添加内容,`$(selector).remove()`则用于移除元素。这些方法提供了统一的接口,避免了原生JavaScript...
- **属性操作(Attributes)**:通过 `.attr()` 方法可以获取或设置元素的属性,如 `.attr("href", "newUrl")` 更改链接的 URL。 - **内容操作(Content)**:`.html()`, `.text()`, `.append()`, `.prepend()` 等...
其内置的数据绑定机制使得从服务器获取和更新数据变得异常简单。同时,jqGrid提供了多种内置的编辑器,如文本框、下拉框、日期选择器等,用于处理单元格数据的编辑。 接下来,我们转向jQuery UI 1.8.16,这是jQuery...
2. **DOM操作**:jQuery提供了丰富的DOM操作方法,如`.append()`用于向元素内部追加内容,`.remove()`用于删除元素,`.attr()`用于获取或设置元素属性。 3. **事件处理**:jQuery的事件处理方式简洁易用,如`.click...
1. **DOM操作**:jQuery提供了一系列简洁的API,如`$(selector)`用于选取元素,`.append()`和`.prepend()`用于插入元素,`.remove()`用于删除元素,以及`.attr()`和`.prop()`用于获取或设置属性等。 2. **事件处理*...
在Visual Studio中,打开包含jQuery引用的项目或文件,当你开始键入jQuery相关的函数或方法时,VS应该会自动弹出智能提示,显示可用的方法和属性。这对于快速学习和记忆jQuery API尤其有帮助,减少了查阅文档的时间...
在这个标题为“jquery1.7 API”的压缩包中,包含的是jQuery 1.7.1版本的两个主要文件:`jquery-1.7.1.min.js` 和 `jquery-1.7.1.js`,以及一个API文档`jquery1.7_20111204.chm`。 1. **`jquery-1.7.1.min.js` 和 `...
此外,jQuery还提供了`.attr()`和`.removeAttr()`来处理元素属性,以及`.css()`用于改变样式。 事件处理是jQuery的另一个亮点。`.click()`、`.mouseover()`等方法使得绑定和触发事件变得简单。同时,`.on()`和`.off...
- **折叠集(Collapsible Sets)**:通过`data-role="collapsible"`和`data-collapsed="true"`实现内容的折叠与展开。 **6. 主题和自定义** jQuery Mobile提供了一套基于Sass的可定制主题系统,允许开发者通过修改...
总的来说,"jquery.json-2.3.js"为开发者提供了强大的JSON处理能力,包括解析、序列化、获取和安全保护。这个第三方库基于jQuery,能够无缝集成到现有的jQuery项目中,提升开发效率,简化JSON相关的代码,使得开发者...
2. **DOM操作**:jQuery提供了丰富的DOM操作方法,如`$(element).html()`用于获取或设置元素的HTML内容,`$(element).append()`用于在元素内部追加内容。 3. **事件处理**:jQuery简化了事件绑定,`$(element)....
通过智能感知,开发者可以在输入代码时获得实时的语法提示,快速定位和使用所需的函数、类或属性,而无需手动查阅文档或记忆所有API。 压缩包子文件的文件名称列表 "jquery-1.8_veryhuo.com.rar" 和 "51CTO下载-...
`serializeArray()`是`serialize()`的一个变体,它返回一个JavaScript数组,每个数组元素都是一个对象,包含了表单字段的name和value属性。这样可以更方便地处理和操作数据,比如添加、删除或修改某些值。 3. **...
4. AJAX请求:$.ajax()函数是jQuery的核心之一,它封装了XMLHttpRequest对象,提供了异步数据获取和处理的能力。$.get()、$.post()等简化的API则更易于日常使用。 5. 特性检测:jQuery包含了一套完善的特性检测工具...
在前端开发中,jQuery 被广泛用于页面交互和动态内容的加载,尤其在处理跨浏览器兼容性问题时非常有用。虽然现代前端框架如 React, Angular, Vue.js 提供了更多功能,但 jQuery 依然在许多项目中扮演重要角色,尤其...
2. **DOM操作**:jQuery简化了DOM元素的操作,如`$(element).html()`用于获取或设置元素的HTML内容,`$(element).append()`和`$(element).prepend()`则分别用于在元素内部追加和预追加内容。 3. **事件处理**:...
- **.append()、.prepend()、.html()**:DOM元素内容的操作,如插入、替换和获取HTML。 - **.hide()、.show()、.fadeIn()、.fadeOut()**:元素的显示和隐藏,以及过渡动画效果。 四、实际应用场景 1. **动态操作...