详解jquery选择器的原理

2024-10-03 09:45:05

详解jquery选择器的原理

html部分

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="js/minijquery.js"></script>
</head>
<body>
  <div class="one">1</div>
  <div class="two">2</div>
</body>
<script>
  var result = $("div");
  console.log(result);
  alert($('div').size());
</script>
</html> js

js部分

(function(){
  //暴露外部的引用
  var jQuery = window.jQuery = window.$ = function(selector){
    return new jQuery.fn.init(selector);
  } 

  //添加原型事件
  jQuery.fn = jQuery.prototype = {
    //
    init:function(selector){
      var element = document.getElementsByTagName(selector);
      Array.prototype.push.apply(this,element);
      return this;
    },
    myjQuery:"the test one",
    length:0,
    size:function(){
      return this.length;
    }
  } 

  //将init的原型引用成jQuery的原型
  jQuery.fn.init.prototype = jQuery.fn; 

})();

我用我的理解解释一下，就是jquery原型里面有一个init初始化的方法，将传入的值进行解析，比如传入的id还是class还是标签名。然后通过相应的方法返回数组型对象。既可以通过对象直接调用方法，也可以使用数组的length。

以上就是jQuery 原理的分析，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

常用jQuery选择器汇总

学习[js DOM 编程艺术],最后面有许多jQuery的选择器,每个都动手敲了一遍. jQuery 提供了高级选择器的方法. j s获取元素的三个基本方法分别是通过标签名,类名和id,即(getElementsByTagName, getElementsByClassName和getElementById).那么jQuery是如何获取呢? 通过标签获取:$('tag') 通过类名获取:$('.className') 通过id获取:$('#id') 除了上面个三个最基本最简单的,还有下面几个cs
jQuery选择器特殊字符与属性空格问题

一.选择器中含有特殊符号的注意事项 1．选择器中含有"."."#"."("或"]"等特殊字符根据W3C的规定,属性值中是不能含有这些特殊字符的,但在实际项目中偶尔会遇到表达式中含有"#"和"."等特殊字符,如果按照普通的方式去处理出来的话就会出错.解决此类错误的方法是使用转义符转义. <div id="id#b">bb</div> <
详解jQuery选择器

大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档
jQuery选择器_动力节点Java学院整理

选择器是jQuery的核心.一个选择器写出来类似$('#dom-id'). 为什么jQuery要发明选择器?回顾一下DOM操作中我们经常使用的代码: // 按ID查找: var a = document.getElementById('dom-id'); // 按tag查找: var divs = document.getElementsByTagNames('div'); // 查找<p class="red">: var ps = document.getElement
jQuery选择器实例应用

刚学完jQuery选择器,闲来无事,照着书上的范例敲了一段代码(HTML和CSS抄自书上),自己试着写了写jQuery的代码,感觉相当轻便啊. 显示效果: 功能说明: 1.点击上边的图书分类一栏,实现向下的伸缩扩展,可以控制分类的显示状态: 2."简化"功能点击后实现分类显示菜单数量的简化,简化后,简化字样变成"展开": 3.页面中的两个红色箭头图标均为显示状态的图标,每次点击后都会变换相应的状态效果. 代码实现: <html> <head>
js控制文本框禁止输入特殊字符详解

在开发难免遇到一些前端需要验证输入的数据是否合法的问题,收集分享在这里同学们使用,欢迎补充. 1.标签上直接替换方法: JS 控制不能输入特殊字符 <input type="text"class="domain"onkeyup="this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')": this.value=this.value.replace(/[^u4e00-u9fa5w]/g,'')
JS 验证密码不能为空，必须含有数字、字母、特殊字符,长度在8-12位

