jQuery控制DOM对象（获取页面详细信息）

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量906 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxfzgg/article/details/8809359
版权
这个示例展示了如何利用jQuery获取DOM元素的值，并根据用户输入显示详细信息。当用户点击'提交'按钮时，它会读取文本框的姓名、选择的性别和复选框的婚姻状态，并将这些信息在页面上展示出来。
摘要由CSDN通过智能技术生成

 

 

 <style type="text/css">
    .divFrame
    {
        width:260px;
        border:solid 1px #666;
        font-size:16px;
    }
    .divTitle
    {
        background-color:#eee;
        padding:5px;
    }
    .divContent
    {
       padding:5px;
       font-size:9pt;
    }
  .divTip
  {
      width:244px;
      border:solid 1px #666;
      padding:8px;
      font-size:9pt;
      }
      .txtcss
      {
          border:solid 1px #ccc;
      }
      .divBtn
     {
        padding-top:5px;
             
      }
      .divBtn.btncss
      {
          border:solid 1px #535353;width:60px;
       }
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
   <script type="text/javascript">
       $(function () {
           $('#Button1').click(function () {
               var txtValue = $('#Text1').val();
               var radioValue = $('#Radio1').is(':checked') ? '男' : '女';
               var CkValue = $('#Checkbox1').is(':checked') ? '已婚' : '未婚';
               $('#divTip').css("display", "block").html(txtValue + "<br>" + radioValue + "<br>" + CkValue);
           })
       })
   </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="1" type="radio" value="男" />男
         <input id="Radio2" name="1" type="radio" value="女" />女<br />
   婚否：<input id="Checkbox1" type="checkbox" /><br />
     </div>
   <div class="divBtn">
       <input id="Button1" type="button" value="提交" class="btncss"/>
   </div>
</div>
<div id="divTip" class="divTip"></div>
</body>

