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 相关文章推荐
utf8的编码算法 转载
Dec 27 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
Feb 16 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery的ajax和遍历数组json实例代码
Aug 01 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
vue-router为激活的路由设置样式操作
Jul 18 Javascript
简单了解前端渐进式框架VUE
Jul 20 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
国内咖啡文化
2021/03/03 咖啡文化
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
2010/12/08 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
2011/03/10 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
详解js中class的多种函数封装方法
2016/01/03 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
vue自定义全局共用函数详解
2018/09/18 Javascript
javascript网页随机点名实现过程解析
2019/10/15 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
2020/10/22 Javascript
用vite搭建vue3应用的实现方法
2021/02/22 Vue.js
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
python中的tcp示例详解
2018/12/09 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
浅谈django框架集成swagger以及自定义参数问题
2020/07/07 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
Eclipse面试题
2014/03/22 面试题
小学生学习感言
2014/03/10 职场文书
超市促销活动总结
2014/07/01 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
好媳妇事迹材料
2014/12/24 职场文书
罚站检讨书
2015/01/29 职场文书
售房协议书范本
2015/08/11 职场文书
2019年七夕情人节浪漫祝福语大全!
2019/08/08 职场文书