jQuery操作DOM对象

最新推荐文章于 2024-02-28 16:51:01 发布
最新推荐文章于 2024-02-28 16:51:01 发布
阅读量406 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_24598229/article/details/50377769
版权
       jQuery操作DOM对象,很简单但是做个例子加深印象 
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>控制DOM对象</title> 
 <style type="text/css">
    *{ margin:0 ; padding:0;}
    .iframe{border:solid 1px #888; font-size:13px;}
	.title{padding:6px ; background-color:#EEE;}
	.content{padding:8px; font-size:12px;}
	.tip{ backgroud-color:#EEE; display:none; font-size:12px; padding:8px;}
	.txt{ border:solid 1px #888;}
	.btn{ border:solid 1px #888; width:60px;}
	.w260{ width:260px;}
 </style>
</head>

<body>
 <div class="iframe">
    <div class="title">请输入如下信息:</div>
    <div class="content">
      姓名:<input id="text" type="text" class="text"/><br />
      性别:<input id="Radio1" name="rdoSex" type="radio" value="男"  />男         <input id="Radio2" name="rdoSex" type="radio" value="女"  />女<br />
      婚否:<input id="Checkbox1" name="checkbox" type="checkbox"/><br />
      <input id="btnSubmit" type="button" value="提交" class="btn" οnclick="btn_Click();"/><br /><br />
    </div>
    <div class="tip" id="tip"></div>
  </div>
</body>
<script type="text/javascript">
    function btn_Click(){
		//获取文本框的值
		var oTxtValue = document.getElementById('text').value;
		
		var oRadioValue = (Radio1.checked)?"男":"女";
		
		var oCheckvalue = (Checkbox1.checked)?"已婚":"未婚";
		
		document.getElementById("tip").style.display = "block";
		
		document.getElementById("tip").innerHTML = oTxtValue + "<br>" +
		
		oRadioValue + "<br>" + oCheckvalue;
		}
</script>
</html>

cherry疯狂的兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery对象和DOM对象之间相互转换的方法介绍
10-24
jQuery对象是包装了DOM对象的类数组对象，它们之间的转换虽然看似简单，但在实际操作中却非常重要。 首先，我们需要明确什么是jQuery对象和DOM对象。DOM对象是原生的JavaScript对象，例如document中的各种元素，...
jquery对象和javascript对象即DOM对象相互转换
12-09
例如，当你需要操作某个特定的DOM属性，而jQuery没有提供直接的接口时，可以先将jQuery对象转换为DOM对象，然后进行操作。 总的来说，jQuery对象与DOM对象之间的转换是开发中常见的需求。掌握这种转换技巧能帮助你...
JQuery入门——控制DOM对象
web开发
01-03 101
1、JavaScript访问DOM对象方法： var oTxtValue=document.getElementById("Text1").value; 2、JQuery访问DOM对象方法： var oTxtValue=$("#Text1").val(); 通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器。 示例代码： &...
jQuery——操作DOM对象
xxe000113的博客
11-28 674
目录 样式操作 内容及value值操作 节点操作 操作属性 节点遍历 jQuery对JavaScript中的DOM操作进行了封装jQuery中的DOM操作 1.样式操作 2.内容及value值操作 3.节点操作 4.节点属性操作 5.节点遍历 6.CSS-DOM操作 样式操作 设置单个样式：.css("属性名称","属性值") 设置多个样式：.css({"属性名称1":"属性值1","属性名称2":"属性值2"}) 获取样式值：...
使用jQuery操作DOM对象
qq_60213361的博客
11-27 566
jQuery对JavaScript中的DOM操作进行了封装jQuery中的DOM对象 样式操作 设置单个样式： .css("属性名称"，"属性值"); $("#p1").css("background","pink"); 设置多个样式： .css({"属性名称1","属性值1":"属性名称2","属性值2"}); $("#p2").css({"background":"yellow","color":"red"}); 获...
使用jquery操作DOM对象
诗人密语
10-27 2450
目录 1、DOM操作分类 2、jQuery中的DOM操作 ①使用jQuery操作CSS样式——css()、 addClass()、 removeClass()、 toggleClass() ②使用jQuery操作文本与属性值内容——html()、 text()、 val() ③使用jQuery操作DOM节点——查找、创建、插入、删除、替换、复制和遍历 ④节点属性操作：attr() 、r...
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
11-22
《牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作》 jQuery是一种广泛使用的JavaScript库，它极大地简化了DOM（Document Object Model）操作，提供了丰富的API和强大的选择器，使得开发者能够更高效地...
简述Jquery与DOM对象
10-23
DOM对象提供了原生的方法和属性来操作文档中的元素，而JQuery对象则是在DOM对象基础上提供的一套更加强大和便捷的封装。在不同的场景下，开发者可以根据实际需要选择合适的方式进行操作。同时，熟练掌握DOM对象和...
jQuery操作DOM元素案例
穆雄雄的博客
12-24 649
直接打开注释即可观察效果，都已经测试通过！！！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;操作DOM元素&lt;/title&gt; &lt;script src="js/jquery-1.8.3.js" type=
jQuery DOM操作
Mr·小五
06-08 230
jQuery DOM操作概念: 1.DOM -&gt; 即文档对象模型(Document Object Model),简单来说,DOM给予了Web设计师和开发者一套标准的方法,让他们能够轻松获取操作网页中的数据,脚本和表现层对象.2.在实现DOM操作之前,必须要选择要操作的元素(使用jQuery强大的选择器)-&gt; 基本选择器 层次选择器 内容选择器 过滤选择器......DOM操作1、节点操...
jQuery--jq对象和dom对象
东篱的博客
03-01 647
1什么是jq对象  2jq对象和dom对象转化 3jq如何与其他js库共存 我是大p 我是大v /*什么是jq对象 */ // js例子 // var p = document.getElementsByTagName('p')[0]; // 用dom方法获得的对象p就是dom对象 var p = $('p'); // p为jQuery对象，只能使用jQue
jQuery复习总结（四）DOM操作 详细实例代码+截图调试
Blog by Haris Ha
12-14 286
jQuery DOM 操作 jQuery 中非常重要的部分，就是操作 DOM（Document Object Model） 的能力 test()、html() and val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 获取内容： &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;he...
Jquery操作DOM对象
最新发布
zhoutong2323的博客
02-28 525
HTML代码操作 演示案例 总结
三、jQuery 中的 DOM 操作（超详细）
weixin_44009656的博客
05-04 6822
本文详细讲解了 jQuery 中的 DOM 操作。走过路过不要错过丫
JQuery之DOM操作
PzzZ的博客
08-18 4938
1、创建节点及结点属性 （1）DOM创建节点及结点属性 创建流程比较简单，大体如下： 创建节点(常见的：元素、属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法： 创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild <body> <h2&...
jquery操作DOM对象
qx020814的博客
07-28 499
通过replaceWith方法替换掉指定DOM。使用each方法可以遍历获取到的DOM元素。上面的代码时随机获取1-4的图片作为背景。通过attr方法改变DOM的属性值。判断文本框是否有过更新输入值，获取输入框类容，选中DOM对象。类似于JAVA的加强for循环。删除类时传入类名参数，参数一下标，从0开始。...
jQuery中的DOM操作整理
wangyun_www的博客
08-18 9054
1.创建元素节点例如，创建两个<li>元素节点，并加入到<ul>中 首先创建元素节点var $li_1=$("<li></li>"); var $li_2=$("<li></li>"); 然后蒋新创建的节点插入文档中$("ul").append($li_1); $("ul").append($li_2);/*也可以写成$("ul").append($li_1).append($li_2)*/2.
【JavaScript】使用jQuery操作DOM
未入门的程序员笔记
11-26 2338
本章需要掌握的技能目标 1、使用jQuery操作css样式。 2、使用jQuery操作文本与属性值内容 3、使用jQuery操作DOM节点 4、使用jQuery遍历DOM节点 5、使用jQuery操作CSS-DOM
jQuery与DOM对象转换及基础教程
之后，就可以使用jQuery的选择器和方法来操作DOM元素，实现各种功能。 jQuery的广泛应用和易用性使其成为JavaScript开发者的首选工具之一，它极大地简化了DOM操作和动态效果的实现，让开发者可以更专注于业务逻辑而...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值