JQuery知识点梳理

最新推荐文章于 2022-03-03 14:57:58 发布

暴躁老砚

最新推荐文章于 2022-03-03 14:57:58 发布

阅读量271

点赞数

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

本文链接：https://blog.csdn.net/Yann_nnaY/article/details/109239930

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的基础知识，包括选择器（ID、类选择器）、事件（点击、鼠标事件、键盘事件、表单事件）、效果（隐藏/显示、淡入淡出、滑动）以及AJAX方法（load、get、post、ajax）。此外，还阐述了如何在Visual Studio中添加jQuery，以及DOM的概念和jQuery入口函数的作用。内容深入浅出，适合初学者学习。

摘要由CSDN通过智能技术生成

（一）JQuery基础

jQuery是一个轻量级的JavaScript函数库。
使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

特点：jQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便的操作HTML元素，拥有很好的可扩展性，拥有不少插件。

包含功能有：

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

Visual Studio中添加Jquery方法：
打开VS，项目上右键选择管理NuGet程序包；在新的页面中找到JQuery，选择安装。

引用外部.js文件方法—— 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>

JQuery基础语法

jQuery 语法是通过选取 HTML元素，对选取的元素执行操作(action)

$(selector).action()

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

实例：

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

什么是“DOM”?
jquery中的dom是指文档对象模型（Document Object Model）
它是W3C国际组织的一套Web标准。定义了访问HTML文档对象的一套属性、方法和事件。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

JQuery入口函数

jQuery 入口函数:

$(document).ready(function(){
    // 执行代码
});
以上的简介写法
$(function(){
    // 执行代码
});

实例中的所有 jQuery 函数都位于以上这个 document ready 函数中。
是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

JavaScript 入口函数:

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

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

JQuery选择器

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

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

所有选择器都以dollar符开头：$()

元素选择器

基于元素名选取元素。
语法：$("p")

$("p") - 在页面中选取所有`<p>`元素
$("*") - 选取所有元素
$(this) - 选取当前html元素
$("tr:even") - 选取偶数位置的<tr>元素
$("tr:odd") - 选取奇数位置的<tr>元素

实例：

