Jquery学习记录

Jquery

是一个 JavaScript 库，在使用 jquery 之前你需要掌握 js，因为 jquery 只是简化了 js 的一些操作。

1.使用 jquery

1.1 $和$()

1	$("h1").remove();

大多数 jQuery 方法是在 jQuery 对象上调用的，如上所示;这些方法被称为命名空间的一部分，或“jQuery 原型”，最好将其视为 jQuery 对象方法。

但是，有几种方法不对选择起作用;这些方法被称为 jQuery 命名空间的一部分，最好将其视为核心 jQuery 方法。

在 jQuery 选择上调用的方法位于命名空间中，并自动接收并返回选择作为 .$.fn``this
命名空间中的方法通常是实用程序类型的方法，不适用于选择;它们不会自动传递任何参数，并且它们的返回值会有所不同。$

在少数情况下，对象方法和核心方法具有相同的名称

1.2 $(文档).ready()

在文档“准备就绪”之前，无法安全地作页面。jQuery 会为您检测到这种就绪状态。其中包含的代码只有在页面文档对象模型（DOM）准备好执行 JavaScript 代码后才会运行。一旦整个页面（图像或 iframe），而不仅仅是 DOM，将运行其中包含的代码。$( document ).ready()``$( window ).on( "load", function() { ... })

简写方式：

// A $( document ).ready() block.
$(document).ready(function () {
  console.log("ready!");
});

另一种方式：

// Passing a named function instead of an anonymous function.

function readyFn(jQuery) {
  // Code to run when the document is ready.
}

$(document).ready(readyFn);
// or:
$(window).on("load", readyFn);

默认情况下，jQuery 使用 $$作为jQuery` 的快捷方式。因此，如果您使用的是另一个使用该变量的 JavaScript 库，则可能会与 jQuery 发生冲突。为了避免这些冲突，您需要在将 jQuery 加载到页面后以及尝试在页面中使用 jQuery 之前立即将其置于无冲突模式。`$$

jquery 设置无冲突模式

<!-- Putting jQuery into no-conflict mode. -->
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
var $j = jQuery.noConflict();
// $j is now an alias to the jQuery function; creating the new alias is optional.

$j(document).ready(function () {
  $j("div").hide();
});

// The $ variable now has the prototype meaning, which is a shortcut for
// document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
window.onload = function () {
  var mainDiv = $("main");
};
</script>

1.3 属性：元素的属性可以包含对应用程序有用的信息，因此能够获取和设置它们非常重要。

.attr()方法：可以作为 setter()、也可以作为 getter();

.attr()作为二传手：

$("a").attr("href", "allMyHrefsAreTheSameNow.html");
$("a").attr({
  title: "all titles are the same too!",
  href: "somethingNew.html",
});

.attr()作为 getter：

1	$("a").attr("href"); // Returns the href for the first a element in the document

1.4 选择元素：jQuery 最基本的概念是“选择一些元素并对它们做一些事情”。jQuery 支持大多数 CSS3 选择器，以及一些非标准选择器。

通过 id 选择：$( "#myId" );
通过类名选择：$( ".class" );
通过属性选择：$( "input[name='first_name']" );
复合 css、逗号分隔选择器、伪类选择器等可以自行查阅

保存选择结果：var divs = $( "div" );

1.5实用方法：

获取和设置有关元素的信息：
- .html()：获取或设置 html 内容
- .text()：获取或设置文本内容
- .attr()：获取或设置属性的值
- .val()：获取或设置表单元素的值
移动、复制或删除元素：
- $(B).insertAfter(A):将 B 插入到 A 之后
- $(B).insertBefore(A):将 B 插入到 A 之前
- $(B).After(A):将 A 插入到 B 之后
- $(B).After(A):将 A 插入到 B 之前
- $(A).appendTo(B)：将 A 插入到 B 元素内部之后
- $(A).appendTo(B):将 B 插入到 A 内部之后
- preappendTo()和 preappend()就不详细介绍了，同上；
- .clone():复制
- .empty:不删除元素，但清空内容
- .remove().detach():永久删除
- .detach().remove():删除但保留在可选区
创建新元素：$(html 标签)就可以直接创建一个元素
查找父类、子类和兄弟：
- .parent()：父类; .prarentUntil()：祖先； .closedst(标签)：最近的标签
- .children()：儿子；.find(标签)：是这个标签类型的儿子
- .pre(); .next(); nextAll(); preAll();

获取并设置 CSS：

获得 css:$( "h1" ).css( "font-size" );

设置 css:

// 方法1
$("h1").css("fontSize", "100px"); // Setting an individual property.

// 方法2
$("h1").css({
  fontSize: "100px",
  color: "red",
});

其他方法：

$.trim()：删除空格

$.eah()：迭代数组或对象

$.each(arr, function (index, value) {
  sum += value;
});

console.log(sum); // 15

$.inArray()：返回数组的下标，若不存在，返回-1

.index():在调用它的 jQuery 对象中搜索给定元素

无参数时：

<ul>
  <div></div>
  <li id="foo1">foo</li>
  <li id="bar1">bar</li>
  <li id="baz1">baz</li>
  <div></div>
</ul>

var foo = $("#foo1"); // id选择器，获取id为li的标签

console.log("Index: " + foo.index()); // 1

var listItem = $("li");

console.log("Index: " + listItem.index());
console.log("Index: " + listItem.first().index());

var div = $("div");

console.log("Index: " + div.index());
console.log("Index: " + div.first().index());

有参数时

