- 在每一个页面中几乎都有一个对应的js文件与之捆绑,而且所有的js文件都是在html页面加载之后才进行各种事件的动态绑定,这一操作在jQuery之中也有支持的.
- 原始的页面加载操作
window.onload = function(){
alert("www.maoshu.com");
};
- 在jQuery里面就有更加简化的处理
- 第一类:使用jQuery标准操作,
| 完整操作 | 简化操作 |
|---|---|
| $(document).ready(函数) | $(函数) |
- 完整操作
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<script type="text/javascript">
//document是整个DOM树对象
//将document对象转换为一个jQuery对象
$(document).ready(function (){
alert("www.maoshu.com");
});
</script>
</head>
<body>
</body>
</html>
- 简化操作
<html>
<head>
<meta charset="UTF-8">
<title>jquery项目</title>
<script type="text/javascript" src="js/jquery.min.js" charset="UTF-8"></script>
<script type="text/javascript">
//document是整个DOM树对象
//将document对象转换为一个jQuery对象
$(
function(){
alert("www.maoshu.com");
}
);
</script>
</head>
<body>
</body>
</html>
- 执行结果
- 第二类写法:使用"jQuery"替换"$"符号
| jQuery写法完整操作 | |
|---|---|
| jquery(document.ready(函数)) | jQuery(函数) |
- jQuery写法完整操作
<script type="text/javascript">
//document是整个DOM树对象
//将document对象转换为一个jQuery对象
jQuery(document).ready(function(){
alert("www.maoshu.com");
});
</script>
- jQuery写法简写操作
<script type="text/javascript">
//document是整个DOM树对象
//将document对象转换为一个jQuery对象
jQuery(
function(){
alert("www.maoshu.com");
}
);
</script>
总结
-
可以发现现在的jquery于JavaScript的横向替代就可以出现如下的对应关系:
- $(function(){})替代了window.function(){}
- $(id) 替代了document.getElementById(“id”);
-
对于函数一定要区分区别:
- val():取得value属性内容,包括文本框密码框,文本域,下拉列表框 ,单选按钮
- text():所有的html元素都要求进行转移处理,只保留文字
- html():会保留具体的HTML元素标签处理
-
这三个函数除了具备有去的元素内容的功能之外,还具备有设置内容的功能.