//用户点击按钮后，所有 <p> 元素都隐藏：
$(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 选择器

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

页面中元素的 id 必须是唯一的

语法：$("#test")

实例：

//用户点击按钮后，id="test"属性的元素被隐藏
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 选择器

通过指定的class查找元素。
语法：$(".test")

$("p.test") - 选取class为test的<p>元素
$("p:first") - 选取第一个<p>元素.注意用冒号
$("ul li:first") - 第一个<ul>元素的第一个 <li> 元素
$("ul li:first-child") - 每个<ul>元素的第一个 <li> 元素
$("[href]") - 带有 href 属性的元素
$("a[target='_blank']") - 所有target属性值等于 "_blank" 的<a>元素
$("a[target!='_blank']") - 所有target属性值不等于 "_blank" 的 <a> 元素

实例：

//点击按钮后，class="test" 属性的元素都隐藏：
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

JQuery事件

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

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

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

基本格式：

$("p").click();  //在页面中指定一个事件
$("p").click(function(){
    // 规定动作触发后执行的代码
});

常用的DOM事件方法

最基本的入口函数： $(document).ready()

① 鼠标事件

click：点击元素时触发
语法：$(selector).click(function)
// function为可选参数。规定事件触发时运行的函数

$("p").click(function(){
    alert("段落被点击了。");
});

dblclick：双击元素时触发
语法：$(selector).dblclick(function)
mouseenter：鼠标指针穿过（进入）被选元素时发生
语法：$(selector).mouseenter(function)

//鼠标经过<p>元素时，设置其背景色
$("p").mouseenter(function(){
    $("p").css("background-color","yellow");
});

mouseleave：鼠标指针离开被选元素时触发
语法：$(selector).mouseleave(function)
hover：hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。
语法：$(selector).hover(inFunction,outFunction)
// inFunction为必选，规定mouseenter事件发生时运行的函数。
// outFunction为可选，规定mouseleave发生时运行的函数。

该方法触发 mouseenter 和 mouseleave 事件。若只指定一个函数，则 mouseenter 和 mouseleave都执行它。
即 $(s).hover(handlerIn,handlerOut)等同于
$(s).mouseenter(handlerIn).mouseleave(handlerOut);

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

②键盘事件

键盘事件相关的事件顺序：
keydown - 键按下的过程
keypress - 键被按下
keyup - 键被松开

keydown：
keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
但keypress 事件不会触发所有的键（如 alt、ctrl、shift、esc），需用 keydown() 来检查这些键。
语法：$(selector).keypress(function)
// function为可选参数

// 计算在 <input> 字段内的按键次数，显示在<span>
$("input").keypress(function(){
    $("span").text(i+=1);
});

keypress：语法同上。
keyup：语法同上。

③表单事件

submit：提交表单时触发（只适用于<form>元素）
语法：$(selector).submit(function)
// function为可选。
change：元素的值改变时触发
语法：$(selector).change(function)

当用于 select 元素时，change 事件会在选择某个选项时发生。
当用于 text field 或 text area时，change 事件会在元素失去焦点时发生。

// 当 <input> 字段改变时提示警告
$("input").change(function(){
    alert("文本已被修改");
});

focus：当元素获得焦点时（通过鼠标点击选中元素或通过 tab 键定位到元素时）发生
语法：$(selector).focus(function)
blur：当元素失去焦点时发生。常与 focus() 方法一起使用。
语法：$(selector).blur(function)

④文档/窗口事件

load：指定元素已加载时发生。

load() 方法在 jQuery 版本 1.8 中已废弃

resize：当调整浏览器窗口大小时发生。适用于所有可滚动的元素和 window 对象（浏览器窗口）。
语法：$(selector).resize(function)
scroll：用户滚动指定的元素时发生
语法：$(selector).scroll(function)
unload：用户离开页面时发生。

unload() 方法在 jQuery 版本 1.8 中被废弃，在 3.0 版本被移除。

（二）JQuery效果

隐藏&显示

hide() —— 隐藏html元素
show() —— 显示html元素
语法：
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
// speed：可选参数。规定隐藏/显示的速度，可选值包括（“slow”、“fast” 或毫秒）
// callback：可选。指隐藏/显示完成后所执行的函数名称。
实例：

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
//"linear"是一个字符串，表示过渡使用那种缓动函数。
//jQuery自身提供"linear" 和 "swing"，其他可使用相关的插件。

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

语法：$(selector).toggle(speed,callback);
// 参数详情同上。

//显示被隐藏的元素，并隐藏已显示的元素
$("button").click(function(){
  $("p").toggle();
});

淡入淡出

fadeIn() —— 淡入已隐藏的元素
fadeOut() —— 淡出可见元素
fadeToggle() —— 在 fadeIn() &Out() 之间进行切换
fadeTo() ——允许渐变为给定的不透明度
语法：
$(selector).fadeIn(speed,callback);
//fadeOut、fadeToggle语法同上;
//speed：可选参数，规定效果时长。其他同hide()

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

$(selector).fadeTo(speed,opacity,callback);
//speed：必选参数。规定效果的时长。参考值：“slow”、“fast” 或毫秒
//opacity：必选。透明度设置（值介于 0 与 1 之间）
//callback：可选。完成后执行的函数名称。

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

滑动

在元素上创建滑动效果。

slideDown() —— 向下滑动元素
slideUp() —— 向上滑动元素
slideToggle() —— 在 slideDown() 与slideUp() 之间进行切换

语法：$(selector).slideUp(speed,callback);
// slideDown、slideToggle语法同上
//参数详情同FadeIn()

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

动画

链（Chaining）

链接（chaining）技术，允许在相同的元素上运行多条 jQuery 命令，一条接着另一条（浏览器就不必多次查找相同的元素。）
如需链接一个动作，只需简单地把该动作追加到之前的动作上。
实例：

//"p1" 元素首先变为红色，然后向上滑动，再然后向下滑动
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
//以上也可以连接成一行来写

（三）JQuery HTML

获取&设置元素内容、属性

内容 - text()、html() 以及 val()
属性 - attr()

text() ：设置/返回所选元素的文本内容
html() ：设置/返回所选元素的内容（包括html标记）
val() ：设置/返回表单字段的值
attr() ：获取所选元素的属性值

获取：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
  alert("HTML: " + $("#test").html());
  alert("值为: " + $("#test").val()); 
});
// 获得链接中 href 属性的值
$("button").click(function(){
  alert($("#runoob").attr("href"));
});

