<!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. 一份spring配置文件及其详解

    本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/axu20/archive/2009/10/14/4668188.aspx 1.基本配置:<?xml versio ...

  2. RTO & RPO

    作者:王文洋链接:https://www.zhihu.com/question/30753842/answer/49334210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  3. Scrum会议1

    小组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.16 会议内容: 1.连连看游戏选取图片素材. 2.连连看的界面设计 3.连连看具体的功 ...

  4. discuz怎么根据连接知道调用的是什么模板页面

    其实不怎么难,基本都可以看出discuz是怎么样调用模板页面的 这个是论坛的帖子的列表页,看到url就可以看出是forum目录下的forumdisplay这个模板,forumdisplay.html这 ...

  5. spring aop中的propagation的7种配置的意思

    1.前言. 在声明式的事务处理中,要配置一个切面,即一组方法,如 <tx:advice id="txAdvice" transaction-manager="txM ...

  6. 点击li标记中的<a>标记改变li背景图片怎样实现

    <div class="nav"><ul><li id="li1" class="dianji" onclic ...

  7. 在archlinux上搭建twitter storm cluster

    本文详细描述如何在archlinux上搭建twitter storm cluster,转载请注明出处,谢谢. 有关archlinux基本系统安装,请参照archlinux简明安装指南一文,下面以上述为 ...

  8. Ubuntu 14.04 LTS 安装 VNC Viewer

    1.修改镜像源: /etc/apt/sources.list将"http://archive.ubuntu.com/ubuntu/"替换为: http://cn.archive.u ...

  9. smoke

    1.Have a smoke? 2.Would you like a cigarette? 3.Cigarettes? 4.Let's go have a smoke. 5.Do  you smoke ...

  10. Connection Management and Security

    High Performance My SQL  THIRD EDITION Each client connection gets its own thread within the server ...