jQuery 节点操作 筛选二

节点操作

$(content).method( target )$(content).method( target )操作
before()insertBefore()在目标元素前面插入内容
after()insertAfter()在目标元素后面插入内容
append()appendTo()在目标元素开始处插入内容
prepend()preppendTo()在目标元素结尾处插入内容
replaceWidth()replaceAll()在目标元素替换为内容
  • clone()克隆元素

    clone() 会拷贝所有的子元素
    clone( true ) 深度克隆,会克隆事件

  • empty() 清空元素内容

  • remove()删除元素及内容 ,会删除元素事件

    remove() 不带参数移除所有选中元素
    remove( selector ) 带参数移除选择器匹配的选中元素

detach() 删除元素,并且会返回元素本身,且保留了事件

筛选二

parent() offsetParent() parents() close()

  • parent() -父级
  • offsetParent() -定位父级
  • parents([selector]) -所有祖级
  • parentsUntil(selector) 截止到~的父级 不包含起止
  • closest ( selector ) -最近祖级,(包含自身!!)必须写入参数

prevAll() / prevUntil( selector ) —– 上截止到

  • prevAll( [selector] ) —所有的上兄弟节点

nextAll() / nextUntil( selector ) —– 上截止到

  • nextAll( [selector] ) —所有的下兄弟节点

slice( selector,end )–把匹配元素集合缩减为指定的指数范围的子集

selector 基于 0 的整数值,指示开始选取元素的位置。
如果是负数,则指示从集合末端开始的偏移量。
end基于 0 的整数值,指示结束选取元素的位置。
如果是负数,则指示从集合末端开始的偏移量。
如果省略,则选取范围会在集合末端结束。

1
$('li').slice(2, 4).css('background-color', 'red');

包装

wrap()外包装

ele.wrap( selector ) selector 包在ele元素外面

12
$('.box').wrap( $('<a>') );   //<a href=""> <div class="box">div</div></a>

wrapInner()内包装

ele.wrapInner( selector ) selector 包在ele元素里面

大专栏  jQuery 节点操作 筛选二12
$('.box').wrapInner( $('<a>') );//<div class="box"> <a href=""> div </a> </div>

wrapAll()整体包装

ele.wrapAll(seletor) 把匹配的 ele 提取出来 ,然后用seletor 整体包装

unwrap()移除包装

ele.unwrap(seletor) 移除ele的父级

toArray() 转为数组

可以吧jQuery对象转为真实数组

12345
x=$("li").toArray() for (i=0;i<x.length;i++)   {   alert(x[i].innerHTML);   }

serialize() 数组串联

序列表表格内容为字符串,用于Ajax请求

12345678910111213141516
<p id="results"><b>Results: </b> </p>    <form>      <select name="single">        <option>Single</option>        <option>Single2</option>      </select>      <select name="multiple" multiple="multiple">        <option selected="selected">Multiple</option>        <option>Multiple2</option>        <option selected="selected">Multiple3</option>      </select><br/>      <input type="checkbox" name="check" value="check1"/> check1      <input type="checkbox" name="check" value="check2" checked="checked"/> check2      <input type="radio" name="radio" value="radio1" checked="checked"/> radio1      <input type="radio" name="radio" value="radio2"/> radio2    </form>
12
$('#results').append("<tt>" + $("form").serialize() + "</tt>");//Results: single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

serializeArray()数据串联成数组

序列化表格元素(类似’.serialize()’方法)返回JSON数据结构数据
注意:此方法返回的是JSON对象而非JSON字符串。需要使用插件或者第三方库进行字符串化操作

12345
[     {name: 'firstname', value: 'Hello'},     {name: 'lastname', value: 'World'},    {name: 'alias'}, // this one was empty]

相关推荐