jQuery学习 <01>（green bird level） |study by myself

小景儿
141 阅读5分钟

前情提要：

本篇笔记仅记录自己学习前端的心路历程

资料源自互联网

仅供参考学习交流，没有商业目的

若您认为侵权请联系本人删除，本人不负法律责任

-----------------------------------分割线--------------------------------------------

  1. 什么是jQuery
  2. jQuery特色
  3. 为什么要学习 jQuery
  4. 配置 jQuery 环境
  5. jQuery 语法
  6. jQuery 代码风格
  7. jQuery 对象和 DOM 对象
  8. 解决 jQuery 和其他库的冲突

-----------------------------------分割线--------------------------------------------
1.什么是jQuery
jQuery 是开源软件 jQuery 使得许多操作变得容易， 如操作文档对象（document）、 选择文档对象模型（DOM）元素、 创建动画效果、 处理事件、 以及开发 Ajax 程序

总结：我们可以简单的理解为 jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

image.png -----------------------------------分割线---------------------------------------------------
2.jQuery特点：

  • 轻量级。
  • 强大的选择器。
  • 出色的 DOM 操作的封装。
  • 可靠的事件机制。
  • 完善的 ajax。
  • 不污染顶级变量。
  • 出色的浏览器兼容性。
  • 链式操作方式。
  • 隐式迭代。
  • 行为层与结构层的分离。
  • 丰富的插件支持。
  • 完善的文档。
  • 开源。


-----------------------------------分割线--------------------------------------------

3.我们为什么要学习jQuery？

  1. （1）因为 jQuery 真的很简单，甚至都不需要你会多少 JavaScript，你就可以学会，
    我们可以简单的学一下 jQuery 的思想， 有利于我们去学习现在主流的三大框架：vue，react，angular。
  2. （2）虽然 jQuery 已经渐渐的退出了历史舞台，新写的项目都很少会再使用 jQuery 了，但是其实很多大公司的一些老项目还是有用到 jQuery 的，其实大厂会有很多老项目需要维护的，这个时候就算你懂前端所有的新技术，但是在大厂你负责的项目可能需要你对 jQuery 有深入的理解，这样你才能维护好这个项目。
  3. （3）在竞争日益激烈的互联网环境下，多学点东西总是没坏处的，而且它真的很简单，我们花了几天来学习一下又有何不可？简历上也能多写一项会的技能。
  • jQuery：我们考虑如何操作 DOM，jQuery 考虑如何让我们更方便地操作 DOM。
  • vue 和 React：我们考虑如何操作数据，框架考虑如何将改变后的数据更新到界面。


-----------------------------------分割线--------------------------------------------

4配置jQuery环境
进入 jQuery 的官方网站 http://jquery.com/,可以下载最新的 jQuery 文件到本地，然后再引入到项目即可。

image.png

5.jQuery语法
基础语法

$(selector).action();

注解： 美元符号$定义jQuery。 选择符（selector）“查询/查找”HTML元素。 jQuery的action（）执行对元素的操作。

ps：$就是jQuery的简写形式


