Jquery入门笔记

来源：互联网发布：网络直播课堂编辑：程序博客网时间：2024/05/21 11:05

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$("button").click(function() {
alert("HelloWorld!")
})
})
/*
上面是jQuery的HelloWorld说明：
第一行的$(){} 相当于是window.onload() {};
$("button")就是选择了所有的button标签
*/
$(function() {
$("#btn").click(function() {
alert(":" + $("#btn").text());
})
})
/*说明：
选择id为btn的元素 $("#btn") 相当于document.getElementById("btn");
text() 元素的文本值，这里就是id为btn的button的显示值：click
* */
$(function() {
var v1 = document.getElementById("btn");
var $v2 = $("button");
$(v1).click(function() {
alert("document--->jQuery");
})
alert($v2.length);
var v3 = $v2[1];
var v4 = $v2.get(1)
alert(v3.firstChild.nodeValue + "jQuery--->document--v3")
alert(v4.firstChild.nodeValue + "jQuery--->document--v4")
})
/*
* 说明：
v1 : dom对象
$v2 : jQuery对象，约定俗称的规矩，jQuery对象前面一定是有 $ 符号的
jQuery对象本质就是通过 $() 包装 dom对象形成的，这两个对象之间的方法不能相互使用，要使用对方的方法就要转换
dom对象转换成jQuery对象：
var v1 = document.getElementById("btn");
$(v1);
上面的有更直接的: $("#btn")
jQuery对象转换成dom对象：
首先要知道jQuery对象是一个数组对象
上面代码：$v2.length 在本处打印的是2，有两个button
转换：
通过数组下标方式： $v2[i]; {i=0,1,2,3,...}
通过jQuery对象的get(i); {i=0,1,2,3,...} 方法来实现
* */
</script>
</head>
<body>
<button id="btn">click</button>
<button>点击</button>
</body>
</html>

0 0