面向对象方法仿写JQuery2

最新推荐文章于 2020-09-22 09:44:38 发布
最新推荐文章于 2020-09-22 09:44:38 发布
阅读量866 收藏
点赞数
分类专栏： OOP 文章标签： 面向对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Vivian_shuang/article/details/52148558
版权

<!DOCTYPE html>

<html lang="en">


<head>

<meta charset="UTF-8">

<title>Document</title>

</head>


<body>

<!--div*3>div.wrap*3>input*3-->

<div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

</div>

<div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

</div>

<div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

<div class="wrap">

<input type="text">

<input type="text">

<input type="text">

</div>

</div>

<script type="text/javascript">

//参数分三种情况:

//1. 字符串: 选择器

//2. function: ready方法

//3. 原生对象: 原生对象转JQ对象

function JQ(arg) {

//用来放原生对象的数组

this.elements = [];

switch(typeof arg) {

case "string":

this.elements = getEle(arg);

break;

case "function":

ready(arg);

break;

case "object":

this.elements.push(arg);

break;

}

}


//JQ对象转原生

JQ.prototype.get = function(index) {

return this.elements[index];

}

//eq: 从JQ对象中取出某一个原生对象, 再转成新的JQ对象

JQ.prototype.eq = function(index) {

return new JQ(this.elements[index]);

}


function ready(fn) {

//DOMContentLoaded DOM加载完成之后浏览器发出的通知

if(window.addEventListenner) {

window.addEventListenner("DOMContentLoaded", fn, false);

} else {

//defer表示当dom加载完成之后再去加载script标签

//ie8之前, 了解即可

var script = document.createElement("script");

script.defer = true;

var head = document.getElementsByTagName('head')[0];

script.onreadystatechange = function() {

if(script.readystate == "complete") {

fn();

}

}

}

return window;

}


/*

//$("div")当JQ的参数只有一级选择器的时候

function getEle(selector) {

//1. 去掉首尾空格

var reg = /^\s+|\s+$/g;

selector.replace(reg, "");

//2. 判断选择器类型

if (/^#/.test(selector)) {

//id选择器

return document.getElementById(selector);

}else if (/^./.test(selector)) {

//class选择器

return getEleByClass(selector);

}else{

return document.getElementsByTagName(selector);

}

}

*/


//$("xx xx xx")多级选择器的情况

function getEle(selector) {

var reg = /^\s+|\s+$/g;

selecter = selector.replace(reg, "");

//arr = [xx,xx,xx];

var arr = selector.split(" ");

//

var parents = [document];

var children = [];

// 以$("div .wrap input")为例

// 第一次循环：arr[i]是div,parents是document，children里是当前文档里所有的div

// 第二次循环：arr[i]是.wrap,parents是div，children里是所有的div>.wrap

// 第三次循环：arr[i]是input,parents是.wrap，children里是所有的div>.wrap>input

for(var i = 0; i < arr.length; i++) {

children = [];

for(var j = 0; j < parents.length; j++) {

// 查找class

if(/^\./.test(arr[i])) {

var nodes = getEleByClass(parents[j], arr[i].substr(1));

// children = nodes;

for(var k = 0; k < nodes.length; k++) {

children.push(nodes[k]);

}

// 查找id

} else if(/^#/.test(arr[i])) {

var node = parents[j].getElementById(arr[i].substr(1));

children.push(node);

// 查找标签名

} else {

var nodes = parents[j].getElementsByTagName(arr[i]);

for(var k = 0; k < nodes.length; k++) {

children.push(nodes[k]);

}

}

}

parents = children;

}

return children;

}


//因为getElementsByClassName存在兼容性, 所以单独处理

function getEleByClass(parentObj, selector) {

//现代浏览器

if(parentObj.getElementsByClassName) {

return parentObj.getElementsByClassName(selector);

} else {

//mark jq效率

//ie, 不支持直接根据className查找, 所以需要一个一个遍历


var nodes = parentObj.getElementsByTagName("*");

var arr = [];

for(var i = 0; i < nodes.length; i++) {

if(nodes[i].className == selector) {

arr.push(nodes[i]);

}

}

return arr;

}

}

/******************************* 事件 *********************************/

