jquery中为什么能用$操作


Posted in jQuery onJune 18, 2019

前言

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的值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现动态删除LI的方法
May 30 jQuery
jQuery实现菜单栏导航效果
Aug 15 jQuery
jQuery实现全选、反选和不选功能
Aug 16 jQuery
jquery+css实现下拉列表功能
Sep 03 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jQuery 实现左右两侧菜单添加、移除功能
Jan 02 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
js/jQuery实现全选效果
Jun 17 #jQuery
jQuery创建折叠式菜单
Jun 15 #jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 #jQuery
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 #jQuery
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 #jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 #jQuery
jQuery+ajax实现批量删除功能完整示例
Jun 06 #jQuery
You might like
php getsiteurl()函数
2009/09/05 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
解析WordPress中的post_class与get_post_class函数
2016/01/04 PHP
Javascript 获取LI里的内容
2008/12/17 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
JQuery实现点击div以外的位置隐藏该div窗口
2013/09/13 Javascript
javascript日期格式化示例分享
2014/03/05 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
AngularJS入门教程之REST和定制服务详解
2016/08/19 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
2017/03/08 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
小程序使用wxs解决wxml保留2位小数问题
2019/12/13 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
2020/02/27 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
原生js实现简单轮播图
2020/10/26 Javascript
Python中matplotlib中文乱码解决办法
2017/05/12 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
经典c++面试题三
2015/07/08 面试题
企业内部培训方案
2014/02/04 职场文书
企业文化建设实施方案
2014/03/22 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
电频谱管理的原则是什么
2022/02/18 无线电