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 EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Dec 13 Javascript
Bootstrap源码解读导航条(7)
Dec 23 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
JS+HTML+CSS实现轮播效果
Nov 28 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
Angular6笔记之封装http的示例代码
Jul 27 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
vue将后台数据时间戳转换成日期格式
Jul 31 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
angular bootstrap timepicker TypeError提示怎么办
2017/06/13 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
2018/09/18 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
vue.js高德地图实现热点图代码实例
2019/04/18 Javascript
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
举例详解Python中yield生成器的用法
2015/08/05 Python
Python微信库:itchat的用法详解
2017/08/14 Python
python取代netcat过程分析
2018/02/10 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python基于mysql实现学生管理系统
2019/02/21 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
运动会入场词50字
2014/02/20 职场文书
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
我爱我的祖国演讲稿
2014/05/04 职场文书
我的祖国演讲稿
2014/05/04 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android