jquery入门—访问DOM对象方法

更新时间：2013年01月07日 11:01:30 作者：

本文着重介绍：JavaScript访问DOM对象方法/JQuery访问DOM对象方法,通过JQuery库中的方法访问或控制页面中的元素，比使用JavaScript代码要简洁得多，而且兼容各浏览器，感兴趣的朋友可以了解下

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实现仿百度帖吧头部固定导航效果
这篇文章主要介绍了jQuery实现仿百度帖吧头部固定导航效果,涉及jquery针对页面高度计算与样式的动态添加及删除技巧,非常简单实用,需要的朋友可以参考下
2015-08-08
jQuery焦点图切换特效代码分享
这篇文章主要介绍了jQuery焦点图切换特效，图片轮播效果特别适合做产品展示，丰富网页内容，感兴趣的小伙伴可以参考下。
2015-09-09
jQuery通过点击行来删除HTML表格行的实现示例
从一个HTML表使用一些时髦的效果，只要按一下该行，改行即可被删除，这个示例比较简单，新手朋友们可以学习下
2014-09-09
Jquery 基础学习笔记之文档处理
本节让我们继续Jquery知识的了解：文档处理。文档处理主要是对HTML元素进行一些增操作，删除操作，复制操作，替换操作。
2009-05-05
jquery性能优化高级技巧
jquery性能优化做好，速度也很快，那么如何提高jquery性能呢，本篇文章给大家介绍jquery性能优化高级技巧，需要的朋友可以参考下
2015-08-08
jQuery实现的简单日历组件定义与用法示例
这篇文章主要介绍了jQuery实现的简单日历组件定义与用法,结合实例形式详细分析了基于jQuery扩展实现日历功能的相关操作技巧,需要的朋友可以参考下
2018-12-12
利用JQuery制作符合Web标准的QQ弹出消息
本篇文章主要介绍了利用JQuery制作符合Web标准的QQ弹出消息。这里所说的弹出消息指的是在网页右下角升起又下去的那种框框,在这里用到了jQuery的自定义动画
2014-01-01
使用JQuery库提供的扩展功能实现自定义方法
如何没有任何一个库可以满足所有的需求，可以使用JQuery库提供的扩展功能，下面有个示例，大家可以看看
2014-09-09
jQuery实现简单的点赞效果
这篇文章主要介绍了jQuery实现简单的点赞效果的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-01-01
jquery插件制作表单验证实现代码
今天的内容是关于表单验证插件的制作。表单验证控件实现的主要功能是，当表单提交的时候检查必填项是否正确填写，同时根据需要验证输入信息是否符合规范
2012-08-08