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方法要好得多 |
| 移动元素 | ||
| 添加到指定元素的内部 | $(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,则表示复制事件. |