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 相关文章推荐
如何将php数组或者对象传递给javascript
Mar 20 Javascript
jquery实现pager控件示例
Apr 09 Javascript
JavaScript实现的购物车效果可以运用在好多地方
May 09 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
javascript实现抽奖程序的简单实例
Jun 07 Javascript
JS常见算法详解
Feb 28 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
详解React项目中碰到的IE问题
Mar 14 Javascript
javascrpt密码强度校验函数详解
Mar 18 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
JavaScript中this关键字使用方法详解
2007/03/08 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
解决Extjs 4 Panel作为Window组件的子组件时出现双重边框问题
2013/01/11 Javascript
jquery easyui combobox模糊过滤(示例代码)
2013/11/30 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
javascript里绝对用的上的字符分割函数总结
2014/07/31 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
Bootstrap网格系统详解
2016/04/26 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
Node.js Event Loop各阶段讲解
2019/03/08 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
Python实现自动整理文件的脚本
2020/12/17 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
产品销售员岗位职责
2013/12/18 职场文书
硕士生找工作求职信
2014/07/05 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
老公婚前保证书
2015/02/28 职场文书
投资公司董事长岗位职责
2015/04/16 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
学生会部长竞选稿
2015/11/19 职场文书
教师师德承诺书2016
2016/03/25 职场文书
详解JS ES6编码规范
2021/05/07 Javascript
Django如何创作一个简单的最小程序
2021/05/12 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android