自己总结了一下JQuery底层的一些思想,纯属于个人见解。。

为了方便描述,现在客户假如给了我们一个需求:

页面上有两个按钮,一张图片,当我点击hidden按钮时隐藏图片,当我点击show按钮时显示图片。假如让你做你会如何去实现这个需求呢??

方法一:利用DOM技术去定位到按钮,当点击按钮时触发JS onclick事件进而引发一个函数,在函数中利用DOM定位图片的位置,然后修改图片的visibility属性即可。

  》》改进

方法二:方法一是可以完成,但是在操作上比较繁琐。这时候我们想起了面向对象,我们可以将页面上的图片封装起来并为该图片有两个行为,即"show"和"hidden";当点击按钮时触发JS onclick事件    进而引发一个函数,在函数中我们实例化出图片对象,调用该对象的行为("show","hidden")即可。

  》》改进

方法三:方法二对方法一进行了封装,简化了一部分代码,但是我们都是非常懒的人,还是觉得代码太长,写起来不方便,那我们该怎么办呢?对!!就是将Javascript再次进行封装,封装完之后我们只需要按照自己的规则去写代码就行了。例如$("#ID"),它的本质是一个函数,$其实只是一个方法名而已,#ID是函数的形参,这样做给了我们一个假象,就是只需要调用这个函数就能够定位到某个节点,其实归结到底层的实现,它仍然用的是一些比较传统的形式,类似于document.getElementById();document.getElementsByTagName();document.ElementsByName();

JQuery的一些思想,自己的一些见解!!!!的更多相关文章

  1. jQuery的核心思想

    jQuery?----www.jQuery.com jQuery的理念:write less, do more jQuery的成就:世界排名前100的公司,46%都在使用jQuery,远远超过其他库, ...

  2. jQuery中面向对象思想实现盒子内容切换

    这里主要是模拟小米官网中的首页的内容模块实现的主要动态效果 布局:采用了bootstrap框架进行布局,及其其中的字体图标 html: <!-- 内容 --> <div class= ...

  3. jQuery之排他思想

    使用的方法:click()    css()   siblings() <button>快速</button> <button>快速</button> ...

  4. jQuery设计思想

    jQuery设计思想 原文网址:http://jqfundamentals.com/book/ 阮一峰 翻译整理 [目录] 一.选择网页元素 二.改变结果集 三.链式操作 四.元素的操作:取值和赋值 ...

  5. JQuery系列(6) - jQuery设计思想

    jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. JQuery设计 ...

  6. Jquery源码学习(第一天)

    jQuery是面向对象的设计通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery $("#div1" ...

  7. jQuery基础知识总结

    1.  jQuery基本概念介绍             1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...

  8. jQuery语法

    目录: 一.选择网页元素二.改变结果集三.链式操作四.元素的操作五.元素的操作:移动六.元素的操作:复制.删除和创建七.工具方法八.事件操作九.特殊效果 一.选择网页元素这也是jQuery的基本设计思 ...

  9. 精通jQuery选择器

    虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...

随机推荐

  1. DataBinder.Eval值的判断

    原文发布时间为:2009-04-10 -- 来源于本人的百度文章 [由搬家工具导入] 问:如何对<%# DataBinder.Eval(Container.DataItem,"Ly_R ...

  2. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---14

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  3. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---12

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  4. hdu 4497(排列组合+LCM和GCD)

    GCD and LCM Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)Total ...

  5. 提高Android Studio运行、编译速度方案

    1.安装完成后启动卡死 刚刚打开studio就卡在gradle building的界面再也不动了(去连接墙外的网下载),那么这个时候我们就需要把这个联网下载操作屏蔽掉,找到studio安装目录,找到i ...

  6. UVA 272 TEX Quotes【字符串】

    https://vjudge.net/problem/UVA-272 [分析]:标记一下. [代码]: #include <bits/stdc++.h> using namespace s ...

  7. [Python Cookbook] Numpy: Iterating Over Arrays

    1. Using for-loop Iterate along row axis: import numpy as np x=np.array([[1,2,3],[4,5,6]]) for i in ...

  8. eclipse启动Tomcat时报错:严重: Exception loading sessions from persistent storage

    我的项目工程是Spring+hibernate+structs  1.0,最近启动tomcat时多次遇到如下异常: 严重: IOException while loading persisted se ...

  9. codeigniter视图

    怎么加载视图? 例如我们有一个视图在 application/views/welcome.php public function index() { $this->load->view(' ...

  10. Android Spinner In Toolbar

    As the title of the post suggest in this tutorial we will see how to have spinner widget inside the ...