JQuery获得内容和属性方法解析


Posted in jQuery onMay 30, 2020

jQuery 拥有可操作 HTML 元素和属性的强大方法。

jQuery DOM 操作

jQuery 中非常重要的部分,就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。

提示:DOM = Document Object Model(文档对象模型)

DOM 定义访问 HTML 和 XML 文档的标准:

“W3C 文档对象模型独立于平台和语言的界面,允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容(包括 HTML 标记)
  • val() - 设置或返回表单字段的值

下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:

实例

$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});

下面的例子演示如何通过 jQuery val() 方法获得输入字段的值:

实例

$("#btn1").click(function(){
alert("Value: " + $("#test").val());
});

获取属性 - attr()

jQuery attr() 方法用于获取属性值。

下面的例子演示如何获得链接中 href 属性的值:

实例

$("button").click(function(){
alert($("#w3s").attr("href"));
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
jquery实现图片上传前本地预览
Apr 28 jQuery
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jquery获取transform里的值实现方法
Dec 12 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
用jQuery将JavaScript对象转换为querystring查询字符串的方法
Nov 12 jQuery
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
AJAX在JQuery中的应用详解
Jan 30 jQuery
使用jQuery实现购物车
Oct 29 jQuery
jQuery实现视频展示效果
May 30 #jQuery
基于JavaScript或jQuery实现网站夜间/高亮模式
May 30 #jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 #jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 #jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 #jQuery
JQuery插件tablesorter表格排序实现过程解析
May 28 #jQuery
jQuery实现鼠标滑动切换图片
May 27 #jQuery
You might like
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP中使用Imagick实现各种图片效果实例
2015/01/21 PHP
php动态绑定变量的用法
2015/06/16 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
js 异步处理进度条
2010/04/01 Javascript
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
JQuery 中几个类选择器的简单使用介绍
2013/03/14 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
JS实现HTML标签转义及反转义
2020/04/14 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
python中的函数递归和迭代原理解析
2019/11/14 Python
python递归函数用法详解
2020/10/26 Python
Python爬虫之Selenium实现关闭浏览器
2020/12/04 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
2019/08/16 HTML / CSS
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
全球工业:Global Industrial
2020/02/01 全球购物
先进德育工作者事迹材料
2014/01/24 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书