<!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. Windows Phone 7 播放视频

    在Windows Phone 7中播放视频有两种方式,一种是使用MediaElement 控件来播放,一种是使用启动器MediaPlayerLanucher来实现视频的播放.用MediaElement ...

  2. POJ 1734 Sightseeing trip(无向图最小环+输出路径)

    题目链接 #include <cstdio> #include <string> #include <cstring> #include <queue> ...

  3. BZOJ3091: 城市旅行

    Description Input Output Sample Input 4 5 1 3 2 5 1 2 1 3 2 4 4 2 4 1 2 4 2 3 4 3 1 4 1 4 1 4 Sample ...

  4. hiho#1145 : 幻想乡的日常

    描述 幻想乡一共有n处居所,编号从1到n.这些居所被n-1条边连起来,形成了一个树形的结构. 每处居所都居住着一个小精灵.每天小精灵们都会选出一个区间[l,r],居所编号在这个区间内的小精灵一起来完成 ...

  5. 一个简单的SqlServer游标使用

    declare @id int ) declare c_department cursor for select id,name from department open c_department f ...

  6. 关于APP自动化工程的一点小想法

    首先谈一下APP自动化测试面临的一些局限性? 答:测试业务的不明确性,APP逻辑复杂,界面的跳转变化随时间变化. 测试本身的不确定性,如不定时弹窗问题. 测试环境不稳定性,主要是网络的稳定性. 测试接 ...

  7. More about dubbo

    一.前言 dubbo 作为分布式服务框架支持丰富的配置和扩展方式,其中包括:通讯协议.并发控制.多版本服务.结果缓存.泛化引用\实现.回声测试.上下文信息.事件通知.路由规则(可用于实现读写分离)等多 ...

  8. Winform窗体事件发生顺序

    Form 和Control 类公开了一组与应用程序启动和关闭相关联的事件.当Windows 窗体应用程序启动时,主窗体的启动事件按以下顺序引发: System.Windows.Forms.Contro ...

  9. Spring整合Quartz实现持久化、动态设定时间

    一.spring整合 网上一搜有很多整合的方式,这里我采用了其中的一种(暂时还没有对其他的方法研究过). 对于spring的整合其中的任务,spring提供了几个类.接口(这些类都实现了Job接口): ...

  10. safedog的小技巧

    限制3389连接:下载SafedogServer\SafeDogGuardCenter\ProGuardData.ini回本地,然后本地搭建安全狗,覆盖,查看计算机名,修改自己计算机名再连接. 卸载安 ...