jq基础文档手册3.0

插入
1append&＃xff08;&＃xff09; 向每个匹配的元素内部追加元素

2appendTo() 将所有匹配元素追加到另一个元素集合中

3prepend&＃xff08;&＃xff09;向每个匹配元素的内部前置内容

4prependTo&＃xff08;&＃xff09; 把所有匹配元素前置到另一个指定元素集合中

5after&＃xff08;&＃xff09; 再匹配元素集合中的每个元素后面插入参数所指定的内容&＃xff0c;作为其兄第节点

6before&＃xff08;&＃xff09; 据参数设定。在匹配元素的前面插入内容

删除
1empty&＃xff08;&＃xff09;删除所匹配元素的所有子元素

2remove&＃xff08;&＃xff09; 删除元素及其所有的后代元素

3detach&＃xff08;&＃xff09; 删除匹配的节点&＃xff0c;但不删除节点上的数据和事件

复制和替换
1clone&＃xff08;&＃xff09; 克隆节点&＃xff0c;需要克隆数据和事件时需要clone&＃xff08;true&＃xff09;

2 replaceWidth&＃xff08;&＃xff09; 用提供的内容替换集合中所有匹配的元素&＃xff0c;返回被删除元素的集合

3 replace All&＃xff08;&＃xff09; 和replace Width&＃xff08;&＃xff09;功能类似&＃xff0c;主要目标和源的位置区别

4wrap&＃xff08;&＃xff09; 在集合中匹配的每个元素周围包裹一个HTML结构

5unwrap&＃xff08;&＃xff09; 将匹配元素集合的父级元素删除

6wrap All&＃xff08;&＃xff09; 给集合中匹配的元素增加一个外面包裹HTML结构

7wrap Inner&＃xff08;&＃xff09;集合中匹配的元素的内部&＃xff0c;增加包裹的HTML结构

过滤
$(this).addClass(‘active’).siblings().removeClass(‘active’);//当前类元素添加类&＃xff0c;其他删除

遍历
1children&＃xff08;&＃xff09;返回匹配元素集合中每个元素的所有子元素

2find&＃xff08;&＃xff09;遍历当前元素集合中每个元素后代

3 parent&＃xff08;&＃xff09; 查找指定元素的父元素&＃xff0c;只向上查找一级

3parents&＃xff08;&＃xff09;查找到祖先节点

4closest&＃xff08;&＃xff09;在dom树上逐级向上元素匹配&＃xff0c;并返回最先匹配的祖先元素

5 next&＃xff08;&＃xff09; 查找匹配元素集合的每一个元素的下一个兄弟元素&＃xff0c;创建一个新的jquery对象

9prev&＃xff08;&＃xff09; 指定元素集合前面每一个元素紧邻的情面同辈元素的元素集合

10 siblings&＃xff08;&＃xff09; 查找指定元素集合中每一个元素的同辈元素

11add&＃xff08;&＃xff09; 元素添加到匹配元素集合中

操纵数组元素
shift():删除原数组第一项&＃xff0c;并返回删除元素的值&＃xff1b;如果数组为空则返回undefined

unshift():将参数添加到原数组开头&＃xff0c;并返回数组的长度

pop():删除原数组最后一项&＃xff0c;并返回删除元素的值

push():将参数添加到原数组末尾&＃xff0c;并返回数组的长度

concat():返回一个新数组&＃xff0c;是将参数添加到原数组中构成的

splice(start,deleteCount,val1,val2,…):从start位置开始删除deleteCount项&＃xff0c;并从该位置起插入val1,val2,…

reverse():将数组反序

sort(orderfunction):按指定的参数对数组进行排序

slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组

join(separator):数组转字符串&＃xff0c;以separator为分隔符&＃xff0c;省略的话则用默认用逗号为分隔符

字符串转数组&＃xff0c;转对象&＃xff0c;对象转字符串

split(’,’)把一个字符串按逗号分割成数组

JSON.stringify(obj)JSON对象转字符串

JSON.parse(str)或$.parseJSON( jsonstr )或eval(’(’ &＃43; jsonstr &＃43; ‘)’);JSON字符串转对象

父级页面获取ifream内部元素

var chile&＃61;$(‘parentifream’).contents().find(‘ifream’)

或iframe.$(“select”);

iframe.method();

ifream元素获取父级页面内容

var parent&＃61;parent.$(‘parentifream’);

parent.method();

基本筛选选择器
$(“ :first”) 匹配第一个元素

$(“:last”) 匹配最后一个元素

$(“:not(selector)”)选择所有元素去除不匹配给定元素

$(“:eq()”) 匹配索引值为index的元素

$(“:gt(index)”) 匹配集合中所有大于给定index的元素

