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 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
Feb 04 Javascript
jquery获取css中的选择器(实例讲解)
Dec 02 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
JS实现HTML表格排序功能
Aug 05 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
ES6 Iterator接口和for...of循环用法分析
Jul 31 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
Vue3 响应式侦听与计算的实现
Nov 11 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
德生PL330的评价与改造
2021/03/02 无线电
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
PHP中的插件机制原理和实例
2014/07/08 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
一端时间轮换的广告
2006/06/26 Javascript
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
Jquery 实现弹出层插件
2015/01/28 Javascript
基于jquery实现放大镜效果
2015/08/17 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
2016/02/19 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jquery,js简单实现类似Angular.js双向绑定
2017/01/13 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
浅谈JS对象添加getter与setter的5种方法
2018/06/09 Javascript
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python爬虫 批量爬取下载抖音视频代码实例
2019/08/16 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
sort命令的作用和用法
2012/11/04 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
参观邀请函范文
2015/02/02 职场文书
FP-growth算法发现频繁项集——发现频繁项集
2021/06/24 Python