[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。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya（不是本人，claude AI）在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容： 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
学习hash总结

学习hash总结

2014/1/29/   最近刚开始学hash，名字很陌生，但是hash的思想却很熟悉，以前早就做过此类的题，但是不知道这就是hash思想而已，说白了hash就是一个映射，往往灵活利用数组的下标来实现算法，hash的作用：1、判重；2、统计次数；
阅读更多...
电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

电脑桌面文件删除了怎么找回来？别急，快速恢复攻略在此

在日常使用电脑的过程中，我们经常会遇到这样的情况：一不小心，桌面上的某个重要文件被删除了。这时，大多数人可能会感到惊慌失措，不知所措。 其实，不必过于担心，因为有很多方法可以帮助我们找回被删除的桌面文件。下面，就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件，并且还没有进行其他操作，那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2