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>
经验首页