jQuery

您所在的位置：网站首页 › alert-but-passive翻译 › jQuery

jQuery

2023-04-26 18:31| 来源: 网络整理| 查看: 265

1 - jQuery 介绍 1. JavaScript库

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画 animate、hide、show，比如获取元素等。

简单理解：就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。

常见的JavaScript库：jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等，这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

2. 什么是jQuery jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。学习jQuery本质：就是学习调用这些函数（方法）。 jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

3. jQuery优点轻量级。核心文件才几十kb，不会影响页面加载速度。跨浏览器兼容，基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持，大大简化了DOM操作。支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等。免费、开源。 2 - jQuery 的基本使用 1. jQuery 的下载

jQuery的官网地址： jquery.com/，官网即可下载最新版本… 各个版本的下载：code.jquery.com/。

版本介绍：

1x ：兼容 IE 678 等低版本浏览器，官网不再更新 2x ：不兼容 IE 678 等低版本浏览器，官网不再更新 3x ：不兼容 IE 678 等低版本浏览器，是官方主要更新维护的版本

2. jQuery的入口函数

jQuery中常见的两种入口函数：

// 第一种: 简单易用。 $(function () { ... // 此处是页面 DOM 加载完成的入口, 相当于原生js中的DOMContentLoaded }) ; // 第二种: 繁琐，但是也可以实现 $(document).ready(function(){ ... // 此处是页面DOM加载完成的入口 }); 复制代码

总结：

等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装，相当于原生 js 中的 DOMContentLoaded。不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。更推荐使用第一种方式。 3. jQuery中的顶级对象 $ $是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。 $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。 4. jQuery 对象和 DOM 对象

使用 jQuery 方法和原生JS获取的元素是不一样的，总结如下：

用原生 JS 获取来的对象就是 DOM 对象 jQuery 方法获取的元素就是 jQuery 对象。 jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。

注意：

只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。

5. jQuery 对象和 DOM 对象转换

DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生 js 比 jQuery 更大，原生的一些属性和方法 jQuery 没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

// 1.DOM对象转换成jQuery对象，方法只有一种 var box = document.getElementById('box'); // 获取DOM对象 var jQueryObject = $(box); // 把DOM对象转换为 jQuery 对象 // 2.jQuery 对象转换为 DOM 对象有两种方法： // ① jQuery对象[索引值] var domObject1 = $('div')[0] // ② jQuery对象.get(索引值) var domObject2 = $('div').get(0) 复制代码

实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

3 - jQuery 选择器

原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。

1. 基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号复制代码

示例代码：

$(function() { console.log($(".nav")); console.log($("ul li")); }) 复制代码 2. 筛选选择器

筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下：

示例代码：

