jq为什么能用$操作
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为什么能用$操作的更多相关文章
- js与jq对数组的操作
一.数组处理 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长 ...
- JQ系列:css操作
JQ中的 .css()有三种使用方法: $('#p').css('width'); 取得ID为p的样式属性的width值;等同 return width $('#p').css('width','10 ...
- 总结前端JQ常用的一些操作手法(慢慢完善)
1.实例化Js一个object对象,把它当做类来用,事例是操作url的参数 function GetRequestCondition() { var url = window.location.hre ...
- jq 复习帖子 常用操作
1绝对定位(abs)与相对定位(relative) 区别是相对定位参照自己的位置进行移动(当然需要设置top left这些生效)并且原来的位置保留着 偏移后会把其它的层遮罩住 绝对定位就 ...
- Jq如何获取并操作iframe中的元素?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 【JQ基础】DOM操作
内部插入:append() //向每个匹配的元素内部追加内容,可包含 HTML 标签 $(selector).append(function(index,html)) /*•index - 可选.接收 ...
- [jQ]jQuery显式操作Checkbox,并用数组存储关联值的方案
---------------------------------------------------------------------------------------------------- ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
- JQ封装切换滚动功能
/*---------控制滚动图片v1(作者:SFLYQ)-----------Options 配置对象,(用来配置控制元素的dom位置,初始化一些必要的对象或者方法)DoIni 初始化操作(初始化元 ...
随机推荐
- Java Synchronized 与 ThreadLocal 异同
同:都是为了线程安全 异:synchronized是利用锁的机制,使变量或代码块在某一时该只能被一个线程访问.而ThreadLocal为每一个线程都提供了变量的副本, 使得每个线程在某一时间访问到的并 ...
- window下安装php的imagick和imagemagick扩展教程
最近的PHP项目中,需要用到切图和缩图的效果,在linux测试服务器上很轻松的就安装好php imagick扩展.但是在本地windows开发环境,安装过程遇到好多问题,在此与大家分享. 1. 下载 ...
- pandas(八)重塑和轴向旋转
重塑层次化索引 层次化索引为DataFrame的重排提供了良好的一致性操作,主要方法有 stack :将数据的列旋转为行 unstack:将数据的行转换为列 用一个dataframe对象举例 In [ ...
- Maven项目settings.xml的配置
原文地址 http://www.cnblogs.com/DreamDrive/p/5571916.html 在Maven中提供了一个settings.xml文件来定义Maven的全局环境信息.这个文件 ...
- socketserver 源码剖析:
socketserver 源码剖析[有图有真相]: (一).Socketserver 内部流程调用图: 详解: 1.self.RequestHandlerClass() = MyCla ...
- go——反射
反射(reflect)让我们能在运行期探知对象地类型信息和内存结构,这从一定程度上弥补了静态语言在动态行为上地不足.和C数据结构一样,Go对象头部并没有类型指针,通过其自身是无法在运行期获知任何类型相 ...
- html-2, a img ul li ol dl dt dd 标签与列表标签的简单使用
<!-- a: a{ /*清除a标签的下划线*/ text-decoration: none; } (1)超链接 href 超链接的地址 target: _self 默认 在当前中打开链接地 ...
- HTTP与服务器的四种交互方式
Http定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE.URL全称是资源描述符,我们可以这样认为:一个URL地址,它用于描述一个网络上的资源,而HTTP ...
- Saltstack 命令行:批量发送命令,返回执行结果
批量发送发送命令符,并返回结果. salt '*' cmd.run 'df -h' ---------------------------------------- Stest1: Filesyste ...
- HTML5侧滑聊天面板
在线演示 本地下载