jQuery介绍
在说jQuery之前，先说一个概念吧，什么是JavaScript框架库，其实就是一个普通的js文件，里面封装了很多函数或者说封装了很多兼容的代码；当然啦，jQuery就是众多库的一员，那么我们为什么要学习jQuery呢，那就讲一下他的特点；
- 很好的解决了不同浏览器之间的兼容性问题(IE6+，FF 2+， Safari 3.0+， Opera 9.0+ ，Chrome) 只是针对js的兼容性；
- 体积小 几十kb 使用简单方便 链式编程 隐式迭代 插件丰富 开源 免费；
jQuery 学习网站
jQuery官网： https://jquery.com/
jQuery在线API： https://api.jquery.com/
jQueryUI: https://jqueryui.com/
只是说还是不行下面咱们还是通过一些实例体验一下吧
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>原文地址：https://www.cnblogs.com/article-record/p/11442004.html
时间： 2024-10-24 16:19:32