jq

最新推荐文章于 2024-01-09 21:27:06 发布

AGforX#月落

最新推荐文章于 2024-01-09 21:27:06 发布

阅读量223

点赞数

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

本文链接：https://blog.csdn.net/weixin_43482322/article/details/102889551

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 语法

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

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

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

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

实例:

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

jQuery 选择器

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

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

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

$(),$ ("#id"),$(".class"),

jQuery对元素的操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获取内容和属性

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

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

(以上三个方法没有参数是用于返回，有参数是用户设置)

attr() -设置或返回取属性值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

//设置单个属性
$("#runoob").attr("href","http://www.runoob.com/jquery");
//设置多个个属性
$("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
//jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
$("button").click(function(){
  $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});

设置（改变）内容和属性值

添加新元素/内容

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

删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

参考手册

HTML DOM Element 对象](https://www.w3school.com.cn/jsref/dom_obj_all.asp)(看看看!!!)

(HTML DOM Element 对象,removeChild() 方法指定元素的某个指定的子节点。

以 Node 对象返回被删除的节点，如果节点不存在则返回 null。)

jQuery 事件

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

jQuery 遍历

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

祖先

通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

parent()方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。
parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。
parentsUntil()返回介于两个给定元素之间的所有祖先元素。

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

后代

通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

children()方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。
find()方法返回被选元素的后代元素，一路向下直到最后一个后代。

同胞

在 DOM 树进行水平遍历：

siblings()方法返回被选元素的所有同胞元素
next()方法返回被选元素的下一个同胞元素。该方法只返回一个元素
nextAll()方法返回被选元素的所有跟随的同胞元素。
nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

过滤

缩写搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

first() 方法返回被选元素的首个元素。
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。

jQuery - AJAX

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

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

AJAX的优点

1)页面无刷新

不打断用户的操作，用户的体验好。
按需获取数据，浏览器与服务器之间数据的传输量减少。
是一个标准技术，不需要下载任何的插件。
可以利用客户端浏览器的计算能力

jQuery AJAX load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

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

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

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

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

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

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

$("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);//状态码，状态信息
  });
});

jQuery - AJAX get() 和 post() 方法

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

HTTP 请求：GET vs POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

[GET vs POST](C:\Users\Administrator\Desktop\md笔记\get() vs post().md)

Query $.get() 方法

$.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() 方法

$.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);
    });
});

如果没有 jQuery，AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

JQuery对Ajax的支持

$.ajax(options):options

options是一个形如{key1:value1,key2:value2…}的js对象，用于指定发送

请求的选项。选项参数如下：

url: (string)请求地址
type: (string)GET/POST
data: (object/string)发送到服务器的参数
dataType: (string)预期服务器返回的数据类型，一般有：
- json: 返回json字符串
- xml: 返回xml文档
- html: 返回的是一个html内容
- script: 返回的是一个javascript脚本
- text: 返回的是一个文本
回调函数success(function)：

请求成功后调用的回调函数，有两个参数：function(data , textStatus**),**其中，

data：服务器返回的数据

extStatus 描述状态的字符串
回调函数error(function):

请求失败时调用的函数，有三个参数function(xhr , textStatus , errorThrown)。

textStatus与errorThrown这两个参数只有一个可用。（一般很少用）

$.ajax({ 
	'url': 		'', 
	'type': 		'post', 
	'data': 		{‘id':id}, 
	'dataType': 	'json', 
	'success': 		
		function(data,statusText){ //待补充 }, 
	'error': 
		function(xhr,e1,e2){ alert('系统错误'); } 
});

ajax写在函数里，属性有没有引号(’’/"")都可以正常使用

jQuery 插件

jQuery Validate

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

导入js库

<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

jQuery Cookie 插件

jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

jQuery Accordion

jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。

该插件现在是 jQuery UI 的一部分

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

jQuery Autocomplete

jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可以过滤列表以获得更好的匹配。

该插件现在是 jQuery UI 的一部分

jQuery Growl 插件(消息提醒)

jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。

<script src="https://cdn.bootcss.com/jquery/2.0.2/jquery.min.js" type="text/javascript"></script>
<script src="https://static.runoob.com/assets/jquery/jquery.growl/javascripts/jquery.growl.js" type="text/javascript"></script>
<link href="https://static.runoob.com/assets/jquery/jquery.growl/stylesheets/jquery.growl.css" rel="stylesheet" type="text/css" />

AGforX#月落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq

jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。文章目录jQuery 语法jQuery 选择器jQuery对元素的操作jQuery 事件[jQuery 遍历](https://www.w3school.com.cn/jquery/jquery_traversing.asp)祖先后代同胞过滤jQuery - AJAXjQuery AJAX...
复制链接

扫一扫