当前位置:首页 > 编程教程 > jQuery技术文章 > jquery入门—访问DOM对象方法

使用jquery访问DOM对象方法

  • 发布时间:
  • 作者:码农之家
  • 点击:146

这篇文章主要知识点是关于jquery、DOM对象、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

jQuery实战案例精粹
  • 类型:jQuery大小:272 MB格式:PDF作者:吴绍兴//李勇//明廷
立即下载

Tags:jQuery DOM对象 

jquery入门—访问DOM对象方法

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对象方法

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

jQuery 相关电子书
学习笔记
网友NO.905387

jquery对象和DOM对象的任意相互转换

什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。 比如: $("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是 jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById("id").innerHTML; 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如: $("#test").innerHTML、document.getElementById("id").html() 之类的写法都是错误的。 还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价。请参看如下说的两者间的转换。 既然jQuery有区别但也有联系,那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定:如果一个获取的是jQue……

网友NO.481605

jquerydom对象的事件隐藏显示和对象数组示例

1.事件处理 1.1.事件绑订 bind(type,fn); 例子: $(function(){ //正式的写法 $('#d1').bind('click',function(){ $(this).css('font-size','80px'); }); //简写形式 $('#d1').click(function(){ $(this).css('font-size','80px'); }); }); 1.2.绑订方式的简写形式 click(function(){ }); 1.3.合成事件 hover(enter,leave) : 模拟光标悬停事件 toggle(fn1,fn2...) : 模拟鼠标连续单击事件 例子1: $(function(){ //分开的事件 $('.s1').mouseenter(function(){ $(this).addClass('s2'); }); $('.s1').mouseleave(function(){ $(this).removeClass('s2'); }); //合成事件 $('.s1').hover(function(){ $(this).addClass('s2'); },function(){ $(this).removeClass('s2'); }); }); 例子2: $(function(){ $('#a1').toggle(function(){ $('#d1').show('slow'); },function(){ $('#d1').hide('slow'); }); }); 1.4.事件冒泡//子节点产生的事件会依次向上抛给父节点 1.4.1.获得事件对象//只需要给事件处理函数添加一个任意变量即可,比如e //e不是真正的事件对……

网友NO.715644

jQuery对象与DOM对象之间的相互转换

1、jQuery对象转换成DOM对象 jQuery对象不能使用DOM中的方法,但如果对jQuery对象所提供的方法不熟悉,或者jQuery没有封装想要的方法,不得不使用DOM对象的时候,有以下两种处理方法: 1、jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象: 复制代码 代码如下: var $cr=$("#cr") //jQuery对象 var cr=$cr[0] //DOM对象 2、另一种是jQuery本身提供的,通过get(index)方法得到相应的DOM对象 复制代码 代码如下: var $cr=$("#cr") //jQuery对象 var cr=$cr.get(0) //DOM对象 2、DOM对象转换成jQuery对象 对于一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象。 复制代码 代码如下: var cr=document.getElementById("cr") //DOM对象 var $cr=$(cr) //jQuery对象 以上所述就是本文的全部内容了,希望大家能够喜欢。 ……

网友NO.503129

jquery对象和DOM对象的区别介绍

第一步,http://www.k99k.com/jQuery_getting_started.html 第二步,新手先仔细得全部看一遍jQuery的选择器,很重要!!! (http://shawphy.com/jqueryapi/ 这里是最新文档,有离线版下载) 第三步,深刻了解jQuery对象和普通DOM对象的区别。互相转化见Q1 Q1,js的写法:document.getElementById('save').disabled=true; 在jquery中我是这样写的$("#save").disabled = true; 为什么没效果呢 A,这个是典型的问题,其实因为$("#save")出来的其实是jQuery对象,而不是普通DOM对象 这是新手常见的问题。 解决方法有2: 1,用JQ写法,$("#save").attr("disabled","true"); 2,转成DOM写法$("#save")[0].disabled=true; 当然,$("#save")[0]也可以写成$("#save").get(0)。他返回的也是DOM元素 $("#save").eq(0)得到的还是jq对象 $(dom对象)就能得到一个jq对象。 Q2,获取选中的checkbox A: 获取所有选中的checkbox: $("input:checkbox:checked") 判断是否一组checkbox都选中……

<
1
>

电子书 编程教程 PC软件下载 安卓软件下载

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757