JavaScript和JQuery获取DIV值的方法示例


Posted in Javascript onMarch 07, 2017

本文实例讲述了JavaScript和JQuery获取DIV值的方法。分享给大家供大家参考,具体如下:

1、示例代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript和JQuery获取DIV的值</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   $(function(){
     $("#jqueryInput").click(function(){
       var divValue = $("#div_val").text();
       var divVal = $("#div_val").html();
       alert("JQuery获取DIV的值:"+divValue+"\n"+divVal);
     });
   });
   function javaScriptDiv()
   {
     var divVal = document.getElementById("div_val").innerHTML;
     alert("JavaScript获取DIV的值:"+divVal);
   }
</script>
</head>
<body>
  <div id="div_val">3water.com</div>
  <input type="button" value="JavaScript获取DIV的值" onclick="javaScriptDiv()"/>
  <input type="button" value="JQuery获取DIV的值" id="jqueryInput"/>
</body>
</html>

2、运行结果:

(1)初始化

JavaScript和JQuery获取DIV值的方法示例

(2)点击”JavaScript获取DIV的值“按钮

JavaScript和JQuery获取DIV值的方法示例

(3)点击”jQuery获取DIV的值“按钮

JavaScript和JQuery获取DIV值的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
indexedDB bootstrap angularjs之 MVC DOMO (应用示例)
Jun 20 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
jQuery ajax的功能实现方法详解
Jan 06 Javascript
Vue自定义指令详解
Jul 28 Javascript
在react-router4中进行代码拆分的方法(基于webpack)
Mar 08 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 Javascript
vue-cli随机生成port源码的方法
Sep 02 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 Javascript
AngularJS监听路由变化的方法
Mar 07 #Javascript
微信小程序开发之入门实例教程篇
Mar 07 #Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 #Javascript
Node.js查找当前目录下文件夹实例代码
Mar 07 #Javascript
jQuery模拟下拉框选择对应菜单的内容
Mar 07 #Javascript
详解JS异步加载的三种方式
Mar 07 #Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 #Javascript
You might like
php正则
2006/07/07 PHP
PHP入门速成教程
2007/03/19 PHP
php 设计模式之 工厂模式
2008/12/19 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
php中创建和调用webservice接口示例
2014/07/25 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
javascript实现颜色渐变的方法
2013/10/30 Javascript
js中arguments的用法(实例讲解)
2013/11/30 Javascript
JS delegate与live浅析
2013/12/21 Javascript
javascript最基本的函数汇总
2015/06/25 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
JS验证字符串功能
2017/02/22 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
ReactNative实现Toast的示例
2017/12/31 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
python基础教程之常用运算符
2014/08/29 Python
十个Python程序员易犯的错误
2015/12/15 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
PyTorch 1.0 正式版已经发布了
2018/12/13 Python
python读取图片任意范围区域
2019/01/23 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python中的global关键字的使用方法
2019/08/20 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
支教自我鉴定
2014/01/18 职场文书
主题婚礼策划方案
2014/02/10 职场文书
物业管理工作方案
2014/05/10 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
Java线程的6种状态与生命周期
2022/05/11 Java/Android