2019-07-31jq基础手册3.0

插入

1append() 向每个匹配的元素内部追加元素

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

3prepend()向每个匹配元素的内部前置内容

4prependTo() 把所有匹配元素前置到另一个指定元素集合中

5after() 再匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄第节点

6before() 据参数设定。在匹配元素的前面插入内容

删除

1empty()删除所匹配元素的所有子元素

2remove() 删除元素及其所有的后代元素

3detach() 删除匹配的节点,但不删除节点上的数据和事件

复制和替换

1clone() 克隆节点,需要克隆数据和事件时需要clone(true)

2 replaceWidth() 用提供的内容替换集合中所有匹配的元素,返回被删除元素的集合

3 replace All() 和replace Width()功能类似,主要目标和源的位置区别

4wrap() 在集合中匹配的每个元素周围包裹一个HTML结构

5unwrap() 将匹配元素集合的父级元素删除

6wrap All() 给集合中匹配的元素增加一个外面包裹HTML结构

7wrap Inner()集合中匹配的元素的内部,增加包裹的HTML结构

过滤

$(this).addClass('active').siblings().removeClass('active');//当前类元素添加类,其他删除

遍历

1children()返回匹配元素集合中每个元素的所有子元素

2find()遍历当前元素集合中每个元素后代

3 parent() 查找指定元素的父元素,只向上查找一级

3parents()查找到祖先节点

4closest()在dom树上逐级向上元素匹配,并返回最先匹配的祖先元素

5 next() 查找匹配元素集合的每一个元素的下一个兄弟元素,创建一个新的jquery对象

9prev() 指定元素集合前面每一个元素紧邻的情面同辈元素的元素集合

10 siblings() 查找指定元素集合中每一个元素的同辈元素

11add() 元素添加到匹配元素集合中

操纵数组元素

shift():删除原数组第一项,并返回删除元素的值;如果数组为空则返回undefined

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

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

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

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

splice(start,deleteCount,val1,val2,...):从start位置开始删除deleteCount项,并从该位置起插入val1,val2,...

reverse():将数组反序

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

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

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

字符串转数组,转对象,对象转字符串

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

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

JSON.parse(str)或$.parseJSON( jsonstr )或eval('(' + jsonstr + ')');JSON字符串转对象

父级页面获取ifream内部元素

var chile=$('parentifream').contents().find('ifream')

或iframe.$("select");

  iframe.method();

ifream元素获取父级页面内容

var parent=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)修改元素基本属性,常用于获取修改复选框

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

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

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

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

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

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

$(‘div’).trigger('click')触发元素的点击事件('click')为可选参数

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

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

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

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

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

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

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

var arr=[1,2,3,4];

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

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

延时方法

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

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

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

浏览器暂存储,获取,删除(仅兼容ie8以上版本,以及仅支持string类型存储(int型会被转换))

先判断是否兼容if(! window.localStorage){ alert("浏览器不支持localstorage"); return false;}else{ //逻辑业务}

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

localStorage.getItem("xxx");如果获取对象,需要把取到的json字符串转为json对象 eval('(' + jsonstr + ')');

localStorage.removeItem("xxx");

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

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

 localStorage不能被爬虫抓取到。

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

sessionStorage.setItem("key", "value");存储

sessionStorage.getItem("key");获取

sessionStorage.removeItem("key");清除单个

sessionStorage.clear();清除全部

你可能感兴趣的:(2019-07-31jq基础手册3.0)