jQuery学习之旅 Item5 $与jQuery对象
2015-10-27 16:03
531 查看
1、$符号的由来
$符号本质就是函数的名字。jquery源码分析
通过分析我们知道,在jquery里边不只可以使用$符号,还可以使用jQuery标志
解决冲突问题
有的项目是中间过渡项目(prototype和jquery框架都有使用)
prototype框架也使用$符号
jquery里边也使用符号现在就分不清楚符号到底是prototype框架的 还是 jquery框架的
jquery本身有方法可以是的$符号的使用权被让出来
jQuery.extend({ noConflict: function( deep ) { //使用一个空变量_$,把$符号给覆盖 window.$ = _$; if ( deep ) { //使用一个空变量_jQuery把jQuery使用权收回 window.jQuery = _jQuery; } return jQuery; },
<script> //通过jquery指定方法让出$符号的使用权 //被让出使用权的$符号,就不能出现在jquery的应用里边 //var jq = $.noConflict(); //收回$符号使用权 var jq = $.noConflict(true); //"$符号"和"jQuery"两个使用权都被收回 function f1(){ //alert($("div").html()); //alert(jQuery("div").html()); console.log(jq("div").html()); console.log(jQuery("div").html()); //不允许使用jQuery } </script> <body> <div>I am bread</div> <input type="button" value="触发" onclick="f1()" /> </body>
2、jQuery对象与dom对象的区别和联系
jquery对象——$(“li”)dom对象——document.getElementById(‘one’);
1. jquery对象创建过程中如何封装dom代码
结论:
$(“#one”)[0] = document.getElementById(‘one’);
2. jquery对象转化为dom对象
a) jquery对象[下标] 例如
$(“#one”)[0]
//jquery对象调用dom对象的方法 $("#one")[0].setAttribute("class","pear");//说明jquery对象转化为了dom对象
在jquery对象里边获得指定的dom对象
$(“li”)多个节点
//jQuery 对象转换为Domd对象 $("li")[3].style.color ="red";
3. dom对象转换为jquery对象
a) var dv = document.getElementById(‘id’);
b) $(dv) 转化完毕
//$("#one").css('color','red'); //$("#one")就是对dom代码的封装(document.getElementById) //利用dom对象调用jquery的方法(失败) var dv = document.getElementById("one"); //jquery封装dom代码(dom对象) //$(dv) dv是div元素节点 nodeType=1(dom对象转化为jquery对象) $(dv).css("color","green");
3、jquery对象分析
jquery对象创建:jQuery.fn.init(); (从105行——219行)但是 css() html() attr() addClass()等方法在 100多行的init()里边没有具体的操作方法
下面来分析代码结构:
jQuery.fn 代码:104—338行
jQuery.fn.init 代码:105—219行
jQuery.fn.init.prototype = jQuery.fn;
jQuery.fn.init通过原型链继承jQuery.fn
jQuery.fn.init创建——>jQuery.fn.init 继承 ——> jQuery.fn (例如 length、jquery、size属性调用 ——> jQuery.fn 继承extend 冒充继承 (例如 addClass attr removeAttr)
jQuery.fn.init.prototype = jQuery.fn; jQuery.extend = jQuery.fn.extend = function() {}
jquery对象创建完毕需要向上继承两层关系
jquery之所以会调用许多相关方法,也是继承得来的方法
jquery在使用的时候可以使用两种对象
$(“#one”) 是普通jQuery.fn.init创建出来的对象
$.get(“url”) 不是jQuery.fn.init创建,而是jquery内部的jQuery对象
例如:
$.noConflict()
$符号就是内部jQuery对象
该对象$,代码行数22—915行
$符号对象本身也有冒充继承,我们直接调用$符号的相关方法,首先去22-915行找,如果没有,就去extend继承方法里边找
系统里边有两套extend冒充继承:普通jquery对象的、$符号的
4、总结:
1、 $符号由来2、 jquery对象与dom对象互相转化
3、 jquery对象分析
a) jquery生成好的对象继承 jQuery.fn
b) jQuery.fn 通过冒充继承 extend,又得到了许多属性和方法
相关文章推荐
- jquery实现搜索提示效果
- jquery实现搜索提示效果
- 比较经典的Jquery代码
- 创建jQuery插件示例
- jQuery unbind() 方法
- jQuery MiniUI开发系列之:安装部署
- jQuery MiniUI开发系列之:安装部署
- JQuery基本操作
- javascript-jquery笔记
- Jquery正则表达式公式.例子
- 夺命雷公狗jquery---26事件冒泡介绍和阻止方法
- jQuery Validation Engine表单验证为false
- jQuery单击按钮,按钮变,内容展开
- jQuery结合elevateZoom演示多种放大镜效果
- JSP+JQuery Ajax+Servlet 实现轮询方式消息提示功能
- jQuery的选择器中的通配符[id^='code']
- 夺命雷公狗jquery---25事件绑定中的this指向
- 基于Jquery ajax技术实现间隔N秒向某页面传值
- jquery "缺少标识符、字符串或数字"
- jquery 字符串转数字