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.11.2.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">youhaidong</div>
<input type="button" value="JavaScript获取DIV的值" onclick="javaScriptDiv()"/>
<input type="button" value="JQuery获取DIV的值" id="jqueryInput"/>
</body>
</html>

2、执行结果

(1)初始化

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="308" height="59" border="1" alt="">

(2)点击”JavaScript获取DIV的值“button

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="710" height="373" border="1" alt="">

(3)点击”JQuery获取DIV的值“button

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveW91MjNoYWk0NQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="710" height="375" border="1" alt="">

3、分析说明

(1)JavaScript获取DIV的值

document.getElementById("div_val").innerHTML;

(2)JQuery获取DIV的值

$("#div_val").text();

$("#div_val").html();

JavaScript和JQuery获取DIV的值的更多相关文章

  1. JavaScript or jQuery 获取option value值 以及文本内容的方法

    1.html <div class="form-group"> <label>保险公司</label> <select class=&qu ...

  2. jquery获取元素索引值index()的例子

    如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则返回-1 ...

  3. [转载]jquery获取元素索引值index()方法:

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  4. jquery获取元素索引值index()方法

    jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的 ...

  5. jquery获取元素索引值index()

    jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 ...

  6. JQUERY 获取 DIV 宽度与高度(width,padding,margin,border)

    一般讲的宽度指的是内容宽度,但一个 div 的实际宽度不仅只于内容宽度,尤其在做 CSS 排版时更不能搞错,必须同时考虑 Padding.Border 与  Margin 的宽度,四个加起来才是 di ...

  7. 【JavaScript与JQuery获取H2的内容】

    撰写日期:2016-7-13 11:05:07 JavaScript与JQuery获取DOM内容是有区别的,接下来看一例子 栗子: Jquery-获取H3中的内容然后Dom转换为Jquery < ...

  8. 使用jquery获取radio的值

     使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: ...

  9. jquery获取radio选中值及遍历

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:1.& ...

随机推荐

  1. Hello China操作系统STM32移植指南(三)

    移植到STM32的源代码,可从下列链接下载: http://download.csdn.net/detail/hellochina15/7049909 包含两个包:一个是移植前的Hello China ...

  2. 宣布发布 Windows Azure SDK 2.2,正式发布 Windows Azure Backup 和 Hyper-V 恢复管理器预览版

    开发人员正逐渐转向云计算,因为它具有众多优势,包括成本.自动化和让开发人员专注于应用程序逻辑的能力.我们很高兴地宣布,继推出 Visual Studio 2013 之后,今天将发布 Windows A ...

  3. dojo 学习笔记

    1  因为Dijit包括了一系列的UI组件,他绑定了4个支持的主题:nihilo, soria, tundra 和claro.每个主题包括了一系列的图片和CSS文件来控制组件的外观.CSS文件必须显示 ...

  4. [转]WIBKIT技术资料

    WebKit结构和流程分析 http://inedx.blog.hexun.com/28830354_d.html webkit架构 http://inedx.blog.hexun.com/28795 ...

  5. android下文件下载

    public static void downFile(final String url){ new Thread(){ public void run(){ FileOutputStream os= ...

  6. Objective-c Category(类别)

    category是Objective-c里面最常用的功能之一. category可以为已经存在的类增加方法,而不需要增加一个子类. 类别接口的标准语法格式如下: #import "类名.h& ...

  7. Ext JS学习第十五天 Ext基础之 Ext.DomQuery

    此文同来记录学习笔记 •Ext.dom.Query 嗯,这个类一看就是到时做什么事儿的,不用我去过多的解释了.这个类一共提供了8个方法供开发人员去使用. •要说最常用的方法,无非就是Ext.query ...

  8. 在 Windows系统中编译node.js 源代码

    Node.js 在 Windows 下只能通过 Microsoft Visual Studio 编译,因此你需要首先安装 Visual Studio 或者免费的 Visual Studio Expre ...

  9. LINQ 图解

    LINQ 图解 原创地址:http://www.cnblogs.com/jfzhu/archive/2013/01/01/2841332.html 转载请注明出处 LINQ,语言集成查询(Langua ...

  10. BZOJ 1579: [Usaco2009 Feb]Revamping Trails 道路升级( 最短路 )

    最短路...多加一维表示更新了多少条路 -------------------------------------------------------------------------------- ...