使用javascript开发过程中，有许多的缺点：
/** 1. 查找元素的方法多种多样，非常灵活* 2. 拥有隐式迭代特性，因此不再需要手写for循环了。* 3. 完全没有兼容性问题。* 4. 实现动画非常简单，而且功能更加的强大。* 5. 代码简单、粗暴。* */$(document).ready(function () { $("#btn1").click(function () { $("div").show(200); }); $("#btn2").click(function () { $("div").text("我是内容"); });});jQuery的官网 http://jquery.com/
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。
What is jQuery?
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。
（animate.js、common.js）
我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，
其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。
官网下载地址：
http://jquery.com/download/
jQuery版本有很多，分为1.x 2.x 3.x
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
大版本分类：
关于压缩版和未压缩版：
使用jQuery的三个步骤：
关于jQuery的入口函数：
//第一种写法$(document).ready(function() { });//第二种写法$(function() { });jQuery入口函数与js入口函数的对比：
DOM对象转换成jQuery对象：【联想记忆：花钱】
var $obj = $(domObj);// $(document).ready(function(){});就是典型的DOM对象转jQuery对象jQuery对象转换成DOM对象：
var $li = $("li");//第一种方法（推荐使用）$li[0]//第二种方法$li.get(0)名称 | 用法 | 描述 |
ID选择器 | $(“#id”); | 获取指定ID的元素 |
类选择器 | $(“.class”); | 获取同一类class的元素 |
标签选择器 | $(“div”); | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”); | 使用逗号分隔，只要符合条件之一就可。 |
交集选择器 | $(“div.redClass”); | 获取class为redClass的div元素 |
总结：跟css的选择器用法一模一样。
名称 | 用法 | 描述 |
子代选择器 | $(“ul>li”); | 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 |
总结：跟css的选择器用法一模一样。
名称 | 用法 | 描述 |
:eq（index） | $(“li:eq(2)”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 |
:odd | $(“li:odd”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为奇数的元素 |
:even | $(“li:even”).css(“color”, ”red”); | 获取到的li元素中，选择索引号为偶数的元素 |
总结：这类选择器都带冒号
名称 | 用法 | 描述 |
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>li”)，子类选择器 |
find(selector) | $(“ul”).find(“li”); | 相当于$(“ul li”),后代选择器 |
siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟节点，不包括自己本身。 |
parent() | $(“#first”).parent(); | 查找父亲 |
eq(index) | $(“li”).eq(2); | 相当于$(“li:eq(2)”),index从0开始 |
next() | $(“li”).next() | 找下一个兄弟 |
prev() | $(“li”).prev() | 找上一次兄弟 |
总结：筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
【案例：下拉菜单】
【案例：突出展示】
【案例：手风琴】
【案例：淘宝精品】
/*1.设置一个样式*/ //两个参数 设置的样式属性,具体样式 $('li').css('color','red'); //传入对象（设置的样式属性:具体样式） $('li').css({'color':'red'}); /*2.设置多个样式*/ $('li').css({ 'color':'green', 'font-size':'20px' }); /*1.添加一个类*/ $('li').addClass('now'); /*2.删除一个类*/ $('li').removeClass('now'); /*3.切换一个类 有就删除没有就添加*/ $('li').toggleClass('now'); /*4.匹配一个类 判断是否包含某个类 如果包含返回true否知返回false*/ $('li').hasClass('now');对应案例：案例-《tab切换》
/*1.获取属性*/ $('li').attr('name'); /*2.设置属性*/ $('li').attr('name','tom'); /*3.设置多个属性*/ $('li').attr({ 'name':'tom', 'age':'18' }); /*4.删除属性*/ $('li').removeAttr('name');对应案例：案例-《美女相册》
/*对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。*/ $("#checkbox").prop("checked"); $("#checkbox").prop("checked", true); $("#checkbox").prop("checked", false); $("#checkbox").removeProp("checked");对应案例：案例-《表格全选》
/*注意：动画的本质是改变容器的大小和透明度*/ /*注意：如果不传参数是看不到动画*/ /*注意：可传入特殊的字符 fast normal slow*/ /*注意：可传入数字 单位毫秒*/ /*1.展示动画*/ $('li').show(); /*2.隐藏动画*/ $('li').hide(); /*3.切换展示和隐藏*/ $('li').toggle(); /*注意：动画的本质是改变容器的高度*/ /*1.滑入动画*/ $('li').slideDown(); /*2.滑出动画*/ $('li').slideUp(); /*3.切换滑入滑出*/ $('li').slideToggle();对应案例：案例-《下拉菜单》
/*注意：动画的本质是改变容器的透明度*/ /*1.淡入动画*/ $('li').fadeIn(); /*2.淡出动画*/ $('li').fadeOut(); /*3.切换淡入淡出*/ $('li').fadeToggle(); $('li').fadeTo('speed','opacity');对应案例：案例-《轮播图》
/* * 自定义动画 * 参数1：需要做动画的属性 * 参数2：需要执行动画的总时长 * 参数3：执行动画的时候的速度 * 参数4：执行动画完成之后的回调函数 * */ $('#box1').animate({left:800},5000); $('#box2').animate({left:800},5000,'linear'); $('#box3').animate({left:800},5000,'swing',function () { console.log('动画执行完成'); });对应案例：案例-《手风琴菜单》
/* jQuery中有个动画队列的机制。 当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中， 等前面的动画完成后再开始执行。 可是用户的操作往往都比动画快， 如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积， 影响到效果。 */ /*1.停止当前动画 如果动画队列当中还有动画立即执行*/ //$('div').stop(); /*2.和stop()效果一致 说明这是默认设置*/ //$('div').stop(false,false); /*3.停止当前动画 清除动画队列*/ //$('div').stop(true,false); /*4.停止当前动画并且到结束位置 清除了动画队列*/ //$('div').stop(true,true); /*5.停止当前动画并且到结束位置 如果动画队列当中还有动画立即执行*/ $('div').stop(false,true);对应案例：案例-《音乐导航》
对应案例：案例-《工具栏》
/*创建节点*/ var $a = $('<a href="http://www.baidu.com" target="_blank">百度1</a>'); /*如果想克隆事件 false true克隆事件*/ var $cloneP = $('p').clone(true); /*追加自身的最后面 传对象和html格式代码*/ $('#box').append('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>'); $('#box').append($('a')); /*追加到目标元素最后面 传目标元素的选择器或者对象*/ $('<a href="http://www.baidu.com" target="_blank"><b>百度3</b></a>').appendTo($('#box')); $('a').appendTo('#box'); prepend(); prependTo(); after(); before(); /*1.清空box里面的元素*/ /* 清理门户 */ $('#box').empty(); /*2.删除某个元素*/ /* 自杀 */ $('#box').remove();【案例-《弹幕》】
val方法用于设置和获取表单元素的值，例如input、textarea的值
//设置值 $("#name").val('张三'); //获取值 $("#name").val();html方法相当于innerHTML text方法相当于innerText
//设置内容 $('div').html('<span>这是一段内容</span>'); //获取内容 $('div').html() //设置内容 $('div').text('<span>这是一段内容</span>'); //获取内容 $('div').text()区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。
设置或者获取高度
//带参数表示设置高度 $('img').height(200); //不带参数获取高度 $('img').height();获取网页的可视区宽高
//获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height();设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度 $(window).scrollTop(); //获取页面被卷曲的宽度 $(window).scrollLeft();offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置。 $(selector).position();JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)
简单事件注册
click(handler) //单击事件 mouseenter(handler) //鼠标进入事件 mouseleave(handler) //鼠标离开事件缺点：不能同时注册多个事件
bind方式注册事件
//第一个参数：事件类型 //第二个参数：事件处理程序 $("p").bind("click mouseenter", function(){ //事件响应方法 });缺点：不支持动态事件绑定
delegate注册委托事件
// 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 });缺点：只能注册委托事件，因此注册时间需要记得方法太多了
on注册事件
jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。
on注册简单事件
// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。 $(selector).on( "click", function() {});on注册委托事件
// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定 $(selector).on( "click",'span', function() {});on注册事件的语法：
// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件） // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。 // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events,[selector],[data],handler);unbind方式（不用）
$(selector).unbind(); //解绑所有的事件 $(selector).unbind("click"); //解绑指定的事件undelegate方式（不用）
$( selector ).undelegate(); //解绑所有的delegate事件 $( selector).undelegate( 'click' ); //解绑所有的click事件off方式（推荐）
// 解绑匹配元素的所有事件 $(selector).off(); // 解绑匹配元素的所有click事件 $(selector).off("click"); $(selector).click(); //触发 click事件 $(selector).trigger("click");jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。
//screenX和screenY 对应屏幕最左上角的值 //clientX和clientY 距离页面左上角的位置（忽视滚动条） //pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation() 阻止事件冒泡行为 //event.preventDefault() 阻止浏览器默认行为 //return false:既能阻止事件冒泡，又能阻止浏览器默认行为。通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。
end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。【案例：五角星评分案例.html】
jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。
作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
// 参数一表示当前元素在所有匹配元素中的索引号 // 参数二表示当前元素（DOM对象） $(selector).each(function(index,element){});【案例：不同的透明度.html】
jQuery使用作为标示符，但是如果与其他框架中的作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.
var c = $.noConflict();//释放$的控制权,并且把$的能力给了c插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。
animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。
使用插件的步骤
//1. 引入jQuery文件 //2. 引入插件（如果有用到css的话，需要引入css） //3. 使用插件懒加载插件
jQueryUI专指由jQuery官方维护的UI方向的插件。
官方API：
http://api.jqueryui.com/category/all/
其他教程：jQueryUI教程
基本使用:
//1. 引入jQueryUI的样式文件 //2. 引入jQuery //3. 引入jQueryUI的js文件 //4. 使用jQueryUI功能使用jquery.ui.js手风琴菜单
原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。
//通过给$.fn添加方法就能够扩展jquery对象$.fn. pluginName = function() {};更多内容：web前端jquery进阶实用教程
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。
现在的「新人」依然可以学习 jQuery 的思想，因为以「新人」的水平，直接理解 Vue / React 的思想难度较大，jQuery 是一个很不错的中间过渡
声明：本站内容部分源于网络转载，出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。文章内容仅供参考，请咨询相关专业人士。
如果无意之中侵犯了您的版权，或有意见、反馈或投诉等情况, 请联系本站，[qq:]
Copyright ©2024 编程密语 All rights reserved 版权所有 鲁ICP备09004228号-12
鲁公网安备37020202000738号