[JD_Magi]jQuery快速入门学习

2023-12-12 10:50
文章标签 javascript 学习 入门 快速 jquery frontend jd magi

本文主要是介绍[JD_Magi]jQuery快速入门学习，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

jQuery入门学习

1、什么是jQuery

  • jQuery是一个JavaScript函数库。

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

2、主要功能

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

3、jQuery的引入

3.1、下载与引入jQuery

  1. 直接去官网下载jQuery文件，一般分为两种

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

  2. 通过script标签引入文件（引入后就可以使用）

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

3.2、不用下载通过CDN使用jQuery（引入后就可以使用了）

  1. Staticfile CDN

    <head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

  2. 百度 CDN

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

  3. 新浪 CDN

    <head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
```

4、jQuery的使用

4.1、jQuery语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(*selector*).*action*()

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

实例

$(this).hide() // 隐藏当前元素$("p").hide() //隐藏所有 <p> 元素$("p.test").hide() //隐藏所有 class="test" 的 <p> 元素$("#test").hide() //隐藏 id="test" 的元素

4.2、JQuery选择器

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

  1. 元素选择器

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function () {$("button").click(function () {$("p").hide();});});</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

  2. id选择器

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function () {$("button").click(function () {$("#test").hide();});});</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p id="test">这是另一个段落。</p>
<button>点我</button>
</body>
</html>

  3. class选择器

    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>$(document).ready(function () {$("button").click(function () {$(".test").hide();});});</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p id="test">这是另一个段落。</p>
<button>点我</button>
</body>
</html>

4.3、jQuery事件

常用的jQuery事件

//click()：鼠标点击事件
$("p").click(function(){$(this).hide();
});
//dbclick()：鼠标双击事件
$("p").dblclick(function(){$(this).hide();
});
//mouseenter()：鼠标指针穿过元素事件
$("#p1").mouseenter(function(){alert('您的鼠标移到了 id="p1" 的元素上!');
});
//mouseleave()：鼠标指针离开元素事件
$("#p1").mouseleave(function(){alert("再见，您的鼠标离开了该段落。");
});
//mousedown()：鼠标移到元素上方点击鼠标按键事件
$("#p1").mousedown(function(){alert("鼠标在该段落上按下！");
});
//mouseup()：鼠标移到元素上方点击并松开事件
$("#p1").mouseup(function(){alert("鼠标在段落上松开。");
});
//hover()：光标悬停事件
$("#p1").hover(function(){alert("你进入了 p1!");},function(){alert("拜拜! 现在你离开了 p1!");}
);
//focus()：获得焦点事件
$("input").focus(function(){$(this).css("background-color","#cccccc");
});
//blur()：失去焦点事件
$("input").blur(function(){$(this).css("background-color","#ffffff");
});

4.4、jQuery效果

  1. 显示和隐藏

    //通过点击显示和隐藏按钮可以实现对html元素的隐藏和显示
$("#hide").click(function(){$("p").hide();
});$("#show").click(function(){$("p").show();
});
//语法
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
/*
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
*///快速切换隐藏和显示
$("button").click(function(){$("p").toggle();
});
//语法
$(selector).toggle(speed,callback);

  2. 淡入和淡出

    //用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
//淡出可见元素
$(selector).fadeOut(speed,callback);
//fadeIn() 与 fadeOut() 方法之间进行切换
$(selector).fadeToggle(speed,callback);
//渐变为给定的不透明度
$(selector).fadeTo(speed,opacity,callback);

  3. 滑动

    //向下滑动元素
$(selector).slideDown(speed,callback);
//向上滑动元素
$(selector).slideUp(speed,callback);
// slideDown() 与 slideUp() 方法之间进行切换
$(selector).slideToggle(speed,callback);

  4. 动画

    $(selector).animate({params},speed,callback);
/*
必需的 params 参数定义形成动画的 CSS 属性。(可以操作多个属性，定义相对值（+=，-=），使用预定义的值（show、hide、toggle。。。），使用队列功能)
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
*/

  5. 停止动画

    //用于停止动画或效果
$(selector).stop(stopAll,goToEnd);

  6. 链

    允许在相同的元素上运行多条 jQuery 命令，一条接着另一条

    $(document).ready(function(){$("button").click(function(){$("#p1").css("color","red").slideUp(2000).slideDown(2000);});});

5、jQuery HTML操作

5.1、内容和属性

获取

/*
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
*/
$(document).ready(function(){//显示文本$("#btn1").click(function(){alert("Text: " + $("#test").text());});//显示文本包html $("#btn2").click(function(){alert("HTML: " + $("#test").html());});
});
//显示值
$(document).ready(function(){$("button").click(function(){alert("值为: " + $("#test").val());});
});//获取属性值attr()
$("button").click(function(){alert($("#runoob").attr("href"));
});

设置

//设置文本
$("#btn1").click(function(){$("#test1").text("Hello world!");
});
//设置文本包html
$("#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");
});

添加

//append() - 在被选元素的结尾插入内容
$("p").append("追加文本");//prepend() - 在被选元素的开头插入内容
$("p").prepend("在开头追加文本");//after() - 在被选元素之后插入内容
$("img").after("在后面添加文本");//before() - 在被选元素之前插入内容
$("img").before("在前面添加文本");

删除

//remove() - 删除被选元素（及其子元素）
$("#div1").remove();$("p").remove(".italic");//删除 class="italic" 的所有 <p> 元素 (过滤被删除的元素)//empty() - 从被选元素中删除子元素
$("#div1").empty();

6、操作CSS

5.1、CSS类

.important
{font-weight:bold;font-size:xx-large;
} 
.blue
{color:blue;
}
//addClass() - 向被选元素添加一个或多个类
$("button").click(function(){//添加一个类$("h1,h2,p").addClass("blue");$("div").addClass("important");
});$("button").click(function(){//添加多个类$("body div:first").addClass("important blue");
});
//removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){$("h1,h2,p").removeClass("blue");
});//toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){$("h1,h2,p").toggleClass("blue");
});//css() - 设置或返回样式属性
//css("propertyname","value");
$("p").css("background-color","yellow");
//css({"propertyname":"value","propertyname":"value",...});
$("p").css({"background-color":"yellow","font-size":"200%"});

5.2、尺寸

在这里插入图片描述

//width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
//height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
$("button").click(function(){var txt="";txt+="div 的宽度是: " + $("#div1").width() + "</br>";txt+="div 的高度是: " + $("#div1").height();$("#div1").html(txt);
});//innerWidth() 方法返回元素的宽度（包括内边距）
//innerHeight() 方法返回元素的高度（包括内边距）
$("button").click(function(){var txt="";txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";txt+="div 高度，包含内边距: " + $("#div1").innerHeight();$("#div1").html(txt);
});//outerWidth() 方法返回元素的宽度（包括内边距和边框）
//outerHeight() 方法返回元素的高度（包括内边距和边框）
$("button").click(function(){var txt="";txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();$("#div1").html(txt);
});

7、遍历

概念：根据其相对于其他元素的关系来"查找"（或选取）HTML 元素

//parent() 方法返回被选元素的直接父元素
$(document).ready(function(){$("span").parent();
});
//parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
$(document).ready(function(){$("span").parents();
});
//parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
$(document).ready(function(){$("span").parentsUntil("div");
});//children() 方法返回被选元素的所有直接子元素
$(document).ready(function(){$("div").children();
});
//find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
//返回属于 <div> 后代的所有 <span> 元素
$(document).ready(function(){$("div").find("span");
});//siblings() 方法返回被选元素的所有同胞元素
$(document).ready(function(){$("h2").siblings();
});
//next() 方法返回被选元素的下一个同胞元素
$(document).ready(function(){$("h2").next();
});
//nextAll() 方法返回被选元素的所有跟随的同胞元素。
$(document).ready(function(){$("h2").nextAll();
});
//nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
$(document).ready(function(){$("h2").nextUntil("h6");
});

过滤

//first() 方法返回被选元素的首个元素
$(document).ready(function(){//返回div中的第一个p元素$("div p").first();
});
//last() 方法返回被选元素的最后一个元素。
$(document).ready(function(){$("div p").last();
});
//eq() 方法返回被选元素中带有指定索引号的元素。(索引从0开始)
$(document).ready(function(){$("p").eq(1);
});
//filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
$(document).ready(function(){$("p").filter(".url");
});
//not() 方法返回不匹配标准的所有元素。
$(document).ready(function(){$("p").not(".url");
});

8、AJAX

8.1、什么是AJAX

  • AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）

  • 能在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示

8.2、使用

  • jQuery load()

    语法：$(selector).load(URL,data,callback);

    参数：

    • 必需的 URL 参数规定加载的 URL。

    • 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

    • 可选的 callback 参数是 load() 方法完成后所执行的函数名称。

      回调函数可以设置不同的参数：

      • responseTxt - 包含调用成功时的结果内容
      • statusTXT - 包含调用的状态
      • xhr - 包含 XMLHttpRequest 对象

  • jQuery - AJAX get() 和 post() 方法

    • GET - 从指定的资源请求数据、GET 方法可能返回缓存数据

    • POST - 向指定的资源提交要处理的数据、POST 方法不会缓存数据，并且常用于连同请求一起发送数据

      get语法：$.get(URL,callback);

      $("button").click(function(){$.get("demo_test.php",function(data,status){alert("数据: " + data + "\n状态: " + status);});
});

      post语法:$.post(URL,data,callback);

      $("button").click(function(){$.post("/try/ajax/demo_test_post.php",{name:"菜鸟教程",url:"http://www.runoob.com"},function(data,status){alert("数据: \n" + data + "\n状态: " + status);});
});

这篇关于[JD_Magi]jQuery快速入门学习的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/484339。

相关文章

从入门到精通C++11 ＜chrono＞ 库特性

从入门到精通C++11 ＜chrono＞ 库特性

《从入门到精通C++11＜chrono＞库特性》chrono库是C++11中一个非常强大和实用的库,它为时间处理提供了丰富的功能和类型安全的接口,通过本文的介绍,我们了解了chrono库的基本概念... 目录一、引言1.1 为什么需要<chrono>库1.2<chrono>库的基本概念二、时间段（Durat
阅读更多...
解析C++11 static_assert及与Boost库的关联从入门到精通

解析C++11 static_assert及与Boost库的关联从入门到精通

《解析C++11static_assert及与Boost库的关联从入门到精通》static_assert是C++中强大的编译时验证工具,它能够在编译阶段拦截不符合预期的类型或值,增强代码的健壮性,通... 目录一、背景知识：传统断言方法的局限性1.1 assert宏1.2 #error指令1.3 第三方解决
阅读更多...
Linux如何快速检查服务器的硬件配置和性能指标

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程（几C？）1. 使用 nproc（最简单）2. 使用 lscpu（详细信
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
从入门到精通MySQL 数据库索引(实战案例)

从入门到精通MySQL 数据库索引(实战案例)

《从入门到精通MySQL数据库索引(实战案例)》索引是数据库的目录,提升查询速度,主要类型包括BTree、Hash、全文、空间索引,需根据场景选择,建议用于高频查询、关联字段、排序等,避免重复率高或... 目录一、索引是什么？能干嘛？核心作用：二、索引的 4 种主要类型（附通俗例子）1. BTree 索引（
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
Redis 配置文件使用建议redis.conf 从入门到实战

Redis 配置文件使用建议redis.conf 从入门到实战

《Redis配置文件使用建议redis.conf从入门到实战》Redis配置方式包括配置文件、命令行参数、运行时CONFIG命令,支持动态修改参数及持久化,常用项涉及端口、绑定、内存策略等,版本8... 目录一、Redis.conf 是什么？二、命令行方式传参（适用于测试）三、运行时动态修改配置（不重启服务
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2