jQuery—入门

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>

<title>jQuery</title>

</head>

<body>

$(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>

$("#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());

});

猜你喜欢