jQuery与DOM对象之间的转化

原创 2015年07月07日 23:21:53



//第一个jQuery文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--使用jQUery首先导入js框架文件-->
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="gfy1111" id="username" name="username"/>
</body>
<script language="JavaScript">
//测试:输出input的value值
//使用document输出
//var inputObj = document.getElementById("username");
//alert(inputObj.value);
//使用JQuery输出
//jQuery的标记$
//写法一
/*$(document).ready(function(){//文档全部加在完毕后执行
alert($("#username").val());
});*/
//写法二
$().ready(function(){//文档全部加在完毕后执行
alert($("#username").val());
});
//第26行相当于
/*window.onload=function(){
}*/
</script>
</html>



//DOM对象转化为jQuery对象:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOM对象转成jQuery对象案例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username" name="username" />
</body>
<script language="JavaScript">
//dom转化为JQUery对象 $(DOM对象)
var inputObj = document.getElementById("username");
//alert(inputObj.value);
//alert(inputObj.val());完全错误
var $obj = $(inputObj);
alert($obj.val());
</script>
</html>


//jQuery对象转化为DOM对象:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery对象转成DOM对象案例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username" name="username" />
</body>
<script language="JavaScript">
//JQUERY对象转化为DOM对象
var $inputObj = $("#username");
//alert($inputObj.val());
//转换成DOM对象:方法一
//jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
//var domObj = $inputObj[0];
//alert(domObj.value);
//转换成DOM对象:方法二
var domObj = $inputObj.get(0);
alert(domObj.value);
</script>
</html>


//二者区别:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOM选择对象和jQUery选择的区别</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username1" name="username1" />
<input type="text" value="88888" id="psw" name="psw" />
</body>
<script language="JavaScript">
//dom选择对象
//var inputObj = document.getElementById("username");
//alert(inputObj.value);
//jQuery选择对象:如果对象不存在,提示很明确
var $inputObj = $("#username");
alert($inputObj.val());
</script>
</html>

//第一个jQuery文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>form.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--使用jQUery首先导入js框架文件-->
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="gfy1111" id="username" name="username"/>
</body>
<script language="JavaScript">
//测试:输出input的value值
//使用document输出
//var inputObj = document.getElementById("username");
//alert(inputObj.value);
//使用JQuery输出
//jQuery的标记$
//写法一
/*$(document).ready(function(){//文档全部加在完毕后执行
alert($("#username").val());
});*/
//写法二
$().ready(function(){//文档全部加在完毕后执行
alert($("#username").val());
});
//第26行相当于
/*window.onload=function(){
}*/
</script>
</html>



//DOM对象转化为jQuery对象:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOM对象转成jQuery对象案例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username" name="username" />
</body>
<script language="JavaScript">
//dom转化为JQUery对象 $(DOM对象)
var inputObj = document.getElementById("username");
//alert(inputObj.value);
//alert(inputObj.val());完全错误
var $obj = $(inputObj);
alert($obj.val());
</script>
</html>


//jQuery对象转化为DOM对象:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jQuery对象转成DOM对象案例</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username" name="username" />
</body>
<script language="JavaScript">
//JQUERY对象转化为DOM对象
var $inputObj = $("#username");
//alert($inputObj.val());
//转换成DOM对象:方法一
//jQuery对象是一个数组对象,可以通过[index]的方法,来得到相应的DOM对象
//var domObj = $inputObj[0];
//alert(domObj.value);
//转换成DOM对象:方法二
var domObj = $inputObj.get(0);
alert(domObj.value);
</script>
</html>


//二者区别:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DOM选择对象和jQUery选择的区别</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="text" value="zhang" id="username1" name="username1" />
<input type="text" value="88888" id="psw" name="psw" />
</body>
<script language="JavaScript">
//dom选择对象
//var inputObj = document.getElementById("username");
//alert(inputObj.value);
//jQuery选择对象:如果对象不存在,提示很明确
var $inputObj = $("#username");
alert($inputObj.val());
</script>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

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

先是DOM对象转换为jQuery对象: 首先需要引入jQuery函数库 //获取DOM对象 var username=document.getElementById("use...
  • u012110719
  • u012110719
  • 2015年09月16日 11:35
  • 3076

jQuery对象与DOM对象区别和关联

1,jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方...
  • Practicer2015
  • Practicer2015
  • 2015年04月11日 10:52
  • 1987

dom对象和jquery对象的区别

在开发前台页面的时候,如果要想把页面做的交互性高一些,需要写大量的js代码和css样式.        在js中,获取对象,可以通过 document.getElementById 或 docum...
  • zc474235918
  • zc474235918
  • 2015年12月20日 08:14
  • 1404

前端学习——选择结果为JQuery对象还是DOM对象?

0.前言     在学习和使用javascript过程中经常使用JQuery的选择器,但是在获取到选择结果之后经常“犯迷糊”,需要一个DOM对象时或者一个JQuery对象,这样的尴尬经常遇到。为了让自...
  • xukai871105
  • xukai871105
  • 2014年06月25日 22:06
  • 4894

jQuery 获取DOM节点的两种方式

jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1、使用数组索引方式访问,例如: var dom = $(dom)[0]; 2、使用函数get()访问,例...
  • hongweigg
  • hongweigg
  • 2015年02月27日 11:18
  • 8284

jQuery对象与DOM对象区别及互换

初学jQuery,感觉jQuery对象和DOM对象的区分,对于以后的学习还是很重要的,把自己的体会给大家分享一下,欢迎喷!DOM称为文档对象模型,是W3C制定的一套标准,是把构成html页面元素(如h...
  • Minhellic
  • Minhellic
  • 2016年07月17日 21:41
  • 519

JQuery 中this和$(this)获取对象、操作DOM对象的元素属性

$("#row a img").each(function(index){ alert($(this)); alert(this); } //可以看出来...
  • haoaiqian
  • haoaiqian
  • 2017年03月17日 10:22
  • 3298

jQuery判断Dom对象是否存在

我们时常要检测一个DOM对象是否为空。 var $jObject = $('#btn'); alert($jObject );   我们会发现,$jObject 永远不会为空。为什么呢?$ 方...
  • u013063153
  • u013063153
  • 2016年09月03日 17:10
  • 2073

Dom对象,js对象和jquery对象的区别

一、DOM对象文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示...
  • kuangdacaikuang
  • kuangdacaikuang
  • 2017年05月16日 09:37
  • 701

通过jquery获取input的value问题--理解JQuery对象和JS:DOM对象区别与联系

刚开始接触jquery,很多东西不熟悉在用$("#id")来获得页面的input元素的时候,发现$("#id").value不能取到值 $("")是一个jquery对象,而不是一个dom e...
  • h330531987
  • h330531987
  • 2017年05月16日 01:31
  • 500
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery与DOM对象之间的转化
举报原因:
原因补充:

(最多只允许输入30个字)