- ASP.NET框架应用程序实战：软件开发工程师岗前必备
- 李发陵
- 4152字
- 2021-01-07 18:47:05
3.2 JQuery的基本功能
3.2.1 引用JQuery类库
JQuery提供了很多Javascript类库，这些类库中包含大量的应用程序编程接口（ApplicationProgrammingInterface, API）。要使用类库中的API，就必须在页面文件中添加对JQuery文件及类库文件的引用。引用步骤如下：
（1）新建一个名为“JQuery练习”的ASP.NetWeb应用程序MVC项目。
（2）右击该项目，依次选择“添加（D）”→“新建项（W）...”，在弹出的对话框中依次选择Web→HTML页，并将其命名为“引用JQuery.html”文件。
（3）单击“添加（A）”按钮，VisualStudio2013将在“JQuery练习”项目中生成一个新的名为“引用JQuery.html”的文件。
（4）打开“引用JQuery.html”文件，在＜title＞＜/title＞标签后添加下面的代码即可。
＜script src=＂Scripts/jquery-1.10.2.min.js＂type=＂text/javascript＂＞＜/script＞
3.2.2 选择器
当要操作页面上的元素时，需快速定位到页面上的目标元素，在JavaScript中一般使用document.getElementById获得。在JQuery中，有多种方法可以快速获取元素，元素选择器和属性选择器允许开发者通过标签名、属性名或内容对HTML元素进行选择，选择后可对HTML元素组或单个元素进行操作。
1．使用CSS选择器来选取HTML元素
$（＂#txtName＂）：选取id=＂txtName＂的元素。
$（＂p＂）：选取页面中所有的＜p＞元素。
$（＂p.intro＂）：选取所有class=＂intro＂的＜p＞元素。
$（＂p#demo＂）：选取所有id=＂demo＂的＜p＞元素。
2．使用XPath表达式来选择带有给定属性的元素
$（＂[href]＂）：选取所有带有href属性的元素。
$（＂[href=＇#＇]＂）：选取所有带有href值且等于“#”的元素。
$（＂[href! =＇#＇]＂）：选取所有带有href值且不等于“#”的元素。
$（＂[href$=＇.jpg＇]＂）：选取所有href值以“.jpg”结尾的元素。
【实例】 获取页面中id为txtAge的元素并显示其属性id的值，获取页面上所有的段落标签并显示总数。
HTML代码如下：
＜body＞
＜input type=＂text＂ id=＂txtAge＂ /＞
＜p＞这是第一段＜/p＞
＜p＞这是第二段＜/p＞
＜p＞这是第三段＜/p＞
＜/body＞
实现步骤：
（1）打开“引用JQuery.html”页面。
（2）用上述HTML代码覆盖“＜body＞＜/body＞”代码。
（3）在＜header＞＜/header＞标签中添加JavaScript方法的代码，如下所示。
＜script type=＂text/javascript＂＞
function count()
{
//alert()用于弹出提示框；
//$(＂#txtAge＂)：获取id为txtAge的控件
//attr()为JQuery内置函数，获取id的值
alert($(＂#txtAge＂).attr(＂id＂));
alert($(＂p＂).length); //$(＂p＂)用于获取所有元素，返回一个数组，length用
于得到数组的长度
}
＜/script＞
（4）在＜body＞标签中为onload事件添加执行函数，该函数将在页面加载完成后执行，代码如下：
＜body onload=＂count()＂＞
（5）右击，选择“在浏览器中查看”命令，程序的运行效果如图3-1所示。
图3-1 JQuery选择器的运行结果
3.2.3 将DOM对象转换成JQuery对象
文档对象模型（DocumentObject Model, DOM）是万维网联盟（The World Wide WebConsortium, W3C）组织推荐的处理可扩展标志语言的标准编程接口，它是以面向对象方式描述的文档模型。使用JQuery获得的MOM对象既包含了DOM对象的基本特性又进行了扩展，所以要使用JQeury操作DOM对象前需要对其进行转换，在JQuery中可以使用关键字“$（）”将普通HTML DOM对象转换为JQuery DOM对象。如：$（document.getElementById（＂msg＂））为JQuery对象，转换后可以使用JQuery方法。
3.2.4 操作DOM元素的集合
1．获取集合中的元素
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq、get（n）方法或索引号获取。要注意，eq返回的是JQuery对象，而get（n）和索引返回的是DOM元素对象。对于JQuery对象只能使用JQuery的方法，而DOM对象只能使用DOM的方法，如要获取第三个＜div＞元素的内容。有如下两种方法：
$(＂div＂).eq(2).html(); //调用JQuery对象的方法
$(＂div＂).get(2).innerHTML; //调用DOM中方法的属性
2．用同一函数实现set和get方法
JQuery主要包括如下几个语句：
$(＂#msg＂).html(); //返回id为msg的元素节点的HTML内容。
$(＂#msg＂).html(＂＜b＞new content＜/b＞＂);
//将“＜b＞new content＜/b＞”作为HTML串写入id为msg的元素节点内容中，页面显示粗体
的“new content”
$(＂#msg＂).text(); //返回id为msg的元素节点的文本内容。
$(＂#msg＂).text(＂＜b＞new content＜/b＞＂);
//将“＜b＞new content＜/b＞”作为普通文本串写入id为msg的元素节点内容中，页面显示
“＜b＞new content＜/b＞ ”
$(＂#msg＂).height(); //返回id为msg的元素的高度
$(＂#msg＂).height(＂300＂); //将id为msg的元素的高度设为300
$(＂#msg＂).width(); //返回id为msg的元素的宽度
$(＂#msg＂).width(＂300＂); //将id为msg的元素的宽度设为300
$(＂input＂).val(＂); //返回表单输入框的value值
$(＂input＂).val(＂test＂); //将表单输入框的value值设为test
$(＂#msg＂).click(); //触发id为msg的元素的单击事件
$(＂#msg＂).click(fn); //为id为msg的元素单击事件添加函数
同样，blur、focus、select、submit事件都可以有两种调用方法。
3．集合处理功能
对于JQuery返回的集合内容无须手工循环遍历并对每个对象分别做处理，JQuery已经提供了很方便的方法进行集合的处理。主要包括两种形式：
//为索引为0、1、2的p元素分别设定不同的字体颜色
$(＂p＂).each(function(i){this.style.color=[＇#f00＇, ＇#0f0＇, ＇#00f＇][ i ]});
//实现表格的隔行换色效果
$(＂tr＂).each(function(i){this.style.backgroundColor=[＇#ccc＇, ＇#fff＇][i% 2]});
//为每个p元素增加了click事件，单击某个p元素则弹出其内容
$(＂p＂).click(function(){alert($(this).html())});
4．扩展需要的功能
$.extend({
min: function(a, b){return a ＜b? a:b; },
max: function(a, b){return a ＞b? a:b; }
}); //为JQuery扩展了min、max两个方法
alert(＂a=10, b=20, max=＂+$.max(10,20)+＂, min=＂+$.min(10,20));
//使用扩展的方法(通过“$．方法名”调用)
5．方法连写
所谓连写，就是可以对一个JQuery对象连续调用各种不同的方法。例如：
$(＂p＂).click(function(){alert($(this).html())})
.mouseover(function(){alert(＇mouse over event＇)})
.each(function(i){this.style.color=[＇#f00＇, ＇#0f0＇, ＇#00f＇][ i ]});
6．操作元素的样式
主要包括以下几种方式。
$(＂#msg＂).css(＂background＂); //返回元素的背景颜色
$(＂#msg＂).css(＂background＂, ＂#ccc＂); //设定元素背景为灰色
$(＂#msg＂).height(300); //设定元素的高度
$(＂#msg＂).width(＂200＂); //设定元素的宽度
$(＂#msg＂).css({color: ＂red＂, background: ＂blue＂}); //以名值对的形式设定样式
$(＂#msg＂).addClass(＂select＂); //为元素增加名称为select的类
$(＂#msg＂).removeClass(＂select＂); //删除元素名称为select的类
$(＂#msg＂).toggleClass(＂select＂); //如果存在(不存在)，就删除(添加)名称为select的类
7．事件处理功能
JQuery提供了各种事件处理方法，开发者可以直接为通过JQuery获取的对象添加事件。如：
$(＂#msg＂).click(function(){alert(＂good＂)}); //为元素添加了单击事件
8.JQuery的自定义事件
（1）hover（fn1, fn2）事件。一个模仿悬停事件（鼠标光标移动到一个对象上面及移出这个对象）的方法。当鼠标光标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标光标移出这个元素时，会触发指定的第二个函数。
//当鼠标光标放在表格的某行上时将类置为over，离开时将类置为out
$(＂tr＂).hover(function(){
$(this).addClass(＂over＂);
},
function(){
$(this).addClass(＂out＂);
});
（2）ready（fn）事件。当DOM载入后可以查询及操纵时可以绑定一个要执行的函数。
$(document).ready(function(){alert(＂Load Success＂)});
//页面加载完毕提示“Load Success”，相当于onload事件。与$(fn)等价
（3）toggle（evenFn, oddFn）事件。每次单击时切换要调用的函数。如果单击了一个匹配的元素，则触发指定的第一个函数。当再次单击同一元素时，则触发指定的第二个函数。随后的每次单击都重复对这两个函数进行轮番调用。
//每次单击时轮换添加和删除名为selected的类
$(＂p＂).toggle(function(){
$(this).addClass(＂selected＂);
},
function(){
$(this).removeClass(＂selected＂);
});
（4）trigger（eventtype）事件。在每一个匹配的元素上触发某类事件。例如：
$ (＂p＂).trigger(＂click＂); //触发所有p元素的click事件
（5）bind（eventtype, fn）, unbind（eventtype）事件。用于事件的绑定与反绑定，从每一个匹配的元素中（添加）删除绑定的事件。例如：
$(＂p＂).bind(＂click＂, function(){alert($(this).text()); });
//为每个p元素添加单击事件
$(＂p＂).unbind(); //删除所有p元素上的所有事件
$(＂p＂).unbind(＂click＂); //删除所有p元素上的单击事件
9．特效功能
（1）toggle（）和slidetoggle（）方法提供了状态切换功能。
（2）如toggle（）方法包括了hide（）和show（）方法，即将对象在显示和隐藏之间切换。
（3）slideToggle（）方法包括了slideDown（）和slideUp方法，可以实现将动画向上、向下的功能。
10．其他实用功能
（1）浏览器类型。“$.browser．浏览器类型”语句用于检测浏览器的类型，有效参数可以为safari、opera、msie、mozilla。如检测是否是IE浏览器可用如下代码，是ie浏览器则返回true:$.browser.isie。
（2）$.each（obj, fn）是通用的迭代函数，可用于近似地迭代对象和数组（代替循环）。如：
$.each( [0,1,2], function(i, n){ alert( ＂Item #＂ +i +＂: ＂ +n ); });
等价于
var tempArr=[0,1,2];
for(var i=0; i＜tempArr.length; i++){
alert(＂Item #＂+i+＂: ＂+tempArr[ i ]);
}
（3）使用$each也可以处理json数据。如：
$.each( { name: ＂John＂, lang: ＂JS＂ }, function(i, n){ alert( ＂Name: ＂ +i +＂,
Value: ＂ +n ); });
结果为：
Name:name, Value:John
Name:lang, Value:JS
11．解决冲突
JQuery可以解决自定义方法或其他类库与JQuery之间的冲突，很多时候自定义$（id）方法来获取一个元素，或者其他的一些JavaScript类库。如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义的冲突，JQuery对此专门提供了方法用于解决此问题。使用JQuery中的JQuery.noConflict（）方法即可把变量$的控制权让给第一个实现它的那个库或之前自定义的$方法。之后应用JQuery的时候，只要将所有的$换成JQuery即可，比如可将原来引用对象的方法$（＂#msg＂）改为JQuery（＂#msg＂）。如：
//开始使用JQuery
JQuery.noConflict();
JQuery(＂div p＂).hide();
//使用其他库的 $()
$(＂content＂).style.display =＇none＇;
12．编写插件
编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期的维护。JQuery除了提供一个简单、有效的方式进行元素以及脚本管理，它还提供了一种例外机制：即给核心模块增加自己的方法和额外的功能。通过这种机制，Jquery允许创建属于我们自己的插件，以便提高在开发过程中的效率。编写插件时应注意：
（1）插件的推荐命名方法为：
jquery.[插件名].js
（2）所有的对象方法都应当附加到JQuery.fn对象上面，而所有的全局函数都应当附加到JQuery对象本身上。
（3）在插件内部，this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样，内部的this指向的是DOM元素。
（4）可以通过this.each来遍历所有的元素。
（5）所有方法或函数插件都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险，可以在插件头部添加一个分号（;），以免它们的不规范代码给插件带来影响。
（6）插件应该返回一个JQuery对象，以便保证插件的可链式操作。
（7）避免在插件内部使用$作为JQuery对象的别名，而应当使用完整的JQuery来表示，这样可以避免冲突。
JQuery的插件分为封装对象方法、封装全局函数等两种类型。
（1）封装对象方法的插件，也就是对象级别的开发。
（2）封装全局函数的插件（类级别的开发），指可以把独立的函数添加到JQuery命名空间之下，与调用函数的方法一样。
【实例】 添加一个JQuery插件，使其显示消息提示框。
实现步骤：
（1）创建一个名为“JQuery练习”的解决方案和ASP.NetWeb项目。
（2）在Scripts文件夹下新建一个名为“jquery.JQueryPlugIntest.js”的JavaScript文件，并添加下面的代码：
jQuery.testPlugIn =function () {
alert(＂This is a test. This is only a test.＂);
};
（3）在“JQuery练习”项目下新建一个名为“testPlugIn.html”的HTML页面。
（4）打开testPlugIn.html页面，添加对JQuery文件和“jquery.JQueryPlugIntest. js”文件的引用，并添加调用新插件的函数，代码如下：
＜script src=＂Scripts/jquery-1.10.2.min.js＂＞＜/script＞
＜script src=＂Scripts/jquery.plugIntest.js＂＞＜/script＞
＜script type=＂text/javascript＂＞
function test() {
$.testPlugIn(); //调用插件＂jquery.JQueryPlugIntest.js＂中的函数
}
＜/script＞
（5）在＜body＞＜/body＞标签中添加测试按钮，代码如下：
＜input type=＂button＂ onclick=＂test()＂ value=＂测试JQuery插件＂ /＞
（6）单击“测试JQuery插件”按钮，界面如图3-2所示。
图3-2 JQuery运行示例