模拟jQuery库

 用js模拟jQuery方法,体会封装思想

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>simulationJquery.html</title>
</head>
<body>
  <img src=images/123.jpg/>
  <input id="hide" type="button" value="hide" style="position:absolute;top:250;left:50"/>
  <input id="show" type="button" value="show" style="position:absolute;top:250;lfet:120"/>
  <script type="text/javascript">
  function photo(){
    var img=document.images[0];
    this.hide=function(){
      img.style.visibility="hide";
      }
    this.show=function(){
      img.style.visibility="visible";
      }
  }  
  </script>

  <script type="text/javascript">
  //d()表示定位指定的标签
   function b(str){
    //获取str变量的类型
    var type=typeof(str);
    if(type=="string"){
    //截取第一个字符串
      var first=str.substring(0,1);
      //判断是否是#号
      if("#"==first){
        //获取#号之后的字符串
        var end=str.substring(1,str.length);
        //根据id定位标签
        var element=document.getElementById(end);
        //如果找到了
        if(element!=null){
          return element;
        }else{
          alert("没有这个标签");
    }
   }
    }else{
      alert("参数必须是字符串");
    }
  }
  </script>

  <script type="text/javascript">
    var p=new photo();
    d("#hide").onclick=function(){
      p.hide();
  }
    d("#show").onclick=function(){
      p.show();
    }
  </script>
</body>
</html>

  将上述中的方法名换成$符号,就是"jquery"了.

时间: 2024-11-08 23:59:40

模拟jQuery库的相关文章

jQuery库冲突

jQuery库冲突解决办法 一次面试中面试官问到jQuery和别的库冲突怎么解决?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名字,比如传入jq,那我就挂载在window.jq上. var myControl="jq"; (function(name){ var $=name ||"$"; //name存在$的值就是name的值,不存在或为null,$的值为字

很容易学习的JQuery库 : (三) 事件

jQuery 是为事件处理特别设计的. 一.事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件"触发"(或"激发")经常会被使用. 通常会把 jQuery 代码放到 <head>部分的事件处理方法中: 实例 <span style="font-size:18px;"><html> <head> <scr

JS 模拟Jquery

<script type=text/javascript charset=utf-8> // 模拟jquery底层链式编程 // 块级作用域 //特点1 程序启动的时候 里面的代码直接执行了 //alert('我执行了'); //特点2 内部的成员变量 外部无法去访问 (除了不加var修饰的变量) //a = 10 ; (function(window , undefined){ // $ 最常用的对象 返回给外界 大型程序开发 一般使用'_'作为私用的对象(规范) function _$(a

js框架封装,模拟jQuery封装

模拟jQuery框架,利用原生的js技术,封装一个js框架,以加深对jQuery的常用api的使用和面向对象原理的理解:一:结构部分首先利用闭包,构造一个自执行函数,然后利用选择器函数Sizzle,获取dom元素:其后设置入口函数jQuery,返回一个F的实例:然后对jQuery.prototype进行设置:其后修改F的原型指向jQuery的原型,最后暴露出去两个接口$和jQuery:二:jQuery.fn.extend = jQuery.extend = function(){}通过向jQue

很容易学习的JQuery库 : (一) 简介

jQuery 是一个 JavaScript 库: jQuery 极大地简化了 JavaScript 编程: jQuery 很容易学习. 上面的三句话是结合最近的学习整理后的心得,个人感觉可以很好地解释JQuery. 一.是什么      jQuery,顾名思义,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库. jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多). jQuery使用户能更

bootstrap框架 - jquery库 - 引用地址

 bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css  jquery库: http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js   bootstrap.min.js:http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js

解决jquery库和base库的冲突

jquery库引用在base库之前,$的所有权就是base库的:而jquery库引用在base库之前后的话,$的所有权就是jquery库的.解决这种库之间的冲突可用以下方法解决: 情况一,jquery库引用在base库之前 比如: //var $$ = jQuery; $(funtion(){       //jquery库引用在base库之前,$的所有权就是base库的 alert($("#box").ge(0)); //ge()方法属于base而不属于jquery alert(jQ

模拟jQuery简单封装ajax

1 /*模拟jQuery的写法 (简单写法)*/ 2 var $={}; 3 /*ajax*/ 4 $.ajax = function (options) { 5 /* 6 * 请求 7 * 1.请求接口 type get post 默认的是get 决定是否设置请求头 8 * 2.接口地址 url 不确定 字符串 如果用户没有传 默认的接口地址为当前路径 9 * 3.是否是异步 async 默认的就是异步 true;false 是同步请求 10 * 4.提交数据 data 默认的是对象 {nam

jQuery基础学习3——jQuery库冲突

默认情况下,jQuery用$作为自身的快捷方式. jQuery库在其他库之后导入 在其他库和jQuery库都被加载完毕后,可以在任何时候调用jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d