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对象之间的转换方法

什么是jQuery对象?  ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。  比如:  $("#test").htm...

jQuery对象与DOM对象之间的转换(转自:http://wozailongyou.iteye.com/blog/299311)

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。 什么是jQuery对...

jQuery对象与DOM对象之间的转换方法

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。 什么是jQuery对...

jQuery对象与DOM对象之间的转换方法

什么是jQuery对象?  ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。  比如:  $("#test").htm...

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

Jquery 对象域Dom对象的转换 什么是jQuery对象? ---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。 ...

jQuery对象与DOM对象之间的转换方法

jquery dom

jQuery对象与DOM对象之间的转换方法

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。 什么是jQuery对...

jQuery对象与DOM对象之间的转换方法

什么是jQuery对象? —就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。 比如: (“#test”).html() 意...

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

刚开始学习jQuery,可能一时会分不清楚哪些是jQuery对象,哪些是DOM对象。至于DOM对象不多解释,我们接触的太多了,下面重点介绍一下jQuery,以及两者相互间的转换。 ...

jquery对象跟dom对象之间有什么不同

jQuery对象和DOM对象使用说明,需要的朋友可以参考下。 1.jQuery对象和DOM对象 第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQue...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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