a毛 jquery 学习记 2(下) 基础核心
2016-04-03 01:29
363 查看
jquery 学习二 (下)
参考资料:李炎恢老师的视频 + 锐利的jquery.pdf
我自己练习的包也源码已经上传到我的csdn,需要参考的可以去下载
注意:学习jquery需要有一些javascript /html/css基础,如果完全没有一点基础的是没有办法学习的;在我以后的笔记本用到的知识点我会写到,如果有实在看不懂的,给我评论,我会在下次的笔记中有说明。
今天主要先说一下jquery核心问题,为后面的学习做点铺垫;
在做练习的时候,把上节的内容三个文件复制一份,建一个2文件夹放进去,都打开,做如下操作
首先在index.html中: 把<input>标签换成<div>标签 代码如下
接下来开始做我们的一些示例;(对dom.js的操作)
1、代码
在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写:
以上代码 要实现的功能就是:选择id = box的属性,给他加css样式是 red
在jquery 中 “$”就是一个jQuery对象;它有一个原本的对象就叫“jQuery” 它就是jQuery的缩写形式;
也就是说:($ === jQuery) 是恒成立的
执行如下代码:看一下效果,与上面那断代码显示是否一样
注意:执行前先把上面代码给注释掉;以下操作都一样,执行一段新写的代码把旧的先注释掉,方便我们看效果;
也可以执行如下代码看效果:最终页面显示效果是,true
在执行功能函数的时候,我们发现.css()这个功能函数并不是直接被“$”或jQuery对象调用执行的,而是先获取元素后,返回某个对象再调用.css()这个功能函数。那么也就是说,这个返回的对象其实也就是jQuery对象。
做下面的示例看一下具体显示效果;在加深理解一下上面这段话的含意
下面同样;
值得一提的是,执行了.css()这个功能函数后,最终返回的还是jQuery对象,那么也就是说,jQuery的代码模式是采用的连缀方式,可以不停的连续调用功能函数。
jQuery中代码注释和JavaScript是保持一致的,有两种最常用的注释:单行使用“//...” ,多行使用“/* ... */” 。
2、加载模式
我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹,那么为什么必须要包裹这段代码呢?
原因是我们jQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。
做一个示例如下:
这里是因为:
查看一下html知道,当前页面dom.js是在html页面中引入的,html页面的执行顺序是一行一行的执行;当把上面的代码写到方法外面的时,执行到 <script type="text/javascript" src="dom.js"></script>这行代码时就会去dom.js中逐行执行;而执行到 $('#box').css('color','red');时就会去.html找相应的元素,而此时html以下代码还没执行呢,所以当显示出来时,页面上显示的文字没有效果;
加下面一段代码继续查看效果
windows.onload = function(){ } //当网页内容都加载完成的时候执行function里面的代码
在实际应用中,我们都很少直接去使用window.onload,因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。所以,最头疼的就是网速较慢的情况下,页面已经全面展开,图片还在缓慢加载,这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。
3、对象互换
jQuery对象虽然是
jQuery
库独有的对象,但它也是通过
JavaScript
进行封装而来的。 我们可以直接输出来得到它的信息。
alert($);//jQuery对象方法内部
alert($());//jQuery对象返回的对象,还是jQuery
alert($('#box'));//包裹ID元素返回对象,还是jQuery
从上面三组代码我们发现:只要使用了包裹后,最终返回的都是
jQuery
对象。这样的好处显而易见,就是可以连缀处理。但有时,我们也需要返回原生的DOM对象:
4、多个库之间的冲突
当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突)
,库与库之间发生冲突在所难免。那么,既然有冲突的问题,为什么要使用多个库呢?原因是 jQuery 只不过是 DOM 操作为主的库,方便我们日常 Web 开发。但有时,我们的项目有更多特殊的功能需要引入其他的库,比如用户界面 UI 方面的库,游戏引擎方面的库等等一系列。而很多库,比如 prototype、还有我们 JavaScript 课程开发的 Base 库,都使用“$”作为基准起始符,如果想和共容有两种方法:
方法一:
将 jQuery 库在 Base 库之前引入,那么“$”的所有权就归
Base 库所有,而 jQuery 可以直接用 jQuery 对象调用,或者创建一个“$$”符给 jQuery 使用。(下面直接在此写入代码总是有问题,半个小时也没解决,所以以下我只好截图来解决)
首先在html中引入 base.js/tool.js库,置于jQuery库的后面,然后执行如下代码(base.js/tool.js库可以从我的csdn中源码处获取,源码我已经上传)
dom.js如下
以下是我测试的一些结果,大家可以参考一下;
$(function(){
刚才我们已经用过 alert($('#box').get(0)),说明jquery中是有get方法;我们打印试试
如果打印成功就表示是'$'是jquery库的,如果失败就表示'$'已经是base 库的了
alert($('#box').get(0));
以上验证结果是失败 最后通过验证得到:将 jQuery 库在 Base 库之前引入,那么“$”的所有权就归 Base 库所有
base 库中有一个 ge()方法,我们引入试试,查看结果如何
alert($('#box').ge(0)); //最后结果输出了 [object HTMLDivElement]
如果想要正确输出结果应该怎么办呢?我们也可以这样写
alert(jQuery('#box').get(0));
如果觉得麻烦也可以这样做 在方法外部定义jquery:
});
方法二:
如果将 jQuery 库在 Base 库之后引入,那么“$”的所有权就归 jQuery
库所有,而 Base库将会冲突而失去作用。这里,jQuery 提供了一个方法:
首先在html中将jQuery库放置到base.js/tool.js库后面,然后执行如下代码
这就是基础核心的一些内容,从下次开始便正式学习jquery知识点
参考资料:李炎恢老师的视频 + 锐利的jquery.pdf
我自己练习的包也源码已经上传到我的csdn,需要参考的可以去下载
注意:学习jquery需要有一些javascript /html/css基础,如果完全没有一点基础的是没有办法学习的;在我以后的笔记本用到的知识点我会写到,如果有实在看不懂的,给我评论,我会在下次的笔记中有说明。
今天主要先说一下jquery核心问题,为后面的学习做点铺垫;
在做练习的时候,把上节的内容三个文件复制一份,建一个2文件夹放进去,都打开,做如下操作
首先在index.html中: 把<input>标签换成<div>标签 代码如下
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"> <title>jquery 基础核心内容</title> <script type="text/javascript" src="jquery-1.12.2.js"></script> <script type="text/javascript" src="dom.js"></script> </head> <body> <div id = "box"> 基础核心内容</div> </body> </html>
接下来开始做我们的一些示例;(对dom.js的操作)
1、代码
在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所以我们在页面元素选择或执行功能函数的时候可以这么写:
$(function () {}); //执行一个匿名函数 $(‘#box’); //进行执行的ID元素选择 $(‘#box’).css(‘color’, ‘red’); //执行功能函数 // 整体写到一块也就是这样 $(function(){ $('#box').css('color','red'); // #box就是选择属性的id .css添加一个行内的CSS 样式 });
以上代码 要实现的功能就是:选择id = box的属性,给他加css样式是 red
在jquery 中 “$”就是一个jQuery对象;它有一个原本的对象就叫“jQuery” 它就是jQuery的缩写形式;
也就是说:($ === jQuery) 是恒成立的
执行如下代码:看一下效果,与上面那断代码显示是否一样
注意:执行前先把上面代码给注释掉;以下操作都一样,执行一段新写的代码把旧的先注释掉,方便我们看效果;
jQuery(function(){ jQuery('#box').css('color','red'); })
也可以执行如下代码看效果:最终页面显示效果是,true
alert ($ === jQuery);
在执行功能函数的时候,我们发现.css()这个功能函数并不是直接被“$”或jQuery对象调用执行的,而是先获取元素后,返回某个对象再调用.css()这个功能函数。那么也就是说,这个返回的对象其实也就是jQuery对象。
做下面的示例看一下具体显示效果;在加深理解一下上面这段话的含意
alert($); //显示返回的是jquery的内部; alert($()); //显示返回的是jquery的对象 alert($().css('color', 'red')); //显示返回的也是jquery的对象 $().css(‘color’, ’red’); //理论上合法,但实际上缺少元素而报错
下面同样;
jQuery(function(){ alert($); alert($()); alert($('#box')); alert($('#box').css('color','red')); })
值得一提的是,执行了.css()这个功能函数后,最终返回的还是jQuery对象,那么也就是说,jQuery的代码模式是采用的连缀方式,可以不停的连续调用功能函数。
$('#box').css('color', 'red').css('font-size', '50px'); //连缀 alert($('#box').css('color','red').css('fontSize','100').css('fontWeight','bold')); //连缀
jQuery中代码注释和JavaScript是保持一致的,有两种最常用的注释:单行使用“//...” ,多行使用“/* ... */” 。
2、加载模式
我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹,那么为什么必须要包裹这段代码呢?
原因是我们jQuery库文件是在body元素之前加载的,我们必须等待所有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。
做一个示例如下:
$(function(){ }); $('#box').css('color','red');显示结果发现,字体颜色没有变,这是为什么呢:
这里是因为:
查看一下html知道,当前页面dom.js是在html页面中引入的,html页面的执行顺序是一行一行的执行;当把上面的代码写到方法外面的时,执行到 <script type="text/javascript" src="dom.js"></script>这行代码时就会去dom.js中逐行执行;而执行到 $('#box').css('color','red');时就会去.html找相应的元素,而此时html以下代码还没执行呢,所以当显示出来时,页面上显示的文字没有效果;
加下面一段代码继续查看效果
windows.onload = function(){ } //当网页内容都加载完成的时候执行function里面的代码
window.onload = function(){ $('#box').css('color','red') };但是这样写真的好吗?具体原因看一下如下对比
3、对象互换
jQuery对象虽然是
jQuery
库独有的对象,但它也是通过
JavaScript
进行封装而来的。 我们可以直接输出来得到它的信息。
alert($);//jQuery对象方法内部
alert($());//jQuery对象返回的对象,还是jQuery
alert($('#box'));//包裹ID元素返回对象,还是jQuery
从上面三组代码我们发现:只要使用了包裹后,最终返回的都是
jQuery
对象。这样的好处显而易见,就是可以连缀处理。但有时,我们也需要返回原生的DOM对象:
$(function(){ alert($('#box')); //显示的是jquery的对象 alert(document.getElementById('box')); //返回原生DOM对象 (javascript写法) [object HTMLDivElement] alert($('#box').get(0)); // 返回原生DOM对象 (jQuery写法) [object HTMLDivElement] alert($(document.getElementById('box'))); //再把原生对象包裹成jQuery 对象 });以上也就是jQuery跟javascript的互换;
4、多个库之间的冲突
当一个项目中引入多个第三方库的时候,由于没有命名空间的约束(命名空间就好比同一个目录下的文件夹一样,名字相同就会产生冲突)
,库与库之间发生冲突在所难免。那么,既然有冲突的问题,为什么要使用多个库呢?原因是 jQuery 只不过是 DOM 操作为主的库,方便我们日常 Web 开发。但有时,我们的项目有更多特殊的功能需要引入其他的库,比如用户界面 UI 方面的库,游戏引擎方面的库等等一系列。而很多库,比如 prototype、还有我们 JavaScript 课程开发的 Base 库,都使用“$”作为基准起始符,如果想和共容有两种方法:
方法一:
将 jQuery 库在 Base 库之前引入,那么“$”的所有权就归
Base 库所有,而 jQuery 可以直接用 jQuery 对象调用,或者创建一个“$$”符给 jQuery 使用。(下面直接在此写入代码总是有问题,半个小时也没解决,所以以下我只好截图来解决)
首先在html中引入 base.js/tool.js库,置于jQuery库的后面,然后执行如下代码(base.js/tool.js库可以从我的csdn中源码处获取,源码我已经上传)
dom.js如下
以下是我测试的一些结果,大家可以参考一下;
$(function(){
刚才我们已经用过 alert($('#box').get(0)),说明jquery中是有get方法;我们打印试试
如果打印成功就表示是'$'是jquery库的,如果失败就表示'$'已经是base 库的了
alert($('#box').get(0));
以上验证结果是失败 最后通过验证得到:将 jQuery 库在 Base 库之前引入,那么“$”的所有权就归 Base 库所有
base 库中有一个 ge()方法,我们引入试试,查看结果如何
alert($('#box').ge(0)); //最后结果输出了 [object HTMLDivElement]
如果想要正确输出结果应该怎么办呢?我们也可以这样写
alert(jQuery('#box').get(0));
如果觉得麻烦也可以这样做 在方法外部定义jquery:
var $$= jQuery于是代码便可以这样写
alert($$('#box').get(0));
});
方法二:
如果将 jQuery 库在 Base 库之后引入,那么“$”的所有权就归 jQuery
库所有,而 Base库将会冲突而失去作用。这里,jQuery 提供了一个方法:
首先在html中将jQuery库放置到base.js/tool.js库后面,然后执行如下代码
jQuery.noConflict(); //将jQuery 的 '$' 符所有权剔除掉当执行上面代码的时候,'$'的使用权便又交到了base手中了,然后我们在根据上面方法,定义一个$$即可实现自己想要的了,代码如下:
这就是基础核心的一些内容,从下次开始便正式学习jquery知识点
相关文章推荐
- jQuery qrcode生成二维码的方法
- jQuery中的Deferred和promise 的区别
- 【JQuery】stop()函数
- 一个jQuery旋转特效插件
- jQuery挖源码——事件绑定
- a毛 jquery 学习记 2(上) “jquery学习方法 英文网页怎么看”
- JQuery Mobile navbar动态刷新创建
- jQueryMobile(三)
- 【JQuery】animate()
- jQuery基础知识第二部分
- 【JQuery】使用fadeTo()方法设置淡入淡出效果的不透明度
- 【JQuery】fadeIn()和fadeOut()
- 【JQuery】调用live()方法绑定元素的事件
- 10分钟-jQuery事件
- 关于jQuery绑定事件会叠加的解决和心得总结
- jQuery对表单元素的取值和赋值操作代码
- 【JQuery】下拉列表框的change事件
- jQuery-Form Vaildation小项目.
- 【JQuery】文本框的focus和blur事件
- JS原生方法实现jQuery的ready()