jquery第一课
来源：互联网 发布：java 状态机设计模式 编辑：程序博客网 时间：2024/06/07 05:21
jquery优势:
jquery强调的理念是写得少，做得多。jquery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来，jquery有以下优势
1） 轻量级
2） 强大的选择器
3） 出色地DOM操作的封装
4） 可靠的事件处理机制
5） 完善的Ajax
6） 不污染顶级变量
7） 出色的浏览器兼容性
8） 链式操作方式
9） 隐式迭代
10） 行为层与结构的分离
11） 丰富的插件支持
12） 完善的文档
13） 开源
jquery代码都在$(document).ready(function(){
在这里写；
});
例如：
$(document).ready({
alert(“Hello,您好！”);
});
关于网页事件几种加载方法：
1)js里面通过window.load、window.onload来加载事件
window.load和window.onload的区别在于加载事件的个数,window.load加载单个事件，但是window.onload可以加载多个事件。
2)还可以在Html中加载事件
<body>中加入onload属性，注意这里的onload可以加载多个事件，多个事件用"；"分隔。
为什么要在网页中加载事件？
希望网页在加载内容的同时，执行事件。
通过使用window.onload 保证在加载的事件中能够正常的获取到<body>中的内容
加载window.onload事件：
<script type=”javascript”>
function f1(){alert(“这是f1”);}
function f2(){alert(“这是f2”);}
function f3(){alert(document.getElementById(“d1”).innerHtml);}
window.onload=function (){
f1();
f2();
f3();
}
</script>
<body>
<div id=”d1”>这里是f3</div>
</body>
jquery的click事件：
<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$(“a”).click(function (){
alert(“O(∩_∩)O哈哈~”);
return false;
})
});
</script>
<body>
<a href=”#”>点我试试1</a>
<a href=”#”>点我试试2</a>
</body>
关于普通的js dom元素和jquery对象的转换
总结：
dom对象转换为 jquery对象，是通过"$(普通的dom对象)"来实现
jquery对象转换为dom对象思路：
1）jquery对象.get(0)
2) jquery对象[0]
<script type="text/javascript" src="../include/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function (){
①dom方式
var uname=document.getElementById("username");
alert(uname.value);
②jquery方式
alert($("#username").val());
③dom转换为jquery
var uname=document.getElementById("username");
alert($(uname).val());
④jquery转换为dom
1) var username=$(“#username”).get(0);
alert(username.value);
2) var username=$(“#username”)[0];
alert(username.value);
});
<body>
<input type="text" value="凤姐" id="username">
</body>
