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推荐的处理可扩展标志语言的标准编程接口，非常重要。
