jquery第一课

最新推荐文章于 2024-07-26 20:46:33 发布

php398893944

最新推荐文章于 2024-07-26 20:46:33 发布

文章标签： jquery function javascript ajax 浏览器 html

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery第一课

jquery优势:jquery强调的理念是写得少，做得多。jquery独特的选择器、链式的DOM操作、事件处理机制和封装完善的Ajax都是其他JavaScript库望尘莫及的。概括起来，jquery有以下优势1）轻量级2）强大的选择器3）出色地DOM操作的封装4）可靠的事件处理机制5）
复制链接

扫一扫

jquery第一课

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.οnlοad=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];

1）轻量级

2）强大的选择器

3）出色地DOM操作的封装

4）可靠的事件处理机制

5）完善的Ajax

6）不污染顶级变量

7）出色的浏览器兼容性

8）链式操作方式

9）隐式迭代

10）行为层与结构的分离

11）丰富的插件支持

12）完善的文档

13）开源