`
shangwuyuyi
  • 浏览: 1724 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

JQUERY之路一

阅读更多

引言:JQUERY作为优秀的javascript框架之一,被广泛的引用。在实际的项目中,JQUERY可以大大简单的工作量,并且JQUERY中优秀方法可以快捷方便的解决很多问题。

一:JQUERY的简单理解

    我们可以将JQUERY理解一个类,该类的命名控件是$。

    1.首先明确类中可以有属性,也可以有静态的方法以及成员方法。

    例如,$.trim()就可以理解为JQUERY的一个静态方法,我们在就是中可以直接使用,我们也可以使用$.extend({...})去定义自己想要的静态方法去扩展JQUERY类库;

    下面举例说明用法:

     

$.extend({
   caculate:function(arg1,arg2){return arg1+arg2;}
})

    就是计算两个值的和,在js代码中直接调用即可,即:$.add(1,2);返回结果就是3。(ps:当然,在你的js中必须引用你自定义的js文件或者放在你自定义方法的后面....)

    2.其次:需明确,类似JQUERY中的选择器$("#main")而获得到的DOM元素就是JQUERY类的一个实例化对象。众所周知,你实例化一个类对象之后,就可以操作该类对象,比如获取该类对象的属性值、通过该类对象调用你在类中定义的方法等。

    

<div id="test" myTest="shangwuyuyi"/>

    $("#test").attr("myTest");就是获取到了该div的属性myTest。当然,你也可以为该div添加一些属性,例如

 

$("test").attr("class","main");

    就是为该div添加class属性。(这些都不用我写...各位大神肯定对此不屑一顾...)

    我想说的是Jquery.fn.extend,这是对prototype的扩展,其实就是为实例了JQUERY的类对象添加成员方法。下面举个例子:

 

 $.fn.extend({
    alertWhileClick:function(){ 
        alert($(this).attr("id"));  
    }
}  

     就是为实例化了的对象新定义了一个成员函数,在实际调用中,就使用$("#test").alertWhileClick();就可以弹出该div的id值了。

     

     

 

分享到:
评论

相关推荐

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    orgchart.js 组织架构图之JQuery插件

    组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】

    jquery-3.6.0.js 和 jquery-3.6.0.min.js 【jquery-3.6.0包合集】 jquery-3.6.0包合集下载 包含: jquery-3.6.0.js jquery-3.6.0.min.js jQuery是一个快速、简洁的JavaScript框架,封装JavaScript常用的功能代码,...

    jquery-3.3.1.js和jquery-3.3.1.min.js

    jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...

    jQuery1.12.4+jQuery中文手册.rar

    **jQuery 1.12.4 知识点详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery...

    jQuery基础.pptx

    JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 1 jQuery简介 jQuery优势 jQuery安装 jQuery语法 1、jQuery简介 1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? ...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    jQuery,这个JavaScript库,自2006年发布以来,以其简洁的API和强大的功能,迅速成为开发者们首选的前端工具之一。本篇文章将深入探讨jQuery 1.9.1版本,包括其核心特性、性能优化以及实际应用。 首先,我们来看看...

    最新版JQuery-jquery-3.2.1.min.js

    在本文中,我们将深入探讨最新版的jQuery,即`jquery-3.2.1.min.js`,以及该版本中的一些变化。** ### 1. jQuery 3.x 版本概述 jQuery 3.x 系列是继1.x和2.x后的又一重大更新,它主要关注性能优化、API清理以及对...

    开发工具 jquery-1.11.3.min

    开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    《jQuery 2.1.1:JavaScript 的强大库》 jQuery 是一个广泛应用于网页开发的JavaScript库,它的出现极大地简化了JavaScript的复杂性,使得网页交互变得更加简单和高效。在这个主题中,我们将深入探讨jQuery 2.1.1...

    jquery1.2.3到3.3.1版本都有

    jquery1.2.3到3.3.1版本都有: jquery-1.10.2.min.js jquery-1.11.1.min.js jquery-1.11.3.min.js jquery-1.2.3.min.js jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-...

    jquery精简版jquery-small.js

    jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    《jQuery 3.0.0:深入理解与应用》 jQuery,这个JavaScript库,自2006年发布以来,已经成为了Web开发中不可或缺的一部分。它以其简洁的API和强大的功能,极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。在...

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jquery1.7中文手册CHM文档(附jquery1.82chm手册)

    资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    《jQuery 1.11.3:核心特性与应用解析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,深受前端开发者的喜爱。在这个主题中,我们将深入探讨jQuery ...

Global site tag (gtag.js) - Google Analytics