// 两个参数

// 1.事件名

// 2.回调函数

JQ.prototype.on = function(eventName,fn){

for(var i = 0; i < this.elements.length; i++){

addEvent(eventName,this.elements[i],fn);

}

}

JQ.prototype.click = function(fn){

for (var i = 0; i < this.elements.length; i++) {

addEvent('click',this.elements[i],fn);

}

}

// 因为addEventListen存在兼容性问题，IE8之前用attachEvent

function addEvent(eventName,obj,fn){

// 现代浏览器

if (obj.addEventListener) {

obj.addEventListener(eventName,fn,false);

}else{

// IE8以下

obj.attachEvent("on" + eventName,fn);

}

}

/******************************* CSS *********************************/

JQ.prototype.css = function(){

// css使用时参数有两种情况

// 1. 一个参数时有两种情况：

// 1.1 字符串$("div").css("color")表示取值

// 1.2 对象$("div").css({color:red})表示给样式赋值

// 2. 两个参数为直接给一个样式赋值$("div").css("color","red")

switch (arguments.length){

case 1:

// $("div").css({"color":red,"width":100})

if (typeof(arguments[0]) == "object") {

for (prop in arguments[0]) {

for (var i = 0; i < this.elements.length; i++) {

// prop = color,arguments[0]["color"] = red

setStyle(this.elements[i],prop,arguments[0][prop])

}

}

}else{

// 从样式中取值

// 可能jq对象中有多个原生对象，只取第一个的样式

return getStyle(this.elements[0],arguments[0])

}

break;

case 2:

for (var i = 0; i < this.elements.length; i++) {

// $("div").css("color","red");

setStyle(this.elements[i],arguments[0],arguments[1]);

}

break;

}

}

// 获取样式

// 1. 要获取样式的对象

// 2. 样式名

function getStyle(obj,styleName){

if (window.getComputedStyle) {

return window.getComputedStyle(obj,null)[styleName];

}else{

// IE 

return obj.currentStyle(styleName);

}

}

// 设置样式

// 1. 要赋值的对象

// 2. 样式名

// 3. 样式的值

function setStyle(obj,styleName,styleValue){

var arr = ["left", "top", "width", "height"];

for (var i = 0; i < arr.length; i++) {

// 如果要设置的样式在数组的范围内，表示需要带"px"

if (arr[i] == styleName) {

// 如果值中没有"px"的话，添加"px"

if (!/px/.test(styleValue)) {

styleValue = styleValue + "px";

}

}

}

obj.style[styleName] = styleValue;

}

function $(arg) {

return new JQ(arg);

}

// 测试

console.log($("div .wrap input"));

$("div").on("click",function(){

alert("不约");

})

$("div").click(function(){

alert("啊 不约");

})

$("div").css("backgroundColor","red");

$("div").css({

backgroundColor:"yellow"

})

</script>

</body>


</html>

Vivian_shuang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
jQuery仿写百度百科的目录树
10-20
主要介绍了jQuery仿写百度百科的目录树医保词条样式，点击右侧的目录树，左侧跳转到指定的锚点位置，滚动鼠标，游标跟随一起滚动至响应链接位置，具体实现思路大家参考下本
面向对象　jQuery编程
ZengJabber的专栏
03-07 1270
  var People=function(){};  $.extend(People.prototype,{           say:function(){alert(1);}     } );  var p=new People();   p.say();
