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

 

jq为什么能用$操作的更多相关文章

  1. js与jq对数组的操作

    一.数组处理 1.数组的创建  var arrayObj = new Array(); //创建一个数组  var arrayObj = new Array([size]); //创建一个数组并指定长 ...

  2. JQ系列:css操作

    JQ中的 .css()有三种使用方法: $('#p').css('width'); 取得ID为p的样式属性的width值;等同 return width $('#p').css('width','10 ...

  3. 总结前端JQ常用的一些操作手法(慢慢完善)

    1.实例化Js一个object对象,把它当做类来用,事例是操作url的参数 function GetRequestCondition() { var url = window.location.hre ...

  4. jq 复习帖子 常用操作

     1绝对定位(abs)与相对定位(relative)    区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把其它的层遮罩住    绝对定位就 ...

  5. Jq如何获取并操作iframe中的元素?

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  6. 【JQ基础】DOM操作

    内部插入:append() //向每个匹配的元素内部追加内容,可包含 HTML 标签 $(selector).append(function(index,html)) /*•index - 可选.接收 ...

  7. [jQ]jQuery显式操作Checkbox,并用数组存储关联值的方案

    ---------------------------------------------------------------------------------------------------- ...

  8. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

  9. JQ封装切换滚动功能

    /*---------控制滚动图片v1(作者:SFLYQ)-----------Options 配置对象,(用来配置控制元素的dom位置,初始化一些必要的对象或者方法)DoIni 初始化操作(初始化元 ...

随机推荐

  1. Java Synchronized 与 ThreadLocal 异同

    同:都是为了线程安全 异:synchronized是利用锁的机制,使变量或代码块在某一时该只能被一个线程访问.而ThreadLocal为每一个线程都提供了变量的副本, 使得每个线程在某一时间访问到的并 ...

  2. window下安装php的imagick和imagemagick扩展教程

    最近的PHP项目中,需要用到切图和缩图的效果,在linux测试服务器上很轻松的就安装好php imagick扩展.但是在本地windows开发环境,安装过程遇到好多问题,在此与大家分享. 1. 下载 ...

  3. pandas(八)重塑和轴向旋转

    重塑层次化索引 层次化索引为DataFrame的重排提供了良好的一致性操作,主要方法有 stack :将数据的列旋转为行 unstack:将数据的行转换为列 用一个dataframe对象举例 In [ ...

  4. Maven项目settings.xml的配置

    原文地址 http://www.cnblogs.com/DreamDrive/p/5571916.html 在Maven中提供了一个settings.xml文件来定义Maven的全局环境信息.这个文件 ...

  5. socketserver 源码剖析:

    socketserver 源码剖析[有图有真相]: (一).Socketserver 内部流程调用图:        详解:  1.self.RequestHandlerClass() = MyCla ...

  6. go——反射

    反射(reflect)让我们能在运行期探知对象地类型信息和内存结构,这从一定程度上弥补了静态语言在动态行为上地不足.和C数据结构一样,Go对象头部并没有类型指针,通过其自身是无法在运行期获知任何类型相 ...

  7. html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用

    <!-- a:  a{ /*清除a标签的下划线*/ text-decoration: none; }  (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...

  8. HTTP与服务器的四种交互方式

    Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...

  9. Saltstack 命令行:批量发送命令,返回执行结果

    批量发送发送命令符,并返回结果. salt '*' cmd.run 'df -h' ---------------------------------------- Stest1: Filesyste ...

  10. HTML5侧滑聊天面板

    在线演示 本地下载