jQuery简介

jQuery是JS的一个库,通过更加简洁的语法和高效率来操作DOM模型.jQuery学习地址.

jQuery非常重要.jQuery实际上相当于Python的一个模块. jQuery是一段JS代码,在加载页面的时候,需要额外将其加入到页面内,由于jQuery很小,只有十几kb,所以不会影响页面加载速度.
jQuery的版本,1.x兼容旧浏览器,2.x用的很少,不兼容IE678,目前使用的是3.x版本.

jQuery中文API文档
阮一峰的jQuery学习博客
阮一峰解释this的博客

jQuery对象与原生DOM对象的区别

使用jQuery选择器生成的对象是jQuery对象,使用原生的DOM选择器生成的对象是JS原生的DOM对象.jQuery对象经过封装,对其不能够调用DOM对象的那些方法和属性,反过来也是一样.

为了区分两者,一般在将两者赋给变量的时候,如果是原生DOM对象,变量名就用普通的名字,如果是jQuery对象,就用$开头的变量名称.

两者互相改变的方法:

jQuery对象里,用索引取出来的就是DOM对象.而DOM对象只要外边加上$()就可以变成一个jQuery对象.

jQuery基础操作-查找元素

jQuery的语句通常是如下形式:

$(selector).action()

前边的$()部分是选择器,后边是对选中的对象执行的方法.
jQuery的库文件可以从官网下载,放到一个地方之后,先通过script标签引入该库,之后才可以使用jQuery.

jQuery选择器

