Futbyte 付柏特
Future Byte Technology——未来程式工作室

因为工作的原因,所以自学了下jQuery,这里以李炎恢老师的教程为自觉教程,并记录学习中遇到的问题。

教程下载地址:

http://www.verycd.com/topics/2956408/

课件下载地址:

http://download.csdn.net/download/ip_kv3000/8986013

jQuery类库下载地址:

http://jquery.com/

 

jQuery入门 

 

优势、历史、版本我就不多说了,网上有的是。至于为什么学,因为很有用,为什么非要学他,因为微软加入到了.net里。

 

下载的版本有一个区别1.X作为IE6/7/8的兼职版本与2.X作为抛弃 IE6/7/8 的版本会有不同,在下载时需要考虑一下你的需求。

jQuery类库需要javascript脚本调用才能使用,最方便的方法是建立一个JS文件,有利于代码的管理和代码的利用。

在引用类库时需要注意,一定要先在页面引用jQuery类库,再引用自定的JS文件,不然会提示“$未定义”。

Uncaught ReferenceError: $ is not defined

正确示例:

<script src="jquery-1.11.3.js" type="text/javascript"></script>
<script src="Currcy.js" type="text/javascript"></script>

 

基础核心

 

 

a.代码风格

缩写:

$(function () {});               //执行一个匿名函数
$(‘#box’);                         //进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’); //执行功能函数

正常:

jQuery(function () {});             //执行一个匿名函数
jQuery(‘#box’);                        //进行执行的ID元素选择
jQuery(‘#box’).css(‘color’, ‘red’); //执行功能函数

jQuery的代码模式是采用的连缀方式,可以不停的连续调用功能函数。
$('#box').css('color', 'red').css('font-size', '50px'); //连缀


b.加载模式

 jQuery库文件是在body元素之前加载的,我们必须等待所>有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。
在延迟等待加载, JavaScript提供了一个事件为load,方法如下:
window.onload = function () {};      //JavaScript等待加载
$(document).ready(function () {}); //jQuery等待加载

因为jQuery写法只需要等待网页中的DOM结构加载完毕,就能执行包裹的代码,并可以执行多次, 第N次都不会被上一次覆盖

所以我们使用第二种写,并可以简写为$(function () {});

 

c.对象互换

jQuery 对象虽然是 jQuery 库独有的对象,但它也是通过 JavaScript 进行封装而来的。 我
们可以直接输出来得到它的信息。

alert($);             //jQuery 对象方法内部
alert($());          //jQuery 对象返回的对象,还是 jQuery
alert($('#box')); //包裹 ID 元素返回对象,还是 jQuery

获取原生的 DOM 对象,比如:
alert(document.getElementById('box')); //[object HTMLDivElement]
jQuery 想要达到获取原生的 DOM 对象,可以这么处理:
alert($('#box').get(0));                        //ID 元素的第一个原生 DOM
jQuery 是可以进行批量处理 DOM 的,这样可以在很多需要循环遍历的处理上更加得心应手。

 

d.多个库之间的冲突

当一个项目中引入多个第三方库的时候, 由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免。比如 prototype、 还有我们 JavaScript 课程开发的 Base 库, 都使用“$” 作为基准起始符,如果想和 jQuery 共容有两种方法:

 

1.将 jQuery 库在 Base 库之前引入, 那么“$” 的所有权就归 Base 库所有, 而 jQuery 可以直接用 jQuery 对象调用,或者创建一个“$$” 符给 jQuery 使用。
var $$ = jQuery; //创建一个$$的 jQuery 对象
$(function () { //这是 Base 的$
alert($('#box').ge(0)); //这是 Base 的$
alert($$('#box').width()); //这是 jQuery 的$$
});


2.如果将 jQuery 库在 Base 库之后引入, 那么“$” 的所有权就归 jQuery 库所有, 而 Base库将会冲突而失去作用。这里, jQuery 提供了一个方法:
jQuery.noConflict(); //将$符所有权剔除
var $$ = jQuery;
$(function () {
alert($('#box').ge(0));
alert($$('#box').width());
});

posted on 2015-08-10 16:38  Futbyte  阅读(161)  评论(0编辑  收藏  举报