<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div1{ 1000px; height: 800px; background: yellow; color: red; font-size: 18px;} </style> <script src='../jquery-3.1.1.min.js'></script> <script> $(function(){ // $('div').parents('body').css('background','red'); // $('span').siblings().css('background','yellow'); // $('h2').clone().appendTo('h3'); // $('span').wrap('<div>'); // $('span').wrapInner('<div>'); // $('h1').unwrap(); // var elem=$('h1'); // var elem2=elem.add('h3'); // elem2.css('background','red'); // $('li').slice(1,4).css('background','blue'); // console.log($('form').serialize()); console.log($('form').serializeArray()); }); </script> </head> <body> <div class="div1"> get()下标,和lenght属性 get()可以把jquery转成原生的js<br/> 参数就是集合的下标 用法$('div').get(0).interHtml; <br/> for(i=0; i<$('li').get().length; i++){}; 无参数时会循环集合<br/> outterWidth(); 可以获取隐藏元素的属性,<br/> offsetWidth(); 不可以获取隐藏元素的属性;<br/> .html()可以获取写入dom节点标签; .text()只能读取文本可写入文本<br/> .remove()删除对象和对象事件; .detach();删除对象但是不删除对象事件<br/> $(function(){...})Dom加载完执行函数 $(document).ready();页面加载完执行<br/> $('.div2').parents()获取当前元素的祖先节点();参数就是筛选的功能;可以过滤多个属性<br/> $('.div2').closest(); 获取元素最近的父级节点();必须要写筛选的参数,不支持多个<br/> $('div2').siblings();找所有兄弟节点,参数也是筛选功能;<br/> $('div2').nextAll();找上面的兄弟节点;<br/> $('div2').prevAll(); 找下面的兄弟节点;<br/> Until()截止;<br/> $('div2').parentsUntil();父级截止-参数为截止节点;<br/> $('div2').nextUntil();找上面截止的兄弟节点; 参数为截止的兄弟节点<br/> $('div2').prevAll();找下面截止的兄弟节点; 参数为截止的兄弟节点<br/> $('div2').clone();克隆节点 无参数的时候不克隆事件;参数为true时克隆事件<br/> $('span').wrap('');外部包装;每个标签包装一个; $('span').wrapAll('');<br/> $('span').wrapInner('');内部包装; unwrap();删除包装(不包括body)<br/> $('li').slice(1,4); 从参数1,到参数2;选中;<br/> $('form').serialize();sting形成的串联;$('form').serializeArray()串联成数组形式<br/> </div> <div class="div2"> <span>1span</span> <span>2span</span> <h1>h1</h1><h2>h2</h2><h3>h3</h3> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <form> <input type="text" name="a" value='1'/> <input type="text" name="b" value='2'/> <input type="text" name="c" value='3'/> </form> </div> </body> </html>