jQuery

起啥名呢？？？

已于 2023-06-08 21:14:12 修改

阅读量447

点赞数 1

分类专栏： # jQuery 文章标签： jquery

于 2022-03-01 21:45:05 首次发布

本文链接：https://blog.csdn.net/PSG_li/article/details/123217151

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章の目录

fadeIn() 方法、fadeOut() 方法、fadeToggle() 方法

获取和设置内容 - text()、html() 以及 val()

获取和设置属性 - attr()

jQuery 添加元素

jQuery append() 和 prepend() 方法

jQuery after() 和 before() 方法

jQuery width() 和 height() 方法

jQuery innerWidth() 和 innerHeight() 方法

jQuery outerWidth() 和 outerHeight() 方法

正文

jQuery 简介

什么是 jQuery

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的“写的少，做的多“的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

除此之外，jQuery 还提供了大量的插件。

jQuery 安装

网页中添加 jQuery

可以使用以下方法在网页中添加 jQuery：

从 https://jquery.com/ 下载 jQuery 库
从 CDN 中载入 jQuery

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version —— 用于实际的网站中（已被精简和压缩）
Development version —— 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 https://jquery.com/ 中下载。

jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它：

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

从 CDN 中载入

如果不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内 CDN 地址，如果你的站点用户是国外的可以使用谷歌和微软。

百度 CDN：

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

从 CDN 中载入 jQuery 的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。
大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

查看 jQuery 使用版本

可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本。

jQuery 语法

通过 jQuery，我们可以选取（查询，query）HTML 元素，并对它们执行“操作”（actions）。

可以通过 jQuery 手册学习 jQuery。

菜鸟教程 jQuery 在线手册

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法：

$(selector).action()

// 美元符号定义 jQuery
// 选择符（selector）“查询”和“查找” HTML 元素
// jQuery 的 action() 执行对元素的操作

文档就绪函数

语法

所有的 jQuery 函数应该位于一个 document ready 函数中：

$(document).ready(function(){

    //开始写 jQuery 代码...

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

试图隐藏一个不存在的元素
获得未完全加载的图像的大小

注：

ready() 可以连续调用，能将代码分步骤执行：

$(document).ready(function(){
    alert('第一步');
}).ready(function(){
    alert('第二步');
}).ready(function(){
    alert('第三步');
});

简洁写法

与以上写法效果相同。

$(function(){

    // 开始写 jQuery 代码...

}

jQuery 选择器

jQuery 选择器允许我们对 HTHL 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id 、类、类型、属性、属性值等“查找”（或选择）HTML 元素。

jQuery 选择器基于已经存在的 CSS 选择器；除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

基本选择器

元素选择器

jQuery 元素选择器基于元素名称选取元素。

在页面中选取所有 <p> 元素：

$("p")

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定元素。

页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

jQuery 事件

jQuery 是为事件处理特别设计的。

什么是事件

页面对不同访问者的响应叫做事件。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

在事件中经常使用术语“触发”（或“激发”）。例如：“当按下按键时触发 keypress 事件”。

常见 DOM 事件

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("P").click();

下一步是定义点击后触发的事件。可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码
});

常见的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载后执行函数。

click()

click() 方法是当按钮点击事件被触发时会调用的一个函数。

该函数在用户点击 HTML 元素时执行。

dbclick()

当双击元素时，会发生 dbclick 事件。

dbclick() 方法触发 dbclick 事件，或规定当发生 dbclick 事件时运行的函数。

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数。

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数。

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生mousedown 事件时运行的函数。

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数。

hover()

hover() 方法用于模拟光标悬停事件。

当鼠标移动到元素上时，会触发指定的第一个函数（mouseenter），当鼠标移出这个元素时，会触发指定的第二个函数（mouseleave）。

focus()

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数。

blur()

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数。

jQuery 效果

隐藏/显示

通过 jQuery，可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。

通过 jQuery，可以使用 toggle() 方法来切换 hide() 和 show() 方法（显示被隐藏的元素，隐藏已显示的元素）。

语法：

$(selector).hide(speed, callback);
$(selector).show(speed, callback);
$(selector).toggle(speed, callback);
/*
    speed 参数 —— 可选。规定隐藏/显示的速度，可以取值为：“slow”、“fast” 或毫秒。
    callback 参数 —— 可选，隐藏或显示完成后所执行的函数名称。
*/

实例：

$("button").click(function(){
    $("p").hide(function(){
        alert("元素已经隐藏");
    });
});

淡入/淡出

通过 jQuery，我们可以实现元素的淡入淡出效果。

jQuery 拥有以下四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

fadeIn() 方法、fadeOut() 方法、fadeToggle() 方法

jQuery fadeIn() 方法用于淡入已隐藏的元素。

jQuery fadeOut() 方法用于淡出可见元素。

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换：

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

语法：

$(selector).fadeIn(speed, callback);
$(selector).fadeOut(speed, callback);
$(selector).fadeToggle(sped, callback);
/*
    speed 参数 —— 可选。规定效果的时长，可以取值为：“slow”、“fast” 或毫秒。
    callback 参数 —— 可选。fading 完成后执行的函数名称。
*/

实例：

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeOut("slow");
    $("#div3").fadeToggle(3000);
});

fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于0与1之间）。

语法：

$(selector).fadeTo(speed, opacity, callback);
/*
    speed 参数 —— 必需。规定效果的时长，可以取值为：“slow”、“fast” 或毫秒。
    opacity 参数 —— 必需。将效果设置为给定的不透明度（值介于0与1之间）。
    callback 参数 —— 可选。该函数完成后执行的函数名称。
*/

实例：

$("button").click(function(){
    $("#div1").fadeTo("slow", 0.4, function(){
        alert("效果已实现");
    });
});

滑动

通过 jQuery，可以在元素上创建滑动效果。

jQuery slideDown() 方法用于向下滑动元素。

jQuery slideUP() 方法用于向上滑动元素。

jQuery slideToggle() 方法可以在 slideDown() 与 slideUP() 方法之间进行切换：

如果元素向下滑动，则 slideToggle() 可向上滑动它们
如果元素向上滑动，则 slideToggle() 可向下滑动它们

语法：

$(selector).slideDown(speed, callback);
$(selector).slideUP(speed, callback);
$(selector).slideToggle(speed, callback);
/*
    speed 参数 —— 可选。规定效果的时长，可以取值为：“slow”、“fast” 或毫秒。
    callback 参数 —— 可选。滑动完成后执行的函数名称。
*/

动画

jQuery animate() 方法允许创建自定义的动画。

语法：

$(selector).animate({params}, speed, callback);
/*
    params 参数 —— 必需。定义形成动画的 CSS 属性。
    speed 参数 —— 可选。规定效果的时长，可以取值为：“slow”、“fast” 或毫秒。
    callback 参数 —— 可选。动画完成后执行的函数名称。
*/

注：

生成动画的过程中既可以使用单个属性也可以同时使用多个属性。
当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如：必须使用 paddingLeft 而不是 padding-left。

实例：

$("button").click(function(){
    S("div").animate({
        width:'150px',
        height:'150px'
    });
});

可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=。

实例：

$("button").click(function(){
    $("div").animate({
        width:'+=150px',
        heigth:'+=150px'
    });
});

队列功能

默认地，jQuery 提供针对动画的队列功能。

这意味着如果我们对同一元素编写多个 animate() 方法，jQuery 会创建包含这些方法调用的“内部”队列，然后逐一运行这些 animate 调用。

实例：

$("button").click(function(){
    var div = $("div");
    div.animate({left:'100px'}, "slow");
    div.animate({fontSize:'3em'}, "slow");
});

// 先将 <div> 元素向右移动了 100 像素，然后再增加文本的字号。

停止

jQuery stop() 方法用于在动画或效果完成之前对它们进行停止。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

语法：

$(selector).stop(stopAll, goToEnd);
/*
    stopAll 参数 —— 可选。规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
    goToEnd 参数 —— 可选。规定是否立即完成当前动画。默认是 false。
*/

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

补充

Callback

Callback 回调函数在当前动画或效果 100% 完成之后执行。

链（Chaining）

通过 jQuery，可以把动作/方法链接在一起。

Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）。

直到现在，我们都是一次写一条 jQuery 语句（一条接着一条）。通过链（chaining），我们可以在相同的元素上运行多条 jQuery 命令，这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，我们只需要简单地把该动作追加到之前的动作上。

实例：

// 把 css()、slideUp() 和 slideDown() 链接在一起。
// “p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动。

$("#p1").css("color", "red").slideUP(2000).slideDown(2000);

当进行链接时，代码行会变得很长。不过，jQuery 语法不是很严格，我们可以按照希望的格式来写，包含换行和缩进。

实例：

$("#p1").css("color", "red")
    .slideUp(2000)
    .slideDown(2000);

注：

jQuery 会抛弃多余的空格，并当成一行长代码来执行上面的代码行。

jQuery HTML

jQuery 拥有可操作 HTML 元素和属性的强大方法。

获取和设置内容和属性

获取和设置内容 - text()、html() 以及 val()

text() —— 设置或返回所选元素的文本内容

html() —— 设置或返回所选元素的内容（包括 HTML 标签）

val() —— 设置或返回表单字段的值

实例：

// 设置文本内容
$("#btn1").click(function(){
    $("#test1").text("Hello World");
});

// 设置内容（包括 HTML 标签）
$("#btn2").click(function(){
    $("#test2").html("<b>Hello World</b>");
});

// 获取input输入框的值
$("#btn3").click(function(){
    alert("输入框的值为：" + $("#test3").val());
});

获取和设置属性 - attr()

attr() —— 获取或设置（改变）属性值

实例：

// 获取链接中 href 属性的值
$("#btn").click(function(){
    alert($("#baidu").attr("href"));
});