基本选择器
$(“#id”) 查找id
$(“tagName”) 标签名选择器
$(“.className”) 类型选择器
$(“div.c1”) 将上述三种选择器配合使用
$(“*”) 选择所有元素
$(“#id, .className, tagName”) 组合选择器,用逗号分隔,几个条件之间是or的关系,会选取符合任何一个条件的全部元素
层次选择器
$(“x y”) 类似CSS的选择器,选择x 的后代里所有y. x,y可以为任意选择器
$(“x > y”) 类似CSS的选择器,x的所有子元素y.
$(“x + y”) 类似CSS的选择器,是X之后的毗邻元素y. 也可以写成$(“x”).next(“y”)
$(“x ~ y”) 类似CSS的选择器,是X之后的所有兄弟元素y. 也可以写成$(“x”).nextAll(“y”)
过滤选择器
:first 第一个元素
:last 最后一个元素
:eq(index) index为索引,从0开始,表示第几个元素
:even 所有为偶数索引的元素,索引从0开始
:odd 所有为奇数索引的元素,索引从0开始
:gt(index) 大于给定索引值的元素,不含这个索引本身.索引从0开始
:lt(index) 小于给定索引值的元素,不含这个索引本身.索引从0开始
:not(元素选择器) 不满足后边条件
:has(元素选择器) 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
属性选择器
[attribute=value] 用方括号括起来,属性名不需要加引号,value需要.表示具有该属性
[attribute!=value] 表示不具有该属性
表单选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 选择input元素里type = ‘text’的元素
:password 选择type为password的input元素
:file 查找所有包含选择文件域的input元素
:radio 查找所有radio
:checkbox 查找所有checkbox
:submit 匹配所有提交按钮,理论上只匹配 type=”submit” 的input或者button,但是现在的很多浏览器,button元素默认的type即为submit,所以很多情况下,不设置type的button也会成为筛选结果。为了防止歧义或者误操作,建议所有的button在使用时都添加type属性。
:reset 查找所有重置按钮
:button 查找所有按钮
表单对象属性
:enabled 找到表单里设置为可用的元素
:disabled 找到表单里设置为不可用的元素
:checked 所有选中的元素,用于radio和checkbox元素
:selected 所有下拉菜单里选中的元素,用于select标签下的option元素

jQuery筛选器

筛选器和选择器的区别是选择器是放在$()内部执行的,用于直接选择,而筛选器实际上是jQuery对象的各种方法

筛选器
$().next() 下一个元素
$().nextAll() 之后的所有元素
$().nextUntil(“#i2”) 选取之后的元素,直到满足括号内的条件,满足条件的元素不会被选择.
$().prev() 上一个元素
$().prevAll() 之前的所有元素,注意是倒序排列的
$().prevUntil(“#i2”) 向上查找直到满足条件,满足条件的元素不会被选择
$().parent() 选择直接的父元素
$().parents() 选择所有的父元素,递归选择到html元素
$().parentsUntil() 选取直到符合条件的父元素,符合条件的父元素不会被选择
$().children() 所有的子元素
$().siblings() 所有的兄弟元素
$().find(“p”) 在前边的选择结果里,选择符合后边条件的元素.如果条件简单,可以直接用其他筛选器
$().filter(“.c1”) 在前边的选择结果里,过滤出所有符合条件的元素.具体看这里
$().first() 结果里的第一个元素
$().last() 结果里的最后一个元素
$().not() 选择结果里边不符合条件的元素
$().has() 结果里边含有指定后代的元素
$().eq(index) 结果里边索引等于index的元素,索引从0开始

jQuery基础操作-操作元素

前边的选择器和筛选器的目的就是选出需要操作的元素.在选出来之后,就要用各种方法对元素进行操作,操作的对象有元素的内容,类,属性,样式.

操作标签本身

操作类的方法
.addClass() 添加一个CSS类名
.removeClass() 移除指定的CSS类名
.hasClass() 判断是否存在该样式类
.toggleClass() 类似原生的,有则删除,无则添加
操作CSS属性
.css(“attribute”,”value”) 用css方法设置css属性与值,注意这里与原生的不同点是,CSS属性写原生的css属性名,而不用写成驼峰.
位置
.offset({top:x, left:x}) 获取匹配元素在当前窗口的相对偏移。返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。还可以传入字典样式的参数{top:int,left:int}来重新定位
.position() 这个是相对父元素的偏移,也是获得top和left,这个不能传参数.
.scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。此方法对可见和隐藏元素均有效。还可以接受参数设置相对滚动条顶部的偏移
.scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。此方法对可见和隐藏元素均有效。还可以接受参数设置相对滚动条左边的偏移
尺寸
.height([val]) 获取高度,也可以设置高度
.width([val]) 获取宽度,也可以设置宽度
.innerHeight() 内容加上上下padding的距离
.innerWidth() 内容加上左右padding的距离
.outerHeight() 内容加上上下padding再加上上下边距的高度
.outerWidth() 内容加上左右padding再加上左右边距的宽度
文本操作
.html([val]) 取得或者设置html值,类似于原生的innerHTML,会把中间的内容包括嵌套的标签全部修改
.text([val]) 取得或者设置文本值,标签之类的符号会用转义的方式传入,类似于原生的innerText,如果取值会取得包括内嵌标签全部的内容
.val([val]) 这个方法是专门针对有属性value的元素比如表单元素,用来取得其中的值.注意,取值的时候只能取出第一个元素的值,而设置值的时候是设置所有元素的值
属性操作
.attr(attrName) 取出attrName对应的值
.attr(attrName, attrValue) 设置某个属性为某个值,可以自定义.如果同时设置多个值,可以用字典的形式传进去
.removeAttr(attrName) 删除指定的元素
.prop(attrName,attrValue) 也是用来获取属性值,针对checkbox和radio 的checked属性,即是否选中,要用这个方法,会返回true和false,设置也要用该方法.其他属性则随意
.removeProp() 用来删除由.prop()方法设置的属性集.最好记住哪些自定义属性通过prop添加,然后用这个方法去删除,比杂乱无章的使用prop和attr方法要好得多

移动标签的位置

所有移动标签的方法,jQuery都提供了两种方法,一种是作为方法的参数元素被移动,一种是调用方法的元素被移动.

移动元素
添加到指定元素的内部 $(A).append(B) B成为A的子元素的最后一个,移动B,不移动A
$(A).appendTo(B) A成为B的子元素的最后一个,移动Am,不移动B
$(A).prepend(B) B成为A的子元素的第一个,注意,如果有文本内容,也会插入到文本内容之前.移动B,不移动A
$(A).prependTo(B) A成为B的子元素的第一个,注意,如果有文本内容,也会插入到文本内容之前,移动A,不移动B
添加到指定元素的外部 $(A).after(B) B紧接着A元素,移动B,不移动A
$(A).insertAfter(B) A移动到B之后作为第一个兄弟元素,不移动B
$(A).before(B) 把B移动的A之前,当成紧挨的兄弟元素,B移动,A不移动
$(A).insertBefore(B) 把A移动的B之前作为紧挨的兄弟元素,A移动,B不移动
删除元素 .remove() 删除所有匹配的元素
.empty() 删除匹配的元素集合的所有的子标签,注意,会连同文本内容一起清除.
替换元素 $(A).replaceWith(B) B必须是HTML字符串或者一个jQuery对象,用B替换A元素,注意,如果用元素替换元素,实际上是将选定的元素移动去替换,而不是复制一份去替换.
$(A).replaceAll(B) 用A替换到所有B元素,B是选择器表达式.执行完之后是所有的B被替换成A,这点要注意
克隆元素 $(A).clone() 复制一个A的副本,clone内可以传入布尔值参数,默认是false,不复制事件,如果传入true,则表示复制事件.