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 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
关于JQuery($.load)事件的用法和分析
Apr 09 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
Node.js assert断言原理与用法分析
Jan 04 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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自动反斜杠的函数代码
2010/01/05 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
php生成动态验证码gif图片
2015/10/19 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
jQuery 处理表单元素的代码
2010/02/15 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
基于jQuery实现文字打印动态效果
2017/04/21 jQuery
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
python实现报表自动化详解
2017/11/16 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python OpenCV对本地视频文件进行分帧保存的实例
2019/01/08 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python super的使用方法及实例详解
2019/09/25 Python
python数值基础知识浅析
2019/11/19 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
软件测试面试题
2015/10/21 面试题
入党自荐书范文
2014/03/09 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
法人委托书范本
2014/09/15 职场文书