jQuery入门(1)

59 阅读 0 评论 39 点赞

我是靠谱客的博主曾经大侠，最近开发中收集的这篇文章主要介绍jQuery入门(1)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js跟jQuery在获取元素，方法书写上的区别

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			function write1(){
				document.getElementById("sp").innerHTML="萌萌哒！";
			}
			$(function() {
				$("#bt2").click(function(){
					/*document.getElementById("sp").innerHTML = "aaa";*/
					$("#sp").html("hhh");
				});	
			});
		</script>
	</head>

	<body>
		<input type="button" name="" id="bt1" value="js写入" οnclick="write1()" /><br>
		<input type="button" name="" id="bt2" value="jquery写入" /><br /> 
		宝贝儿：<span id="sp">我爱你！</span>
	</body>

</html>

上面这个例子很形象的说明了jQuery在获取元素跟方法上的区别

jQuery书写方法首先要用页面加载函数$(function(){ ......... });包裹起来

获取元素通过$("#id")

当然在这里面也可以通过js的方式书写代码。

$(function() {
    /*$("#bt2").click(function(){
    //document.getElementById("sp").innerHTML = "aaa";
    $("#sp").html("hhh");
    });*/
    document.getElementById("bt2").οnclick=function(){
    document.getElementById("sp").innerHTML="bbb";
    }
});

但是要记住一点，一旦通过jQuery的方式获取了元素，那么就相当于获得了jQuery的对象，而jQuery对象是无法操作js里面的属性跟方法的。$("#id").innerHTML这个操作是不行的。同样反过来也不能。