1.jQuery又是啥

What？
js刚学会一点，又来jQuery， (…•˘_˘•…)前端是不是学不完的啊。那jQuery到底是啥？
百度百科说： jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

还好还好，๑乛◡乛๑
简单来说，jQuery就是一款JavaScript库。

可以方便的处理HTML，事件，动画等。
HTML：处理HTML文档中的DOM节点，如添加，删除等。
事件：通过jQuery对页面上的事件进行处理
动画：通过jQuery实现淡入，淡出，滑动等动画

可以兼容多个浏览器

80%以上网站使用，经历了十多年的发展。大部分用jQuery思路去开发。

那如何安装使用呢？

先下载jQuery，到官网下载最新的，不过非常非常慢。
我用的是这个版本，还是点我下8，我很快的哦！Download the compressed, production jQuery 3.5.1

当然直接引用也行：
微软和官网的

微软jquery压缩版引用地址:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>

官网jquery压缩版引用地址:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

以下三种有啥区别呢：

第1个即压缩版，用于放在线上，节省空间的
第2个是非压缩版，方便开发人员学习jQuery，查看源代码
第3个又是个啥，其实是用于线上调试时，快速定位压缩版里源代码的，配合第1种使用

一般把引入的js文件放在body下面，而没有放在head里，是为了方便页面的加载，把dom等先渲染出来，然后加载js。从而不会使网页出现长时间的空白等待。

如何选择版本其实也很重要：
分三大版本：
v1.x
v2.x:不兼容IE 6~8
v3.x:分为精简版和普通版
普通版和v2差不多，更新了一些API，性能优化

选择1.12.4其实最好，要兼容IE，版本低的浏览器。

使用CDN
CDN又是啥？

<script src="//cdn.bootcss.com/jquery/3.1.0/jquery.js"></script>
为啥用// 而不是http或https呢，是因为用了不同的协议，根据页面不同来自动添加。

使用cdn：性能提高，加快下载速度。在不同服务器下载。

jQuery基本概念
设计哲学：Write less，do more
例如，想要获取单项选择的值：

<form>
	<input type="radio" name="test" value="dog">狗<br>
	<input type="radio" name="test" value="cat" checked>猫<br>
	<input type="radio" name="test" value="pig">猪<br>
</form>'

用原生js获取：

var checkedValue;
var elements = document.getElementsByTagName('input');
for (var i = 0; i < elements.length;i++){
	if (elements[i].type === 'radio' && elements[i].name === 'test' &&elements[i].checked){
		checkedValue = elements[i].value;
		break;
	}
}
console.log(checkedvalue);

用jQuery就两行：

var checkedValue = $( 'input:radio[name="test"]:checked').val();
console.log(checkedValue);

结构，表现和行为分离
HTML结构structure
JS行为behavior
CSS表现presentation
不要混杂在一起写代码

$
window.jQuery===window.$

$.xxx
$.each(...)
$.noop
$.toArray()

$(xxx)    返回jQuery对象
$('#myDiv')
$('.myClass')

转换：
$(domObject) --> jQuery Object
$(xxx).get(0) --> DOM Object
$(xxx)[0] --> DOM Object

有些方法在DOM中不能调用，同理DOM的一些方法也不能在jQuery中调用。
例如DOM中有关重置表单reset方法，但jQuery就不能用，只能先把它转换为DOM对象然后调用reset。

什么是jQuery对象？
1是原生DOM对象的封装
2jQuery对象和原生DOM对象不同
3jQuery对象包含了很多方法，方便操作DOM元素

写起来更爽，而且不用每次都进行DOM搜索。

例如：

<div id="divTest2">
	<p>123</p>
	<p class="child">123</p>
	<p>123</p>
</div>

setTimeout(function () {
	$('#divTest').text('Hello, world! ')
	$('#divTest').removeClass( 'blue' )
	$('#divTest').addClass( 'bold' )
	$('#divTest').css('color', 'red' )
	$('#divTest')
		.text( 'Hello, world! ')
		.removeClass( 'blue ' )
		.addClass( ' bold ' )
		.css( 'color', 'red ')
	$('#divTest2')
		.find('p.child')  //有破坏性
		.css( 'color','red')
		// .end ()
		.addClass( 'bold')
},2000)

为什么可以这么好，原理是啥？
因为它在执行这些方法时会返回，比如执行text方法后，会返回整块对象再执行removeClass方法，依次进行。

但有些方法具有破坏性：find,add,children,filter方法等

例如上面的find()方法缩小了范围，都可以用end()结束，返回大范围。

如果把jQuery转换为DOM后，jQuery的方法就不能这样用了

jQuery的ready方法只会判断dom元素加载完成后执行，而不会像onload那样需要等所有图片，资源，第三方iframe嵌入的网页加载完后才执行。

ready方法比onload更快。

例如加载一个大图片：

window.onload = function(){
	console.log('onload');
}

//要写推荐这样写
$(window).load(function(){
	console.log(load);
});

