JQuery的介绍【一】

最新推荐文章于 2019-03-30 11:28:16 发布

Joss_dzy

最新推荐文章于 2019-03-30 11:28:16 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/Joss_dzy/article/details/80564292

版权

一．jQuery概述
1. 使用JS框架的好处：
jQuery是JS的一个框架，简化js的开发。类似于DbUtils与JDBC的关系
1). 程序员的开发效率会大大提升
2). 消除浏览器之间的差异，不同厂商的浏览器之间对JS的支持是不同。

2. 常见的JS框架：
jQuery框架只是众多JS框架中优秀的一个，JS框架多如牛毛。
如：dojo、prototype、easyui、extjs、dwr

3. jQuery框架特点：
1) 轻量级的框架
2) 兼容性好，兼容各大主流的浏览器。如：ie、chrome、firefox、opera、safari
3) 插件功能丰富，还有第三方厂商在jquery基础上再次开发新的功能。
4) 宗旨：write less do more

4. 轻量级框架的特点：
1). 学习和使用简单
2). 体积小
3). 占资源少，占用浏览器资源

5. 效果演示：
轮播、选项卡、菜单

二．jQuery的下载与导入
1. 官网:
www.jquery.com

2. 版本的介绍：
1) 对后台程序员来说，各个版本差别不大
2) 2.x开始不再支持IE 6/7/8
3) min功能与正常的版本是一样的，没有换行，没有注释，大部分变量名都只有一个字母

3. 导入并测试是否成功：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function() {
alert("Hello jQuery!");
});
</script>

三. jQuery对象与js对象之间的转换
1. 为什么要转换？
之前在JS中开发的时候，我们使用的都是JS对象。JS对象只能使用JS中的方法和属性。
而JQ中也有一套自己的方法，这些方法必须是JQ对象才可以调用。
所有我们需要将JS对象转成JQ对象，来调用JQ中的方法。

2. 转换语法：
1) js->jQuery： $(js对象)
2) jQuery->js： jq对象.get(0) 或 jq对象[0]
注：jq对象本质上是一个数组对象

3. 示例：页面上有一个文本框，文本框中有值：我是文本框内容
<input id="in" type="text" value="我是文本框内容" />
1) 分别通过js对象和jQuery对象得到值，并且alert显示出来
2) 混和使用是错误的，得不到效果
3) 对象转换以后使用各自的方法得到值

4. 代码：
<script type="text/javascript">
$(function() {

//通过js对象
document.getElementById("b2").onclick = function() {
// alert(document.getElementById("in").value);
//js->jq对象
alert($(document.getElementById("in")).val());
};

//通过jq对象
$("#b1").click(function(){
//alert($("#in").val());
//jq -> js对象
alert($("#in")[0].value);
});
});
</script>
</head>
<body>
<input id="in" type="text" value="我是文本框内容" />
<input type="button" id="b1" value="jq得到文本值" />
<input type="button" id="b2" value="js得到文本值" />
</body>

四、JS对象与jQuery对象的区别：
1. 事件的写法
1) 语法格式：
1.1) JS的按钮绑定事件
document.getElementById("b2").onclick = function() {
//代码
};

onclick是一个属性

1.2) JQ按钮绑定事件：
$("#b1").click(function() {
//代码
});

click是一个方法，方法的参数是要执行的代码
2. 加载完毕的区别
1) 加载方式
● JS写法
window.onload = function() {
}

● JQ写法：
$(function() {
});
或
$(document).ready(function(){
});

2) 效率
JQ效率更高，JQ只要当前网页中的内容全部加载完毕就可以执行。而JS要等到网页中的所有的内容和外部链接的其它资源
文件都加载完毕以后才运行。

3).加载次数：
JS只会运行最后一次方法，而JQ所有的加载函数都会执行。
<script type="text/javascript">
//jquery的加载方式,jQuery中每个函数都会执行
$(function() {
alert("Hello jQuery 1");
});

$(function() {
alert("Hello jQuery 2");
});

/* 只有后面一个函数运行了 */
/*
window.onload = function() {
alert("Hello JS 1");
};

window.onload = function() {
alert("Hello JS 2");
};
*/