JQuery&&Ajax

最新推荐文章于 2024-07-25 09:24:40 发布

孤独瘾者

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量310

点赞数

文章标签： jquery 前端

本文链接：https://blog.csdn.net/qq_43310689/article/details/109048550

版权

文章目录

JQuery

JQuery

一、准备JQuery

1.1、什么是JQuery？

jQuery是一个JavaScript函数库。

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

jQuery库包含以下功能：

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

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

为什么使用 jQuery ？

目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

很多大公司都在使用 jQuery，例如:

Google
Microsoft
IBM
Netflix

1.2、安装jQuery

网页中添加 jQuery

可以通过多种方法在网页中添加 jQuery。可以使用以下方法：

从 jquery.com 下载 jQuery 库
从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

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

<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<%=Path%>/js/jquery-3.1.1.min.js"></script>html5之后没有

检验的时候在浏览器的控制台输入：$.fn.jquery

在这里插入图片描述

1.3、第一个程序

编写程序在页面弹出窗口验证安装。

<script>
  $(document).ready(function(){
    alert(123);
  });
</script>

二、JQuery语法

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

2.1、基础语法

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

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

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

实例:

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

2.2、文档就绪

$(document).ready(function(){
   
   // 开始写 jQuery 代码...
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

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

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

**提示：**简洁写法（与以上写法效果相同）:

$(function(){
   
   // 开始写 jQuery 代码...
});

JavaScript 入口函数:

window.onload = function () {
   
    // 执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

在这里插入图片描述

2.3、选择器

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

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

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

2.3.1、元素选择器

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

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

$("p")// 获取p标签

实例

用户点击按钮后，所有 <p> 元素都隐藏：

$(document).ready(function(){
   
  $("button").click(function(){
   
    $("p").hide();
  });
});

2.3.2、#id 选择器

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

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

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

$("#test") // 根据id选择标签对象

实例

当用户点击按钮后，有 id=“test” 属性的元素将被隐藏：

$(document).ready(function(){
   
  $("button").click(function(){
   
    $("#test").hide();
  });
});

2.3.3、.class 选择器

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

语法如下：

$(".test")

实例

用户点击按钮后所有带有 class=“test” 属性的元素都隐藏：

$(document).ready(function(){
   
  $("button").click(function(){
   
    $(".test").hide();
  });
});

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的元素
$(“p:first”)	选取第一个元素
$(“ul li:first”)	选取第一个元素的第一个元素
$(“ul li:first-child”)	选取每个元素的第一个元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的元素
$(“a[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的元素
$(":button")	选取所有 type=“button” 的元素和元素
$(“tr:even”)	选取偶数位置的
$(“tr:odd”)	选取奇数位置的

元素元素

独立文件中使用 jQuery 函数

如果的网站包含许多页面，并且希望的 jQuery 函数易于维护，那么请把的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
	<script src="my_jquery_functions.js"></script>
</head>

2.4、JQuery事件

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

2.4.1、什么是事件？

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

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

实例：

在元素上移动鼠标。
选取单选按钮
点击元素

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

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

2.4.2、jQuery 事件方法语法

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

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

$("p").click();

下一步是定义什么时间触发事件。可以通过一个事件函数实现：

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

2.4.3、常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过。

click()

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

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

在下面的实例中，当点击事件在某个

元素上触发时，隐藏当前的

元素：

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

dblclick()

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

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

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

mouseenter()

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

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

$("#p1").mouseenter(function(){
   
    alert('的鼠标移到了 id="p1" 的元素上!');
});

mousedown()

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

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

$("#p1").mousedown(function(){
   
    alert("鼠标在该段落上按下！");
});

mouseup()

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

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

$("#p1").mouseup(function(){
   
    alert("鼠标在段落上松开。");
});

hover()

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

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

$("#p1").hover(
    function(){
   
        alert("你进入了 p1!");
    },
    function(){
   
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus()

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

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

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

$("input").focus(function(){
   
  $(this).css("background-color","#cccccc");
});

blur()

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

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

$("input").blur(function(){
   
  $(this).css("background-color","#ffffff");
});

三、jQuery 效果

3.1、隐藏和显示

隐藏、显示、切换，滑动，淡入淡出，以及动画。

实例

jQuery hide()
简单的jQuery hide()方法演示。

jQuery hide()
另一个hide()实例。演示如何隐藏文本。

3.1.1、jQuery hide() 和 show()

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

$("#hide").click(function(){
   
  $("p").hide();
});
$("#show").click(function(){
   
  $("p").show();
});

语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

$("button").click(function(){
   
  $("p").hide(1000);
});

下面的例子演示了带有 speed 参数的 hide() 方法，并使用回调函数：

$(document).ready(function(){
   
  $(".hidebtn").click(function(){
   
    $("div").hide(1000,"linear",function(){
   
      alert("Hide() 方法已完成!");
    });
  });
});

第二个参数是一个字符串，表示过渡使用哪种缓动函数。（译者注：jQuery自身提供"linear" 和 “swing”，其他可以使用相关的插件）。

3.1.2、jQuery toggle()

通过 jQuery，可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
   
  $("p").toggle();
});

语法:

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

3.2、淡入淡出

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

实例

jQuery fadeIn()
演示 jQuery fadeIn() 方法。

jQuery fadeOut()
演示 jQuery fadeOut() 方法。

jQuery fadeToggle()
演示 jQuery fadeToggle() 方法。

jQuery fadeTo()
演示 jQuery fadeTo() 方法。

3.2.1、jQuery Fading 方法

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

jQuery 拥有下面四种 fade 方法：

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

3.2.2、jQuery fadeIn() 方法

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

语法:

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

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

3.2.3、jQuery fadeOut() 方法

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

语法:

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

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

最低0.47元/天解锁文章

孤独瘾者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery&&Ajax

文章目录JQuery一、准备JQuery1.1、什么是JQuery？1.2、安装jQuery1.3、第一个程序二、JQuery语法2.1、基础语法2.2、文档就绪2.3、选择器2.3.1、元素选择器2.3.2、#id 选择器2.3.3、.class 选择器独立文件中使用 jQuery 函数2.4、JQuery事件2.4.1、什么是事件？2.4.2、jQuery 事件方法语法2.4.3、常用的 jQuery 事件方法$(document).ready()click()dblclick()mouseenter(
复制链接

扫一扫