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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
网页javascript精华代码集
Jan 24 Javascript
一个用js实现的页内搜索代码
May 23 Javascript
通过修改referer下载文件的方法
May 11 Javascript
js实现点击后将文字或图片复制到剪贴板的方法
Aug 04 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
深入理解JQuery中的事件与动画
May 18 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
selenium+java中用js来完成日期的修改
Oct 31 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 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获取表单所有复选框的值的方法
2014/08/28 PHP
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
2015/05/25 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
2018/09/07 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JavaScript之Blob对象类型的具体使用方法
2019/11/29 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
python opencv实现旋转矩形框裁减功能
2018/07/25 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
Python中调用其他程序的方式详解
2019/08/06 Python
Python实现Restful API的例子
2019/08/31 Python
Python的Lambda函数用法详解
2019/09/03 Python
Python填充任意颜色,不同算法时间差异分析说明
2020/05/16 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
党的群众路线教育实践方案
2014/05/11 职场文书
八年级数学教学反思
2016/02/17 职场文书
创业计划书之酒吧
2019/12/02 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技