<ul>
  <div class="test"></div>
  <li id="foo1">foo</li>
  <li id="bar1" class="test">bar</li>
  <li id="baz1">baz</li>
  <div class="test"></div>
</ul>
<div id="last"></div>

var foo = $("li");

console.log("Index: " + foo.index("li")); // 0
console.log("Index: " + foo.first().index("li")); // 0

var baz = $("#baz1");
console.log("Index: " + baz.index("li")); // 2

var listItem = $("#bar1");
console.log("Index: " + listItem.index(".test")); // 1

var div = $("#last");
console.log("Index: " + div.index("div")); // 2

事件

jQuery 提供了将事件处理程序附加到选择的简单方法。当事件发生时，将执行提供的函数。

在 dom 元素上设置事件响应

示例：

// on方法可以监听事件的发生，“click”指点击事件，你可以输入其他事件类型
// function就是事件处理函数
$("p").on("click", function () {
  console.log("click");
});

每个事件处理函数都会接受一个事件对象，其中包含许多属性和方法

.paeventDefault:阻止默认事件和向上传递
pageX,pageY:事件发生时相对于页面显示左上角的鼠标位置，注意并非整个浏览器窗口

绑定事件时可以传入数据：

$("input").on(
  "change",
  { foo: "bar" }, // Associate data with event binding
  function (eventObject) {
    console.log("An input value has changed! ", eventObject.data.foo);
  }
);

启动事件的 DOM 元素
触发事件时指定的命名空间
事件戳：与 1970 年 1 月 1 日的毫秒差
预防默认

绑定多个事件：

$("div").on({
  mouseenter: function () {
    console.log("hovered over a div");
  },
  mouseleave: function () {
    console.log("mouse left a div");
  },
  click: function () {
    console.log("clicked on a div");
  },
});

若想要断开事件连接时请调用.off(“事件名”)

自定义事件

$(document).on(
  "myCustomEvent",
  {
    foo: "bar",
  },
  function (event, arg1, arg2) {
    console.log(event.data.foo); // "bar"
    console.log(arg1); // "bim"
    console.log(arg2); // "baz"
  }
);

效果

显示和隐藏内容

.show():显示；.hide():隐藏；

// 隐藏
$( "p" ).hide();

// 显示
class
$( "div.hidden" ).show();

自定义属性效果

使用.animate()自定义效果：jQuery 可以通过该方法对任意 CSS 属性进行动画处理。该方法允许您对设置值或相对于当前值的值进行动画处理

// 先通过选择器获取，后使用animate更改属性值
$("div.funtimes").animate(
  {
    left: "+=50",
    opacity: 0.25,
  },

  // Duration
  300,

  // Callback to invoke when the animation is finished
  function () {
    console.log("done!");
  }
);

ajax

背景

这里只详细介绍 ajax，关于 axios 和 fetch 请查阅 axios 相关文档，企业常用 axios，关于原因请查看我 axios 的专栏；

传统上，网页需要重新加载才能更新其内容。对于基于 Web 的电子邮件，这意味着用户必须手动重新加载收件箱才能检查是否有新邮件。这有很大的缺点：速度很慢，而且需要用户输入。当用户重新加载收件箱时，服务器必须重建整个网页并重新发送所有 HTML、CSS、JavaScript 以及用户的电子邮件。这是非常低效的。理想情况下，服务器应该只需要发送用户的新消息，而不是整个页面。到 2003 年，所有主要浏览器都通过采用 XMLHttpRequest （XHR）对象解决了这个问题，允许浏览器无需重新加载页面即可与服务器通信。

XMLHttpRequest 对象是称为 Ajax（异步 JavaScript 和 XML）的技术的一部分。使用 Ajax，然后可以使用 XMLHttpRequest API 在浏览器和服务器之间传递数据，而无需重新加载网页。

Ajax 请求由 JavaScript 代码触发;您的代码向 URL 发送请求，当它收到响应时，可以触发回调函数来处理响应。由于请求是异步的，因此在处理请求时，代码的其余部分将继续执行，因此必须使用回调来处理响应。

不幸的是，不同的浏览器以不同的方式实现 Ajax API。通常，这意味着开发人员必须考虑所有不同的浏览器，以确保 Ajax 能够普遍工作。幸运的是，jQuery 提供了 Ajax 支持，可以抽象出痛苦的浏览器差异。它既提供了功能齐全的方法，也提供了简单的便利方法

大多数 jQuery 应用程序实际上并不使用 XML，尽管名称为“Ajax”;相反，它们以纯 HTML 或 JSON（JavaScript 对象表示法）的形式传输数据。

通常在不同的域名、ip、接口调用其它服务器的信息会发生跨域错误，只需要在服务端设置白名单（跨域资源共享 CORS）就可，关于这部分，请查阅我关羽 Spring 的系列文档。

Ajax 概述

获取与发布：向服务器发送请求的两种最常见的“方法”是 GET 和 POST。

Get 方法仅是获取资源，get 请求会被浏览器缓存，请注意，这是不安全的。get 请求通常以查询字符串的形式来发送其所有数据；

Post 方法是更改服务器上的数据，它不会被浏览器缓存，所以它是安全的。查询字符串可以是 URL 的一部分，但数据往往作为帖子数据单独发送。
异步性：Ajax 是异步的，因此它不会立即响应。智能使用回调来处理响应。

核心方法——$.ajax()

// 使用方法
$.ajax({

    // Url链接
    url: "post.php",

    // 传输的数据
    data: {
        id: 123
    },

    // 方法类型
    type: "GET",

    // 接受的数据类型
    dataType : "json",
    header：{

	}
    success(resp){

	},
     error(resp){

     }
})