【 Python 全栈开发 – WEB开发篇 – 27 】JQuery

一、JQuery

JQuery 是一种快速、简洁且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画效果和 Ajax 交互等常见的前端开发任务。JQuery 的主要特点是其轻量级、跨浏览器兼容性、可扩展性和易于使用。

JQuery 的语法非常简单易懂，使用 CSS 选择器来选取 HTML 元素，然后对其进行操作，比如改变样式、添加事件等。下面是一些常用的 JQuery 语法：

1. 选择器
   JQuery 使用 CSS 选择器来选取 HTML 元素，可以使用标签名、类名、ID 等方式来选取元素。例如：

$("p") // 选取所有的<p>元素
$(".myclass") // 选取所有类名为myclass的元素
$("#myid") // 选取ID为myid的元素

2. 事件
   可以使用 JQuery 来添加事件处理程序，例如：

$("button").click(function(){
  alert("按钮被点击了！");
});

3. 操作 HTML 元素
   可以使用 JQuery 来操作 HTML 元素，包括获取和设置元素的属性、文本、 HTML 内容等。例如：

$("p").attr("class", "myclass"); // 将所有<p>元素的class属性设置为myclass
$("p").text("Hello World"); // 将所有<p>元素的文本内容设置为Hello World
$("p").html("<strong>Hello</strong> World"); // 将所有<p>元素的HTML内容设置为<strong>Hello</strong> World

4. 动画
   JQuery 提供了很多常用的动画效果，比如淡入淡出、滑动等，可以让页面更加生动有趣。例如：

$("p").hide(); // 隐藏所有<p>元素
$("p").fadeIn(); // 淡入所有<p>元素
$("p").slideUp(); // 滑动隐藏所有<p>元素

5. Ajax
   JQuery 可以通过 Ajax 方式与服务器进行交互，获取数据并对页面进行动态更新。例如：

$.get("url", function(data){
  $("p").text(data); // 将服务器返回的数据显示在所有<p>元素中
});

总之，JQuery 是一个非常流行的 JavaScript 库，被广泛应用于 Web 开发中，它的优点包括易于学习、跨浏览器兼容性好、功能丰富、可扩展性强等。如果你想成为一名优秀的前端开发人员，学习 JQuery 是必不可少的一步。

二、选择器

JQuery 使用 CSS 选择器来选取 HTML 元素，下面是 JQuery 的选择器详细介绍：

1.标签选择器

标签选择器用于选取 HTML 文档中的所有指定标签元素，例如：

$("p") // 选取所有的<p>元素

2.类选择器

类选择器用于选取 HTML 文档中指定类名的元素，例如：

$(".myclass") // 选取所有类名为myclass的元素

3.ID 选择器

ID 选择器用于选取 HTML 文档中指定 ID 的元素，例如：

$("#myid") // 选取ID为myid的元素

4.属性选择器

属性选择器用于选取 HTML 文档中指定属性的元素，例如：

$("[href]") // 选取所有带有href属性的元素
$("[href='#']") // 选取所有href属性值为#的元素

5.子元素选择器

子元素选择器用于选取指定元素的所有直接子元素，例如：

$("ul > li") // 选取所有<ul>元素的直接子元素<li>

6.后代元素选择器

后代元素选择器用于选取指定元素的所有后代元素，例如：

$("ul li") // 选取所有<ul>元素的所有<li>后代元素

7.兄弟元素选择器

兄弟元素选择器用于选取指定元素的所有同级元素，例如：

$("p + p") // 选取所有紧接着<p>元素后面的<p>元素
$("p ~ p") // 选取所有<p>元素后面的所有同级<p>元素

8.过滤选择器

过滤选择器用于选取指定条件的元素，例如：

$("p:first") // 选取第一个<p>元素
$("p:last") // 选取最后一个<p>元素
$("p:even") // 选取所有偶数位置的<p>元素
$("p:odd") // 选取所有奇数位置的<p>元素
$("p:eq(2)") // 选取索引为2的<p>元素
$("p:gt(2)") // 选取索引大于2的<p>元素
$("p:lt(2)") // 选取索引小于2的<p>元素
$("p:not(.myclass)") // 选取所有不含有myclass类名的<p>元素

总之，JQuery 的选择器非常强大，可以根据不同的需求选取 HTML 文档中的元素，是前端开发中非常重要的一部分。

三、事件

JQuery 提供了很多种事件，可以用来响应用户的交互操作，下面是 JQuery 的事件详细介绍：

1.click事件

click 事件在元素被点击时触发，例如：

$("button").click(function(){
  alert("按钮被点击了！");
});

2.dblclick事件

dblclick 事件在元素被双击时触发，例如：

$("p").dblclick(function(){
  $(this).hide();
});

3.mouseover事件

mouseover 事件在鼠标移到元素上方时触发，例如：

$("p").mouseover(function(){
  $(this).css("background-color", "yellow");
});

4.mouseout事件

mouseout 事件在鼠标从元素上方移开时触发，例如：

$("p").mouseout(function(){
  $(this).css("background-color", "white");
});

5.mousedown事件

mousedown 事件在鼠标按下元素时触发，例如：

$("p").mousedown(function(){
  $(this).css("background-color", "red");
});

6.mouseup事件

mouseup 事件在鼠标松开元素时触发，例如：

$("p").mouseup(function(){
  $(this).css("background-color", "green");
});

7.keydown事件

