jquery对象的增删改查
查询(兄弟父子节点)
- next() 查找下一个兄弟元素
nextAll() 查询下面所有兄弟
nextUntil() 查到满足参数中条件的某个兄弟为止 - prev() 查找上一个兄弟元素
- siblings() 查找所有的兄弟元素 带参数时需要满足参数中的条件
- parent() 获取元素自身的父元素
- parents() 获取元素的所有祖先元素(自下往上 HTML为止)
- closest() 查询最近的满足条件的父级 从自己开始查找。如果什么都没找到则返回一个空的jQuery对象。 ```javascript
closest和parents的主要区别是: 1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找; 2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤; 3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。
closest对于处理事件委托非常有用。
- offsetParent() 找距离自身最近的被定位的父级<a name="15e33088"></a>## 追加&包裹元素1. 追加的方法<br />push()- div.append(jq) 在div中尾部添加内容- div.appendTo(jq) 将div追加到元素尾部中去unshift()- div.prepend(jq) 在div的头部插入内容- div.prependTo(jq) 在jq对象中的头部插入div```javascriptA.append(B) 将B追加到A中A.appendTo(B) 将A追加到B中
- 插入的方法
- A.before(B) 将B移动到A的前面
- A.insertBefore(B) 将A移动到B之前
- after() A.after(B) 将B移动到A的后面
- insetAfter() A.insertAfter(B) 将A移动到B的后面
- remove() 删除元素本身 返回
- 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
- detach() 删除元素本身 返回被删除的对象
- empty() 将一个元素的内容设置为空
- 包裹
- wrap() 给元素添加父级
- wrapInner() 给div的子元素添加父级
- wrapAll() 给获取的jq对象添加同一个父级 将对象中的标签从结构上发生改变

