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 相关文章推荐
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
Nov 12 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
jquery获取当前日期的方法
Jan 14 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
Jun 05 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
Feb 23 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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的可变变量名的使用方法分享
2012/02/05 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
PHP生成图片缩略图类示例
2017/01/12 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
基于jquery的监控数据是否发生改变
2011/04/11 Javascript
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
javascript中键盘事件用法实例分析
2015/01/30 Javascript
JavaScript面向对象的实现方法小结
2015/04/14 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
移动端触摸滑动插件swiper使用方法详解
2017/08/11 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
使用nvm和nrm优化node.js工作流的方法
2019/01/17 Javascript
深入学习Vue nextTick的用法及原理
2019/10/08 Javascript
JavaScript cookie原理及使用实例
2020/05/08 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python教程之全局变量用法
2016/06/27 Python
python实现按任意键继续执行程序
2016/12/30 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python使用递归的方式建立二叉树
2019/07/03 Python
django基础学习之send_mail功能
2019/08/07 Python
Python定时器线程池原理详解
2020/02/26 Python
python help函数实例用法
2020/12/06 Python
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
一组SQL面试题
2016/02/15 面试题
教师自我反思材料
2014/02/14 职场文书
蓝颜请假条
2014/04/11 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
优秀志愿者感言
2015/08/01 职场文书
文书工作总结(范文)
2019/07/11 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python