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 相关文章推荐
ext 代码生成器
Aug 07 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
Apr 02 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
Javascript进制转换实例分析
May 14 Javascript
Js的Array数组对象详解
Feb 22 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
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
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
ThinkPHP写第一个模块应用
2012/02/20 PHP
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript控制frame,iframe的src属性代码
2009/12/31 Javascript
深入分析js中的constructor和prototype
2012/04/07 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
node.js中使用socket.io制作命名空间
2014/12/15 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
python执行get提交的方法
2015/04/29 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python发送邮件功能示例【使用QQ邮箱】
2018/12/04 Python
Python操作远程服务器 paramiko模块详细介绍
2019/08/07 Python
Python基于Tensor FLow的图像处理操作详解
2020/01/15 Python
python 线程的五个状态
2020/09/22 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
机械专业应届生求职信
2013/09/21 职场文书
自我推荐信范文
2014/05/09 职场文书
股票投资建议书
2014/05/19 职场文书
质量月活动总结
2014/08/26 职场文书
设备技术员岗位职责
2015/04/11 职场文书
道士塔读书笔记
2015/06/30 职场文书
经典爱情感言
2015/08/03 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
javascript函数式编程基础
2021/09/15 Javascript
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python