<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>控制DOM对象</title>

    <style type="text/css" >

        @import url(../../CSS/1-3.css);  /*使用import 方法引用CSS*/

    </style>

    <script type="text/javascript" src="../../JQuery/jquery-2.1.4.min.js">

    </script>

    <script type="text/javascript">

        $(function () {

            $("#Button1").click(function () {

                //获取文本框的值

                var oTxtValue = $("#Text1").val();

                //获取单选按钮的值

                var oRdoValue = $("#Radio1").is(":checked") ? "男" : "女";

                //获取复选框按钮只

                var oChkValue = $("#Checkbox1").is(":checked") ? "已婚" : "未婚";

                //显示提示文本元素和内容

                $("#divTip").css("display", "block").html(oTxtValue + "<br>" + oRdoValue + "<br>" + oChkValue);

            })

        })

    </script>

</head>

<body>

<div class="divFrame">

    <div class="divTitle">请输入如下信息</div>

    <div class="divContent">

        姓名：<input id="Text1" type="text" class="txtCss"/><br />

        性别：<input id="Radio1" name="rdoSex" type="radio" value="男" /> 男

              <input id="Radio2" name="rdoSex" type="radio" value="女" /> 女

        婚否: <input id="Checkbox1" type="checkbox" />

        <div class="divBth">

            <input id="Button1" type="button" value="提交"/>

        </div>

        <div id="divTip" class="divTip"></div>

    </div>

</div>

</body>

</html>

jQuery控制DOM对象的更多相关文章

  1. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  2. Jquery与DOM对象

    在第一次学习jquery中,常常会不能分辨DOM对象和Jquery对象,下面我们就简诉一下它们之间的关系和区别 1.DOM对象(Document Object Model) 文档对象模型,每一份DOM ...

  3. jQuery和DOM对象之间的转换

    jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’)得到的是 ...

  4. jQuery与DOM对象的转换

    一.jQuery与DOM对象的转换. 1.jQuery对象转换为DOM对象:$cr[0] 或 $cr.get(0) $cr为jQuery对象 2.DOM对象转换为jQuery对象:$(cr) cr为D ...

  5. Jquery与Dom对象相互转化

    Jquery与Dom对象相互转化   jQurey对象和DOM对象的相互转换 在讨论jQurey对象和DOM对象的相互转换之前,我们先约定定义变量的风格.如果我们获取的对象是jQuery对象,那么我们 ...

  6. jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

    this指的是原生js的DOM对象 .css(“”):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(“”):获取元素   标 ...

  7. 【Jquery对象】jquery与dom对象的区别

    最近工作有很多判断的代码,用到了jquery与dom对象的地方比较多,写在这里加强下基本概念: 1.判断是否存在时候,要用dom对象,因为jQuery在获得对象的时候,无论要获得的对象是否存在,都会返 ...

  8. jQuery和DOM对象

    html示例 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  9. jQuery判断Dom对象是否存在

    我们时常要检测一个DOM对象是否为空. var $jObject = $('#btn'); alert($jObject ); 我们会发现,$jObject 永远不会为空.为什么呢?$ 方法查找对象, ...

随机推荐

  1. 【BZOJ】2435: [Noi2011]道路修建（树形dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2435 我怎么感觉那么水.. 坑的是,dfs会爆...好吧..用bfs.. //upd:我的智商也是醉 ...

  2. Ubuntu(Linux) 下 unzip 命令使用详解

    1.功能作用:解压缩zip文件 2.位置:/usr/bin/unzip 3.格式用法:unzip [-Z] [-opts[modifiers]] file[.zip] [list] [-x xlist ...

  3. SpringMVC_The resource identified by this request is only capable of generating responses with characteristics

    今天在调试springMVC的时候,在将一个对象返回为json串的时候,浏览器中出现异常: The resource identified by this request is only capabl ...

  4. [简单]poi word2007表格按模版样式填充行数据

    主要实现了按照模版行的样式填充数据,针对的是动态数据,静态数据可以直接替换变量实现,先说下缺点:1)暂未实现特殊样式填充(如列合并(跨行合并)),只能用于普通样式(如段落间距 缩进 字体 对齐)2)数 ...

  5. OpenCV2.4.10 Mac Qt Configuration

    Download OpenCV 2.4.10 Download CMake 2.8 Open CMake and choose the source code directory and build ...

  6. 使用jenkins构建持续集成平台

    jenkins +   Maven + svn/git + tomcat 的持续集成平台 项目管理流程: 需求分析----原型设计----开发代码----提交测试-----内部测试-----确认上线( ...

  7. html5+css3

    1,文件声明,<!Doctype>,不再有严格模式和混杂模式 2语意的标签 1,header 头 section中 nav导航(中上) aside侧边栏(中左) article内容(中右) ...

  8. hdu1874 最短路模板题

    之所以做了第二道模板题还要写是因为发现了一些自己的问题 用的是dij 最简单的松弛 需要注意的地方是松弛的时候 判断dis[i]<dis[w]+tance[w][i]时 还要再判断 vis[i] ...

  9. [办公自动化]如何对Excel表格顶部设计

    领导有一个excel要完成如下功能:顶部要包含企业LOGO,还要包含设计图号.版次等表格,还要包含类似“第  页 of  页” 总体思路: 1.利用顶端标题行完成除了页码以外的所有事情:(当然也可以利 ...

  10. Apache Storm技术实战之3 -- TridentWordCount

    欢迎转载,转载请注明出处. 介绍TridentTopology的使用,重点分析newDRPCStream和stateQuery的实现机理. 使用TridentTopology进行数据处理的时候,经常会 ...