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

Javascript
JS option location 页面跳转实现代码
ExtJS 简介 让你知道extjs是什么
ExtJs 学习笔记 Hello World!
ExtJs 学习笔记基础篇 Ext组件的使用
ExtJs 学习笔记 Ext.Panle Ext.TabPanel Ext.Viewport
漂亮的脚本日历,和大家分享
JS Tween 颜色渐变
js 图片轮播(5张图片)
开发跨浏览器javascript常见注意事项
通用JS事件写法实现代码
Js 订制自己的AlertBox(信息提示框)
js 浮动层菜单收藏
JavaScript入门教程(10) 认识其他对象
JQuery 常用方法基础教程
jQuery 页面载入进度条实现代码
jQuery Ajax 全解析
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Ext JS Grid在IE6 下宽度的问题解决方法
js window.event对象详尽解析
JavaScript 悬浮窗口实现代码

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


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