js面向对象
starry__sty的博客
09-22 143
1：什么是对象？ a:对象就是由若干个键值对，无须组成的数据类型，被称之为对象。 b:简单理解，提供了特有的方法和属性就是对象！ c:“对象”是一个容器，封装了“属性”（property）和“方法”（method）。 举例： var o={ name:'tom', age:12, fun:function(){ alert(1) } } 2:键值对？ 花括号里面冒号前被称之为键，冒号后被称之为值，通过键获取值。 3：什么是面向对象？ 面向对象是一种编程思想，通过这种思想来完成代码的编程。(oo
JQ面向对象
weixin_30820151的博客
11-05 154
静态方法：某种类型才有的方法，这个方法干的事情只有类型本身有关，不受具体实例对象的影响，在C#语言中，它用static表示，VB中用share表示，而在jq中我们一般用$或者JQuery表示JQ类型，而静态方法扩展一般用$.extend。 实例方法：当类型被表示为具体事物时，它被称为对象，或者实例对象，它所拥有的行为（方法）我们称为实例方法（一般书上不这样叫，一般都叫方法，但我比较...
jquery 面向对象写法
热门推荐
陈雨
07-17 1万+
C语言是面向过程的编程思想，C++是面向对象的编程思想。但是这也不妨碍C使用面向对象的方法编程。这里C不是重点，就不说了。 这里要说一下jquery--javascript的一个最好的库，没有之一。从最初的2000多行发展到现在的上万行，极大丰富了JavaScript的操作方式。 第一次看jquery源码时，可以说是感觉无法看下去，各种设计模式，正则表达式，看的想把源码删了。不
JQ面向对象的封装步骤
Facing_the_Giants的博客
07-16 2274
一：函数自己调用自己/*CSS页面*/ #box1{ width: 200px; height: 200px; background: red; margin :100px auto; } .box2{ width: 200px; height: 200px; ba
div+css+jquery仿写京东首页
12-20
用div+css+jquery仿写的京东首页静态网页，初学者可参考，共同进步，页面简陋，非初学者可不参考
仿写 struts2 实现
08-12
根据Struts2的基本原理,实现了struts2的的基本功能,资源包括了具体的实现代码
C++仿写wavelet分解去噪方法
最新发布
10-16
C++仿写wavelet分解去噪方法
面向对象方法仿写JQuery
Vivian_shuang的博客
08-08 1748
DOCTYPE html> html> head> meta charset="utf-8" /> title>title> head> body> script type="text/javascript"> // 参数分三种情况： // 1. 字符串：选择器 // 2. function：ready方法 // 3. 原生对象：原生对象转JQ对象 function
仿照jquery封装一个自己的js库（一）
12-26
仿照jquery封装一个自己的js库（一）
jQuery 面向对象编程
sqyNick
08-08 2707
1.jQuery代码 $(function(){ //创建对象,将对象命名为sun var sun =new Object(); //公有属性 sun.name="sqy"; //公有方法 sun.getName=function(){ return sun.name; }; //私有属性 var age=2
js面向过程与面向对象编程示例（使用jquery库）
xiongqiangwin1314的专栏
08-02 2796
js面向对象与面向过程编程的示例，拿常见的鼠标移动移出操作，显示与隐藏div作为示例。
面向对象编写jQuery插件
vcxiaohan的博客
12-15 1667
/** * jquery.timeline.js plugin * * * * */ ;(function($, window, document, undefined) { var plugName = "timeline", defaults = { name: "hwb" }; function TimeLine(data,el,options) { this
jquery面向对象编程
tmaic的专栏
10-09 1万+
最近又在搞前端的一些交互，对js面向对象编程又有了一些新的理解; 情景如下： 现在页面中有3个区域：A,B,C;点击不同的tab切换不同的层。看一下HTML代码: A B C tab内容显示与隐藏，用的样式css控制的： #switch
4、jQuery面向对象之简单的插件开发
u012416045的博客
10-13 361
1、alert例子 (function($){ $.alert = function(msg){ window.alert(msg); } $.fn.alert = function(msg){ window.alert(msg); } })($); $().ready(function(){
JQuery--JQuery面向对象编程快速入门-插件开发
Eshare分享
05-08 3673
JQuery源码片段分析 (function(window){ /** * jQuery是一个函数 是一个对象 是一个构造器函数 */ var jQuery = function( selector, context ) { return new j
jQuery面向对象写法规定写法样式规定
思维小刀
06-03 1187
1.定义对象 var product = {}; 2.对象里面的属性与方法 var product = { init:function(){ this.p = 1; this.sort_field = "default"; this.sort = ""; this.eve...
如何使用qt元对象系统 仿写动态模板库
03-12
你可以使用Qt元对象系统来实现动态模板库。首先，你需要定义一个基类，该基类包含所有你想要的模板函数。然后，你可以使用Qt元对象系统来创建一个元对象，该元对象包含所有你定义的模板函数。接下来，你可以使用元...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值