// 设置（改变）链接中 href 属性的值
$("#btn").click(function(){
    $("#baidu").attr("href", "https://www.baidu.com/");
});

attr() 方法允许我们同时设置多个属性。

实例：

// 同时设置图片的 src 和 alt 属性
$("#btn").click(function(){
    $("#baidu").attr({
        "src": "image/baidu.png",
        "alt": "百度logo"
    });
});

jQuery 添加元素

通过 jQuery，可以很容易地添加新元素/内容。

jQuery append() 和 prepend() 方法

jQuery append() 方法在被选元素的结尾插入内容（仍然在该元素的内部）。
jQuery prepend() 方法在被选元素的开头插入元素（仍然在该元素的内部）。

实例：

$("p").append("<b>在段落的结尾追加文本</b>");
$("p").prepend("<b>在段落的开头追加文本</b>");

通过 append() 和 prepend() 方法添加若干新元素：

function appendText(){
    var txt1 = "<p>文本-1</p>";    // 使用 HTML 标签创建文本
    var txt2 = $("<p></p>").text("文本-2");    // 使用 jQuery 创建文本
    var txt3 = document.createElement("p");
    txt3.innerHTML = "文本-3";    // 使用 DOM 创建文本

    $("body").append(txt1, txt2, txt3);
}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。

实例：

$("img").after("在图片后面添加文本");
$("img").before("在图片前面添加文本");

通过 after() 和 before() 方法添加若干新元素：

// 与 append()、prepend() 方法用法相似
$("img").after(txt1, txt2, txt3);

jQuery 删除元素

通过 jQuery，可以很容易地删除已有的 HTML 元素。

jQuery remove() 方法

jQuery remove() 方法删除被选元素及其子元素。

实例：

$("#div1").remove();

过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许我们对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

实例：

// 删除所有 class="italic" 的 <p> 元素
$("p").remove(".italic");

jQuery empty() 方法

jQuery empty() 方法删除被选元素的子元素。

实例：

$("#div1").empty();

jQuery CSS 类

addClass() —— 向被选元素添加一个或多个类

removeClass() —— 从被选元素删除一个或多个类

toggleClass() —— 对被选元素进行添加/删除类的切换操作

实例：

// 样式表
.important {
    font-weight: bold;
    font-size: xx-large;
}
.blue {
    color:blue;
}

// 对 <h1>、<h2>、<h3> 添加 class="blue"
$("h1,h2,h3").addClass("blue");

// 对 <p> 添加 class="important blue"
$("p").addClass("important blue");

// 对 <h1>、<h2>、<h3> 移除 class="blue"
$("h1,h2,h3").removeClass("blue");

// 对 <h1>、<h2>、<h3> 进行添加/删除 class="blue" 的切换操作
$("h1,h2,h3").toggleClass("blue");

jQuery css() 方法

jQuery css() 方法设置或返回被选元素的一个或多个样式属性。

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

实例：

$("p").css("background-color");

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname", "value");

实例：

$("p").css("background-color", "yellow");

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value", "propertyname":"value", ...});

实例：

$("p").css({"background-color":"yellow", "font-size":"200%"});

jQuery 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。
innerHeight() 方法返回元素的高度（包括内边距）。

jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。

起啥名呢？？？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery 是一个 JavaScript 函数库。jQuery 是一个轻量级的“写的少，做的多“的 JavaScript 库。
复制链接

扫一扫

专栏目录

jQuery

jQuery 简介

什么是 jQuery

jQuery 安装

网页中添加 jQuery

下载 jQuery

从 CDN 中载入

查看 jQuery 使用版本

jQuery 语法

jQuery 语法

文档就绪函数

语法

简洁写法

jQuery 选择器

基本选择器

元素选择器

#id 选择器

.class 选择器

更多选择器实例

jQuery 事件

什么是事件

常见 DOM 事件

jQuery 事件方法语法

常见的 jQuery 事件方法

$(document).ready()

click()

dbclick()

mouseenter()

mouseleave()

mousedown()

mouseup()

hover()

focus()

blur()

jQuery 效果

隐藏/显示

淡入/淡出

fadeIn() 方法、fadeOut() 方法、fadeToggle() 方法

fadeTo() 方法

滑动

动画

语法：

队列功能

停止

补充

Callback

链（Chaining）

jQuery HTML

获取和设置内容和属性

获取和设置内容 - text()、html() 以及 val()

获取和设置属性 - attr()

jQuery 添加元素

jQuery append() 和 prepend() 方法

jQuery after() 和 before() 方法

jQuery 删除元素

jQuery remove() 方法

jQuery empty() 方法

jQuery CSS 类

jQuery css() 方法

返回 CSS 属性

设置 CSS 属性

设置多个 CSS 属性

jQuery 尺寸

jQuery width() 和 height() 方法

jQuery innerWidth() 和 innerHeight() 方法

jQuery outerWidth() 和 outerHeight() 方法

“相关推荐”对你有帮助么？