01 - jQuery介绍和体验
程序员文章站
2022-08-03 21:22:27
jQuery介绍 在说jQuery之前，先说一个概念吧，什么是JavaScript框架库，其实就是一个普通的js文件，里面封装了很多函数或者说封装了很多兼容的代码；当然啦，jQuery就是众多库的一员，那么我们为什么要学习jQuery呢，那就讲一下他的特点； 1. 很好的解决了不同浏览器之间的兼容性 ......
jquery介绍
在说jquery之前，先说一个概念吧，什么是javascript框架库，其实就是一个普通的js文件，里面封装了很多函数或者说封装了很多兼容的代码；当然啦，jquery就是众多库的一员，那么我们为什么要学习jquery呢，那就讲一下他的特点；
- 很好的解决了不同浏览器之间的兼容性问题(ie6+，ff 2+， safari 3.0+， opera 9.0+ ，chrome) 只是针对js的兼容性；
- 体积小 几十kb 使用简单方便 链式编程 隐式迭代 插件丰富 开源 免费；
jquery 学习网站
jquery官网：
jquery在线api：
jqueryui:
只是说还是不行下面咱们还是通过一些实例体验一下吧
jquery快速体验
下面就用dom和jquery 的方式来实现一个小案例，体验一下吧；
要求：点击按钮使按钮下方div显示出来并增加背景图；
<-- 这是页面结构 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<div id="dv"></div>
</body>
</html>
<script>
// dom方式
// 如果在页面顶部加script标签的话，需要用window.onload
window.onload = function () {
document.getelementbyid('btn').onclick = function () {
var div = document.getelementbyid('dv');
div.style.width = '200px';
div.style.height = '200px';
div.style.backgroundcolor = 'yellow';
}
}
</script>
// jquery 方式
<script src="../jquery-1.12.2.js"></script>
<script>
// 如果使用jquery就要先引入文件
$(function () {
$('btn').click(function () {
$('dv').css({'width': '200px', 'height': '200px', 'backgroundcolor': 'red'});
});
});
</script>
以上实例可以看出jquery还是比dom要简洁一些的；要系统的学习，还是要从开始慢慢来，下面怎们来说说jquery中的*对象！
jquery*对象
在讲*对象之前，刚好回忆一下dom和bom中的*对象；
- dom中的*对象 document ----- 页面中的*对象
- bom中的*对象 window ----- 浏览器中的*对象
- jquery中的*对象 jquery 或者 $
jquery中的页面加载事件
// 在dom中页面加载事件 onload 只能有一次，比如
window.onload = function () {
console.log('hello');
}
window.onload = function () {
console.log('world');
}
// 此时页面只会输出world，那这个肯定是我们不能接受的；
// jquery则不会，而且还不止一种方法
<script src="../jquery-1.12.2.js"></script>
<script>
// 第一种 与onload功能完全相同
// 页面中所有的内容都加载完成后才触发 标签 图片。。。
$(window).load(function () {
console.log('hello');
});
$(window).load(function () {
console.log('world');
});
// 此时页面就会输出 hello world
// 第二种 页面中基本的标签加载完毕后就可以触发了
// 1. ready() 页面加载事件的写法都是 ---- 方法
$(document).ready(function () {
console.log('hello');
});
$(document).ready(function () {
console.log('world');
});
jquery(function () {
console.log('hello');
});
jquery(function () {
console.log('world');
});
$(function () {
console.log('hello');
});
$(function () {
console.log('world');
});
// 可以看出咱们前面说过jquery中的*对象是jquery 和 $
// 所以大多数人更偏向与最后一种使用方式
</script>
dom对象和jquery对象互转
dom 对象转jquery对象操作方便,毕竟jquery中方法都是封装 好了的,而且兼容问题解决的很好,代码少,方便. jquery对象转dom对象,因为jquery中文件一直在更新，很多 东西都是随着使用而进行封装和升级,不太可能把所有dom中 用到的进行封装,还有很多未知的兼容问题没有封装进去,所以, 有的时候jquery中不能解决的问题,还需要原生的js代码来解决, 所以,jquery对象有的时候需要转成dom对象来进行操作。
<script src="../jquery-1.12.2.js"></script>
<script>
// 还是上面那个html的案例 咱们试一下转换
// dom操作按钮，修改颜色
window.onload = function () {
// btn 就是dom对象
var btn = document.getelementbyid('id');
// dom对象转换jquery对象，只需要把dom对象放在$(dom对象) ---- 对象
$(btn).click(function () {
// 此时要通过$(this) 把this指向 jquery
$(this).css('backgroundcolor', 'red');
});
}
// jquery对象转dom对象 有两种方式 下面咱们演示一下
$(function () {
// $('#btn') 是jquery对象 通过 .get(0) 转换为dom对象
$('#btn').get(0).onclick = function () {
this.style.backgroundcolor = 'red';
}
});
$(function () {
// $('#btn') 是jquery对象 通过后面追加[0] 的方式转换为dom对象
$('#btn')[0].onclick = function () {
this.style.backgroundcolor = 'red';
}
});
/*
* dom对象和jquery对象可以互转
* dom对象转jquery对象
* $(dom对象) --- jquery对象
* jquery对象转dom对象
* $(#btn)[0] --- dom对象
* $(#btn).get(0) ---- dom对象
*/
</script>
网页开关灯案例
要求：点击按钮切换body的背景颜色；下面咱们用dom和jquery的方式分别实现
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<script src="../jquery-1.12.2.js"></script>
<script>
// dom 方式
window.onload = function () {
// 获取按钮，注册点击事件
document.getelementbyid('btn').onclick = function () {
// 判断开灯还是关灯
if (this.value == '关灯') {
document.body.style.backgroundcolor = 'black';
this.value = '开灯';
} else {
document.body.style.backgroundcolor = 'white';
this.value = '关灯';
}
}
}
// jquery 方式
$(function () {
$('#btn').click(function () {
// .val() --- 获取按钮对象的值
if ($(this).val() == '关灯') {
$('body').css('backgroundcolor', 'black');
// .val('content') --- 设置按钮的value值
$(this).val('开灯');
} else {
$('body').css('backgroundcolor', 'white');
$(this).val('关灯');
}
});
});
</script>
</head>
<body>
<input type="button" value="关灯" id="btn">
</body>
</html>