jQuery 节点操作筛选二

2024-03-27 14:43:34

节点操作

`$`(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元素外面

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

`wrapInner()`内包装

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

 大专栏  jQuery 节点操作 筛选二1
2

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

`wrapAll()`整体包装

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

`unwrap()`移除包装

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

`toArray()` 转为数组

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

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

`serialize()` 数组串联

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

<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>

1 2	$('#results').append("<tt>" + $("form").serialize() + "</tt>"); //Results: single=Single&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio1

`serializeArray()`数据串联成数组

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

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

码农公寓

节点操作

筛选二

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

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

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

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

包装

wrap()外包装

wrapInner()内包装

wrapAll()整体包装

unwrap()移除包装

toArray() 转为数组

serialize() 数组串联

serializeArray()数据串联成数组

相关文章

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

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

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

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

`wrap()`外包装

`wrapInner()`内包装

`wrapAll()`整体包装

`unwrap()`移除包装

`toArray()` 转为数组

`serialize()` 数组串联

`serializeArray()`数据串联成数组