- unwrap() 将父级干掉
事件
- on() 类似于addEventListener
- type:事件类型
- selector:事件委托
- data:数据
handel:事件处理函数
var data = {name:'宋江涛',gender:'女'};// $('ul').on('click','li',data,function(e){// // console.log(data);// // console.log(e.data);// // 将点击的元素的内容进行修改 data中的数据// // $(this) -> ul// $(e.target).html(e.data.name);// })// 可以直接在on中绑定多个事件$('ul').on({click:function(){console.log('宋江涛和宋海涛是好朋友');},mouseenter:function(){console.log('刘政的别名叫赛罗');},mouseleave:function(){console.log('刘波来一根华子');}});
one() 绑定事件 绑定的事件只能触发一次 就失效 (触发事件后解绑)
// $('a').one('click',function(e){// // 阻止默认行为 冒泡兼容 ie 和 其它浏览器// // e.bubbles = false;// // e.preventDefault();// // return false; // 同时阻止冒泡和默认行为// console.log('你就是跳转不了!');// })
off() 事件解绑 ```javascript // off 对事件进行解绑
// 无参:对当前对象上的所有事件进行解绑// $('button').click(function(){// $('ul').off();// })// 一个参数:事件名称$('button').click(function(){$('ul').off('click');})// 两个参数:事件名称,对应的处理函数
// 三个参数:事件名称,事件委托,对应的处理函数
- trigger 触发自定义事件<br />绑定自定义事件使用on- bind 已经被废弃了 3.x版本- hover() 绑定鼠标的移入移出事件 在放大镜效果中,比mouseover和mouseout好- click、mouseenter、keydown<a name="d4d2a668"></a># 位置- position() 只能获取当前元素相对于设置了定位的元素的距离 从父元素的content区域开始// 块盒元素布局 相对于父元素的content区域布局<br />- offset() // 相对于document 整个文档 整个页面```javascriptoffset()$('.demo').click(function(){// 获取// console.log($(this).offset()); // 相对于document 整个文档 整个页面// 原本相对于整个页面偏移了 170px$(this).offset({top:100,left:100})// 如果元素为设置定位,会将元素设置为position:relative 让其相对于整个页面的位置为100px 100px// 如果设置定位position:absolute ,依然是相对于整个页面的位置为100px 100px,但是top与left是根据原本的值进行调整的/比如对于整个页面的位置为100px 100px后,但是如果原本的位置就是这个位置,top与left的值不会改变})
- scrollTop() & scrollLeft()
- 元素自身的宽高
```javascript scrollTop scrollLeft页面滚动条距离顶部偏移 100px$(function(){// 文档解析完成后触发$('div').offset({top:1000})$("button").click(function(){$(document).scrollTop(100);})})
滚动事件 scroll
- <br />```javascript<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="js/jquery.js"></script><style>body,ul{padding: 0;margin: 0;}nav{width: 980px;margin: auto;border: 1px solid red;height: 50px;background: #fff;}li,ul{list-style: none;}li{float: left;margin: 0 10px;padding: 5px;}div{/* width: 100px;height: 100px;position: absolute;top: 1000px; */}.demo{height: 50px;}.top{position: fixed;top:0;left:0;right: 0;margin: auto;}</style></head><body><nav><ul><li>Lorem.</li><li>Accusantium!</li><li>Alias.</li><li>Commodi.</li><li>Dolorum.</li><li>Minima!</li><li>Eveniet.</li><li>Earum!</li><li>Deserunt.</li><li>Nemo?</li></ul></nav><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, accusantium minima? Totam, quasi laborum! Illo inventore ad quisquam rerum, commodi ducimus sequi odio nostrum repellat fuga consequuntur eius dicta esse saepe dolore ea ipsum numquam harum impedit facere aperiam. At asperiores animi sit sed aliquam blanditiis incidunt? Voluptas quae rem ipsa dolores tenetur velit! Mollitia ad, fuga perspiciatis perferendis quam aliquid voluptatibus, facere nesciunt sit dicta ipsam aliquam deleniti officia dolores reprehenderit! Officia architecto ducimus molestias quam dolor inventore dignissimos, ipsa, ipsam molestiae aliquam earum possimus odit assumenda natus nemo excepturi eum incidunt commodi voluptates? Sit numquam eos sint maiores, libero explicabo vel ducimus ad fugit consequatur! Commodi sint quidem dignissimos voluptatibus recusandae et fuga fugiat consequatur repellendus explicabo, aliquam asperiores autem sit distinctio assumenda dolores, in blanditiis temporibus. Dicta commodi doloribus beatae ea debitis enim repudiandae, necessitatibus, inventore soluta non fuga eum perferendis rerum esse aspernatur officia minima ut minus? Provident itaque optio corrupti adipisci minima inventore impedit doloribus accusantium tempora aliquam voluptatum accusamus, expedita ducimus nemo, suscipit velit aliquid quos soluta laborum dolores quibusdam alias! Similique aliquam reprehenderit excepturi unde exercitationem, officia provident aut quos maiores deserunt, eaque mollitia, laboriosam praesentium iste. Minima magni debitis laboriosam libero voluptatibus atque ea veniam! Iure hic enim, atque, nulla sequi dolorem perferendis natus deserunt minus rerum earum neque perspiciatis, explicabo ullam amet? Consequuntur, nam praesentium. Cum quo a, eveniet id delectus sunt fugiat ad voluptatum eligendi reprehenderit, debitis aspernatur labore laudantium alias at reiciendis corrupti illo itaque et animi nihil sequi qui repudiandae. Nesciunt qui provident inventore quidem dignissimos. Eius tempora quibusdam veritatis, excepturi cum enim ea eaque dignissimos libero beatae ut numquam eos at nulla vel necessitatibus voluptatum reiciendis delectus! Et voluptate aut adipisci, sunt, sed minima nobis beatae quis rem distinctio aliquam. Sunt tempore, laborum exercitationem blanditiis consequatur labore, fugiat deserunt optio, cumque dolor dolorem provident dolore eaque ratione quae sed soluta voluptas et cum! Repellendus obcaecati aut tempore similique veritatis minus sint eum quaerat! Iusto explicabo porro voluptatibus quam quisquam corporis nemo dolores nobis nulla? Tempora accusantium tempore, error quo aperiam, porro quas dicta, debitis dignissimos reprehenderit expedita fugit repudiandae in facilis minus repellat repellendus. Ea, accusantium quod, eius deserunt numquam obcaecati vitae reprehenderit rem provident iure quasi magni modi voluptates eaque quas odit consequuntur? Libero a quidem quos repellendus unde rem fuga, officia, hic atque fugiat, tempora porro facilis minus autem ut nobis. Iusto possimus quas, cumque recusandae ea reprehenderit officiis repellendus exercitationem placeat sunt eius maxime nemo officia minima, delectus quo rerum quisquam? Pariatur ipsum, nam eligendi doloremque culpa veniam, accusantium delectus explicabo hic, voluptatibus fugit laudantium cupiditate minima nihil. Nisi dolorum nobis architecto cumque quasi rerum, esse at culpa. Nostrum natus placeat ut excepturi pariatur esse ea odit eaque quae architecto. Tempore explicabo dolore inventore eaque quam eligendi ipsa blanditiis quo et, facere quae, pariatur exercitationem maxime odit. Soluta sunt maxime quos rem sapiente iste similique illum deleniti ut, pariatur sit, corporis harum nisi saepe exercitationem odit tenetur perspiciatis cum! Eius a dolor obcaecati maiores modi quod inventore ipsam nihil reiciendis facilis provident doloribus nemo deserunt sequi eaque odio repudiandae tempora fugiat quo, iure exercitationem ex debitis! Quisquam dignissimos odit saepe, sequi fugit dolores, repellendus, cum iusto ratione harum culpa necessitatibus! Molestias esse eius nulla dolore maxime laboriosam rem eveniet ad ducimus ab, doloribus earum, sint, suscipit tenetur eum veritatis temporibus facilis hic unde veniam harum illo repellendus. Commodi, vitae quae tempora voluptas aut modi consequuntur pariatur sapiente sed nulla molestias? Aut rem quam consequuntur fuga, quo culpa eos tempore quia itaque assumenda est eius, autem cupiditate architecto dicta laboriosam, eaque vero dolorum et omnis voluptatum aperiam commodi. Delectus fuga ipsum vero cupiditate impedit ratione earum. Sed eius blanditiis beatae alias quam voluptatibus tempore eaque doloremque incidunt! Non autem tempora vel soluta sunt reiciendis eveniet facilis dolor rerum, a, itaque, voluptatum perferendis at nam laudantium laborum. Ipsum accusantium quia neque voluptatibus aliquam velit quis, porro distinctio sapiente voluptate quidem libero enim perspiciatis assumenda repudiandae quo mollitia consequatur vitae error culpa perferendis fuga! Eveniet quasi vitae officiis iusto ullam repellendus nam sunt provident rerum a, facere laboriosam tempora reprehenderit reiciendis magni ex sequi ipsum voluptates fugit. Blanditiis repellendus unde velit minus id cumque eveniet laborum voluptatibus quaerat! Sapiente sit a quibusdam qui sint impedit suscipit, id laboriosam et architecto error eius provident delectus numquam perspiciatis accusamus quas animi dicta obcaecati natus aspernatur est? Consequuntur corporis quaerat reprehenderit magni sapiente cum quam nisi ratione asperiores, consequatur fuga porro ea quos eveniet quidem provident dignissimos accusamus in doloremque repellendus. Voluptatum cumque saepe labore recusandae magnam eius, exercitationem earum error tempora asperiores esse ad ut nobis id quia natus architecto atque temporibus quibusdam nemo. Iste quasi dignissimos voluptate, vel enim consequatur ipsum autem eos libero, voluptates repellat sunt placeat, dolores vero atque sint est nobis pariatur aliquid officiis. Architecto vero maiores amet dolor officiis ratione deserunt porro est veniam quasi rerum fuga quia enim ducimus modi perspiciatis numquam omnis ut atque, tempore accusamus eos nisi! Qui, eveniet laborum. Ex deleniti beatae porro iure corporis quod debitis nesciunt, praesentium recusandae. Fuga reprehenderit, ratione iusto odit quas quisquam molestias sunt unde. Reprehenderit recusandae libero ad, placeat pariatur delectus ratione praesentium error temporibus maiores aspernatur sed voluptas eaque asperiores possimus cumque quos molestias excepturi assumenda, vel iste fuga commodi soluta! Quam modi nam, accusamus quaerat voluptate, commodi fugiat doloribus quae quis consequatur quo quibusdam sequi! Fugit maiores minus unde. Quisquam facere omnis perspiciatis inventore adipisci debitis deleniti, fugit quasi voluptates sint in assumenda accusamus iusto incidunt reiciendis cumque nostrum nemo repudiandae autem consequuntur saepe blanditiis officiis est. Esse, fugiat debitis! Error consequuntur laborum esse alias dolores sapiente aspernatur in, deserunt iusto quos, illum aut explicabo! Blanditiis dolore explicabo incidunt sit odit autem harum! Ullam ab repellendus harum at quod labore ipsam dignissimos voluptatum voluptatem cupiditate ex nostrum vitae accusantium commodi nam, illo amet est aliquam consequatur culpa. Laborum neque unde eligendi quia doloribus aspernatur cupiditate quas hic odit sint a itaque porro, quos nobis dolorum. Nostrum, quod nesciunt, quo a vero at atque alias accusantium minus provident libero delectus cum maxime molestiae natus corporis fugiat perspiciatis quisquam, debitis doloribus quos deleniti voluptatem! Dignissimos, totam pariatur odit, itaque vero quisquam excepturi inventore tempore minima facere provident, porro magnam saepe voluptatem nulla quia recusandae aut explicabo! Eligendi similique doloribus deserunt architecto omnis optio pariatur illo quasi, totam magni eos amet placeat? Itaque quibusdam eaque dolore natus ad laudantium libero ea vero temporibus alias blanditiis qui eius, iste, similique facilis provident porro nisi minima mollitia quam! Soluta quam optio corporis nihil quos inventore asperiores delectus amet quae error dicta illum tenetur dolores minus nulla rerum, repudiandae, enim mollitia explicabo! Numquam quos earum quo, quod ullam in accusamus deleniti neque recusandae odio reprehenderit suscipit, dignissimos quia non iusto dolorem voluptate consectetur dolor saepe amet? Rerum, error sint! Consequuntur provident a iusto unde voluptate quibusdam sed iure natus, hic aliquid accusamus officiis distinctio mollitia quos alias repudiandae nemo quod placeat eligendi nostrum, cum, nisi suscipit! Ad distinctio consectetur soluta cupiditate harum ipsum debitis, quidem numquam provident, animi molestiae maxime reiciendis doloribus similique laudantium eaque. Corrupti, quibusdam? Sed numquam hic nobis cumque, laudantium, aliquid, voluptatem labore corporis fugit non sunt voluptatibus amet eveniet? Enim eum quod esse! Aliquam impedit quidem animi eos molestiae, explicabo voluptate quas sequi provident illum eligendi consectetur totam tempora perferendis qui porro molestias reprehenderit fuga nisi quis beatae vitae neque? Quas eveniet odit nihil quae perspiciatis? Tenetur, repellat, saepe nihil similique hic dolore excepturi assumenda atque magni ipsam, accusamus aspernatur! Eligendi, fuga magni perferendis ad quos reprehenderit ea deserunt officia laboriosam recusandae vero molestias, deleniti quo provident quam omnis nisi id ipsum veritatis explicabo tenetur. Magni nihil hic alias quisquam aspernatur maiores fuga, tempore nam dolor expedita pariatur voluptatum eum dignissimos commodi minus deleniti! Officiis perferendis voluptatibus atque sapiente qui expedita sit similique incidunt neque voluptas eaque dicta exercitationem deserunt, eum, omnis iure dolorem dolor et ratione, ullam impedit officia pariatur in. Quaerat modi minima laboriosam et quasi dolorem, magni quam repudiandae ab exercitationem esse maiores, praesentium distinctio fugiat porro quod voluptates tenetur quas. Modi, tempora, est et non quae neque dolorem ullam quas cum mollitia asperiores, minima id sit accusamus quos sapiente facere adipisci voluptas temporibus atque excepturi odio minus? Iusto culpa mollitia dignissimos cupiditate fuga repellat atque molestias itaque magni voluptatem iste asperiores laboriosam reiciendis soluta, vitae nihil dolorem. Molestias eaque natus praesentium nulla voluptate harum, fugit eligendi veritatis inventore maiores quod unde animi possimus ratione tempora assumenda odit dolor maxime illum mollitia suscipit. Earum repellendus, minus adipisci ipsa optio fuga rem dolorum nobis necessitatibus, accusamus obcaecati sequi explicabo magni quo. Nesciunt corporis, numquam fugiat neque voluptate cupiditate fuga recusandae, obcaecati, incidunt ipsam optio impedit modi minima maiores perferendis quasi in praesentium odit! Asperiores quam repellendus rerum voluptatem possimus odio et deserunt saepe? Animi soluta tempora possimus dolorem at fugit placeat numquam impedit cum, quae illum id ipsa adipisci sunt nisi corporis sed mollitia quod deserunt vero voluptas iure voluptate blanditiis. Nihil blanditiis, est earum numquam necessitatibus, obcaecati assumenda doloribus rem possimus repudiandae dolorem voluptatem a enim? Praesentium ex saepe asperiores totam sequi dignissimos adipisci esse suscipit ab quod impedit pariatur cum enim qui aliquam, similique minus omnis hic ipsa autem doloribus, eum iste odio laudantium. Doloremque adipisci doloribus tempora velit illum. Dolorem rerum hic fugit eos aliquid incidunt dolore a cum quasi quo! Voluptatibus quia, veniam iure expedita alias nesciunt, error itaque obcaecati non iste, nihil nam natus molestias. Repellat quis odio quia. Illum iusto saepe, ipsa perspiciatis unde similique voluptas odio nisi quas! Magni, vero alias iure ad sint fugiat voluptatum repellendus voluptate, tenetur ipsam deserunt dolorem? Sed quo sit animi tempora accusamus iure eaque officiis ab labore doloribus id error quam non, maxime quia ad aliquid illum quaerat velit amet natus quisquam enim. Suscipit quidem tempora sed beatae. Amet voluptatibus cum facere quaerat doloremque. Neque numquam architecto nostrum accusantium, quos commodi molestiae qui sequi molestias non dolor rerum beatae ullam mollitia voluptatum at eveniet. Quibusdam, voluptatum fuga illo dolores alias, quam nemo et quia suscipit deleniti neque, odio harum saepe hic sapiente sint. Ipsum voluptate itaque quos commodi aspernatur. Minus expedita culpa quaerat harum, repudiandae dolores odit. Blanditiis nobis aut perferendis recusandae a, perspiciatis voluptate quibusdam quo provident possimus numquam quia facilis nisi quos eveniet, esse odit totam ipsam beatae iusto at! Totam, provident quae. Consequatur dolorum impedit hic minima rem, nemo ut quia est earum placeat quo eaque natus odio quae vel, optio magnam officiis velit autem provident aliquam tenetur. Adipisci impedit necessitatibus suscipit debitis, a quaerat velit quas incidunt eveniet fugit vitae beatae nostrum assumenda quae obcaecati quia aliquam repellendus. Mollitia, nulla! Non quae inventore dolores excepturi totam fugit ducimus possimus quis odit earum id voluptas, at culpa ipsa numquam! Tempora necessitatibus accusantium quis placeat sed voluptas. Eos sit officia dicta. Et dolorem non suscipit fugit ipsum? Quia fuga, totam at itaque sapiente blanditiis consequatur? Iure in facere perferendis, neque molestias nihil, nesciunt blanditiis amet maiores ipsum nisi aspernatur vel. Quidem fuga cum, nemo eius magni, repudiandae adipisci beatae maiores possimus dolorum dolores id magnam obcaecati commodi asperiores. Sit vero nesciunt non earum ab! In quam dolorem dolorum sunt error minus porro nesciunt dignissimos doloribus quisquam accusamus, molestias facere delectus cumque odio architecto. Voluptas ea doloremque vel tenetur, minus possimus error in iure officiis, aut nostrum velit, temporibus perspiciatis repudiandae beatae. Assumenda minus molestias distinctio, vero non maxime rem placeat culpa veniam nesciunt dolorum et, vel, harum dolore dignissimos beatae nostrum magnam repellat libero quam. Voluptates sequi cumque sunt et aut ea sed reiciendis magnam? Exercitationem obcaecati saepe recusandae dolores consequatur architecto provident beatae, eaque nostrum quia voluptatibus cupiditate nesciunt illo ad, hic numquam ipsam delectus quidem consectetur voluptas ipsum quasi dolor veniam magnam. Laborum ut dolore explicabo quaerat doloribus harum qui possimus, repudiandae impedit deleniti quo saepe suscipit porro voluptatibus pariatur odio doloremque iure ipsa voluptatum cupiditate, maiores reprehenderit! Debitis optio deleniti, odio ipsum modi dignissimos autem, distinctio quisquam vero quidem sequi blanditiis mollitia nemo nesciunt id voluptas harum molestiae, et maxime consequuntur explicabo hic! Aut.</div><script>// 滚动事件 scroll// 当滚动条滚动一定距离 > 100 让导航栏定位在顶部 当滚动条 < 100 让导航栏回到原位$(document).scroll(function(){if($(this).scrollTop() >= 100){// 让导航栏定位在顶部$('nav').addClass('top');}else{$('nav').removeClass('top');}})</script></body></html>
margin + padding + border + content
- width()
- height()
- innerWidth()
- innerHeight()
动画效果
- slideDown()
- slideUp()
工具类
typeof 基本类型 object
nofit 将$让出去
$.each() -> forEach()
jq.each()