废话不多说了,直接给大家贴代码了,具体代码如下所示: checkpassword = function(v){ var numasc = 0; var charasc = 0; var otherasc = 0; if(0==v.length){ return "密码不能为空"; }else if(v.length<8||v.length>12){ return "密码至少8个字符,最多12个字符"; }else{ for (var i = 0; i &
easyui-datagrid特殊字符不能显示的处理方法

在easyui中datagrid.combobox.tree等组件都不能显示含有html标签的特殊字符,因为这些字符会被当作html标签被解析掉.这里给出了一个处理方案,希望对大家有帮助. 以datagrid为例: 找到jquery.datagrid.js文件,在其中添加如下方法: function escapeHtml(s) { if (s === undefined) { return s; } else { s = String(s === null ? "" : s); ret
详解jquery选择器的原理

详解jquery选择器的原理 html部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/minijquery.js"></script> </head> <body>
jquery选择器大全全面详解jquery选择器

选择器并没有一个固定的定义,在某种程度上说,jQuery的选择器和样式表中的选择器十分相似.选择器具有如下特点:1．简化代码的编写2．隐式迭代3．无须判断对象是否存在其中"$"是选择器不可缺少的部分,在jQuery库中,$就是jQuery的一个简写形式,比如$("#foo")和jQuery("#foo")是等价的,$.ajax和jQuery.ajax是等价的.如果没有特别说明,可以把程序中的$符号都理解为jQuery的简写形式.现在我们正式进入j
实例详解jQuery Mockjax 插件模拟 Ajax 请求

1. 原理 jquery-mockjax是用于mock 前台ajax向后台请求的返回数据. 原理很简单在你js代码要发送ajax请求的地方断点一下,然后比较在[引入jquery-mockjax] 和 [没有引入jquery-mockjax]的情况下$.ajax.toString()的值情况. 很明显,引入jquery-mockjax时,这个mock库会对jquery提供的ajax函数做替换.这样就很容易能mock起来. 在实际的开发过程中,前端后台协商好了统一的接口,就各自开始自己的任务了.这
详解jQuery中ajax.load()方法

jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector).load(URL,data,callback); load()函数用于从服务器加载数据,并使用返回的html内容替换当前匹配元素的内容. load()函数默认使用GET方式,如果提供了对象形式的数据,则自动转为POST方式. 因为默认使用的是Get请求方式,所以我们也可以在url加数据进行提交. 例
详解C#扩展方法原理及其使用

1.写在前面今天群里一个小伙伴问了这样一个问题,扩展方法与实例方法的执行顺序是什么样子的,谁先谁后(这个问题会在文章结尾回答).所以写了这边文章,力图从原理角度解释扩展方法及其使用. 以下为主要内容: 什么是扩展方法扩展方法原理及自定义扩展方法扩展方法的使用及其注意事项 2.什么是扩展方法一般而言,扩展方法为现有类型添加新的方法(从面向对象的角度来说,是为现有对象添加新的行为)而无需修改原有类型,这是一种无侵入而且非常安全的方式.扩展方法是静态的,它的使用和其他实例方法几乎没有什么区别.
详解 Java HashMap 实现原理

HashMap 是 Java 中最常见数据结构之一,它能够在 O(1) 时间复杂度存储键值对和根据键值读取值操作.本文将分析其内部实现原理(基于 jdk1.8.0_231). 数据结构 HashMap 是基于哈希值的一种映射,所谓映射,即可以根据 key 获取到相应的 value.例如:数组是一种的映射,根据下标能够取到值.不过相对于数组,HashMap 占用的存储空间更小,复杂度却同样为 O(1). HashMap 内部定义了一排"桶",用一个叫 table 的 Node 数组表示:
详解jQuery的animate动画方法及动画排队问题解决

animate()动画方法作用:执行css属性集的自定义动画语法:$(selector).animate(styles,speed,easing,callback) • 参数1: css 的属性名和运动结束位置的属性值的集合. • 参数2:可选,规定动画的速度,默认是 "normal".其他值,"slow"."normal"."fast",数字格式,单位为毫秒. • 参数3:可选,规定在不同的动画点中设置动画速度的 eas
详解jQuery 链式调用

链式调用 jQuery对象调用任何方法(除了节点关系方法)执行完后,方法都会有一个返回值,返回值就是jQuery对象自己,这个现象给我们提供了便利,可以对执行结果继续打点调用jQuery的方法和属性.即--可以使用jQuery对象进行连续打点调用 console.log($(this).css("background-color", "pink").html("hello")); jQuery对象调用除了节点关系的方法之外,其他的方法执行后,返回
详解PHP的执行原理和流程

简介先看看下面这个过程: • 我们从未手动开启过PHP的相关进程,它是随着Apache的启动而运行的: • PHP通过mod_php5.so模块和Apache相连(具体说来是SAPI,即服务器应用程序编程接口): • PHP总共有三个模块:内核.Zend引擎.以及扩展层: • PHP内核用来处理请求.文件流.错误处理等相关操作: • Zend引擎(ZE)用以将源文件转换成机器语言,然后在虚拟机上运行它: • 扩展层是一组函数.类库和流,PHP使用它们来执行一些特定的操作.比如,我们需要mysq

详解jquery选择器的原理

相关推荐

随机推荐