jQuery学习(一)

一、什么是jQuery?

jQuery是一款比较优秀的js框架。是将js中比较常用的方法封装底层。口号是"write less,do more"。

二、如何使用jQuery呢?(使用jQuery的整体思路)

1、页面加载完之后

2、找到对象

3、执行你要的事件

4、声明一个事件(function())

5、完成事件里面的内容

三、第一个jQuery程序

注意小点:1、引入jQuery文件的时候,把jQuery的文件放js文件之前(页面由上而下执行)。

              2、$的作用 一个是页面加载 还有一个是找jQuery对象

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <title>第一个jQuery小程序</title>
 6     <script src="js/jquery-1.10.2.min.js"></script>
 7     <script src="js/demo.js"></script>
 8 </head>
 9 <body>
10    <input type="button" value="第一个jQuery小程序" id="btn"/>
11 </body>
12 </html>

jQuery代码

1 /// <reference path="_references.js" />
2 $(function () { //页面加载
3     $("#btn").click( //找到jq对象 执行事件
4         function () { //声明事件
5             alert("第一个jQuery");//执行事件里面的内容
6           }
7         );
8 });

js方法实现点击时间(dom对象)

 1 /// <reference path="_references.js" />
 2 $(function () { //页面加载
 3     //$("#btn").click( 
 4     //    function () { 
 5     //        alert("第一个jQuery");
 6     //      }
 7     //    );
 8     document.getElementById("btn").onclick = function () {
 9         alert("使用dom对象实现点击效果");
10     }
11 });

小结:jQuery对象只能用jQuery方法。dom对象只能用js方法。两者不可混淆。

jQuery对象和dom对象互转

1 /// <reference path="_references.js" />
2 $(function () { //页面加载
3    // jq对象转dom对象
4     $("#btn")[0].onclick = function () {
5         alert("jq对象转dom对象需要加【0】");
6     }
7 });
1 /// <reference path="_references.js" />
2 $(function () { //页面加载
3    // dom对象转jQuery对象
4     $(document.getElementById("btn")).click(
5         function () {
6             alert("dom对象转jQuery对象");
7         }
8         );
9 });