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 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
checkbox使用示例
Aug 23 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
学习使用bootstrap3栅格系统
Apr 12 Javascript
Node.js 8 中的重要新特性
Jun 28 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
八种Vue组件间通讯方式合集(推荐)
Aug 18 Javascript
关于小程序优化的一些建议(小结)
Dec 10 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
取键盘键位ASCII码的网页
2007/07/30 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
JavaScript定义变量和变量优先级问题探讨
2014/10/11 Javascript
最新最热最实用的15个jQuery插件汇总
2015/07/05 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
jQuery DateTimePicker 日期和时间插件示例
2017/01/22 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
小程序click-scroll组件设计
2019/06/18 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python 正则式使用心得
2009/05/07 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
将python代码和注释分离的方法
2018/04/21 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
python实现桌面气泡提示功能
2019/07/29 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
类如何去实现接口
2013/12/19 面试题
学生学习总结的自我评价
2013/10/22 职场文书
会计出纳员的自我评价
2014/01/15 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
银行转正自我鉴定
2014/09/29 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
大学教师个人总结
2015/02/10 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书
Mysql - 常用函数 每天积极向上
2021/04/05 MySQL
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
小程序实现侧滑删除功能
2022/06/25 Javascript