JQuery是一个javascript库,它通过封装原生的JavaScript函数得到一套定义好的方法。它可以用最少的代码,完成更多更复杂困难的功能。Jquery API 中文文档:http://jquery.cuishifeng.cn/
JQuery的主要功能:[jQuery的最大优势就是方便操作]
>>1.像 CSS 那样访问和操作DOM
>>2. 修改 CSS 控制页面外观
>>3. 简化 JavaScript代码操作
>>4. 事件处理更加容易
>>5. 各种动画效果使用方便
>>6. 让Ajax 技术更加完美
>>7. 基于 jQuery 大量插件
>>8. 自行扩展功能插件
#1. Hello JQuery
需要引入文件JQuery才能用:<script type="text/javascript"src="/jquery/Plugins/jquery-3.1.0.min.js"></script>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script type="text/javascript" src="/jquery/Plugins/jquery-3.1.0.min.js"></script> </head> <body>
<input type="button" value="click me">
<script type="text/javascript"> $(function(){ $("input").click(function(){ alert('hello JQuery'); }); }) </script>
</body> </html> |
在Jquery中程序都是以$符号开始,$=jQuery
$(function(){})等于jQuery(function(){})
#2. 连缀方式
在执行功能函数的时候,我们发现.css()这个功能函数并不是直接被“$”或jQuery对象调用执行的,而是先获取元素后,返回某个对象再调用.css()这个功能函数。那么也就是说,这个返回的对象其实也就是jQuery对象。值得一提的是,执行了.css()这个功能函数后,最终返回的还是jQuery对象,那么也就是说,jQuery的代码模式是采用的连缀方式,可以不停的连续调用功能函数。
<div id="box">jQuery</div>
<script type="text/javascript"> $("#box").css('color','red').css(‘font-size’,’30px’); </script> |
#3. 加载模式
我们的jQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后延迟支持DOM操作,否则就无法获取到元素。
Js延迟加载[window.onload=function(){}]和jQuery延迟加载[$(document).ready(function(){})]对比:
|
window.onload |
$(document).ready() |
执行时机 |
必须等待网页全部加载完毕(包括图片等),然后再执行包裹代码 |
只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码 |
执行次数 |
只能执行一次,如果第二次,那么第一次的执行会被覆盖 |
可以执行多次,第N次都不会被上一次覆盖 |
简写方案 |
无 |
$(function () {}) |
#4. 获取DOM对象
Js: document.getElementById(‘box’)
jQuery: $(‘#box’).get(0)
// js alert(document.getElementById("box")); // jquery alert($('#box').get(0)); |
显然jQuery更容易获取DOM对象
#5. 多库冲突
当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免。想和 jQuery 共容有两种方法:
>>1.将jQuery库在XX库之前引入,那么’$’的所有权就归XX库所有,而jQuery可
以直接用jQuery对象调用,或者创建一个“$$”符给 jQuery 使用。
var $$ = jQuery; $(function () { alert($('#box').ge(0)); alert($$('#box').width()); }); |
2.如果将jQuery库在XX库之后引入,那么’$’的所有权就归 jQuery库所有,而XX
库将会冲突而失去作用。这里,jQuery提供了一个方法:
jQuery.noConflict(); var $$ = jQuery; $(function () { alert($('#box').ge(0)); alert($$('#box').width()); }); |