jQuery速成--非前端专业的可选项
前言
在Vue、React框架盛行的今天,我们是否还要学习 jQuery 框架呢,答案是当然可以的,jQuery框架曾经也是流行一时,是一个非常方便好用的框架,在做一些前后端不分离的项目上有非常大的优势,也很方便,在一些场景下还是有应用空间的(本人就遇到很多学校里的项目,用的都是jQuery,因为大家都不是专业的前端,所以用jQuery很正常,而且往往学校里的一些项目都比较老了,所以用老框架!),那么我们就来速成一下 jQuery。(因为是速成,所以一些边角可能不会照顾到,大部分都是菜鸟教程摘录,有基础的话看几个小时就可以上手了)
jQuery基础
jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法:$(selector).action()
例子:
-
$(this).hide() - 隐藏当前元素
-
$("p").hide() - 隐藏所有 <p> 元素
-
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
-
$("#test").hide() - 隐藏 id="test" 的元素
文件就绪事件
$(document).ready(function(){
// 开始写jQuery代码
});
将jQuery代码写在 document ready 函数中,可以使文档加载(就绪)之后才开始运行 jQuery 代码,即在 HTML DOM 加载完成后才可以对 DOM 进行操作。
简洁写法:
$(function() {
// 写jQuery代码
});
jQuery 选择器
元素选择器
如:$("p").action()
id选择器
如:$("#id").action()
class选择器
如:$(".class").action()
还有更多的选择方法,可以写在里面,语法和css是一样的
jQuery 事件
页面对不同访问者的响应叫做事件,事件处理程序指的是当HTML中发生某些事件时调用的方法。
某些可能的事件:
-
在元素上移动鼠标
-
点击元素
-
...
常见的DOM事件:
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
jQuery事件方法语法:
// 以点击事件为例子
$("p").click(); // 点击事件
$("p").click(function(){
// 点击事件发生后触发的代码
});
事件在上面都有链接详情,不做过多赘述。
jQuery 效果
hide(),show():
$("#hide").click(function(){
$("p").hide(); // 隐藏HTML元素
});
$("#show").click(function(){
$("p").show(); // 显示HTML元素
});
hide()和show()可选的两个参数:
hide(speed,callback); show(speed,callback);
speed:隐藏/显示速度;callback:隐藏或显示完成后所执行的函数名称
toggle():
显示被隐藏的元素,隐藏已显示的元素,用法和参数和上面一样
jQuery Fading 方法:
实现HTML元素的淡入淡出
分别是以下四种方法:
// fadeIn(speed, callback);方法 用于淡入已隐藏的元素。其中speed、callback为可选参数
$("button").click(function(){
$("#div1").fadeIn();
});
//fadeOut(speed, callback);方法 用于淡出可见元素。其中speed、callback为可选参数
$("button").click(function(){
$("#div1").fadeOut();
});
//fadeToggle(speed, callback);方法 淡入已经淡出的元素,淡出已经淡入的元素,speed、callback为可选参数
$("button").click(function(){
$("#div1").fadeToggle();
});
/* fadeTo(speed,opacity,callback); 方法
* 允许渐变为给定的不透明度
* speed和callback都和上面一样,opacity参数设置淡入淡出给定的不透明度(值介于0与1之间)
*/
$("button").click(function(){
$("#div1").fadeTo("slow", 0.4);
});
jQuery 滑动方法
使元素上下滑动
以下是三种方法:
// slideDown(speed, callback);方法,用于下滑元素,可选参数不讲了
$("#flip").click(function(){
$("#panel").slideDown();
});
// slideUp(speed, callback);方法,用于上滑元素,可选参数不讲了
$("#flip").click(function(){
$("#panel").slideDown();
});
// slideToggle(speed, callback);方法,用于下滑和上滑元素,可选参数不讲了
$("#flip").click(function(){
$("#panel").slideDown();
});
jQuery 动画方法
语法:$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 和 callback就不说了
// 实例 简单来说,就是触发事件后,改变一个元素的css,达到动画效果
$("button").click(function(){
$("div").animate({left:'250px'});
});
// 操作多个元素
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
// 使用相对值 定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});
// 使用预定的值 可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
// 使用队列功能(这个还是有很多门道的,我这里只有用法)
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
jQuery stop() 方法
/*
stop(stopAll, goToEnd);
stopAll:是否清除动画队列,默认为false
goToEnd:是否立即完成当前动画,默认为false
*/
$("#stop").click(function(){
$("#panel").stop();
});
tips:在动画队列的场景下(连续播放多个动画),stop() 只停止当前正在运行的动画,停止动画后,队列中的下一个动画开始进行。
jQuery callback 方法
callback 参数设置后,函数将会在当前动画完成之后才执行,不然当前函数就是和动画同步执行了。
// 执行完hide之后,调用内部的函数
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
// 方法和hide动画同时进行
$("button").click(function(){
$("p").hide(1000);
alert("段落现在被隐藏了");
});
jQuery 方法链
当我们要对同一个HTML元素执行不同的 jQuery 事件时,我们就可以写方法链
// 这里是按先后顺序执行的
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
// 如果链过长,我们也可以这么写
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery 操作HTML
jQuery DOM 操作
三个简单实用的DOM操作的 jQuery 方法:
-
text() - 设置或返回所选元素的文本内容
-
html() - 设置或返回所选元素的内容(包括 HTML 标签)
-
val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
alert("值为: " + $("#test").val());
})
获取属性值 - attr() 方法
// 这个方法可以获取一个元素的属性值
$("button").click(function(){
alert($("#runoob").attr("href"));
});
jQuery 设置内容和属性
// 还是上面的四个操作,但是上面是查询,这里是设置
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
$("button").click(function(){
// 这里是以键值对的形式更改
$("#runoob").attr("href","http://www.runoob.com/jquery");
// 修改多个属性值
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
text()、html()、val()、attr()的回调函数
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
// 这里的i就是下标,origText就是原始的值
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
// attr()的回调函数(和上面大同小异)
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery 添加元素
添加新的HTML内容
-
append() - 在被选元素的结尾插入内容
-
prepend() - 在被选元素的开头插入内容
-
after() - 在被选元素之后插入内容
-
before() - 在被选元素之前插入内容
// tips:append/prepend 是在选择元素内部嵌入(即内部的最后和开头)。after/before 是在元素外面追加。
$("p").append("最后追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");
jQuery 删除元素
删除HTML元素
-
remove() - 删除被选元素(及其子元素)
-
empty() - 从被选元素中删除子元素
// 删除被选元素 及其 子元素
$("#div1").remove();
// 删除被选元素 的 子元素
$("#div1").empty();
// 过滤被删除的元素 下面的例子删除 class="italic" 的所有 <p> 元素:
$("p").remove(".italic");
jQuery 改变尺寸
jQuery 提供多个处理尺寸的重要方法:
-
width()
-
height()
-
innerWidth()
-
innerHeight()
-
outerWidth()
-
outerHeight()
这六种方法都是一样的,都是用来设置或返回尺寸
$("#div1").width();
$("#div1").width();
$("#div1").innerWidth();
$("#div1").innerHeight();
$("#div1").outerWidth();
$("#div1").outerHeight();
jQuery 操作CSS
通过 jQuery,可以很容易地对 CSS 元素进行操作
-
addClass() - 向被选元素添加一个或多个类
-
removeClass() - 从被选元素删除一个或多个类
-
toggleClass() - 对被选元素进行添加/删除类的切换操作
-
css() - 设置或返回样式属性
/*
css样式如下:
.important {
font-weight:bold;
font-size:xx-large;
}
.blue {
color:blue;
}
*/
// addClass()方法,向不同元素添加class属性
$("button").click(function(){
$("h1,h2,p").addClass("blue"); // 添加类时可以选取多个元素
$("div").addClass("important");
});
// removeClass()方法,在不同元素中删除指定的class属性
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
// toggleClass()方法,该方法对被选元素进行添加/删除类的切换操作
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
// ----------------------------------------------------------------
// 返回css属性:css("属性名");
// 如下实例就返回了bgc的属性值
$("p").css("background-color");
// 设置css属性:css("属性名","属性值");
// 如下实例
$("p").css("background-color","yellow");
// 设置多个css属性 (键值对形式)
$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery 遍历
什么是遍历?
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
向上遍历 DOM 树
方法:
-
parent()
-
parents()
-
parentsUntil()
// parent()方法,返回备选元素的直接父元素(返回后可进行接下去的操作)
$(document).ready(function(){
$("span").parent();
});
// parents()方法,返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
$(document).ready(function(){
$("span").parents();
});
// 过滤:在所有祖先中搜索某元素
// 如下,在所有祖先中搜索ul元素
$(document).ready(function(){
$("span").parents("ul");
});
// parentsUntil()方法,返回介于两个给定元素之间的所有祖先元素
// 下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素:
$(document).ready(function(){
$("span").parentsUntil("div");
});
向下遍历 DOM 树
方法:
-
children()
-
find()
// children()方法,返回被选元素的所有 直接 子元素
$(document).ready(function(){
$("div").children();
});
// 过滤:可选参数来过滤对子元素的搜索
// 下面的例子返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素:
$(document).ready(function(){
$("div").children("p.1");
});
// find()方法,返回被选元素的后代元素,一路向下直到最后一个后代。
// 下面的例子返回属于 <div> 后代的所有 <span> 元素:
$(document).ready(function(){
$("div").find("span");
});
// 下面的例子返回 <div> 的所有后代:
$(document).ready(function(){
$("div").find("*");
});
在 DOM 树中水平遍历
方法:
-
siblings()
-
next()
-
nextAll()
-
nextUntil()
-
prev()
-
prevAll()
-
prevUntil()
// siblings() 方法返回被选元素的所有同胞元素。
$(document).ready(function(){
$("h2").siblings();
});
// 过滤:只选p元素
$(document).ready(function(){
$("h2").siblings("p");
});
// next() 方法返回被选元素的下一个同胞元素。
$(document).ready(function(){
$("h2").next();
});
// nextAll() 方法返回被选元素的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextAll();
});
// nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$(document).ready(function(){
$("h2").nextUntil("h6");
});
//prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞之前元素遍历,而不是之后元素遍历)。
jQuery 过滤
方法:
-
first()
-
last()
-
eq()
-
filter()
-
not()
// first() 方法返回被选元素的首个元素。
$(document).ready(function(){
$("div p").first();
});
// last() 方法返回被选元素的最后一个元素。
$(document).ready(function(){
$("div p").last();
});
// eq() 方法返回被选元素中带有指定索引号的元素。
// 索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素(索引号 1):
$(document).ready(function(){
$("p").eq(1);
});
// filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
// 下面的例子返回带有类名 "url" 的所有 <p> 元素:
$(document).ready(function(){
$("p").filter(".url");
});
// not() 方法返回不匹配标准的所有元素。
// 下面的例子返回不带有类名 "url" 的所有 <p> 元素:
$(document).ready(function(){
$("p").not(".url");
});
jQuery AJAX
简介
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新。(也就是不需要刷新网页),原来Ajax是在jQuery中前端和后端数据交互的方法呀!!
什么是AJAX?
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
参考手册:
jQuery load() 方法
一个Ajax方法,load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
语法:$(selector).load(URL,data,callback);
必选URL:您希望加载文件或网页的地址
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
/*
下面是示例文件的内容
这是示例文件("demo_test.txt")的内容:
<h2>jQuery AJAX 是个非常棒的功能!</h2>
<p id="p1">这是段落的一些文本。</p>
*/
// 下面的例子会把文件 "demo_test.txt" 的内容加载到指定的 <div> 元素中:此时这个元素的内容就变成了上面的文本,直接变换的
$("#div1").load("demo_test.txt");
// 也可以把 jQuery 选择器添加到 URL 参数。
// 下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中:
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
-
responseTxt - 包含调用成功时的结果内容
-
statusTXT - 包含调用的状态
-
xhr - 包含 XMLHttpRequest 对象
下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功,则显示"外部内容加载成功!",而如果失败,则显示错误消息:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery get()/post() 方法
GET 和 POST 请求(具体上网查,不做赘述)
两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。
-
GET - 从指定的资源请求数据
-
POST - 向指定的资源提交要处理的数据
GET 基本上用于从服务器获得(取回)数据。注释:GET 方法可能返回缓存数据。
POST 也可用于从服务器获取数据。不过,POST 方法不会缓存数据,并且常用于连同请求一起发送数据。
$.get()方法
语法:
$.get(URL,callback);
或
$.get( URL [, data ] [, callback ] [, dataType ] )
-
URL:发送请求的 URL字符串。
-
data:可选的,发送给服务器的字符串或 key/value 键值对。
-
callback:可选的,请求成功后执行的回调函数。
-
dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
// 下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据:
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
回调函数的参数:
第一个回调参数(data)存有被请求页面的内容,第二个回调参数(status)存有请求的状态。
$.post()方法(写法上和get大同小异)
语法:
$.post(URL,callback);
或
$.post( URL [, data ] [, callback ] [, dataType ] )
-
URL:发送请求的 URL字符串。
-
data:可选的,发送给服务器的字符串或 key/value 键值对。
-
callback:可选的,请求成功后执行的回调函数。
-
dataType:可选的,从服务器返回的数据类型。默认:智能猜测(可以是xml, json, script, 或 html)。
// 下面的例子使用 $.post() 连同请求一起发送数据:(终于看到一个有data的例子了)
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"菜鸟教程",
url:"http://www.runoob.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
回调函数的参数和get一样
// 上面的php代码如下:(不懂也无伤大雅,反正现在php用的公司已经少之又少了,害,以前可是jQuery和php的天下啊)
<?php
$name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
$url = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : '';
echo '网站名: ' . $name;
echo "\n";
echo 'URL 地址: ' .$url;
?>
jQuery 其他
onConflict() 方法
由于不太重要,只作简单说明,作用:解决jQuery和其他js框架的冲突,具体参考:
JSONP
由于不太重要,只作简单说明,作用:可以让网页从别的域名(网站)那获取资料,即跨域读取数据。具体参考:
后记
阅读完这些,大伙应该对 jQuery 已经有了初步的了解了,其实 jQuery 还有挺多内容的,如果你不想钻研,只是想用一用这个框架的话,那么很简单,直接参照着手册用就行了。这里我也放两个网址,方便大家食用 jQuery,感谢大家的阅读!。
参考:菜鸟教程 | jQuery教程
更加细化的参考手册:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战