设置：

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
    $("#test1").html("<b>Hello world!</b>");
    $("#test1").val("RUNOOB");
});
//设置单个属性
$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});
//同时设置多个属性
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

回调函数：
以上都提供回调函数。回调函数的参数有2个：
①元素列表中当前元素的下标，
②原始（旧的）值。
然后以函数新值返回您希望使用的字符串。

//text()和html()的回调
$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
    $("#test1").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});
//attr()的回调函数
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

添加删除元素

获取设置CSS类

设定尺寸

（四）JQuery遍历

（五）JQuery AJAX

AJAX 是与服务器交换数据的技术，指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
AJAX实现了在不重载全部页面的情况下，通过后台加载数据，对部分网页进行更新。
它使用非同步的HTTP请求，在Browser和Web Server之间传递数据，使Browser只更新部分网页内容而不重新载入整个网页。

AJAX组成：基于XHTML和CSS标准的表示；
使用Document Object Model进行动态显示和交互；
使用XML和XSLT做数据交互和操作；
使用XML HttpRequest与服务器进行异步通信；
使用JavaScript绑定一切。

实现功能：通过 jQuery AJAX 方法，使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON ，同时把这些外部数据直接载入网页的被选元素中。

load()方法

作用：从服务器加载数据，并把返回的数据放入被选元素中。
语法：$(selector).load(URL,data,callback);
// URL：必选参数。希望加载的url
// data：可选。与请求一同发送的查询字符串键/值对集合
// callback：可选。规定当 load() 完成后所要允许的回调函数。

//把“demo.txt”文件的内容加载到指定<div>中
$("#div1").load("demo.txt");
//把该文件中id=“p1”的内容加载到指定<div>中
$("#div1").load("demo.txt #p1");

callback回调函数
回调函数可以设置不同的参数：
△ responseTxt - 包含调用成功时的结果内容
△ statusTXT - 包含调用的状态
△ xhr - 包含 XMLHttpRequest 对象
实例：

//在 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);
  });
});

扩展实例：

//为避免多页面情形下的代码重复，可利用 load() 方法，将重复的部分（例如导航栏）放入单独的文件，使用下列方法进行导入
//1.当前文件中要插入的地方使用此结构：
<div class="include" file="***.html"></div>

//2.***.html中放入内容，用html格式仅仅因为会有编辑器的书写辅助。。

//3.代码：
$(".include").each(function() {
    if (!!$(this).attr("file")) {
        var $includeObj = $(this);
        $(this).load($(this).attr("file"), function(html) {
            $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
        })
    }
});
或者在index文件里只写重复部分，剩下的一股脑放各自单独文件 load() 进来~

get() / post()方法

jQuery get() 和 post() 方法用于通过 HTTP Get 或 Post 请求从服务器请求数据。

Get - 从指定的资源请求数据
Post - 向指定的资源提交要处理的数据
// Get基本上用于获取数据（数据可缓存）
// Post常用于连同请求一起发送数据（不会缓存）

jQuery $.get() 方法
通过 HTTP get请求从服务器上请求数据
语法：$.get(URL,callback);
// URL：必选参数。规定请求的url
// callback：可选。回调函数名。

//从服务器文件上取回数据
$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});
//回调参数列表（被请求页面的内容，请求的状态）

jQuery $.post() 方法
通过 HTTP post请求向服务器提交数据。
语法：$.post(URL,data,callback);
// URL：必选参数。规定请求的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);
    });
});
//第一个参是希望请求的URL("demo_test_post.php")
//然后连同请求（name 和 url）一起发送数据

ajax()方法

ajax() 方法通过 HTTP 请求加载远程数据。

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

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

语法：jQuery.ajax([settings])
//settings：可选。用于配置 Ajax 请求的键值对集合。可通过 $.ajaxSetup() 设置任何选项的默认值。

参数

url：String类型的参数，（默认为当前页地址）发送请求的地址。
type：String类型参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。
timeout：Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。
async：Boolean类型，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
cache：Boolean类型，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。
data：Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看　　processData选项。对象必须为key/value格式，例如{foo1:“bar1”,foo2:“bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,“bar2”]}转换为&foo=bar1&foo=bar2。
dataType：String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下：
xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。
script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。
json：返回JSON数据。
jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。
text：返回纯文本字符串。
其他参数可参考： ajax()参数详解或 ajax参考手册