对于jQuery的初步印象
主要是阐述一些对jQuery的初步印象！
What? 什么是jQuery?
-- 引用自百度百科
“jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计宗旨是“write Less, Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、 Safari 2.0+、 Opera 9.0+等。"
更多详细介绍请点击
百度百科-jQuery链接
Why? 为什么要用jQuery?
原生的DOM API
- 难用
- 存在各种兼容性问题
- 功能太少，不能与时俱进
jQuery
- 轻量级
- 简洁优雅，减少代码量， 写得少，做得多， 链式调用
- 兼容性好，
- API友好，符合人类直觉
- 功能强大，与时俱进
这个网站可视化的展示了jQuery的优势
When? 什么时候用jQuery?
- DOM操作较多（事件监听）
- 简单的AJAX
- 需要兼容多款浏览器
什么时候不用jQuery?
- 页面交互极为简单
- 页面对流量有苛刻的要求
- 团队已经有了jQuery的替代品
能用jQuery做什么？
Selectors, 方便快捷地选择DOM元素
使用原生JavaScript的方式来遍历DOM以及查找DOM的某个部分编写很多冗余的代码。jQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用，从而抛开了getElementById、getElementsByTagName，getElementsByClassName等等。
$('div.content') //找到所有应用.content clss样式的div中所有的p标签 //简洁优雅 //当然javaScript的Selectors API也很强大，也支持通过CSS选择符查询DOM文档获得元素的引用。但是也要考虑到浏览器的兼容，这也就是jQuery的优势。 //document.querySelecor('div.content')- Traversing, DOM遍历
提供各种强大的过滤器对结果进行筛选，缩小选择结果。
遍历封装的相关方法 .eq(), .first(), .last(), .find(), .has(), .next(), .parent(), .parents()。
- Manipulation， DOM元素的操作
创建复制增加删除元素封装的相关方法：例如 $('htmlElemtn'),.add(), .remove()，.empty(), .clone()。
样式封装的相关方法: .addClass(), removeClass(), toggleClass(), hasClass()等等。
属性封装的相关方法: .attr(), removeAttr()等等。
位置封装的相关方法: .before(), .after(), insertBefore(), insertAfter(), .append(), .appendTo(), prepend(), prependTo()等等。
元素取值赋值封装的相关方法：.text(), html()。
- Utilities，实用程序(工具方法)
例如： jQuery.each(), jQuery.isArray(), jQuery.trim()等等
- Events, 事件操作
事件封装的相关方法: .on(), .off(), .load(), .bind(), .blur()等等
- Effects, 特殊效果
特殊效果封装的相关方法： .animate(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .slideToggle()等等
- AJAX
Ajax封装的相关方法： jQuery.get(), jQuery.post(), .ajaxStart(), .ajaxSend(), .ajaxSuccss(), .load(), jQuery.getJSON(), jQuery.getScript() 等等
Difference?
jQuery对象和DOM原生对象有什么区别？ 如何转化？
jQuery选择器得到jQuery对象和原生JavaScript中的选择符得到的DOM对象是不同类型的，不等价。
jQuery无法使用原生DOM对象的任何方法，同理Dom对象也不能使用jQuery里的方法。
<div class="content">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
var $aDiv = $('div').find('p');
var aDiv = document.querySelectorAll('div p');
var bDiv = document.getElementsByTagName('p');
console.log($aDiv); // prevObject: jQuery.fn.init(3)
console.log(aDiv); // _proto_: NodeList(3)
console.log(bDiv); // _proto_: HTMLCollection(3)
//三者得到的对象都是不同的
//$aDiv === aDiv false
//$aDiv === bDiv false
//aDiv === bDiv false
//通过[index]中括号语法可以在两者之间进行转化。
//$aDiv[0] === aDiv[0] true
//$aDiv[0] === bDiv[0] true
//aDiv[0] === bDiv[0] true
</script>从以上代码可以看出
$aDiv = $('div').find('p') 是jQuery特有的对象 prevObject: jQuery.fn.init(3)。
aDiv = document.querySelectorAll('div p')的原型是NodeList。
bDiv = document.getElementsByTagName('p')的原型是HTMLCollection。
三者之间都不等价。
jQuery中有一个包装集概念，包装集就是用伪数组实现的。
var $objArr = {
0: '<p>1</p>',
1: '<p>2</p>',
2: '<p>3</p>',
length: 3
}
for(var i = 0; i < $objArr.length; i++) {
console.log($objArr[i])
}
// <p>1</p> , <p>2</p>, <p>3</p>以上代码以对象字面量的形式定义了一个对象$objArr,通过这个对象模拟数组，即伪数组对象。JavaScript中获取一个对象的属性值， 可以使用obj.propery 或者 obj['property']，对象中的property属性以数字开头的时候，用中括号obj['propery']获取值的时候可以不加引号，即obj[property]。 在上面的例子中就是，$objArr[1]，$objArr[2]， $objArr[3]。
是不是很熟悉？
jQuery对象转化为原生DOM对象的其中一种方式就是：$jQueryObj[index]。
所以
//通过[index]中括号语法可以在两者之间进行转化。
//$aDiv[0] === aDiv[0] true
//$aDiv[0] === bDiv[0] true
//aDiv[0] === bDiv[0] true有了上面的了解， 原生DOM对象转jQuery对象理解起来就简单多了，$(原生DOM对象)的方法，将原生DOM对象转化为jQuery对象。 $是一个方法，调用该方法，将原生DOM对象作为参数传入，$方法内部对原生DOM对象做进一步的加工，使其成为一个包装集，即伪数组对象。
jQuery如何绑定事件？
jQuery有很多绑定事件的方法。
- .bind( eventType [, eventData ], handler ), bind(捆绑) 为每个匹配元素的特定事件绑定事件处理函数。As of jQuery 3.0, .bind() has been deprecated. jQuery官方文档指出3.0版本中该方法已弃用。
- .unbind( eventType [, handler ] )，unbind(解开)，bind(捆绑)的反向操作，从每一个匹配的元素中删除绑定的事件。As of jQuery 3.0, .unbind() has been deprecated. jQuery官方文档指出3.0版本中该方法已弃用。
- .delegate( selector, eventType, handler ), delegate(委派) 为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。jQuery官方文档指出3.0版本中该方法已弃用。
- .live( events, handler )， jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。jQuery官方文档指出1.7版本中该方法已弃用。
- .on( events [, selector ] [, data ], handler )， 在选定的元素上绑定一个或者多个事件处理函数（Attach an event handler function for one or more events to the selected elements.）
- .off( events [, selector ] [, handler ] )， 在选择元素上移除一个或多个事件的事件处理函数。
推荐使用on 或off绑定或者移除事件处理函数， 可以对元素动态绑定，运行速度快，效率高。
$('div').on('click', 'p', (event) => {
console.lg($(this));
})jQuery的一些常用API
jQuery展示/隐藏元素
- show([speed,[easing],[fn]]) 显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
speed: 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing: (Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
- hide([speed,[easing],[fn]])
隐藏显示的元素。这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
<div class="content">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<script>
var $divP = $('.content').find('p');
$divP.hide(5000, 'linear', () => {
alert('Hiden Done!');
});
$divP.show(5000, 'linear', () => {
alert('Show Done!!');
});
</script>jQuery的动画
- animate(params,[speed],[easing],[fn])， 用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性， 如height、top、opacity。注意：所有指定的属性必须用驼峰命名的形式，如：marginLeft 代替 margin-left。
而每个属性的值表示这个样式属性到多少动画结束， 如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide"、“show”、“toggle”这样字符窜值， 则会为属性调用默认的动画形式。
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
.delay()设置一个定时器，以延迟 执行队列中后续的项目。
.clearQueue()从队列中删除所有还没有运行过的项目。
.stop()在匹配的元素上停止当前正在运行的动画。
.finish()针对匹配的元素 停止当前 正在运行的动画，删除所有 队列中的动画，并结束所有 动画
<button id="go">Run</button>
<div id="block">Hello!</div>
<script>
$('#go').on('click', (event) => {
$('#block').animate( {
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 5000 )
});
</script>jQuery设置和获取元素内部HTML内容，设置和获取元素内部文本。
- .html([val|fn]), 在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。
无参数， 返回第一个匹配元素内容。
参数 val，设置所有匹配元素的内容。
参数 回调函数fn，设置所有匹配元素的内容。
<p>hello</p>
<p>how are you?</p>
<script>
console.log($('p').html()); //hello
$('p').html('Hello<b>World</b>!');
//HelloWorld!
$('p').html((n) => {
console.log('这个p元素的index是:' + n);
});
//这个p元素的index是:0, 这个p元素的index是:1
</script>- text([val|fn])， 取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。
无参数，返回元素的文本内容。
参数val，设置所有匹配元素的文本内容。
回调函数fn， 使用函数来设置所有匹配元素的文本内容。
<p>hello </p>
<p>how are you?</p>
<script>
console.log($('p').text()); //hello how are you?
$('p').text('Hello World!!');// <p>Hello World!!</p> , <p>Hello World!!</p>
$('p').text((n) => {
console.log('the index of this p element is ' + n);
}); //the index of this p element is 0, the index of this p element is 1
</script>jQuery 设置和获取表单用户输入或者选择的内容，以及设置和获取元素属性。
- val([val|fn|arr])， 获得匹配元素的当前值。
在jQuery1.2中，可以返回任意元素的值。 包括select。如果多选，将返回一个数组，其包含所选的值。
无参数， 获取文本框中的值。
参数val，设定文本框的值。
回调参数fn, 设定文本框的值。
参数array, 设定一个select和一个多选的select的值。
<div>
输入框 <input type="text" value ="hello" placeholder="hello">
</div>
<script type="text/javascript">
console.log($('div > input').val());//hello
$('div > input').val('hello world');
console.log($('div > input').val());//hello world
$('div > input').val(() => {
return 'how are you?'
}) //how are you?
</script><p></p>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
var singleValues = $('#single').val(); // Single
var multipleValues = $('#multiple').val() || []; // ["Multiple","Multiple3"]
$('p').html('<b>Single:</b> ' + singleValues + ' <b>Multiple:</b> ' + multipleValues.join(','));
}
displayVals(); //<p><b>Single:</b> Single <b>Multiple:</b> Multiple,Multiple3</p>
</script>- attr(name|properties|key,value|fn), 设置或返回被选元素的属性值。
参数name： 返回元素的属性值。
参数properties： 可为元素设置多个属性及属性值。
参数key，value： 为元素设置属性和值。
参数key，回调函数： 为元素属性设置属性和值。
<img src="./01.png" alt="Sunny">
<script>
var $img = $('img');
console.log($img.attr('src')); // ./01.png
var setImage = $img.attr({
src: './test.jpg', alt: 'test Image'
}) // <img src="./test.jpg" alt="test Image">
var setImageSrc = $img.attr('src', './test1.jpg');
//<img src="./test1.jpg" alt="test Image">
$img.attr('title', () => {
return 'this is a photo!'
}); //<img src="./test1.jpg" alt="test Image" title="this is a photo!">
</script>