JQuery的一些思想,自己的一些见解!!!!
自己总结了一下JQuery底层的一些思想,纯属于个人见解。。
为了方便描述,现在客户假如给了我们一个需求:
页面上有两个按钮,一张图片,当我点击hidden按钮时隐藏图片,当我点击show按钮时显示图片。假如让你做你会如何去实现这个需求呢??
方法一:利用DOM技术去定位到按钮,当点击按钮时触发JS onclick事件进而引发一个函数,在函数中利用DOM定位图片的位置,然后修改图片的visibility属性即可。
》》改进
方法二:方法一是可以完成,但是在操作上比较繁琐。这时候我们想起了面向对象,我们可以将页面上的图片封装起来并为该图片有两个行为,即"show"和"hidden";当点击按钮时触发JS onclick事件 进而引发一个函数,在函数中我们实例化出图片对象,调用该对象的行为("show","hidden")即可。
》》改进
方法三:方法二对方法一进行了封装,简化了一部分代码,但是我们都是非常懒的人,还是觉得代码太长,写起来不方便,那我们该怎么办呢?对!!就是将Javascript再次进行封装,封装完之后我们只需要按照自己的规则去写代码就行了。例如$("#ID"),它的本质是一个函数,$其实只是一个方法名而已,#ID是函数的形参,这样做给了我们一个假象,就是只需要调用这个函数就能够定位到某个节点,其实归结到底层的实现,它仍然用的是一些比较传统的形式,类似于document.getElementById();document.getElementsByTagName();document.ElementsByName();
JQuery的一些思想,自己的一些见解!!!!的更多相关文章
- jQuery的核心思想
jQuery?----www.jQuery.com jQuery的理念:write less, do more jQuery的成就:世界排名前100的公司,46%都在使用jQuery,远远超过其他库, ...
- jQuery中面向对象思想实现盒子内容切换
这里主要是模拟小米官网中的首页的内容模块实现的主要动态效果 布局:采用了bootstrap框架进行布局,及其其中的字体图标 html: <!-- 内容 --> <div class= ...
- jQuery之排他思想
使用的方法:click() css() siblings() <button>快速</button> <button>快速</button> ...
- jQuery设计思想
jQuery设计思想 原文网址:http://jqfundamentals.com/book/ 阮一峰 翻译整理 [目录] 一.选择网页元素 二.改变结果集 三.链式操作 四.元素的操作:取值和赋值 ...
- JQuery系列(6) - jQuery设计思想
jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库.微软公司甚至把jQuery作为他们的官方库. JQuery设计 ...
- Jquery源码学习(第一天)
jQuery是面向对象的设计通过window.$ = window.jQuery = $; 向外提供接口,将$挂在window下,外部就可以使用$和jQuery $("#div1" ...
- jQuery基础知识总结
1. jQuery基本概念介绍 1.1 什么是jQuery 一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可 学习jQuery就是学习一些方法 ...
- jQuery语法
目录: 一.选择网页元素二.改变结果集三.链式操作四.元素的操作五.元素的操作:移动六.元素的操作:复制.删除和创建七.工具方法八.事件操作九.特殊效果 一.选择网页元素这也是jQuery的基本设计思 ...
- 精通jQuery选择器
虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...
随机推荐
- SQL2005、SQL2008如何压缩日志文件(log) 如何清除日志
原文发布时间为:2010-11-01 -- 来源于本人的百度文章 [由搬家工具导入] ALTER DATABASE [DataBaseName] SET ...
- react dva 表单校验
import React,{ Component } from 'react'; import { connect } from 'dva'; import { WhiteSpace,NavBar , ...
- android开发过程遇到的一些错误
Unable to resolve target "android-x" 这是工程的Android版本和本地SDK中的版本不一致,一般做下处理: 1. 右击项目->andro ...
- RSTP介绍
1. 介绍 RSTP(Rapid Spanning Tree Protocol),快速生成树协议,标准为802.1w(已合入802.1D-2004)RSTP是对STP技术的修改和补充,最大特点就是快速 ...
- LeetCode OJ--Word Break II ***@
https://oj.leetcode.com/problems/word-break-ii/ class Solution { public: unordered_set<string> ...
- 第十三届北航程序设计竞赛决赛网络同步赛 B题 校赛签到(建树 + 打标记)
题目链接 校赛签到 对每个操作之间建立关系. 比较正常的是前$3$种操作,若第$i$个操作属于前$3$种,那么就从操作$i-1$向$i$连一条有向边. 比较特殊的是第$4$种操作,若第$i$个操作属 ...
- Codeforces 762A k-th divisor(数论)
题目链接:k-th divisor 求出N的第K大因子,满足N <= 10^15,K <= 10^9 直接暴力…… #include <bits/stdc++.h> using ...
- Apache + mod_wsgi部署webpy应用
Apache + mod_wsgi部署webpy应用 引用:http://webpy.org/cookbook/mod_wsgi-apache.zh-cn 下面的步骤在Apache-2.2.3 ( ...
- codevs——2894 Txx考试(背包)
时间限制: 1 s 空间限制: 32000 KB 题目等级 : 黄金 Gold 题解 题目描述 Description Txx是一个成绩很差的人,考试便成了他的噩梦.于是他常在考试时睡觉以 ...
- 11G在用EXP导出时,空表不能导出
11G中有个新特性,当表无数据时,不分配segment,以节省空间 解决方法: 1.insert一行,再rollback就产生segment了. 该方法是在在空表中插入数据,再删除,则产生segmen ...