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 相关文章推荐
让您的菜单不离网站
Oct 03 Javascript
json 入门基础教程 推荐
Oct 31 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
jquery 模板的应用示例
Nov 12 Javascript
AngularJS初始化静态模板详解
Jan 14 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
js canvas实现QQ拨打电话特效
May 10 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
vue路由缓存的几种实现方式小结
Feb 02 Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 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设计模式 Facade(外观模式)
2011/06/26 PHP
event.srcElement+表格应用
2006/08/29 Javascript
Javascript面向对象编程(二) 构造函数的继承
2011/08/28 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
2012/01/13 Javascript
js 固定悬浮效果实现思路代码
2013/08/02 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
2018/05/23 Javascript
vue-cli3.0配置及使用注意事项详解
2018/09/05 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Django之路由层的实现
2019/09/09 Python
python如何更新包
2020/06/11 Python
Python3爬虫中pyspider的安装步骤
2020/07/29 Python
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
高中毕业生个人自我鉴定
2013/11/24 职场文书
毕业生自我鉴定
2013/12/04 职场文书
董事长助理岗位职责
2014/02/18 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
索赔员岗位职责
2015/02/15 职场文书
绿色环保倡议书
2015/04/28 职场文书
班主任培训研修日志
2015/11/13 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python