$(“:lt(index)”) 匹配集合中所有索引值小于index参数的元素

$(“:even”) 索引值为偶数的元素 从0开始

$(“:odd”) 索引值为奇数

$(“:header”) 选择所有标题元素

$(“:lang(language)”) 选择指定语言的所有元素

$(“:root”) 选择该文档的根元素

$(“:animated”) 选择所有正在执行动画效果的元素

子元素选择器
$(“:first-child”) 第一个子元素

$(“:last-chilld”) 最后一个子元素

$(“:only-child”) 只有唯一一个子元素

$(“:nth-child”) 选择他们所有父元素的第N个子元素

$(“:nth-last-child”) 从最后一个元素算起

Class事件
$(‘div’).addClass(‘active’)增加类

$(‘div’).removeClass(‘active’)删除类

$(‘div’).hasClass(‘active’)判断类是否存在

常用事件
$(‘div’).css(‘position’,’relative’)修改元素样式

$(‘div’).attr(‘id’,’ids’)修改元素属性,对复选框checked属性不生效

$(‘div’).prop(‘checked’,true)修改元素基本属性&＃xff0c;常用于获取修改复选框

$(‘div’).removeAttr(‘id’,’ids’)移除元素属性

$(‘div’).removeProp(‘id’,’ids’)移除由 prop() 方法设置的属性&＃xff0c;不可移除基本属性

$(‘div’).show()div显示

$(‘div’).hide()div隐藏

$(‘div’).click()点击事件

$(‘div’).change()change事件&＃xff0c;如果使用js操纵input元素不会触发

$(‘div’).trigger(‘click’)触发元素的点击事件&＃xff08;‘click’&＃xff09;为可选参数

$(‘div’).html()获取或修改元素内容&＃xff0c;不包括其本身&＃xff0c;标签会自动识别转换

$(‘div’).text()获取或修改元素文本&＃xff0c;不包括其本身&＃xff0c;标签不进行转换

$(‘div’).val()获取或修改元素值,常用于input以及textarea

$(‘div’).unbind()解除事件绑定

$(‘div’).bind(‘click’,function(){})绑定事件&＃xff0c;推荐使用on,在循环绑定中建议先解绑在绑定

$(‘div’).off()解除事件绑定

$(‘div’).on(‘click’,function(){})绑定事件,推荐使用

var arr&＃61;[1,2,3,4];

arr.map()/$.map(function(item,index){})遍历数组&＃xff08;对象方法,需要1.6jquery及以上版本支持&＃xff09;

eval(string)计算字符串并执行其中的代码&＃xff0c;并返回&＃xff08;可用做数据类型转换&＃xff0c;对于json字符串转json时需要加(),如eval("("&＃43;string&＃43;")")&＃xff09;

延时方法
setTimeout(function(){}, 1000);//1秒后执行。单次触发

var timer&＃61;setInterval(function(){},1000)//1秒后执行。重复触发&＃xff0c;配合 clearInterval方法使用

clearInterval(timer)//关闭setInterval方法&＃xff0c;不可以写成: clearInterval(setInterval(function(){},1000))//****错误

浏览器暂存储,获取&＃xff0c;删除(仅兼容ie8以上版本&＃xff0c;以及仅支持string类型存储&＃xff08;int型会被转换&＃xff09;)
先判断是否兼容if(! window.localStorage){ alert(“浏览器不支持localstorage”); return false;}else{ //逻辑业务}

localStorage.setItem(“xxx”, “123”);如果要传入json对象&＃xff0c;需要先转化json对象为 json字符串JSON.stringify(xxx)

localStorage.getItem(“xxx”)&＃xff1b;如果获取对象&＃xff0c;需要把取到的json字符串转为json对象 eval(’(’ &＃43; jsonstr &＃43; ‘)’);

localStorage.removeItem(“xxx”);

localStorage在浏览器的隐私模式下面是不可读取的。

localStorage本质上是对字符串的读取&＃xff0c;如果存储内容多的话会消耗内存空间&＃xff0c;会导致页面变卡。

localStorage不能被爬虫抓取到。

localStorage 与 sessionStorage 的唯一一点区别就是 localStorage 属于永久性存储&＃xff0c;会长久保存&＃xff0c;而 sessionStorage 属于当会话结束的时候&＃xff0c;sessionStorage 中的键值对会被清空。

sessionStorage.setItem(“key”, “value”);存储

sessionStorage.getItem(“key”);获取

sessionStorage.removeItem(“key”);清除单个

sessionStorage.clear();清除全部

后续会有更多的学习笔记&＃xff0c;欢迎关注
简书https://www.jianshu.com/u/0d4c901a3a16