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 相关文章推荐
javascipt匹配单行和多行注释的正则表达式
Nov 20 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
jQuery的选择器中的通配符使用介绍
Mar 20 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
简单实现js无缝滚动效果
Feb 05 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 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.MVC的模板标签系统(二)
2006/09/05 PHP
新浪新闻小偷
2006/10/09 PHP
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php一些公用函数的集合
2008/03/27 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/02/09 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
2014/03/08 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
php基于redis处理session的方法
2016/03/14 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
2017/08/16 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
python使用mysqldb连接数据库操作方法示例详解
2013/12/03 Python
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
pandas通过loc生成新的列方法
2018/11/28 Python
python3实现高效的端口扫描
2019/08/31 Python
python匿名函数的使用方法解析
2019/10/10 Python
python socket 聊天室实例代码详解
2019/11/14 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
在线购买廉价折扣书籍和小说:BookOutlet.com
2018/02/19 全球购物
存储过程的优缺点是什么
2015/01/10 面试题
公司市场部岗位职责
2013/12/02 职场文书
《唯一的听众》教学反思
2014/02/20 职场文书
大学生简短的自我评价分享
2014/02/20 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
2015年个人实习工作总结
2014/12/12 职场文书
如何理解Vue简单状态管理之store模式
2021/05/15 Vue.js