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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
用apply让javascript函数仅执行一次的代码
Jun 27 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
理解javascript封装
Feb 23 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
JS实现购物车特效
Feb 02 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
搜索引擎技术核心揭密
2006/10/09 PHP
深入理解PHP原理之错误抑制与内嵌HTML分析
2011/05/02 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
关于python列表增加元素的三种操作方法
2018/08/22 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
实习生单位鉴定意见
2013/12/04 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
外企办公室竞聘演讲稿
2013/12/29 职场文书
毕业生的自我评价
2013/12/30 职场文书
写给女生的道歉信
2014/01/08 职场文书
2014年党务公开方案
2014/05/08 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
Django如何创作一个简单的最小程序
2021/05/12 Python
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python