<!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. clumsy 0.1 测试工具(延迟\掉包\节流\重发\乱序\篡改)

    clumsy : http://jagt.github.io/clumsy/可以模拟以下几种场景: 延迟(Lag),把数据包缓存一段时间后再发出,这样能够模拟网络延迟的状况. 掉包(Drop),随机丢 ...

  2. JS中setInterval、setTimeout不能传递带参数的函数的解决方案

    在JS中无论是setTimeout还是setInterval,在使用函数名作为调用句柄时都不能带参数,而在许多场合必须要带参数,接下来为大家介绍具体的解决方法 在JS中无论是setTimeout还是s ...

  3. The Storage Situation: Removable Storage

    http://commonsware.com/blog/2014/04/09/storage-situation-removable-storage.html There is a lot of co ...

  4. Git Shell 安装版本

    #!/bin/sh v1.; do echo "Begin install Git $ver."; git reset --hard git clean -fdx git chec ...

  5. 【MVC框架整合】之 SpringMVC3.2.0+MyBatis3.1.1+Spring3.2.0

    1.先整合spring和Mybatis 第一步基本上都是一样加入jar包 创建测试目录 添加junit jar包和log4j配置文件 Log4j的配置文件基本上都是不会变的复制过来就行了 现在就和Hi ...

  6. Swift Internal Parameter and External Parameter 外部参数和内部参数

    今天跟大神又学习了些关于IOS开发Swift语言的外部参数和内部参数 func doSomething(num1: Int, num2: Int) -> Int { return num1 + ...

  7. FXK Javascript

    Javascript是一门神奇的语言,很不爽的一门语言,很纠结的一门语言. 以下内容,专业人士请不要看,只供像我一样的菜鸟参考. (1)Javascript找不到函数.明明已经引用了JS文件,却提示找 ...

  8. echo "不允许上传该类型的文件

    <?php教程 // 上传设置 $maxsize=10002400;            //最大允许上传的文件大小 $alltype=array(".php"," ...

  9. 使用ProxychainsMac下安装及配置

    下面几种解决方式 一.先在VPS用composer把Laravel给拖回来,本地你就别想用Composer正常下载Laravel回来了 二.使用全局代理,暂时木有折腾过在终端下怎么折腾,GUI可以使用 ...

  10. fastjson解析任意json

    fastjson解析任意json到bean 解析案例的代码 package com.base.config; import java.util.List; import com.alibaba.fas ...