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

Javascript
JS 文件本身编码转换 图文教程
jQuery Ajax之$.get()方法和$.post()方法
jQuery Ajax之load()方法
JavaScript 核心参考教程 内置对象
JavaScript 核心参考教程 RegExp对象
javascript hashtable实现代码
百度留言本js 大家可以参考下
javascript 判断某年某月有多少天的实现代码 推荐
让iframe子窗体取父窗体地址栏参数(querystring)
jquery pagination插件实现无刷新分页代码
jQuery与javascript对照学习 获取父子前后元素 实现代码
通用javascript脚本函数库 方便开发
JQuery 绑定事件时传递参数的实现方法
支持IE,Firefox的javascript 日历控件
javascript 变速加数功能实现代码
extjs 学习笔记(一) 一些基础知识
extjs 学习笔记(二) Ext.Element类
Jquery 学习笔记(一)
一些技巧性实用js代码小结
jquery 常用操作整理 基础入门篇

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-03-17   浏览: 96 ::
收藏到网摘: 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完全没有问题。