您的位置：首页 > Web前端 > JQuery

jQuery学习（一）

2015-10-09 22:55 639 查看

一、什么是jQuery？

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

二、如何使用jQuery呢？（使用jQuery的整体思路）

1、页面加载完之后

2、找到对象

3、执行你要的事件

4、声明一个事件（function（））

5、完成事件里面的内容

三、第一个jQuery程序

注意小点：1、引入jQuery文件的时候，把jQuery的文件放js文件之前（页面由上而下执行）。

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

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

jQuery代码

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

js方法实现点击时间（dom对象）

/// <reference path="_references.js" />
$(function () { //页面加载
//$("#btn").click(
//    function () {
//        alert("第一个jQuery");
//      }
//    );
document.getElementById("btn").onclick = function () {
alert("使用dom对象实现点击效果");
}
});

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

jQuery对象和dom对象互转

/// <reference path="_references.js" />
$(function () { //页面加载
// jq对象转dom对象
$("#btn")[0].onclick = function () {
alert("jq对象转dom对象需要加【0】");
}
});

/// <reference path="_references.js" />
$(function () { //页面加载
// dom对象转jQuery对象
$(document.getElementById("btn")).click(
function () {
alert("dom对象转jQuery对象");
}
);
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航