jquery中为什么能用$操作
前言
jq对dom节点的操作相信大家都很熟悉,
$("input").val("value");
直接用$来获取dom节点的方式也非常便捷方便,那么他是怎么实现的呢?
猜想
在没看源码之前,我的猜想是这样的
function Dom(selector){ this.dom = document.querySelector(selector); this.val = function (content) { if(content){ this.dom.value = content }else{ return this.dom.value; } } } function $(selector) { return new Dom(selector); } $("input").val("value")
$()是一个function,这个function会返回一个new Dom的对象,这个new Dom的对象里写一些方法,就达到jq的这样效果了。
实际
之后看了jq源码的写法,果然不同凡响……
(function(window, undefined) { jQuery = function(selector, context) { return new jQuery.fn.init(selector, context); } jQuery.fn = jQuery.prototype = { init: function(selector, context) { this.dom = document.querySelector(selector) }, val: function(content) { if(content) { this.dom.value = content } else { return this.dom.value; } } } jQuery.fn.init.prototype = jQuery.fn; window.$ = jQuery; })(window); $("input").val("value")
首先,将jq的代码写在一个匿名函数里,这样避免了重复命名对变量的影响,通过window.$ = jQuery;把$挂在windo下,实现域外使用$的操作。
其次,调用jQuery这个方法,return 一个jQuery.fn.init()的对象,jQuery.fn.init()本质上是一个构造函数,这样$("input")的时候其实相当于已经new了一个对象。
但是怎么使用.val()方法呢,现在new出来的对象只有一个dom属性(当然在我这个例子里是这样的)。
所以,最后jQuery.fn.init.prototype = jQuery.fn;这句话格外关键,这句让jQuery.fn.init也能使用val()这个方法,当然也能使用init方法了,
所以$("input").init("select").val("value")这种写法也是正确的,而这种写法的效果就是改变了select的值而没有改变input的值。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
本文实例讲述了原生JS forEach()和map()遍历的区别.兼容写法及jQuery $.each.$.map遍历操作.分享给大家供大家参考,具体如下: 一.原生JS forEach()和map()遍历 共同点: ①.都是循环遍历数组中的每一项. ②.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. ③.匿名函数中的this都是指Window. ④.只能遍历数组. 1.forEach() 没有返回值
-
Angular的$http的ajax的请求操作(推荐)
angular通过封装$http方法,封装了,ajax请求 也通过$http封装了$http.get()和$http.post()的方法,这里由于图省事,这两种方法不如直接使用通用的方法 这里先写一个案例,首先先写一个对象 var req = { method: 'POST',//请求的方式 url: ip,//请求的地址 headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept'
-
CI框架中数据库操作函数$this->db->where()相关用法总结
本文实例总结了CI框架中数据库操作函数$this->db->where()相关用法.分享给大家供大家参考,具体如下: CI 框架数据库操作函数 this->db->where() 的使用 1) $this->db->where('MATCH (field) AGAINST ("value")', NULL, FALSE) 如果把$this->db->where() 接受可选的第三个参数设置为 FALSE, CodeIgniter 将不会为
-
基于MongoDB数据库的数据类型和$type操作符详解
前面的话 本文将详细介绍MongoDB数据库的数据类型和$type操作符 类型 数字 备注 Double 1 双精度浮点数 - 此类型用于存储浮点值 String 2 字符串 - 这是用于存储数据的最常用的数据类型.MongoDB中的字符串必须为UTF-8 Object 3 对象 - 此数据类型用于嵌入式文档 Array 4 数组 - 此类型用于将数组或列表或多个值存储到一个键中 Binary data 5 二进制数据 - 此数据类型用于存储二进制数据 Undefined 6 已废弃 Objec
-
详解vue指令与$nextTick 操作DOM的不同之处
异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推入到队列中一次.这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要.然后,在下一个的事件循环"tick"中,Vue 刷新队列并执行实际 (已去重的) 工作.Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel,如果执行环境不
-
PHP中::、->、self、$this几种操作符的区别介绍
在访问PHP类中的成员变量或方法时,如果被引用的变量或者方法被声明成const(定义常量)或者static(声明静态),那么就必须使用操作符::,反之如果被引用的变量或者方法没有被声明成const或者static,那么就必须使用操作符->. 另外,如果从类的内部访问const或者static变量或者方法,那么就必须使用自引用的self,反之如果从类的内部访问不为const或者static变量或者方法,那么就必须使用自引用的$this.
-
JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象 Javascript不支持多维数组,但是因为数组里面可以包含对象(数组也是一个对象),所以数组可以通过相互嵌套实现类似多维数组的功能 1.1 定义数组 声明有10个元素的数组 复制代码 代码如下: var a = new Array(10); 此时为a已经开辟了内存空间,包含10个元素,用数组名称加 [下标] 来调用,例如
-
JQuery中DOM节点的操作与访问方法实例分析
本文实例讲述了JQuery中DOM节点的操作与访问方法.分享给大家供大家参考,具体如下: Jquery中DOM节点的操作 已有对象.append(要添加的对象) 作为最后一个子元素添加 要添加的对象.appendTo(已有对象) prepend()/prependTo() 作为第一个子元素添加 已有元素.before(要添加的元素)/after() 在对象前面/后面添加新的元素,可用逗号分割添加多个元素 要添加的元素.insertBefore(已有元素)/insertAfter() .empty
-
基于jQuery中对数组进行操作的方法
jQuery中提供了两个函数 : 1.$.map(array,callback(element,index)); 对于array中的每个元素,调用callback()函数,最终返回一个新的数组,原数组不变 例如: $(function () { var arrInt = [1, 3, 5, 79]; var b = $.map(arrInt, function (value, key, a) {//map返回来的是一个新数组
-
jQuery中对节点进行操作的相关介绍
动态创建Dom节点 jQuery中使用$(html字符串)来动态创建Dom节点,并且返回一个jQuery对象,可以调用append等方法将创建的节点添加到Dom中. 例如: var link = $("<a href='http://www.baidu.com'>百度</a>"); $("div:first").append(link); 添加节点元素的方法: Append方法用来在元素的末尾追加元素(最后一个子节点) Prepend在元素的
-
Jquery中对数组的操作代码
而在Jquery中则使用$.map().$.each()来操作数组: 首先是普通的数组(索引为整数的数组): 复制代码 代码如下: $.map(arr,fn); 对数组中的每个元素调用fn函数逐个进行处理,fn函数将处理返回最后得到的一个新的数组 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; var newarr = $.map(arr, function(item) {return item*2 }); alert(newarr); $.each(array,f
-
使用jQuery中的wrap()函数操作HTML元素的教程
wrap()函数用于在每个匹配元素外部包裹指定的HTML结构. 与该函数相对的是unwrap()函数,用于当前匹配元素的父元素(只移除父元素,其内部节点全部保留). 该函数属于jQuery对象(实例). 语法 jQueryObject.wrap( wrapper ) 参数 wrapper String/Element/jQuery/Function类型用于包裹匹配元素的节点. 如果参数wrapper为字符串,则将其视作jQuery选择器或html字符串,jQuery会自行判断. jQuery 1
-
jquery中为什么能用$操作
前言 jq对dom节点的操作相信大家都很熟悉, $("input").val("value"); 直接用$来获取dom节点的方式也非常便捷方便,那么他是怎么实现的呢? 猜想 在没看源码之前,我的猜想是这样的 function Dom(selector){ this.dom = document.querySelector(selector); this.val = function (content) { if(content){ this.dom.value =
-
深入理解jquery中extend的实现
Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,下面来看看详细的介绍吧. 通常我们使用jquery的extend时,大都是为了实现默认字段的覆盖,即若传入某个字段的值,则使用传入值,否则使用默认值. 如下面的代码: function getOpt(option){ var _default = { name : 'wenzi', age : '25', sex : 'male' } $.extend(_default, option); return _
-
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习. 二.前言 通过前面几章我们已经能够完全控制jQuery包装集了, 无论是通过选择器选取对象, 或者从包装集中删除,过滤元素. 本章将讲解如何使用jQuery获取和修改元素属性和样式. 三. 区分DOM属性和元素属性 一个img标签: <img src="images/image.1.jpg" id="hibiscus" alt="
-
详解jQuery中的DOM操作
大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title=
随机推荐
- Python pip安装lxml出错的问题解决办法
- jQuery 3.0 的变化及使用方法
- php正则表达式中的非贪婪模式匹配
- springmvc接收jquery提交的数组数据代码分享
- iOS8调用相机报警告Snapshotting a view的解决方法
- Coolite Cool Study 1 在Grid中用ComboBox 来编辑数据
- 常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
- php 字符串中的\n换行符无效、不能换行的解决方法
- Python中使用Tkinter模块创建GUI程序实例
- C++中的循环引用
- JS模拟超市简易收银台小程序代码解析
- CSS 中关于字体处理效果的思考
- 详解Linux下的文件标述符和文件指针
- jquery对表单操作2
- JQuery里选择超链接的实现代码
- jquery文档操作wrap()方法实例简述
- js查看一个函数的执行时间实例代码
- Java快速排序QuickSort(实例)
- 使用Nginx中自带的模块配置缩略图功能的教程
- php网页标题中文乱码的有效解决方法