$(function() { // ul下的第一个li颜色设置为红色 $("ul li:first").css("color", "red"); $("ul li:eq(2)").css("color", "blue"); $("ol li:odd").css("color", "skyblue"); $("ol li:even").css("color", "pink"); }) 复制代码 3. 筛选方法

jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

偏重于记忆，演示代码略。

4. 属性选择器

选取标签带有某些特殊属性的选择器，我们称为属性选择器。

// 将name="title"的input的value值设置为"阿里百秀" $('input[name="title"]').val("阿里百秀"); 复制代码 5. jQuery知识铺垫 jQuery 设置样式 $('div').css('属性', '值') 复制代码 jQuery 里面的排他思想 // 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。 $(this).css('color','red'); $(this).siblings().css('color',''); 复制代码链式编程 // 链式编程是为了节省代码量，看起来更优雅。 $(this).css('color', 'red').sibling().css('color', ''); 复制代码隐式迭代 //给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。 $('div').hide(); // 页面中所有的div全部隐藏，不用循环操作复制代码案例：淘宝服饰精品案例

思路分析:

核心原理：鼠标经过左侧盒子某个小li，就让内容区盒子相对应图片显示，其余的图片隐藏需要得到当前小li 的索引号，就可以显示对应索引号的图片 jQuery 得到当前元素索引号 $(this).index() 中间对应的图片，可以通过 eq(index) 方法去选择显示元素 show() 隐藏元素 hide()

$(function() { // 1. 鼠标经过左侧的小li $("#left li").mouseover(function() { // 2. 得到当前小li的索引号 var index = $(this).index(); console.log(index); // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了 // $("#content div").eq(index).show(); // 4. 让其余的图片（就是其他的兄弟）隐藏起来 // $("#content div").eq(index).siblings().hide(); // 链式编程 $("#content div").eq(index).show().siblings().hide(); }) }) 复制代码 4 - jQuery 样式操作

jQuery中常用的样式操作有两种：css() 和设置类样式方法

1. 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式，也可以操作类，修改多个样式。

// 1.参数是属性名、属性值，用逗号分隔，是设置一组样式 // 必须加引号，属性值如果是数字可以不用跟单位和引号 $(this).css('color, 'red'); // 2.参数只写属性名，则返回属性值 var strColor = $(this).css('color'); // 3.参数可以是对象形式，方便设置多组样式 // 属性名可以不用加引号，如果属性值不是数字则必须加引号 // 如果是复合属性则必须采用驼峰命名法：background-color -> backgroundColor $(this).css({ "backgroundColor":"white","fontSize":"20px"}); 复制代码

注意：css() 多用于样式少时操作，多了则不太方便。

2. 设置类样式方法

作用等同于以前H5的classList，可以操作类样式，注意操作类里面的参数不要加点。

// 1.添加类 $("div").addClass("current"); // 2.删除类 $("div").removeClass("current"); // 3.切换类，点一次添加current，再点一次移除current $("div").toggleClass("current"); 复制代码

注意：

设置类样式方法比较适合样式多时操作，可以弥补 css() 的不足。原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类名进行操作，不影响原先的类名，这也是更合理的。案例：tab 栏切换

思路分析: 1.点击上部的li，当前 li 添加current类，其余兄弟移除类。 2.点击的同时，得到当前 li 的索引号 3.让下部里面相应索引号的item显示，其余的item隐藏

商品介绍规格与包装售后保障商品评价（50000）手机社区商品介绍模块内容规格与包装模块内容售后保障模块内容商品评价（50000）模块内容手机社区模块内容 $(function() { // 1.点击上部的li，当前li 添加current类，其余兄弟移除类 $(".tab_list li").click(function() { // 链式编程操作 $(this).addClass("current").siblings().removeClass("current"); // 2.点击的同时，得到当前 li 的索引号 var index = $(this).index(); console.log(index); // 3.让下部里面相应索引号的item显示，其余的item隐藏 $(".tab_con .item").eq(index).show().siblings().hide(); }); }) 复制代码 5 - jQuery 动画效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

显示隐藏：show() / hide() / toggle() ; 滑入滑出：slideDown() / slideUp() / slideToggle() ; 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ; 自定义动画：animate() ;

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

1. 显示隐藏 show() hide() toggle()

显示/隐藏动画，常见有三个方法：show() / hide() / toggle() ;

语法规范如下:

show([speed,[easing],[fn]]) //显示 hide([speed,[easing],[fn]]) //隐藏 toggle([speed,[easing],[fn]]) //显示、隐藏之间切换复制代码参数都可以省略，无参数直接显示、隐藏。 speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing：用来指定切换效果，默认是“swing”，可用参数“linear”。 fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

建议：平时一般不带参数，直接显示、隐藏即可。

示例代码：

显示隐藏切换 $(function() { $("button").eq(0).click(function() { $("div").show(1000, function() { alert(1); }); }) $("button").eq(1).click(function() { $("div").hide(1000, function() { alert(1); }); }) $("button").eq(2).click(function() { $("div").toggle(1000); //显示、隐藏之间切换 }) // 一般情况下，我们都不加参数直接显示、隐藏就可以了 }); 复制代码 2. 下滑上滑 slideDown() slideUp() slideToggle()

下滑上滑显示/隐藏动画，常见有三个方法：slideDown() / slideUp() / slideToggle() ;

语法规范如下:

slideDown([speed,[easing],[fn]]) //下滑效果 slideUp([speed,[easing],[fn]]) //上滑效果 slideToggle([speed,[easing],[fn]]) //下滑、上滑切换复制代码参数都可以省略。 speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing：用来指定切换效果，默认是“swing”，可用参数“linear”。 fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

示例代码：

下拉滑动上拉滑动切换滑动 $(function() { $("button").eq(0).click(function() { // 下滑动 slideDown() $("div").slideDown(); }) $("button").eq(1).click(function() { // 上滑动 slideUp() $("div").slideUp(500); }) $("button").eq(2).click(function() { // 滑动切换 slideToggle() $("div").slideToggle(500); }); }); 复制代码 3. 淡入淡出 fadeIn() fadeOut() fadeToggle() fadeTo()

淡入淡出显示/隐藏动画，常见有四个方法：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

语法规范如下:

fadeIn([speed,[easing],[fn]]) //淡入 fadeOut([speed,[easing],[fn]]) //淡出 fadeToggle([speed,[easing],[fn]]) //淡入、淡出切换复制代码参数都可以省略。 speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing：用来指定切换效果，默认是“swing”，可用参数“linear”。 fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。 fadeTo([[speed],opacity,[easing],[fn]]) //渐进方式调整到指定的不透明度复制代码 opacity 透明度必须写，取值 0~1 之间。对于fadeTo(): 速度和透明度是必须要传的参数

示例代码：

淡入效果淡出效果淡入淡出切换修改透明度 $(function() { $("button").eq(0).click(function() { // 淡入 fadeIn() $("div").fadeIn(1000); }) $("button").eq(1).click(function() { // 淡出 fadeOut() $("div").fadeOut(1000); }) $("button").eq(2).click(function() { // 淡入淡出切换 fadeToggle() $("div").fadeToggle(1000); }); $("button").eq(3).click(function() { // 修改透明度 fadeTo() 这个速度和透明度要必须写 $("div").fadeTo(1000, 0.5); }); }); 复制代码 4. 自定义动画 animate()

自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate() ;

语法规范如下：

animate(params,[speed],[easing],[fn]) //自定义动画复制代码 params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft，其余参数都可以省略。 speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing：用来指定切换效果，默认是“swing”，可用参数“linear”。 fn: 回调函数，在动画完成时执行的函数，每个元素执行一次。

示例代码：

动起来我是测试div $(function() { $("button").click(function() { $("div").animate({ left: 500, top: 300, opacity: .4, width: 500 }, 500); }) }) 复制代码 5. 停止动画排队 stop()

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。

总结：每次使用动画之前，先调用 stop()，再调用动画。

6. hover(over,out)

jQuery中为我们添加了一个新函数 hover() ; 功能类似 css 中的伪类 :hover。

语法：

hover(over,out) // 其中over和out为两个函数,分别是鼠标进入和移出的时候触发的函数复制代码 over：鼠标移到元素上要触发的函数（相当于mouseenter） out：鼠标移出元素要触发的函数（相当于mouseleave）如果只写一个函数，则鼠标经过和离开都会触发它案例：鼠标悬浮显示列表动画微博私信评论@我微博私信评论@我 $(function() { // 以前的做法： // 鼠标经过 // $(".nav>li").mouseover(function() { // // $(this) jQuery 当前元素 this不要加引号 // // show() 显示元素 hide() 隐藏元素 // $(this).children("ul").slideDown(200); // }); // // 鼠标离开 // $(".nav>li").mouseout(function() { // $(this).children("ul").slideUp(200); // }); // 现在的做法： // 1. 事件切换 hover 就是鼠标经过和离开的复合写法 // $(".nav>li").hover(function() { // $(this).children("ul").slideDown(200); // }, function() { // $(this).children("ul").slideUp(200); // }); // 2. 事件切换 hover 如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数 $(".nav>li").hover(function() { // stop 方法必须写到动画的前面 // 如果不写stop()，当快速滑动的时候，动画会排队慢慢执行 $(this).children("ul").stop().slideToggle(); }); }) 复制代码案例：王者荣耀手风琴效果

思路分析: 1.鼠标经过某个小li 有两步操作： 2.当前小li 宽度变为224px，同时里面的小图片淡出，大图片淡入 3.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出

$(function() { // 鼠标经过某个小li，有两步操作： $(".king li").mouseenter(function() { // 1.当前小li 宽度变为 224px，同时里面的小图片淡出，大图片淡入 $(this).stop().animate({ width: 224 }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn(); // 2.其余兄弟小li宽度变为69px，小图片淡入，大图片淡出 $(this).siblings("li").stop().animate({ width: 69 }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut(); }) }); 复制代码 6 - 今日总结

【本文地址】

公司简介

联系我们