jquery学习

虽然有很多人说jquery不太常用了,但还是有必要掌握一些基本的知识的

介绍jQuery

jQuery 是开源软件，使用 MIT 许可证授权。jQuery 的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档对象模型（DOM）元素、创建动画效果、处理事件、以及开发 Ajax 程序。jQuery 也给开发人员提供了在其上创建插件的能力。这使开发人员可以对底层交互与动画、高级效果和高级主题化的组件进行抽象化。模块化的方式使 jQuery 函数库能够创建功能强大的动态网页以及网络应用程序。

使用

从官网下载,在本地导入也可以直接使用npm或者yarn,brower等下载
从CDN中载入

语法

基本就是通过某种选择规则选择某些元素然后对这些元素执行某些操作.

1	$(selector).action()

文档就绪事件

为了防止jquery在html加载之前才开始执行,也就是当html加载后执行jquery.

选择器以$()开始

实例

选择器采用css类型

事件

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

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

事件绑定

1
2

on()     向元素添加事件处理程序（`自 jQuery 版本 1.7 起，on() 方法是向被选元素添加事件处理程序的首选方法。`）
one()    向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

如需移除事件处理程序，请使用 off() 方法.

简写绑定事件

像 click，mouseover 和 mouseout 这类事件，经常会用到，jQuery 为此提供了一套简写的方法，使得能够减少代码量.

<script type="text/javascript">
     $(document).ready(function () {
       $('ul li').click(function () {
         $(this).clone().appendTo('ul');
       });
     });
   </script>

合成事件

1	$(selector).hover(infunction.outfunction)

事件冒泡

当事件发生后，这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢？因为事件源本身（可能）并没有处理事件的能力，即处理事件的函数（方法）并未绑定在该事件源上。例如我们点击一个按钮时，就会产生一个 click 事件，但这个按钮本身可能不能处理这个事件，事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的 onclick 属性赋一个函数的名字，就是让这个函数去处理该按钮的 click 事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。

有时需要阻止事件冒泡.

在 jQuery 中提供了 event.stopPropagation() 方法来停止冒泡

阻止默认行为：网页中的元素都有自己默认的行为。比如单击超链接后会跳转，单击“提交”按钮后表单会提交，有时候我们需要阻止元素的默认行为。在 jQuery 中提供了 event.preventDefault() 方法阻止元素发生默认的行为。使用 event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法

事件对象的属性

event.type
event.stopPropagation
event.preventDefault
event.target

event.pageX event.pageY

<script type="text/javascript">
    $(document).ready(function () {
      $(document).mousemove(function (event) {
        $('span').text('X: ' + event.pageX + ', Y: ' + event.pageY);
      });
    });
  </script>

模拟操作

在 jQuery 中，可以使用 trigger() 方法来完成模拟操作

1	$(selector).trigger(event,param1,param2,...)

还可以触发自定义事件

先在某对象上on或one定义一个事件,然后去trigger触发.

传递数据

trigger(type,[data]) 方法有两个参数，第 1 个参数是要触发的事件类型，第 2 个参数是要传递给处理函数的附加数据，以数组形式传递。通常可以传递一个参数给回调函数来区别这次事件是代码触发的还是用户触发的

执行默认操作

trigger() 方法触发事件后，会执行浏览器默认操作。例如：

1	$('input').trigger('focus');

以上代码不仅会触发为 input 元素绑定的 foucs 事件，也会使 input 元素本身得到焦点（浏览器的默认操作）。如果我们只想触发绑定的 focus 事件，而不想执行浏览器默认操作，我们可以使用 triggerHandler() 方法。它们之间的不同之处有：

triggerHandler() 不触发事件的默认行为。（比如表单提交）
.trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。

注意

jQuery对象与DOM对象

前者是利用jQuery方式选择出来的对象,后者是原生js getDocumentBy..这种得到的.

两者的相互转换通过[0]与$().

值得一提的是$()这个东西.就是一个jQuery对象制造工厂.

避免冲突

$这个符号容易与其他库的符号冲突.

1	$.noConflict()

然后使用jQuery()代替即可.

也可以进行赋值

1 2	var jq = $.noConflict(); jq();

选择器

需要注意使用jQuery选择器不能使用

if($('selector'))
{
	//do something
}

这种方式判断.

而应该根据获取到元素的长度来判断，代码如下所示：

1 2	if ($('#syl').length > 0) { }

或者转化成 DOM 对象来判断，代码如下：

1 2	if ($('#syl')[0]) { }

