Ibm-jQuery教程学习笔记

一、概述

1.虽然 jQuery 本身并非一门新的语言。但是，学习其语法有助于我们熟练、灵活地使用它。回顾下我们熟悉的 CSS 语法，不难发现 jQuery 的语法与 CSS 有相似之处。 jQuery 语法的设计思想是"选择元素，对其操作"。这和 CSS 规则的语法非常类似。

jQuery 的语法其实正是模仿了 CSS 规则的语法。其语法如下：

$(selector).action(actionParameter);

这是个链式语法。因此，上述的语法等效于：

var objTargetElements;//要施加操作的目标元素
objTargetElements=$(selector);//指定目标元素
//调用 objTargetElements 的相关方法，对目标元素进行操作
objTargetElements.action(actionParameter);

上述语法中，

$ ：美元符是 jQuery 核心函数 jQuery 的一个别名。当然，在 JavaScript 中“$”是一个合法的函数名。 Selector 参数指定了一个 jQuery 选择器。jQuery 选择器类似于 CSS 中的选择器，它告诉 jQuery 我们准备对哪些元素进行操作(action)。并且，CSS 中的各种选择器 jQuery 中都有等同的选择器。

action ：该方法指定了要对 selector 所指定的元素进行什么具体操作。actionParameter 参数是个可选参数，是根据具体所指定的方法来定的，它会随具体方法的变化而变化。

2.$ 函数返回的对象提供了一个名为 each 的常用方法。 each 方法接受一个参数，该参数是一个回调函数。 each 方法会针对选择器表达式所匹配的元素中的每个元素逐次调用这个回调函数，并将单个元素及其对应的索引号作为参数传入该函数。eg:

//用基于元素名称的选择器去匹配页面中的所有链接元素
$("a").each(function(index,ele){//匿名函数作为 each 方法的参数，供其调用
console.log("链接"+index+":"+ele.href);//往控制台中打印链接 URL
});

3.

二、jQuery 选择器

1.基于元素 ID 的选择器：这种选择器可以指定唯一的一个元素。其语法是： "#元素 ID"；

2.基于元素标签名的选择器：如果要对标签名相同的元素（如都是用标签"A"表示的超链接元素）进行操作，则可以使用基于标签名的选择器。其语法如下："元素名"

3.基于 CSS 类名选择器 jQuery 也支持 CSS 所支持的类名选择器。其语法是： ".类名"

4.基于元素属性的选择器：其语法是： “元素名[属性名=属性指]” 比如下面的 CSS 规则描述了将所有的文本框的背景色设为黄色。 input[type="text"]{ background-color:yellow; }

5.基于 DOM 对象的选择器 ：这种选择器在一些特定情况下会显得非常有用和方便。eg:

$(document).ready(initPage);//页面加载完毕后，jQuery 会回调 initPage

$(initPage);

使用匿名函数

$(function(){//该函数在页面加载完毕会被 jQuery 调用
//事件处理代码
});

三、jQuery 事件

1.使用 bind 方法绑定事件监听器

//当 ID 为 btnDetails 的按钮被单击时，下面的匿名函数会被 jQuery 调用
$("#btnDetails").bind("click",function(){
$("#divDetails").toggle();//显示或者隐藏 ID 为 divDetails 的元素
});

2.使用 jQuery 事件对象

$("#txtVerifyCode").bind("keypress",function(evt){
var keyCode=evt.which;//从事件对象中获取当前按键的编码值
var char=String.fromCharCode(keyCode) ;//将按键的编码转换为相应的字符
if(!/d/.test(char)){//当前输入的字符不是数字字符
//调用事件对象的 preventDefault 方法，取消事件的默认行为，此处即取消输入。
evt.preventDefault();
}
});

3.向事件监听器传递额外参数

$('#tip1').bind('click',{msg:'中文提示'},showTipHandler);

4.事件绑定的简便方法

$("#txtVerifyCode").keypress(function(evt){
//这里是事件处理代码
});

5.取消事件绑定

$("#btnEvtBind").unbind("click",handleClick);

调用 unbind 方法时，如果不指定第二个参数，则 jQuery 会取消监听第一个参数所指定的事件的所有监听器。若没有指定任何参数，则 jQuery 会取消选择器表达式匹配的所有元素上所有监听器。

三、知识点

1.包装集和Dom对象：

jQuery包装集的某些遍历方法,比如each()中, 可以传递遍历函数, 在遍历函数中的this也是Dom元素,比如:

$("#testDiv").each(function() { alert(this) })

如果我们要使用jQuery的方法操作Dom对象,怎么办? 用上面介绍过的转换方法即可:

$("#testDiv").each(function() { $(this).html("修改内容") })

 先让大家明确Dom对象和jQuery包装集的概念, 将极大的加快我们的学习速度. 我在学习jQuery的过程中就花了很长时间没有领悟到两者的具体差异, 因为书上并没有专门讲解两者的区别, 所以经常被"this指针为何不能调用jQuery方法"等问题迷惑.  直到某一天豁然开朗, 发现只要能够区分这两者, 就能够在写程序时变得清清楚楚.

 

2.包装集和Dom对象：