是 j Q u e r y 的 核 心 函 数 , 能 完 成 j Q u e r y 的 很 多 功 能 , 是jQuery的核心函数,能完成jQuery的很多功能, 是jQuery的核心函数,能完成jQuery的很多功能,()就是调用$这个函数
1.传入参数为【函数】时:
表示页面加载完成后,相当于window.onload = function(){};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jQuery-->
<script type="text/javascript" src="../jQuery.js"></script>
<script type="text/javascript">
//表示页面加载完成后,相当于window.onload = function(){};
$(function (){
alert("页面加载完成之后,自动调用.");
});
</script>
</head>
<body>
</body>
</html>
自动调用
2.传入参数为【HTML字符串】时:
会对我们创建这个HTML标签对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jQuery-->
<script type="text/javascript" src="../jQuery.js"></script>
<script type="text/javascript">
//表示页面加载完成后,相当于window.onload = function(){};
$(function (){
$(
"<div>\n" +
" <span>div-span1</span>\n" +
" <span>div-span2</span>\n" +
"</div>").appendTo("body");
});
</script>
</head>
<body>
<div>
<span>div-span1</span>
<span>div-span2</span>
</div>
</body>
</html>
3.传入参数为【选择器字符串】时:
$(“#id属性值”); id选择器,根据id查询标签对象
$(“标签名“); 标签名选择器,根据指定的标签名查询标签对象
(
”
.
c
l
a
s
s
属
性
值
”
)
;
类
型
选
择
器
,
根
据
指
定
类
型
查
询
标
签
对
象
下
面
展
示
的
是
‘
(”.class属性值”); 类型选择器,根据指定类型查询标签对象 下面展示的是 `
(”.class属性值”);类型选择器,根据指定类型查询标签对象下面展示的是‘(“标签名”)`。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jQuery-->
<script type="text/javascript" src="../jQuery.js"></script>
<script type="text/javascript">
//表示页面加载完成后,相当于window.onload = function(){};
$(function (){
$(
"<div>\n" +
" <span>div-span1</span>\n" +
" <span>div-span2</span>\n" +
"</div>").appendTo("body");
alert($("button").length);
});
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
</body>
</html>
表示有两个button按钮
4.传入参数为【dom对象】时:
会把dom对象转化为jQuery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入jQuery-->
<script type="text/javascript" src="../jQuery.js"></script>
<script type="text/javascript">
//表示页面加载完成后,相当于window.onload = function(){};
$(function (){
$(
"<div>\n" +
" <span>div-span1</span>\n" +
" <span>div-span2</span>\n" +
"</div>").appendTo("body");
alert($("button").length);
var btnObj = document.getElementById("btn02");
//alert(btnObj);
alert($(btnObj));
});
</script>
</head>
<body>
<button id="btn02">总按钮</button>
<button>按钮1</button>
<button>按钮2</button>
</body>
</html>
第一个界面
第二个界面