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.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>