当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jQuery教程:jQuery核心方法的使用

Javascript
为调试JavaScript添加输出窗口的代码
Js 中debug方式
一些mootools的学习资源
JavaScript 精粹读书笔记(1,2)
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
数组Array进行原型prototype扩展后带来的for in遍历问题
javascript 鼠标拖动图标技术
比较搞笑的js陷阱题
js 自定义的联动下拉框
js 省地市级联选择
JavaScript 类似flash效果的立体图片浏览器
JavaScript Event学习第九章 鼠标事件
jQuery AJAX回调函数this指向问题
toString()一个会自动调用的方法
jQuery 文本框模拟下拉列表效果
关于页面被拦截的问题
javascript 解析url的search方法
一个XML格式数据转换为图表的例子
Javascript 获取链接(url)参数的方法[正则与截取字符串]
一些收集整理非常不错的JS效果代码

Javascript 中的 jQuery教程:jQuery核心方法的使用


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-17   浏览: 71 ::
收藏到网摘: n/a

今天我们再深入的学习一下jQuery的核心。

jQuery对象访问:
each(callback)//根据我的理解,each是jQuery中的一种循环机制。一般与this关键字配合使用。学过程序的朋友都知道程序中的循环方式有以下几种do...while()、while()、for(expression1,expression2,expression3)以及C#和javaEE中JSTL标签中独有的forEach循环。jQuery中的each循环与forEach循环类似。具体使用方法在本节案例中讲述。

$("Element").length;//表示某个对象在HTML页面中的数量,与size用法一致,此方法不带有()。

$("Element").size();//表示某个对象在HTML页面中的数量,与length用法一致。

$("Element").get();//表示获得某个元素在HTML页面中的集合,以数组方式构建。

$("Element").get(index);//作用同上,如果get方法里面带有数字则表示获得数组中的第几个元素,索引从0开始。

$("Element").get().reverse();//表示将获取到得dom元素集合构建成的数组进行反向。比如默认排序是1,2,3使用了此方法则为3,2,1

$("Element").index($("Element"));//搜索index中所获得的元素在所匹配对象元素中的索引值(从0开始计数),若没有找到则返回-1。比如有5个div,其中第4个标签的ID是#bar那么$("div").index($("#bar"))所返回的索引值就是3。


jQuery插件机制:

$.extend
({
       max:function(num1,num2){return num1 > num2 ? num1:num2;}
       min:function(num1,num2){return num1 < num2? num1:num2;}
})


$.fn.extend
({
         check:function()
         {
                 return this.each(function() { this.checked = true; });
         }

         uncheck:function()
         {
                 return this.each(function() { this.checked = false; });
         }

})
//此方法也是一种插件的实现方法,其中this表示是调用者当前所指dom对象,比如$("#abc").click(function(){this})这里的this指的就是#abc这个dom对象。each在上面已经讲解过了。在此插件方法extend中定义了两个方法分别是check和uncheck。
比如:
$("input[@type=checkbox]").check();//表示将input标签的type属性设置为选中,其中,中括号中的内容表示如果input的type属性是checkbox的话,再设置为选中。
$("input[@type=radio]").uncheck(); //表示将input标签的type属性设置为未选中,其中,中括号中的内容表示如果input的type属性是radio的话,再设置为未选中。




多库共存:
有的时候我们可能在同一个页面内调用多种js库,比如即使用jQuery类库又使用ProToType类库,按理说没有问题,但是他们都用到了“$”符号,因此为了避免与其他库产生冲突,可以使用以下两种方法将其区别开来。
jQuery.noConflict();//使用方法,var j=noConflict();表示j在jQuery中将代替"$"符号。

jQuery.noConflict(true);//使用方法,dom.query = jQuery.noConflict(true)则表示将$和jQuery的控制权都交还给原来的库。比如你想要将jQuery嵌入一个高度冲突的环境。注意:调用此方法后极有可能导致插件失效。因此用的时候一定要考虑清楚。dom.query将代表"$"符号。
//$.extend等同于jQuery.extend在这里面的max和min是两个自定义的函数,并且都有2个参数,在方法体内进行比较。方法体内使用的是条件表达式,与if条件判断差不多。此条件表达式的意思是:如果num1>num2相比较后如果num1大于num2那么返回“true”,那么此方法返回“?”之后“:”之前的内容也就是num1,反之是num2。
   调用的时候只要使用$.max(2,3)传入任意的两个参数,那么将返回num2也就是数字3;$.min(7,8)则返回num1因为num1比num2小。$替换成jQuery完全没有问题。