<!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. 10个国内外jQuery的CDN性能大比拼

    jQuery是前端开发最常见也是最流行的javascript库,如何去加载它才能使我们的项目性能更好以及问什么要用CDN?当用户访问自己的站点时从服务器加载文件,每个服务器同时只能下载2-4个文件,这 ...

  2. iOS移动开发周报-第25期

    iOS移动开发周报-第25期 [摘要]:本期iOS移动开发周报带来如下内容:苹果发布 iPhone6 和 Apple Watch.Swift 1.0 GM发布.Xcode 6支持PDF Vector作 ...

  3. 四、saltstack如何管理对象？

    实验前环境: [root@super65 ~]# salt-key -L[root@super65 ~]# salt-key -a super65.cn -y salt管理对象简介: saltstac ...

  4. jq实现多banner效果图

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  5. unauthenticated user reading from net

    今天有台数据库异常,登录服务器后执行show processlist,发现大量的 unauthenticated user 状态.如下: 于是第一时间想到DNS反向解析的问题,于是看看是否关闭DNS解 ...

  6. lucene 使用注意

    1.建立索引时,忘记writer.close(); 结果: 正常结果:

  7. Bloomberg SEP 12.x 迁移小记

        备份 个文件: D:\Program Files\Symantec\Symantec Endpoint Protection Manager\Server Private Key Backup ...

  8. 【新产品发布】【GK101 10MHz任意波发生器】

    简介: GK101 10MHz掌上任意波形发生器基于多项先进技术,在较小的体积上实现了普通台式仪器才具有的功能.仪器仅手掌大小,实现了80M采样率.10MHz最大频率.10Vpp最高幅度的输出. 仪器 ...

  9. OC学习笔记——类别(Category)

    类别,有些程序员又称之为分类. 类别是一种为现有的类添加新方法的方式,尤其是为系统的做扩展的时候,不用继承系统类,可以直接为类添加新的方法.也可以覆盖系统类的方法. 如: @interface NSO ...

  10. linux下挂在u盘，移动硬盘的方法，转移服务器资料的时候，使用移动硬盘什么最方便了

    本文章是在centos环境下操作的 最近linux服务器我不小心吧root下面的用户配置,不能远程登录,而且我对linux系统配置也不熟悉,最后的办法就是去了一趟机房,还好是在深圳南山科技园,不算太远 ...