jquery入门—访问DOM对象方法


Posted in Javascript onJanuary 07, 2013

1、JavaScript访问DOM对象方法
var oTxtValue=document.getElementById("Text1").value;
2、JQuery访问DOM对象方法
var oTxtValue=$("#Text1").val();
通过JQuery库中的方法访问或控制页面中的元素,比使用JavaScript代码要简洁得多,而且兼容各浏览器。
示例代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> 控制DOM对象 </TITLE> 
<META NAME="Generator" CONTENT="EditPlus"> 
<META NAME="Author" CONTENT=""> 
<META NAME="Keywords" CONTENT=""> 
<META NAME="Description" CONTENT=""> 
<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} 
.txtSss{border:solid 1px #ccc} 
.divBtn{padding-top:5px} 
.divBtn.btnCss{border:solid 1px #535353;width:60px} 
</style> 
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$("#btnSumbit").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="女"/>女<br /> 
婚否:<input id="Checkbox1" type="checkbox"/> 
<div class="divBtn"><input id="btnSumbit" type="button" value="提交" class="btnCss" 
onclick="btnClick();"> 
</div> 
</div> 
</div> 
<div id="divTip" class="divTip"></div> 
</BODY> 
</HTML>

效果图
jquery入门—访问DOM对象方法
Javascript 相关文章推荐
javascript 解析后的xml对象的读取方法细解
Jul 25 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
node.js中的fs.renameSync方法使用说明
Dec 16 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
Sep 04 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue树形结构获取键值的方法示例
Jun 21 Javascript
D3.js实现拓扑图的示例代码
Jun 30 Javascript
vuex入门最详细整理
Mar 04 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
jQuery.clean使用方法及思路分析
Jan 07 #Javascript
js获取height和width的方法说明
Jan 06 #Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 #Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
Jan 06 #Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 #Javascript
javascript编码的几个方法详细介绍
Jan 06 #Javascript
javascript返回顶部效果(自写代码)
Jan 06 #Javascript
You might like
海贼王:最美的悬赏令!
2020/03/02 日漫
PHP+ajax 无刷新删除数据
2010/02/20 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
用jquery来定位
2007/02/20 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
jQuery层次选择器选择元素使用介绍
2013/04/18 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
2017/03/21 jQuery
基于JavaScript定位当前的地理位置
2017/04/11 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
[59:08]Ti4 冒泡赛第二天 NEWBEE vs Titan 2
2014/07/15 DOTA
Python实现的拟合二元一次函数功能示例【基于scipy模块】
2018/05/15 Python
Flask和Django框架中自定义模型类的表名、父类相关问题分析
2018/07/19 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
animation和transition的区别
2020/10/12 HTML / CSS
波兰最大的宠物用品网上商店:FERA.PL
2019/08/11 全球购物
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
建筑投标担保书
2014/05/20 职场文书
公司承诺书怎么写
2014/05/24 职场文书
领导干部对照检查材料
2014/08/24 职场文书
公司给客户的感谢信
2015/01/23 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
回复函范文
2015/07/14 职场文书
python如何在word中存储本地图片
2021/04/07 Python
基于JavaScript实现省市联动效果
2021/06/22 Javascript