jquery在线开发手册 jquery快速开发

转载

mob6454cc636c54 2024-06-13 09:01:43

文章标签 jquery在线开发手册动画 css3 javascript jQuery 文章分类 jQuery 前端开发

jQuery快速开发①

1. jQuery介绍

1.1 JavaScript库
1.2 jQuery的概念
1.3 jQuery的优点

2. jQuery 的基本使用

2.1 jQuery 的下载
2.2 体验jQuery
2.3 jQuery的入口函数
2.4 jQuery中的顶级对象$
2.5 jQuery 对象和 DOM 对象
2.6 jQuery 对象和 DOM 对象转换

3. jQuery 选择器

3.1 基础选择器
3.2 层级选择器
3.3 筛选选择器
3.4 筛选方法
3.5 知识铺垫
3.6 案例：tab栏切换①

4. jQuery 样式操作

4.1 方法1: 操作 css 方法
4.2 方法2: 设置类样式方法
4.3 案例：tab栏切换②

5. jQuery效果

5.1 显示隐藏
5.2 滑入滑出
5.3 淡入淡出
5.4 自定义动画
5.5 停止动画排队
5.6 事件切换
5.7 案例：王者荣耀手风琴效果

1. jQuery介绍

1.1 JavaScript库

JavaScript库： 即 library，是一个封装好的特定的集合（方法和函数）。就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

常见的JavaScript 库： jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等。

1.2 jQuery的概念

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
j 就是 JavaScript； Query 查询；意思就是查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能。
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。

1.3 jQuery的优点

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

2. jQuery 的基本使用

2.1 jQuery 的下载

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

版本介绍：

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

2.2 体验jQuery

引入jQuery文件。
在文档最末尾插入 script 标签，书写体验代码。
$(‘div’).hide() 可以隐藏盒子。

2.3 jQuery的入口函数

// 第一种: 简单易用。
$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ; 

// 第二种: 繁琐，但是也可以实现
$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

相当于原生 js 中的 DOMContentLoaded

2.4 jQuery中的顶级对象$

$是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。
$是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

2.5 jQuery 对象和 DOM 对象

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

2.6 jQuery 对象和 DOM 对象转换

原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
var domObject1 = $('div')[0]
//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

3. jQuery 选择器

3.1 基础选择器

$("选择器")   //  里面选择器直接写 CSS 选择器即可，但是要加引号

名称	用法
ID选择器	$("#id")
全选选择器	$("*")
类选择器	$(".class")
标签选择器	$(“div”)
并集选择器	$(“div,p,li”)
交集选择器	$(“li.current”)

3.2 层级选择器

名称	用法
子代选择器	$(“ul>li”)
后代选择器	$(“ul li”)

3.3 筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2)”)	获取到的li元素中，选择索引号为2的元素，索引号从0开始
:odd	$(“li:odd”)	获取到的li元素中选择索引号为奇数的元素
:even	$(“li:even”)	获取到的li元素中选择索引号为偶数的元素

3.4 筛选方法

语法	用法	说明
parent()	$(“li”).parent()	查找最近的父级
children(selector)	$(“ul”).children(“li”)	相当于ul>li，子代选择器
find(selector)	$(“ul”).find(“li”)	相当于ul li，后代选择器
siblings(selector)	$(".first").siblings(“li”)	查找兄弟节点，不包含自己本身
nextAll([expr])	$(".first").nextAll()	查找当前元素之后的所有兄弟节点
prevAll([expr])	$(".first").prevAll()	查找当前元素之前的所有兄弟节点
hasClass(class)	$(“div”).hasClass("protected)	检查当前的元素是否含有某个特定的类，返回为布尔值
eq(index)	$(“li”).eq(2)	相当于li:eq(2)

3.5 知识铺垫

jQuery设置样式

$('div').css('属性', '值')

jQuery里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

3.6 案例：tab栏切换①

思路分析:

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

jquery在线开发手册 jquery快速开发_动画

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

4. jQuery 样式操作

4.1 方法1: 操作 css 方法

参数只写属性名，则是返回属性值

var strColor = $(this).css('color');

参数是属性名，属性值，逗号分隔，是设置一组样式。属性必须加引号

$(this).css(''color'', ''red'');

参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号（复合属性采用驼峰命名法）

$(this).css({ 
	color:"white",
	backgroundColor: "red",
	fontSize:20
});

值如果是数字可以不用跟单位和引号

4.2 方法2: 设置类样式方法

添加类

$("div").addClass("current");

删除类

$("div").removeClass("current");

切换类

$("div").toggleClass("current");

jQuery类操作与原生className的区别： jQuery类操作的addClass相当于追加，不影响原来的类名；原生className会覆盖掉原来的

4.3 案例：tab栏切换②

思路分析:

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

jquery在线开发手册 jquery快速开发_动画_02

$(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() ;

5.1 显示隐藏

显示:show([speed,[easing],[fn]])
隐藏:hide([speed,[easing],[fn]])
切换:toggle([speed,[easing],[fn]])

参数说明：

参数都可以省略，无动画直接显示；
speed：三种预定速度至于的字符串（“show”,“normal”,“fast”）或表示动画时长的毫秒数值（如：1000）；
easing：（Optional）用来指定切换效果，默认是swing，可用参数“linear”；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

5.2 滑入滑出

上滑:slideUp([speed,[easing],[fn]])
下滑:slideDown([speed,[easing],[fn]])
滑动切换:slideToggle([speed,[easing],[fn]])

参数说明：

参数都可以省略；
speed：三种预定速度至于的字符串（“show”,“normal”,“fast”）或表示动画时长的毫秒数值（如：1000）；
easing：（Optional）用来指定切换效果，默认是swing，可用参数“linear”；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

5.3 淡入淡出

淡入:fadeIn([speed,[easing],[fn]])
淡出:fadeOut([speed,[easing],[fn]])
淡入淡出切换:fadeToggle([speed,[easing],[fn]])

参数说明：

参数都可以省略；
speed：三种预定速度至于的字符串（“show”,“normal”,“fast”）或表示动画时长的毫秒数值（如：1000）；
easing：（Optional）用来指定切换效果，默认是swing，可用参数“linear”；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

渐进方式调整到指定的不透明度：fadeTo([[speed,opacity,[easing],[fn]]) （opacity透明度必须写，取值0~1之间）

5.4 自定义动画

animate(params,[speed],[easing],[fn]) 参数说明：

params：想要更改的样式属性，以对象的形式传递，必须写（属性名可以不带引号，符合属性采用驼峰命名法）；
speed：三种预定速度至于的字符串（“show”,“normal”,“fast”）或表示动画时长的毫秒数值（如：1000）；
easing：（Optional）用来指定切换效果，默认是swing，可用参数“linear”；
fn：回调函数，在动画完成时执行的函数，每个元素执行一次

$(function() {
    $("button").click(function() {
        $("div").animate({
            left: 500,
            top: 300,
            opacity: .4,
            width: 500
        }, 500);
    })
})

5.5 停止动画排队

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止动画排队的方法为：stop() stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。先调用 stop() ,在调用动画

5.6 事件切换

hover([over,]out)其中over和out为两个函数

over:鼠标移到元素上要触发的函数（相当于mouseenter）
out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它

5.7 案例：王者荣耀手风琴效果

思路分析:

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

jquery在线开发手册 jquery快速开发_jquery在线开发手册_03

$(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();
    })
});

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：addresssetuptime是怎么计算的 address strategy

下一篇：双宽gpu卡是什么意思双槽显卡宽度

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