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 相关文章推荐
浅谈JavaScript数据类型及转换
Feb 28 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
JS实现在文本指定位置插入内容的简单示例
Dec 22 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
vue中监听路由参数的变化及方法
Dec 06 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
Terran热键控制
2020/03/14 星际争霸
常见的四种POST 提交数据方式(小总结)
2015/10/08 PHP
PHP使用Redis替代文件存储Session的方法
2017/02/15 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
摘自百度的图片轮换效果代码
2007/11/19 Javascript
javascript高亮效果的二种实现方法
2008/09/14 Javascript
通过DOM脚本去设置样式信息
2010/09/19 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jquery $.each()使用探讨
2013/09/23 Javascript
js键盘事件的keyCode
2014/07/29 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
深入理解node.js之path模块
2017/05/03 Javascript
angular过滤器实现排序功能
2017/06/27 Javascript
JavaScript常用数学函数用法示例
2018/05/14 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
three.js实现炫酷的全景3D重力感应
2018/12/30 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
Python开发实例分享bt种子爬虫程序和种子解析
2014/05/21 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
CentOS 7下安装Python 3.5并与Python2.7兼容并存详解
2017/07/07 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
Python坐标轴操作及设置代码实例
2020/06/04 Python
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
大学毕业生简单自荐信
2013/11/05 职场文书
机械设计毕业生自荐信
2014/02/02 职场文书
三方协议书范本
2014/04/22 职场文书
政工例会汇报材料
2014/08/26 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书