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();清除全部

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,254评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,875评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,682评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,896评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,015评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,152评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,208评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,962评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,388评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,700评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,867评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,551评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,186评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,901评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,689评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,757评论 2 351