刘晓飞
关注
专栏目录
简述Jquery与DOM对象
10-23
当使用JQuery选择器获取页面元素后，JQuery会返回一个封装后的对象，这个对象不能直接使用DOM对象的属性和方法，但可以使用JQuery为这些对象提供的丰富接口和方法。例如，使用JQuery的.html()方法获取或设置元素的...
jQuery对象与DOM对象之间的转换方法
10-29
因为jQuery对象本质上是一个封装了DOM对象的数组，所以可以通过索引的方式来获取。一般情况下，使用`[index]`或`.get(index)`方法来实现这一转换： ```javascript var $jQueryObject = $('#v'); // 方式1：通过索引 ...
使用jQuery操作DOM对象
qq_60213361的博客
11-27 576
jQuery对JavaScript中的DOM操作进行了封装jQuery中的DOM对象 样式操作 设置单个样式： .css("属性名称"，"属性值"); $("#p1").css("background","pink"); 设置多个样式： .css({"属性名称1","属性值1":"属性名称2","属性值2"}); $("#p2").css({"background":"yellow","color":"red"}); 获...
jQuery——DOM对象和jQuery对象
@一只躺平的猪@的博客
07-25 284
1.获取对象 由原生js获取到的对象为DOM对象 var div = document.querySelector('div'); 由$获取到的对象为jQuery对象 $('div') 2. 两者区别 DOM对象和jQuery对象的方法和属性不能混合使用 //隐藏div元素 var div_dom = document.querySelector('div'); div_dom.hide(); //正确写法：div_dom.style.diaplay = 'none';...
jQuery对象和DOM对象之间的相互转换
09-16 4825
先是DOM对象转换为jQuery对象： 首先需要引入jQuery函数库 //获取DOM对象 var username=document.getElementById("username"); alert(username.value); //转换为jquery对象 转换后就可以使用jQuery中的方法了 var $username=$(username)
jquery操作DOM对象
qx020814的博客
07-28 504
通过replaceWith方法替换掉指定DOM。使用each方法可以遍历获取到的DOM元素。上面的代码时随机获取1-4的图片作为背景。通过attr方法改变DOM的属性值。判断文本框是否有过更新输入值，获取输入框类容，选中DOM对象。类似于JAVA的加强for循环。删除类时传入类名参数，参数一下标，从0开始。...
jQuery对象和DOM对象之间的转换
koastal的博客
02-20 399
jQuery对象转成DOM对象两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); (1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。 如：var $v =$("#v") ; //jQuery对象 var v=$v[0]; //DOM对象 alert(v.checked) //检测这个checkbox是否被
jQuery获取DOM节点实例分析(2种方式)
11-22
这里的`$(dom)`是jQuery选择器，返回一个jQuery对象，然后使用索引`[0]`来获取第一个DOM元素。这种方法简单直接，但需要注意，如果选择器选取了多个元素，`[0]`只会返回第一个元素。 **二、使用`get()`函数访问** ...
jquery对象与DOM对象转化
10-20
本文旨在深入探讨jQuery对象与DOM对象之间的转化技巧，通过这些方法可以实现两者的相互转换，从而在Web开发过程中更灵活地运用jQuery库和原生JavaScript。 首先，我们需要了解jQuery对象与DOM对象的基本区别。一个...
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
11-22
《牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作》 jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作，提供了丰富的API和强大的选择器，使得开发者能够更高效地...
dom对象&jquery对象
jokerxue___的博客
08-01 709
初学
jquery对象与dom对象
alightman的博客
09-25 613
一、两者区别 DOM对象通俗点讲就是document.get取出来的，js中getElementsByTagName获取元素节点得到的dom元素就是dom对象（dom树） Jquery对象用$()取出来的都是jq对象，通过jq包装DOM对象后产生的对象 jq方法只能jq对象调用，是jq独有的，在jq对象中无法使用dom对象的任何方法。dom方法只能dom对象去调用; 二、相互转
在Jquery中如何获取并设置Dom元素的值
bug处理进行时
09-13 1470
jquery的强大之处在于对dom元素的操作，所谓的dom元素就是document object model（文本对象模型）。在对dom操作中主要包含 获取、设置dom元素的值和属性 动态的添加、删除dom元素 动态的设置dom的css样式 获取dom的尺寸等 一、获取设置dom的值 获取/设置dom值的方法有三种: text() – 主要用于对普通文本的设置和获取 html() –...
JavaScript容易混淆点
行者
11-29 326
1、相等（== ）与全等（===）1.1、相等 ==操作符会先做转换操作（强制转型），然后比较相等性。具体转换规则： - 如果有一个值是bool值，比较之前将其转为数值—-false转为0，true转为1 - 一个操作数是字符串，另一个是数值，在比较之前将字符串转为数值 - null和undefined相等 - 比较相等之前，不能将null和undefined转换未任何值 - 如果一个操作
jquery dom解析html,jQuery操作DOM元素详解
weixin_36373949的博客
06-22 401
jQuery操作DOM元素详细方法总结。一、属性操作1.使用attr()获取:对象.attr(“属性名”)//返回当前属性值，底层使用的是getAttribute注意：此种方式不能获取value属性的实时数据，使用对象名.val()进行获取修改：对象.attr(“属性名”,”属性值”);删除：removeAttr(“属性名”) ：删除该属性的值2.使用prop()使用方法同attr()一致，底...
jQuery获取dom元素
dywtsh的博客
05-05 1303
可以根据确定的jQuery对象，利用遍历函数查询目标dom元素。方法直接定位目标dom元素组。目标元素是被选元素的祖先。目标元素是被选元素的后代。目标元素是被选元素的同辈。
jquery--DOM操作
最新发布
m0_74194490的博客
07-05 1085
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jquery对象和dom元素的转换
HN.yz@ssg
12-06 9351
jquery对象转成dom对象： 1. $("#id名")[0]  //id选择器 $(function() { //通过id选择器获取jquery对象 var tx=$("#tx"); //转成dom对象 var domObj=tx[0]; }) 2.$("#id名").get(0)   //id选择器 $(function() { //转成dom对象
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值