jQuery基础使用

最新推荐文章于 2020-07-01 20:27:49 发布

海波booy

最新推荐文章于 2020-07-01 20:27:49 发布

阅读量559

点赞数

分类专栏： WEB前端文章标签： javascript jquery js

本文链接：https://blog.csdn.net/booy123/article/details/106456441

版权

WEB前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery概述

jQuery是一个快速、简洁的JavaScript库。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

目前jQuery有三个大版本：
1.x： 2006年1月发布jQuery1.0,兼容ie678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x： 2013年2.0版本发布，不兼容ie678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x： 不兼容ie678，只支持最新的浏览器。除非特殊要求，一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本：3.5.1
1.X大版本下，细分版本非常多，各个版本的函数都会有一定的差异。网上看到的很多教程大多是1.x版本的。jquery官方手册：http://api.jquery.com/

参考文档:https://www.jquery123.com/ jQuery中文网、菜鸟教程

jQuery引用

jQuery两种引入引入方式：

1、从 jquery.com 下载 jQuery 最新版本，或从GitHub下载其他版本，进行本地引入html文件

两个版本的 jQuery 可供下载：
Production version ：用于实际的网站中，已被精简和压缩。
Development version：用于测试和开发（未压缩，是可读的代码）

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

2、从 CDN 中载入 jQuery

官网jquery:

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

百度 CDN：

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

微软 CDN：

<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>

新浪 CDN：

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

jQuery语法

jQuery 语法是通过$()核心函数选取 HTML 元素，并对选取的元素执行某些操作。

语法1 ： $(selector).action()

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

举例:

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

语法2： $(匿名函数)

表示页面dom加载完毕，就执行，比onload事件要早，并且可以写多个。

   $(匿名函数)  
	和//文件加载后激活函数
   $(document).ready(匿名函数) 一样

jQuery选择器

1、标签选择器

基于标签名选取元素。

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

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

2、id选择器

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

示例：

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

3、class选择器

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

示例：

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

4、其他选择器

属性选择器 input[type] input[type=‘text’]

结构伪类选择 a:link a:hover

层次选择器空格后代 > 子代

jQuery事件

页面访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时（鼠标移动、点击、单选等）所调用的方法。

常见 DOM 事件：

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

click()*
鼠标点击事件

示例：当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素

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

dblclick()
鼠标双击事件

示例：当双击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素

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

mouseover()
鼠标移入事件

示例：鼠标移入进选择的区域内，执行弹框事件

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

mouseout()
鼠标移除事件

示例：鼠标移出选择的区域内，执行弹框事件

$("#p1").mouseout(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");
});

jQuery 效果

1、隐藏显示

hide()
将元素隐藏

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

show()
将元素显示

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

toggle()
切换 hide() 和 show() 方法

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

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

这三种方法都是有两个参数的：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”（缓慢）、“fast” （快速）或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

2、淡入淡出

fadeIn()
淡入已隐藏的元素

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。.
可选的 callback 参数是 fading 完成后所执行的函数名称。

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

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

fadeOut()
淡出可见元素

语法：

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

fadeToggle()
可以在 fadeIn() 与 fadeOut() 方法之间进行切换

语法：

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

示例：

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

fadeTo()
允许渐变为给定的不透明度（值介于 0 与 1 之间）。0透明 1不透明

语法：

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

3、滑动

在元素上创建滑动效果

以下三个方法都是可选的 speed 参数和 callback 参数

slideDown()
向下滑动元素

语法：

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

示例：

$("#flip").click(function(){
  $("#panel").slideDown();
});

slideUp()
向上滑动元素

语法：

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

示例：

$("#flip").click(function(){
  $("#panel").slideUp();
});

slideToggle()
可以在 slideDown() 与 slideUp() 方法之间进行切换

语法：

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

示例：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4、链式编程

我们都是一次写一条 jQuery 语句（每个语句都是独立一行）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

示例：
“p1” 元素首先会变为红色，然后向上滑动，再然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

提示： 当进行链接时，代码行会变得很差。不过，jQuery 语法不是很严格；可以按照希望的格式来写，包含换行和缩进。

如下书写也可以很好地运行：

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

HTML DOM操作

获取元素

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容---->innerText
html() - 设置或返回所选元素的内容（包括 HTML 标记）—innerHTML
val() - 设置或返回表单字段的值—value属性

示例：
通过 jQuery text() 和 html() 方法来获得内容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

val() 方法获得输入字段的值

$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

获取属性-attr()

$("button").click(function(){
  alert($("#a1").attr("href"));
});

设置内容 - text()、html() 以及 val()
示例：

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Hello world!");
});

设置属性 - attr()

示例：改变（设置）文本中 color属性的值：

