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
Feb 25 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
通过onmouseover选项卡实现img图片的变化
Feb 12 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
javascript中去除数组重复元素的实现方法【实例】
Apr 12 Javascript
利用AngularJs实现京东首页轮播图效果
Sep 08 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
AngularJS递归指令实现Tree View效果示例
Nov 07 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 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/10/09 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php日历制作代码分享
2014/01/20 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
javascript实现的固定位置悬浮窗口实例
2015/04/30 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
AngularJS中isolate scope的用法分析
2016/11/22 Javascript
JavaScript实现前端实时搜索功能
2020/03/26 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
利用JQUERY实现多个AJAX请求等待的实例
2017/12/14 jQuery
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
微信小程序实现图片上传功能
2018/05/28 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Windows下Anaconda2安装NLTK教程
2018/09/19 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
使用Tkinter制作信息提示框
2020/02/18 Python
从零开始的TensorFlow+VScode开发环境搭建的步骤(图文)
2020/08/31 Python
Python读取Excel一列并计算所有对象出现次数的方法
2020/09/04 Python
HTML5实现视频弹幕功能
2019/08/09 HTML / CSS
建筑工程技术应届生求职信
2013/11/17 职场文书
高一英语教学反思
2014/01/22 职场文书
婚前协议书
2014/04/15 职场文书
小学生春游活动方案
2014/08/20 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
springboot layui hutool Excel导入的实现
2022/03/31 Java/Android