一. 储备知识
$是jQuery的核心函数,jQuery的核心功能都是通过这个函数实现的。
$的四个作用:
作用 | |
---|---|
$(function(){}) | 相当于window.onload = function() {} |
$(“html字符串”) | 根据这个html字符串创建元素节点对象 |
$(“选择器”) | 根据选择器查找元素节点对象 |
$(DOM对象) | 将DOM对象包装为jQuery对象 |
注意:
- 为了区分jQuery对象和dom对象,通常在jQuery对象的变量名前加$以示区别
- document三个方法获取的对象就是dom对象,通过$(dom对象)可以将dom对象包装成jQuery对象
二. 例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="lib/jquery-1.7.2.js"></script>
<script type="text/javascript">
//相当于window.onload = function(){}
$(function(){
//为了区分JQuery对象和Dom对象,推荐jQuery对象的变量名以$开头
//根据选择器查找指定id的元素节点对象
var $bjEle = $("#bj");
alert($bjEle.text());
var bjEle = document.getElementById("bj");
alert("dom对象:" + bjEle);
alert("jQuery对象:" + $(bjEle));
});
</script>
</head>
<body>
<ul>
<li id="bj">北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>