$("button").click(function(){
  $("#font1").attr("color","red");
});

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

append()和prepend()方法
示例：

$("p").append("结尾追加文本");

$("p").prepend("在开头追加文本");

通过 append() 和 prepend() 方法添加若干新元素

append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。
示例：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

jQuery after() 和 before() 方法

jQuery after() 方法在被选元素之后插入内容。
jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");

$("img").before("在前面添加文本");

通过 after() 和 before() 方法添加若干新元素

示例：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

删除元素

删除元素/内容

remove() 方法
删除被选元素及其子元素。

$("#div1").remove();

empty() 方法
删除被选元素的子元素。

$("#div1").empty();

过滤被删除的元素

remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

该参数可以是任何 jQuery 选择器的语法。

下面的例子删除 class=“italic” 的所有 <p> 元素：

$("p").remove(".italic");

数组或集合元素遍历
示例：

$("p").each(function(i,n){
  	alert(i+"...."+n);
});
或
$.each(arr,function(i,n){
    alert(i+"...."+n);
})

CSS类
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 属性的值：

css("propertyname");

示例：返回首个匹配元素的 background-color 值：

$("p").css("background-color");

设置 CSS 属性
设置指定的 CSS 属性：

css("propertyname","value");

示例：为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

示例：

$("p").css({"background-color":"yellow","font-size":"200%"});

jQuery节点关系

通过 jQuery 节点关系，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行查找。
parent()
返回被选元素的直接父元素。
该方法只会向上一级对 DOM 树进行遍历

示例：返回每个 <span> 元素的的直接父元素：

$(document).ready(function(){
  $("span").parent();
});

children()
返回被选元素的所有直接子元素。
该方法只会向下一级对 DOM 树进行遍历
示例：返回每个 <div> 元素的所有直接子元素

$(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("*");
});

siblings()
返回被选元素的所有同胞元素

示例：返回 <h2> 的所有同胞元素：

$(document).ready(function(){
  $("h2").siblings();
});

可以使用可选参数来过滤对同胞元素的搜索。

示例：返回属于 <h2> 的同胞元素的所有 <p> 元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

next()
返回被选元素的下一个同胞元素
该方法只返回一个元素。

示例：返回 <h2> 的下一个同胞元素：

$(document).ready(function(){
  $("h2").next();
});

AJAX使用

AJAX简介
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

ajax()方法

jQuery 底层 AJAX 实现。简单易用的高层实现get和post方法等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

常用参数
contentType:(默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数情况。

data:发送到服务器的数据

dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。

“xml”: 返回 XML 文档，可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。’’‘注意：’’'在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

“json”: 返回 JSON 数据。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

“text”: 返回纯文本字符串

success：请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。

function (data, textStatus) {
    // data 可能是 xmlDoc, jsonObj, html, text, 等等...
    this; // 调用本次AJAX请求时传递的options参数
}

type：(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url：(默认: 当前页地址) 发送请求的地址。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用jQuery实现ajax请求</title>
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
</head>
<body>
	<div id="mydiv"></div>
	<input id="btn1" type="button" value="发送ajax请求get方式" >
	<input id="btn2" type="button" value="发送ajax请求post方式" >
	<script type="text/javascript">
		$(function(){
			$("#btn1").click(function(){
				
				//ajax方法
				$.ajax({
					url:"servlet1",
					type:"GET",
					data:"username=张三&age=20",
					dataType:"html",
					contentType:"text/plain",
					success:function(msg,status){
						$("#mydiv").append(msg);
						alert(status);
					}					
				});				
			});			
		$("#btn2").click(function(){			
				//ajax方法
				$.ajax({
					url:"servlet1",
					type:"POST",
					data:"username=张三&age=20",
					dataType:"html",
					contentType:"application/x-www-form-urlencoded",
					success:function(msg,status){
						$("#mydiv").append(msg);
						alert(status);
					}
				});				
			});			
		})
	</script>
</body>
</html>

get和post方法

$.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

$.get(URL,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

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

$.post() 方法

通过 HTTP POST 请求从服务器上请求数据。

语法:

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.jsp",
    {
        name:"百度",
        url:"http://www.baidu.com"
    },
        function(data,status){
        alert("数据: \n" + data + "\n状态: " + status);
    });
});

load方法

简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

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

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

这是示例文件（“demo_test.txt”）的内容：

<h2>jQuery AJAX 是个非常棒的功能！</h2><p id="p1">这是段落的一些文本。</p>

下面的例子会把文件 “demo_test.txt” 的内容加载到指定的

元素中：

$("#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);
  });
});

海波booy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础使用

jQuery概述jQuery是一个快速、简洁的JavaScript库。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。目前jQu
复制链接

扫一扫