jQuery学习笔记之一——jQuery入门与基础核心

因为工作的原因,所以自学了下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());
});

时间: 2024-10-04 00:09:57

jQuery学习笔记之一——jQuery入门与基础核心的相关文章

锋利的JQuery学习笔记之JQuery

今天终于看到了最令我兴奋的一章:JQuery与Ajax的应用.AJAX即"Asynchronous JavaScript and XML"(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式应用的网页开发技术.在最初学习Ajax的日子里,我被ASP.NET AJAX框架提供的UpdatePanel迷惑了,以后Ajax就这么简单,所以在最初做的几个项目里,前台代码里必至少有一个UpdatePanel区域,把要

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

锋利的Jquery学习笔记之Jquery的选择器

Jquery的选择器分为:基本选择器,层次选择器,过滤选择器和表单选择器. 1.基本选择器 基本选择器是Jquery中最常用的选择器,也是最简单的选择器. 2.层次选择器 如果想通过DOM之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素和同辈元素等,那么层次选择器是一个非常好的选择. 在层次选择器中,第一个和第二个选择比较常用,而后面两个在JQuery里可以用更加简单的方法代替,所以使用的几率相对较小. 3.过滤选择器 过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤

jQuery学习笔记(三)jQuery中的动画

1 show() 方法和hide() 方法  (显示和隐藏) show() 方法和hide() 方法是jQuery中基本的动画方法.在HTML文档里,为一个元素调用hide() 方法,会将该元素的display样式改为“none”. $("element").hide(); //通过hide()方法将element元素隐藏 $("element").css("display","none"); //通过css()方法将elem

jQuery学习笔记(9)--jquery中的事件--$(document).ready()

1.$(document).ready()方法是事件模块中最重要的一个函数,可以极大地提高web应用程序的相应速度. 2.执行时机:DOM就绪后就会执行,而javascript中window.onload方法是在网页中的所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行. 3.可多次使用. 4.有简写的形式:$(function){} window.onload与$(document).ready()的比较: 1 <script src="Scripts/jquery-1.4.1.

锋利的JQuery 学习笔记

第一章 认识JQuery ·页面加载事件(可以写多个ready())$(document).ready(function(){alert(“hello world”);}) ·链式操作:JQuery允许你在一句代码中操做任何与其相关联的元素,包括其子元素.父元素等//选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式$(“#myDiv”).addClass(“css1″).children(“a”).removeClass(“css2″); ·

jQuery学习笔记(一):入门

jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: 1 document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: 1 $('#info').val('Hello World!'); 嗯,可以看出,使用JQuery的优势之一是可以使代码更加简练,使开

jQuery学习笔记——jQuery基础核心

代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写: $(function () {}); //执行一个匿名函数 $(‘#box’);//进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’);//执行功能函数由于$本身就是jQuery对象的缩写形式,那么也就是说上面的三段代码也可以写成如下形式:jQ

Js脚本之jQuery学习笔记(1)

Js脚本之jQuery学习笔记(1) 一.javascript基础 单行注释 多行注释 /* */ 数据类型 数值型 字符串型 布尔型 空值 未定义值 转义字符 函数定义:1234567891011121314<head><script language="javascript"function test(m){var xixi="嘻嘻"alert("这是javascript")document.write(xixi + m)}