基本选择器

通过class id tag

1	$('#') $('.') $('tagname')

调用 jQuery() (或 $()) 带上一个选择器作为它的参数，将返回一个 jQuery 对象包含零个或一个 DOM 元素的集合.

每个 id 值在一个文件中只能使用一次。如果多个元素分配了相同的 ID，将只匹配该 ID 选择集合的第一个 DOM 元素。但这种行为不应该发生;有超过一个元素的文件使用相同的 ID 是无效的。

如果 ID 包含点号或冒号,必须将这些字符用反斜杠转义

当然也可以使用$(‘*’)选择所有.

多选 $(‘selector1,selector2,…’)

层次选择器

选择一个元素下的所有元素

1	$('ancestor descendant')

选择直接子元素

1	$('ancesotr > child')

选择在某元素后的同级别的元素

1	$('prev + next')

只能选择第一个

选择同级元素之后的所有元素
1
("prev ~ siblings")
匹配 “prev” 元素之后的所有兄弟元素。具有相同的父元素，并匹配过滤“siblings”选择器

提示:在层次选择器中，第 1 个和第 2 个选择器比较常用，而后面两个因为在 jQuery 里面可以用更加简单的方法来代替，所以使用的几率相对会少些：

可以使用 next() 方法来代替 $(‘prev+next’) 选择器。比如 $(".one + div); 和 $(".one").next("div"); 是等价的。
可以使用 nextAll() 方法来代替 $(‘prev~siblings’) 选择器。比如 $("#prev~div");和$("#prev").nextAll("div"); 是等价的。

知道了next()以及nextAll()方法再说一下siblings()

$("#prev~div"); 选择器只能选择 “prev” 元素后面的同辈 div 元素，而 siblings() 方法与前后位置无关，只要是同辈节点都能匹配

表单选择器

这个是比较重要的

:input 选取所有的 <input> 、<textarea>、<select> <button>元素。
:text 选取所有的单行文本框。
:password 选取所有的密码框
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的图像
:reset 选取所有的重置按钮
:button 选取所有的按钮
:file 选取所有的上传域
:hidden 选取所有不可见元素

过滤选择器

基本过滤选择器

内容过滤选择器

可见性过滤选择器

属性过滤选择器

子元素过滤选择器

表单对象属性过滤选择器

这一部分直接看文档吧,太多了,没必要去记.这跟css选择器一样的.

DOM操作

查找结点

文本

1 2	var $li = $('ol li:eq(0)'); var li_text = $li.text();

属性

1
2
3

var $para = $('p'); //获取<p>节点 
var p_txt = $para.attr('title'); //获取<p>元素节点属性title 
alert(p_txt); //打印title属性值

创建节点

1
2
3

var $li = $('<li></li>');
var $li = $('<li>test</li>');
var $li = $("<li title='test'>Hello</li>")

然后使用append()

1	$('selector').append($li)

插入

.append() 在每个匹配元素里面的末尾处插入参数内容。
.appendTo() 将匹配的元素插入到目标元素的最后面。
.html() 获取集合中第一个匹配元素的 HTML 内容设置每一个匹配元素的 html 内容。
.prepend() 将参数内容插入到每个匹配元素的前面（元素内部）。
.prependTo() 将所有元素插入到目标前面（元素内）。
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
.before() 根据参数设定，在匹配元素的前面插入内容。
.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

删除节点

detach()
empty()
remove()

一般使用remove,如果后面还要加上去就detach()

复制节点

clone() 如果传递了参数true,复制元素时同时复制所绑定的元素

替换节点

.replaceAll() 集合的匹配元素替换每个目标元素

.replaceWith() 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

包裹节点

.wrap()

每个匹配的元素外层包上一个 html 元素。.wrap() 函数可以接受任何字符串或对象，可以传递给 $() 工厂函数来指定一个 DOM 结构。这种结构可以嵌套了好几层深，但应该只包含一个核心的元素。每个匹配的元素都会被这种结构包裹。该方法返回原始的元素集，以便之后使用链式方法

.wrapAll()

该元素会将所有匹配的元素用一个元素来包裹，它不同于 wrap() 方法，wrap() 方法是将所有的元素进行单独的包裹。

.wrapInner()

属性操作

attr() 方法用来获取和设置元素的属性，removeAttr() 方法用来删除元素属性

设置元素属性

如果需要设置元素的属性值，也可以使用 attr() 方法，不同的是，需要传递两个参数即属性名称和对应的值

1
2
3

$(document).ready(function () {
        $('div').attr('class', 'demo');
      });

1	$('div').attr({ class: 'demo', name: 'test' }); //将一个 “名/值” 形式的对象设置为匹配元素的属性

删除属性

removeAttr();

样式操作

attr()增加/替换属性

addClass()增加类的值

removeClass()

toggleClass()切换样式

.toggleClass() 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

.hasClass() 可以用来判断元素中是否含有某个 class，如果有则返回 true，否则返回 false

获取文本内容

html()

获取元素的内容.

获取集合中第一个匹配元素的 HTML 内容或设置每一个匹配元素的 html 内容。类似于我们原生 JavaScript 中的 innerHTML 属性。

text()

.text() 得到匹配元素集合中每个元素的文本内容结合，包括他们的后代，或设置匹配元素集合中每个元素的文本内容为指定的文本内容。类似于 JavaScript 中的 innerText 属性

3.val()

.val() 获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。类似于 JavaScript 中的 value 属性。.val() 方法主要用于获取表单元素的值，比如 input, select 和 textarea。对于 <select multiple="multiple"> 元素, .val() 方法返回一个包含每个选择项的数组，如果没有选择性被选中，它返回 null

遍历节点

.children()

获得匹配元素集合中每个元素的每个子元素,选择器选择性筛选.

.next()

取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。

.prev()

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。选择性筛选的选择器

.siblings()

获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。

.parents()

取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器。

如果提供的 jQuery 代表了一组 DOM 元素，.parent() 方法允许我们能够在 DOM 树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象。

closest() 方法从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。也就是说首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父级元素，逐级向上直到找到匹配选择器的元素，如果什么都没找到则返回一个空的 jQuery 对象。
parents() 获得集合中每个匹配元素的祖先元素。查找方式和 parent() 方法类似，不同点在于，当它找到第一个父节点时并没有停止查找，而是继续查找，最后返回多个父节点

css的dom操作

css()

获取匹配元素集合中的第一个元素的样式属性的值或设置每个匹配元素的一个或多个 CSS 属性。

2.height() width()

.height() 获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值。
.width() 为匹配的元素集合中获取第一个元素的当前计算宽度值或给每个匹配的元素设置宽度

3.元素定位

offset() 方法，在匹配的元素集合中，获取的第一个元素的当前坐标，或设置每一个元素的坐标，坐标相对于文档。这个方法不接受任何参数。.offset() 方法允许我们检索一个元素相对于文档（document）的当前位置。和 .position() 的差别在于：.position() 是相对于相对于父级元素的位移。当通过全局操作（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset() 更合适。.offset() 返回一个包含 top 和 left 属性的对象

position() 方法，获取匹配元素中第一个元素的当前坐标，相对于 offset parent 的坐标。(offset parent 指离该元素最近的而且被定位过的祖先元素 ) .position() 方法可以取得元素相对于父元素的偏移位置。与 .offset() 不同, .offset() 是获得该元素相对于 documet 的当前坐标当把一个新元素放在同一个容器里面另一个元素附近时，用 .position() 更好用。.position()返回一个包含 top 和 left 属性的对象。

scrollTop与scrollLeft获取元素的滚动条距顶端及左侧的距离.

动画

show()
hide()

参数一般是speed,easing,callback

fadeIn和fadeOut

slideUp和slideDown

animate()方法实现自定义动画

animate() 方法，用来实现自定义动画。该方法通过 CSS 样式将元素从一个状态改变为另一个状态。CSS 属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。

提示：请使用 “+=” 或 “-=” 来创建相对动画。

停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

1	$(selector).stop([clearQueue] [,jumpToEnd])

参数说明：

clearQueue 参数，可选值，规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
jumpToEnd 参数，可选值，规定是否立即完成当前动画。默认是 false。

判断元素是否处于动画状态

if (!$(element).is(':animated')) {
  //判断元素是否处于动画状态
  //如果当前没有进行动画，则添加新动画
}

toggle() 方法：hide() 和 show() 方法之间的切换。
slideToggle() 方法：slideUp() 和 slideDown() 方法之间的切换。
fadeToggle() 方法：在 fadeIn() 和 fadeOut() 方法之间进行切换。
fadeTo() 方法：把被选元素逐渐改变至给定的不透明度

参考资料

再见 jQuery，我的老朋友 - 知乎 (zhihu.com)

菜鸟教程

jQuery API 中文文档 | jQuery 中文网 (jquery123.com)