用jQuery访问DOM对象

最新推荐文章于 2023-08-03 15:30:00 发布
最新推荐文章于 2023-08-03 15:30:00 发布
阅读量595 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linlin2294592017/article/details/8809963
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css"> 
    .divFrame
    {
       width:260px; border:solid 1px #666; font-size:10pt;
        }
    .divTitle
    {
        background-color:#eee; padding:5px;
        }
     .divContent
     {
         padding:8px; font-size:9pt;
         }
     .divTip
     {
         width:244px; border:solid 1px #666; padding:8px; font-size:9pt; margin-top:5px; display:none;
         }
    .txtCss
    {
        border:solid 1px #ccc;
        }
     .divBtn
     {
        padding-top:5px;
         }
     .divBtn.btnCss
     {
         border:solid 1px #535353; width:60px;
         }
    </style>
    <script src="http://localhost:1679/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btnSubmit').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="divContent">
姓名：<input id="Text1" type="text" class="txtCss" /><br />
性别：<input type="radio" id="Radio1" name="rdoSex" value="男" />男
<input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />
婚否：<input id="Checkbox1" type="checkbox" />
<div class="divBtn"><input id="btnSubmit" type="button" value="提交" class="btnCss" /></div>
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>
Dlinlin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html jquery对象访问方法,使用jquery访问DOM对象方法
weixin_39544333的博客
06-15 116
1、JavaScript访问DOM对象方法：var oTxtValue=document.getElementById("Text1").value;2、JQuery访问DOM对象方法：var oTxtValue=$("#Text1").val();通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器。示例代码： 控制DOM对象 .divFr...
jQuery对象与DOM对象
Hurricane_m的博客
05-27 203
以下内容摘自慕课。 jQuery对象与DOM对象是不一样的 通过一个简单的例子，简单区分下jQuery对象与DOM对象： <p id=”imooc”></p> 我们要获取页面上这个id为imooc的div元素，然后给这个文本节点增加一段文字：“hello,world”，并且让文字颜色变成红色。 通过标准JavaScript处理： var p = docum...
jQuery对象转化成DOM对象
Hhjian524的博客
11-29 500
jQuery库本质上还是JavaScript代码，它只是对JavaScript语言进行包装处理，为的是提供更好更方便快捷的DOM处理与开发中经常使用的功能。我们使用jQuery的同时也能混合JavaScript原生代码一起使用。在很多场景中，我们需要jQuery与DOM能够相互的转换，它们都是可以操作的DOM元素，jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。 将jQuery...
jQuery中DOM基础操作
一名在校学习前端的小白
09-13 920
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。下面我们来看一下 W3C 上的 dom 树。
jQuery对象与dom对象的相互转化
DRRZH的博客
09-07 319
jQuery对象与dom对象的相互转化 刚开始学习jQuery，可能一时分不清那些事jQuery对象，哪些是DOM对象。至于DOM对象不多解释，我们接触的太多了，下面重点介绍一下jQuery，以及两者相互间的转换。 什么是jQuery对象？ 就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的，其可以使用jQuery里的方法。 比如： $("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法 等同于用DO
html jquery对象访问方法,jquery入门—访问DOM对象方法
weixin_34206129的博客
06-15 128
1、JavaScript访问DOM对象方法：var oTxtValue=document.getElementById("Text1").value;2、JQuery访问DOM对象方法：var oTxtValue=$("#Text1").val();通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器。示例代码： 控制DOM对象 .divFr...
使用jQuery访问和操作DOM元素
qq_45562888的博客
08-09 136
目录改变元素样式层次选择器过滤选择器 改变元素样式 用css()方式改变元素样式 只改变一个样式： $("p").css("color","red"); 改变多个样式（json: {“属性1”:“赋值1”,“属性2”:“赋值2”} ）： $("#a1").css({"color":"blue","font-size":"32","background-color":"red"}); 用addclass方式改变元素样式 $("h4").hover(function(){
jQuery对象和dom对象的区别和相互转换
qq_38921377的博客
06-27 752
jQuery对象和dom对象的区别和相互转换
七、 jQuery 操作 DOM
最新发布
m0_72166275的博客
08-03 853
当网页被加载时，浏览器会创建当前网页的 DOM 对象。JavaScript 通过提供的方法对 DOM 节点进行操作，实现页面的交互；jQuery 提供了一系列操作 DOM 的方法；一方面简化了 JavaScript 操作 DOM的写法；另一方面解决了浏览器的兼容性问题。JavaScript 操作 DOM 分为三类，即 DOM Core(核心)、HTML-DOM 和 CSS-DOM，jQuery 操作 DOM 同样分为这三类。
jquery入门—访问DOM对象方法
10-27
本文着重介绍：JavaScript访问DOM对象方法/JQuery访问DOM对象方法,通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器，感兴趣的朋友可以了解下
jQuery对象与DOM对象之间的相互转换
12-04
当需要使用DOM对象特有的方法或属性时，需要将jQuery对象转换为DOM对象。有以下两种主要的转换方式： 1. **通过索引访问**：jQuery对象实际上是一个包含DOM元素的数组（或称为集合），因此可以通过索引访问其中的...
jquery对象与DOM对象转化
12-03
转化DOM对象为jQuery对象非常简单，只需要将DOM对象用`$()`包裹起来即可。这是因为`$()`函数不仅可以用于选择元素，还可以接受一个DOM元素或一组DOM元素作为参数。例如： ```javascript var div = document....
jQuery对象和DOM对象使用说明
12-03
理解jQuery对象和DOM对象之间的差异和转换机制是使用jQuery的基础。jQuery对象提供了强大的工具集，简化了DOM操作，而DOM对象则保持了与原生JavaScript的兼容性。通过熟练掌握它们之间的转换，开发者可以在需要的...
JS操作图片（添加，更改，删除）
热门推荐
段琳琳
04-16 1万+
Image     {         width:100px;         height:100px;         }                          function chuangjian() {          //添加图片             var array = ['1.jpg',
jQuery设置文字样式
段琳琳
04-18 1万+
p     {         background-color:#eee; font-size:30px;         }         .classadd         {             font-weight:bold; font-family:微软雅黑; font-size:40px; background-color:Green;
jQuery中fadeIn、fadeOut、fadeTo的用法（图片隐藏与显示）
段琳琳
05-07 9650
#img1     {         width:400px; height:500px;         }                     $(function () {             $('#Button1').bind('click', function () {                 $('img').fadeOut(2000, fu
jQuery邮箱验证
段琳琳
04-23 8646
.txtbackcolor     {         background-color:#eee;         }                     $(function () {             var state = false;             $('#txtEmail').focus(function () {
JS更换图片
段琳琳
04-16 7923
// 方法一（麻烦）         function put() {             var len = document.getElementsByName('RA');             for (var i = 0; i                 if (len[i].checked == true) {                     var a
jQuery在p前后添加节点
段琳琳
04-22 7445
$(function () {             $('#Button1').click(function () {                 $('p').after('After Hello World');             })             $('#Button2').click(function () {                 $('p'
理解jQuery对象与DOM对象的区别
"jQuery对象和DOM对象的区别-jQuery_課件" ...反之，将DOM对象转换为jQuery对象，可以使用`$(DOM对象)`。理解并熟练掌握jQuery对象与DOM对象的转换和使用，对于高效地编写JavaScript代码至关重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值