锋利的jQuery——读书笔记一
2017-01-07 本文已影响115人
小夫特
之前照着菜鸟教程把jQuery的基本知识学了一遍了，用的时候还是 Excuse me？ 还是那句话说的好，书到用时方恨少。之前一直在网上学习知识，每次不会用时再去百度，或者查api，经常遇到一类问题，比如，上次看的比较好的那篇文章呢？而且各种问题百度了N久还是没有找到解决方法就比较头疼了。所以，买纸质书，也是我个人比较喜欢的学习方式。看书，划重点，练习，遇到不会的就翻目录去找~nice
锋利的 jQuery
01 认识jQuery
知己知彼，百战百胜~
jQuery 是一个 JavaScript 库
- 将选择器、事件处理机制、链式操作和Ajax都封装起来，更方便的去操作 wirite less ，do more
- 使用的时候在页面引入jQuery即可
- jQuey的优势，在后面的学习中去提到，这里就不抄书了
第一个jQuery代码
//引入jQuery
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('hello word');
});
//简化
$(function(){
alert('hello word');
});
</script>
- 这里的 ready 方法类似于 Javascript 里的 window.onload
- 不同点：
- onload必须等网页内容加载完毕，包括图片才能执行，而jQuery的ready，所有Dom结构绘制完毕就可以执行
- 而jQuery的ready可以编写多个，例如上述代码就会弹出两个弹出框，并不会报错。而 onload 代码中只可以有一个
02 jQuery对象 和 DOM对象
这一块个人觉得是比较重要的一点，之前没搞懂的时候，jQuery对象和DOM对象的方法各种乱用，还自以为对的~然后就出现了以下错误
$('#foo').innerHtml
//jQyery选择器和DOM方法 也是服了我自己个```
#####DOM（Document Object Model）文档对象模型
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="">我的链接</a>
<h1>我的标题</h1>
</body>
</html>
无论是这里的<body>,`<a>`元素 或者 `<h1>`都是DOM元素节点，都可以通过 **Javascript** 里的 **getElementsByTagName** 或者 **getElementsById** 方法去获取元素的节点，换句话说，通过 **getElements** 方法获得的都是DOM元素节点
####jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象可以使用jQuery里的方法。
**eg：** 获取id为foo元素内的html代码
$('#foo').html(); //jquery方法
//等价于
document.getElementsById('foo').innerHtml; //DOM方法
DOM方法和jQuery方法不能互用，也就是我之前翻的错误
####DOM对象和jQuery对象互相转换
- 首先，我们需要有一定的变量风格，以便代码的易理解
- 如果获取的对象是**jQuery**对象，那么在变量前面加上$
- 例如`var $foo = $('#foo');`
#####**jQuery** 对象转换为 **DOM对象**
- `var foo = $foo[0] //[index]方法`
- `var foo = $foo.get[0] //get[index]方法`
#####**DOM**对象转换为**jQuery**对象
- `var foo = document.getElementsById('foo'); //DOM对象
var $foo = $(foo); //jQuery对象
`
- 转换后就可以任意使用jQuery方法
- **$()** 函数就是 jQuery对象的制造工厂
## 03 解决jQuery库和其他库的冲突
-----------------------------------------------
这里就有一个jQuery的优势：不污染顶级变量
####jQuery库在其他库之后导入
在其他库和**jQuery**库都被加载完毕后，可以在任何时候调用** jQuery.noCOnflict();** 函数来将变量**$**的控制权移交给其他Javascript库
- 移交后jQuery 方法使用` jQuery.('p').click(function(){})`
- 其他Javascript库就可以使用了
- 或者定义其他的快捷方式 `var $j = jQuery.noCOnflict();`
- 或者在移交后在加载函数里把**$**参数带入，内部便可以使用，
`jQuery(function($){ //内部可以使用$ })`;
#### 在其他库之前导入**jQuery**库
- 无须使用**jQuery.noCOnflict();**函数，可以直接使用**jQuery**来做jQuery操作
>这仅仅本人在看书过程中，觉得很重要或者自己之前一直有疑问的地方，仅以此文记录读书过程。如有错误还请大家指出，下一章，选择器