$(document).ready(function () {
console.log('ready'):
})

内容筛选器

:empty 除了这个以为其他3个都是新增的
:contains(text)
:has(selector)
:parent

<p></p>
<p></p>
<p>Lorem ipsum dolor sit amet，consectetur adipisicing elit.Delectus，earum.</p>
<p>123 <span>456</span></p>
<input type="text" value="input">

知道上面那段拉丁语什么意思吗？( ◔ ڼ ◔ )

$(function () {
	console.log($(":empty").addClass('highlight'))
	console.log($('p:contains("Lorem")').addClass('highlight'))
	console.log($('p:has(span)').addClass('highlight'))
	console.log($('p:parent').addClass('highlight'))
})
//这4个分别展示了不同选择器的用法

其实我也不知道，ㄟ(◑‿◐ )ㄏ这是非常经典的一段话，是一篇常用于排版设计领域的拉丁文文章，主要的目的为测试文章或文字在不同字型、版型下看起来的效果。

<p id="foo" lang="en-US">Lorem ipsum dolor sit amet，consectetur adipisicing elit.Cumque,
eius.</p>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. cum，quo.</p>
<input type="text">
<input type="hidden">
<p style="display: none">Lorem ipsum dolor sit amet，consectetur adipisicing elit.
	Doloremque,excepturi molestiae odio
	officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque
	quaerat quis quisquam quo rem
	vel.
</p>
<p style="opacity: 0">Lorem ipsum dolor sit amet，consectetur adipisicing elit..
	Doloremque， excepturi molestiae
	odio
</p>
<p style="visibility: hidden">Lorem ipsum dolor sit amet，consectetur adipisicing elit..
	Doloremque， excepturi molestiae
	odio
	officiis optio praesentium recusandae similique soluta vel velit? Enim et iste neque
	quaerat quis quisquam quo rem
	vel.
</p>
//hidden 没有选中visibility：hidden和opacity为0的值
<hl>h1.标题</h1>
<h2>h2.标题</h2>

$(function (  {
	console.log( $( ' :lang(en ) ' ).addClass( ' highlight ' ))
	console.log( $( 'p:not(#foo) ' ).addclass( 'highlight ' ))
	console.log($( ' : root').addclass('highlight'))
	console.log($( 'p:target ' ).addClass('highlight ' ))
	setTimeout(function () {
	//在Chrome.Firefox等浏览器中，获取url hash会延迟一会儿,所以直接在documentready中获取会获取不到
	console.log($( ":target" ).addClass ( 'highlight '))
	}, 1800 )
	console.logl$( " : hidden ' ).addclass( 'highlight " ))
	console.log($( ' :visible ' ).addClass( 'highlight'))
	console.log(s( ' : header' ).addclass( ' highlight'))
})

来看个动画小栗子

<style>
	div.box {
		background: yellow;
		border: 1px solid #aaa;
		width: 80px;
		height: 80px;
		margin: 0 5px;
		float: left;
		}
	div.colored {
		background: green;
	}
</style>
<body>
	<button id="run">Run</button>
	<div class="box"></div>
	<div id="mover" class="box"></div>
	<div class="box"></div>
</body>

$(function () {
$("#run" ).click(function () {
$( "div:animated" ).toggleClass("colored" );
});
function animateIt() {
$("#mover").slideToggle("slow",animateIt);
}
animateIt();
})

//尽可能使用css中有的
logTime( function (){
$("ul li:even"); // slow
})
logrime(function ( {
$("ul li:nth-child(odd)");//better
})
logTime( function ( {
document.queryselectorAll("ul li:nth-child(odd)""); // best，但返回的不是jQuery对象，没有其本身的一些方法
})
logTime( function ( {
$(document.querySelectorAll("ul li:nth-child(odd)"));// better
})
//2,4方法差不多，但一般用第2种

//尽量用ID
logTime( function ( {
$('.list li.item2');// slow
})
logTime ( function ( {
$('#list li.item2' ); // better
})

//让右边的更具体，因为jQuery是从右往左
logTime(function () {
$('ul.list .item2'): //slow
})
logTime(function ({
$( '.list li.item2 ' ); // better
})

//避免使用全局
logTime( function ( ){
$( 'ul'); // slow
})
logTime(function (){
$( '.list '); // better
})

减少约束
用1w次测试，现在浏览器比较出色，当然只有数量大时才会体现出来
logTime(function ({
$( 'di ul li.item2' );} //slow
})
logTime ( function ( {
$ ( 'li.item2' );// better
})

//缓存选择器结果
logTime (function ( {// slow
$('#list .item2' );
$( '#list .item4' );
})
logTime ( function (){ //  better
var ul = $('#list')
ul.find( '.item2' );
ul.find( '.item4' );
})

NEXT:
jQuery中DOM的特性及DOM元素的操作，是W3C推荐的处理可扩展标志语言的标准编程接口，非常重要。