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. linux c编程:读写锁

    什么是读写锁读写锁其实还是一种锁,是给一段临界区代码加锁,但是此加锁是在进行写操作的时候才会互斥,而在进行读的时候是可以共享的进行访问临界区的 为什么需要读写锁有时候,在多线程中,有一些公共数据修改的 ...

  2. JQuery操作select中的option

    html页面代码例如以下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. python的初识

    解释型语言 和编译型语言 计算机本身不能识别高级语言,当我们运行一个程序的时候,需要一个“翻译” 来把 高级语言转换成计算机能读懂的语言. “翻译”过程分两种: 编译 编译型语言在执行程序前,首先会通 ...

  4. python16_day02【列表、字典】

    1.列表 names = ['Alex',"Tenglan",'Eric'] >>> names[0] 'Alex' >>> names[2] ...

  5. org.springframework.beans.factory.config.PropertyPlaceholderConfigurer类

    <bean id="investorQueryConfigurer" class="org.springframework.beans.factory.config ...

  6. LightOJ - 1370 Bi-shoe and Phi-shoe (欧拉函数打表)

    题意:给N个数,求对每个数ai都满足最小的phi[x]>=ai的x之和. 分析:先预处理出每个数的欧拉函数值phi[x].对于每个数ai对应的最小x值,既可以二分逼近求出,也可以预处理打表求. ...

  7. Javascript Array对象 sort()方法,记忆方法,方法扩展

    相信 有很多 同仁们,尤其是初学者,在记住 Array对象 sort() 方法的排序,规则上,有点困难: 其实sort()方法已经在实际工作中用到很多遍了,可当我仔细推敲,这个sort()方法,什么时 ...

  8. Spark机器学习8· 文本处理(spark-shell)

    Spark机器学习 自然语言处理(NLP,Natural Language Processing) 提取特征 建模 机器学习 TF-IDF(词频 term frequency–逆向文件频率 inver ...

  9. 利用ST MCU内部的基准参考电压监测电源电压及其它

    源: 利用ST MCU内部的基准参考电压监测电源电压及其它

  10. 【Java Web】新手教程(转)

    转自:http://www.journaldev.com/1854/java-web-application-tutorial-for-beginners#web-server-client Web ...