keydown 事件在用户按下键盘上的任意键时触发，例如：

$(document).keydown(function(){
  $("div").animate({left: '+=10px'});
});

8.keyup事件

keyup 事件在用户松开键盘上的任意键时触发，例如：

$(document).keyup(function(){
  $("div").animate({left: '-=10px'});
});

9.submit事件

submit 事件在表单被提交时触发，例如：

$("form").submit(function(){
  alert("表单已提交！");
});

总之，JQuery 提供了非常丰富的事件，可以用来响应用户的交互操作，实现更加生动有趣的页面效果。在前端开发中，熟练掌握 JQuery 的事件处理能力非常重要。

四、操作 HTML 元素

JQuery 提供了许多方法来操作 HTML 元素，包括获取和设置元素的属性、文本、HTML 内容等，下面是 JQuery 的操作 HTML 元素详细介绍：

1.获取和设置元素的属性

可以使用 JQuery 来获取和设置元素的属性，例如：

$("p").attr("class", "myclass"); // 将所有的<p>元素的class属性设置为myclass
$("img").attr("src"); // 获取第一个<img>元素的src属性值

2.获取和设置元素的文本内容

可以使用 JQuery 来获取和设置元素的文本内容，例如：

$("p").text(); // 获取第一个<p>元素的文本内容
$("p").text("Hello World"); // 将所有的<p>元素的文本内容设置为Hello World

3.获取和设置元素的HTML内容

可以使用 JQuery 来获取和设置元素的 HTML 内容，例如：

$("p").html(); // 获取第一个<p>元素的HTML内容
$("p").html("<strong>Hello</strong> World"); // 将所有的<p>元素的HTML内容设置为<strong>Hello</strong> World

4.添加和移除元素的类名

可以使用 JQuery 来添加和移除元素的类名，例如：

$("p").addClass("myclass"); // 将所有的<p>元素添加myclass类名
$("p").removeClass("myclass"); // 将所有的<p>元素移除myclass类名

5.显示和隐藏元素

可以使用 JQuery 来显示和隐藏元素，例如：

$("p").hide(); // 隐藏所有的<p>元素
$("p").show(); // 显示所有的<p>元素

6.添加和移除元素

可以使用 JQuery 来添加和移除元素，例如：

$("ol").append("<li>Item 4</li>"); // 在所有的<ol>元素中添加一个新的<li>元素
$("li:last").remove(); // 移除最后一个<li>元素

总之，JQuery 提供了许多方法来操作 HTML 元素，可以让我们更加方便地对页面进行操作。在前端开发中，熟练掌握 JQuery 的操作 HTML 元素能力非常重要。

五、动画

JQuery 提供了很多常用的动画效果，可以让页面更加生动有趣，下面是 JQuery 的动画详细介绍：

1.淡入淡出

可以使用 JQuery 来实现淡入淡出的效果，例如：

$("p").fadeOut(); // 淡出所有的<p>元素
$("p").fadeIn(); // 淡入所有的<p>元素

2.滑动

可以使用 JQuery 来实现滑动的效果，例如：

$("p").slideUp(); // 向上滑动隐藏所有的<p>元素
$("p").slideDown(); // 向下滑动显示所有的<p>元素

3.动画

可以使用 JQuery 来实现各种动画效果，例如：

$("p").animate({left: '250px'}); // 将所有的<p>元素向右移动250像素
$("div").animate({height: '+=100px'}); // 将所有的<div>元素的高度增加100像素

4.停止动画

可以使用 JQuery 来停止正在运行的动画，例如：

$("p").stop(); // 停止所有的<p>元素的动画效果

总之，JQuery 提供了非常丰富的动画效果，可以让页面更加生动有趣，同时还可以通过 JQuery 的动画方法来实现各种复杂的动画效果。在前端开发中，熟练掌握 JQuery 的动画能力非常重要。

六、Ajax

JQuery 提供了一系列的 Ajax 方法，可以通过 Ajax 方式与服务器进行交互，获取数据并对页面进行动态更新，下面是 JQuery 的 Ajax 详细介绍：

1.$.get()方法

$.get()方法用于向服务器发送 HTTP GET 请求，例如：

$.get("url", function(data){
  $("p").text(data); // 将服务器返回的数据显示在所有的<p>元素中
});

2.$.post()方法

$.post()方法用于向服务器发送HTTP POST请求，例如：

$.post("url", {name: "John", age: 30}, function(data){
  alert("Data Loaded: " + data); // 显示服务器返回的数据
});

3.$.ajax()方法

$.ajax()方法是 JQuery 最基本的 Ajax 方法，它可以执行任意类型的 Ajax 请求，例如：

$.ajax({
  url: "url",
  type: "POST",
  data: {name: "John", age: 30},
  success: function(data){
    alert("Data Loaded: " + data); // 显示服务器返回的数据
  }
});

4.$.getJSON()方法

$.getJSON()方法用于向服务器发送HTTP GET请求，并期望服务器返回JSON格式的数据，例如：

$.getJSON("url", function(data){
  $.each(data, function(key, value){
    $("p").append(key + ": " + value + "<br>"); // 将服务器返回的数据显示在所有的<p>元素中
  });
});

总之，JQuery 提供了非常丰富的 Ajax 方法，可以让我们更加方便地与服务器进行交互，获取数据并对页面进行动态更新。在前端开发中，熟练掌握 JQuery 的Ajax能力非常

代码007普通

打赏 收藏 海报 链接