a毛 jquery 学习记 2(下) 基础核心

最新推荐文章于 2023-02-23 21:39:11 发布

一平米

最新推荐文章于 2023-02-23 21:39:11 发布

阅读量783

点赞数

分类专栏： jquery学习

本文链接：https://blog.csdn.net/pymxb1991/article/details/51045827

版权

jquery学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

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')
 };

但是这样写真的好吗？具体原因看一下如下对比

在实际应用中，我们都很少直接去使用window.onload，因为他需要等待图片之类的大型元素加载完毕后才能执行JS代码。所以，最头疼的就是网速较慢的情况下，页面已经全面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态。并且只能执行单次在多次开发和团队开发中会带来困难。

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知识点

一平米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
a毛 jquery 学习记 2(下) 基础核心

jquery 学习二（下）注意：此处需要javascript 基础，如果完全没有一点基础的是没有办法学习的 1、代码风格 2、加载模式 3、对象互换 4、多个库之间的冲突
复制链接

扫一扫

专栏目录