`$("#syl")`  和  `jQuery("#syl")`  是等价的，
`$.ajax` 和 `jQuery.ajax` 是等价的，
如果没有特别说明，程序中的 `$\` 符号都是 jQuery 的一个简写形式。

文档就绪函数

所有jQuery函数位于一个document ready函数中：

$(document).ready(function(){ }); 
//
可以简写成 $(funciton(){ });

防止文档在完全加载（就绪）之前运行 jQuery 代码

如果在文档没有完全加载之前就运行函数，操作可能失败。

例如：
试图隐藏一个不存在的元素
获取未完全加载的图像的大小

上面的这段代码其实有点类似于传统 JavaScript 中的 window.onload 方法， 不过它们还是有一些区别的

image.png

编写个数的意思是：

window.onload = function () { alert("test1"); }; 
window.onload = function () { alert("test2"); }; //结果只会输出 test2。

$(document).ready(function () { alert("test1"); }); 
$(document).ready(function () { alert("test2"); }); //结果两次都输出

编写我们的第一个 jQuery 程序

例子：

<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title></title> 
        <!-- Google 的 CDN 的方式加载jQuery，请大家自行修改为本地 --> 
        <script 
         type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"
    ></script> 
   </head>
  <body> 
      <script type="text/javascript"> 
      //等待dom元素加载完毕
      $(document).ready(function () { 
       //弹出一个框:显示hello syl 
        alert("hello syl"); 
        });
        </script> 
    </body> 
  </html>

运行效果为：

image.png


-----------------------------------分割线--------------------------------------------

6.jQuery的代码风格 举个例子：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" />
<title></title> 
<script type="text/javascript" src="jquery.min.js">
</script> 
</head>
<body>
<div class="box"> 
<ul class="menu"> 
<li class="level1"> 
<a href="#">春天</a> 
<ul class="level2"> 
<li>春意盎然</li>
<li>春意盎然</li>
<li>春意盎然</li> 
<li>春意盎然</li>
</ul> 
</li> 
<li class="level1">
<a href="#">夏天</a>
<ul class="level2">
<li>夏日炎炎</li> 
<li>夏日炎炎</li>
<li>夏日炎炎</li> 
<li>夏日炎炎</li> 
</ul>
</li> 
<li class="level1">
<a href="#">秋天</a> 
<ul class="level2">
<li>秋高气爽</li>
<li>秋高气爽</li> 
<li>秋高气爽</li> 
<li>秋高气爽</li> 
</ul> 
</li> 
</ul> 
</div> 
<script type="text/javascript"> 
//等待dom元素加载完毕 
$(document).ready(function () {
$(".level1>a").click(function () {
$(this) 
.addClass("current")
.next() 
.show() 
.parent()
.siblings()
.children("a")
.removeClass("current") 
.next() 
.hide();
return false;
}); 
}); 
</script>
</body> 
</html>

解释一下这段代码， 当鼠标点击到 a 标签的时候给其添加一个名为 current 的 class， 然后调用 next() 和 show() 将其后面的元素显示出来， 然后调用 parent()、siblings()、children("a") 将它的父辈的同辈元素的内部的子元素 a 都去掉一个名为 current 的 class (removeClass("current"))， 并且将紧邻它们后面的元素都隐藏。

推荐一种写法：

$(document).ready(function () { 
$(".level1>a").click(function () { 
$(this) 
.addClass("current") //给当前元素添加"current"样式
.next() 
.show() //下一个元素显示 
.parent() 
.siblings() 
.children("a") 
.removeClass("current") //父元素的同辈元素的子元素a移除"current"样式 
.next() 
.hide(); //它们的下一个元素隐藏 return false; 
});
});

也就是说适当的换行和添加注释可以让我们对代码作用一目了然，

增加代码的可读性，便于日后的维护，提高开发效率。


-----------------------------------分割线--------------------------------------------

7.jQuery对象和DOM对象
DOM （Document Object Model）对象，也就是我们经常说的文档对象模型，每一份 DOM 都可以表示成一棵 DOM 树：

image.png

比如这样的一段代码：

<h1></h1> <p></p> <ul> <li></li> </ul>

h1,p,ul 以及 li 标签都是 DOM 元素节点 我们可以通过 JavaScript 中的 document.getElementById()，document.getElementsByTagName() 等来获取元素节点，像这样获取的 DOM 元素就是 DOM 对象，DOM 对象可以使用 JavaScript 中的方法
比如:

var domObj = document.getElementById("id"); //获取DOM对象 
var objHtml = domObj.innerHTML; //使用JavaScript中的属性innerHTML

 jQuery 对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，如果一个对象是 jQuery 对象，那么它就可以使用 jQuery 里的方法，比如：

$("#syl").html(); //获取id为syl的元素内的html代码，html()是jQuery中的方法
这段代码等同于：
document.getElementById("syl").innerHTML;

在 jQuery 对象中无法使用 DOM 对象中的任何方法，

例如

$("#syl").innerHTML;

之类的写法是错的，

可以使用 $("#syl").html(); 之类的 jQuery 方法来代替，

同样的道理，DOM 对象也不能使用 jQuery 里的方法，

例如:document.getElementById("syl").html();也是会报错的。

注：用 #id 作为选择符取得的是 jQuery 对象

而并非 document.getElementById("id"); 所得到的 DOM 对象，

两者并不等价。

我们一定要从开始就树立这样的一个观念：
jQuery 对象和 DOM 对象是有区别的，它们并不是等价的。

jQuery 对象和 DOM 对象之间的相互转换

jQuery对象转换为DOM对象

本情况适用于jQuery对象不能使用DOM中的方法，但又不得不使用DOM方法。 （对jQuery所提供的方法不熟悉/忘了，但知道DOM方法，懒得查jQuery手册/jQuery本身就没有封装我们想要使用的方法。的处理手段） - [index]:jQuery 对象是一个类似数组的对象，可以通过 `[index]` 的方法得到对应的 DOM 对象，比如： 
var $cr = $("#cr"); //jQuery 对象 var cr = $cr[0]; //DOM 对象
  • 通过 get(index) 方法得到相应的 DOM 对象，比如：
var $cr = $("#cr"); //jQuery 对象 var cr = $cr.get(0); //DOM 对象

DOM对象转换为jQuery对象

对于一个 DOM 对象，

只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了，

比如：

var cr = document.getElementById("cr"); //DOM 对象 var $cr = $(cr); //jQuery 对象

注：这里再次强调一次，DOM 对象才能使用 DOM 中的方法，jQuery 对象不可以使用 DOM 中的方法，但 jQuery 对象提供了一套更加完善的工具用于操作 DOM，在后面的学习中，我们都会为大家一一的进行讲解。

我们平时用到的 jQuery 对象都是通过

()函数制造出来的，

()函数制造出来的，() 函数就是一个 jQuery 对象的制造工厂。

DOM 方式判断复选框是否被选中：

<!DOCTYPE html>
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js">
</script>
</head> 
<body>
<input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label> 
<script type="text/javascript"> 
//等待dom元素加载完毕
$(document).ready(function () { 
var $cr = $("#cr"); //jQuery对象 
var cr = $cr[0]; //DOM对象，或者$cr.get(0)
$cr.click(function () { 
if (cr.checked) { 
//DOM方式判断 alert("你已同意本协议");
}
}); 
}); 
</script> 
</body>
</html>

document-uid897174labid9222timestamp1554863100406.gif

jQuery 方式判断复选框是否被选中：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" />
<title></title> 
<script type="text/javascript" src="jquery-3.3.1.js">
</script> 
</head> 
<body> 
<input type="checkbox" id="cr" /><label for="cr">我已阅读协议</label> 
<script type="text/javascript"> 
//等待dom元素加载完毕
$(document).ready(function () {
var $cr = $("#cr");
$cr.click(function () { 
if ($cr.is(":checked")) { 
alert("你已同意本协议");
} 
}); 
});
</script> 
</body> 
</html>

注：上面的例子简单的演示了 DOM 对象和 jQuery 对象的不同，但是最终的运行效果是一样的。


-----------------------------------分割线--------------------------------------------

8.解决 jQuery 和其他库的冲突

其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。当然，我们仍然可以通过全名替代简写的方式来使用 jQuery：

<!DOCTYPE html> 
<html> 
<head>
<meta charset="utf-8"> 
<title></title>
<script type="text/javascript" src="jquery-3.3.1.js">
</script> 
</head> <body>
<p>这是一个段落。</p>
<button>点我</button> 
<script type="text/javascript">
//等待dom元素加载完毕 
$.noConflict();
jQuery(document).ready(function() { 
jQuery("button").click(function() { 
jQuery("p").text("jQuery 仍然在工作!");
});
}); 
</script> 
</body> 
</html>

我们也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，我们可以把它存入变量，以供稍后使用：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /> 
<title></title> 
<script type="text/javascript" src="jquery-3.3.1.js">
</script>
</head> 
<body> 
<p>这是一个段落。</p> 
<button>点我</button> 
<script type="text/javascript"> 
//等待dom元素加载完毕 
var jq = $.noConflict(); 
jq(document).ready(function () { 
jq("button").click(function () { 
jq("p").text("jQuery 仍然在工作!");
});
}); 
</script>
</body> 
</html>

如果你的 jQuery 代码块使用简写，并且您不愿意改变这个快捷方式，那么您可以把简写，并且您不愿意改变这个快捷方式，那么您可以把简写，并且您不愿意改变这个快捷方式，那么您可以把符号作为变量传递给ready方法。这样就可以在函数内使用 符号作为变量传递给 ready 方法。这样就可以在函数内使用  符号了，而在函数外，依旧不得不使用 "jQuery"：

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" /> 
<title></title> 
<script type="text/javascript" src="jquery-3.3.1.js">
</script>
</head>
<body> 
<p>这是一个段落。</p> 
<button>点我</button> 
<script type="text/javascript">
//等待dom元素加载完毕 
$.noConflict(); 
jQuery(document).ready(function ($) { 
$("button").click(function () {
$("p").text("jQuery 仍然在工作!");
}); 
}); 
</script>
</body>
</html>

运行效果都为：

document-uid897174labid9222timestamp1554867060642.gif


-----------------------------------分割线--------------------------------------------

本篇笔记仅记录自己学习前端的心路历程

资料源自互联网

仅供参考学习交流，没有商业目的

若您认为侵权请联系本人删除，本人不负法律责任

avatar
文章
阅读
粉丝