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 相关文章推荐
JavaScript使用cookie
Feb 02 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
浅谈轻量级js模板引擎simplite
Feb 13 Javascript
js删除数组元素、清空数组的简单方法(必看)
Jul 27 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
基于BootStrap与jQuery.validate实现表单提交校验功能
Dec 22 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
微信小程序 wx.request方法的异步封装实例详解
May 18 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
Vue 3.0 全家桶抢先体验
Apr 28 Javascript
全面解析Vue中的$nextTick
Dec 24 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
分享10段PHP常用代码
2015/11/11 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
2017/03/17 Javascript
js实现适配不同的屏幕大小
2017/04/10 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
微信小程序 WXML节点信息查询详解
2019/07/29 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
Python XML RPC服务器端和客户端实例
2014/11/22 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python RabbitMQ 使用详细介绍(小结)
2018/11/08 Python
Python和Go语言的区别总结
2019/02/20 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
What is view? why do we have view?
2012/06/22 面试题
教师师德教育的自我评价
2013/10/31 职场文书
诉前财产保全担保书
2014/05/20 职场文书
联片教研活动总结
2014/07/01 职场文书
大二学生自我检讨书
2014/10/23 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
中秋节晚会开场白
2015/05/29 职场文书
使用Pytorch训练two-head网络的操作
2021/05/28 Python
openstack中的rpc远程调用的方法
2021/07/09 Python
关于springboot 配置date字段返回时间戳的问题
2021/07/25 Java/Android
如何基于python实现单目三维重建详解
2022/06/25 Python