jquery 요소 래핑
- 无忌哥哥원래의
- 2018-06-29 14:38:351318검색
jquery 요소 Wrapping
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素包裹</title> </head> <body> <a href="https://www.tmall.com">天猫</a> <a href="https://taobao.com">淘宝</a> <a href="https://www.jd.com/">京东</a> <a href="https://www.suning.com">苏宁</a> <p>网上购物:</p> <button>wrap()</button> <button>wrapIner()</button> <button>wrapAll()</button> <button>unwrap()</button> </body> </html>
* 1.wrap(content):
* 함수: 각 노드 래핑
* 매개변수: 콘텐츠 또는 요소
$('button:eq(0)').click(function(){
//用法一.用一个新标签来包裹目标元素
// $('a').wrap($('<li>'))
//简写:
$('a').wrap('<li>')
//用法二.用已存在的标签来包裹目标节点
// $('a').wrap($('p'))
})* 2.wrapInner(content):
* 함수: 각 노드 래핑 노드의 콘텐츠
* 매개변수: 콘텐츠 또는 요소
$('button:eq(1)').click(function(){
//用法一.用一个新标签来包裹目标节点内容
$('li').wrapInner('<strong>')
//用法二.用已存在的标签来包裹目标节点内容
$('li').wrapInner($('p'))
})* 3.wrapAll(content):
* 함수: 노드 그룹 래핑
* 매개변수: 콘텐츠 또는 요소
$('button:eq(2)').click(function(){
//用法一.用一个新标签来包裹目标节点内容
$('li').wrapAll('<ul style="background-color: wheat">')
//用法二.用已存在的标签来包裹目标节点内容,给<li>再套一个<div>
$('li').wrapAll($('<div style="background-color: cyan">'))
})* 4.unwrap( content) :
* 기능: 노드의 상위 요소 삭제
* 매개변수: 없음
$('button:eq(3)').click(function(){
$('li').unwrap()
//可以一直往上走
$('li').unwrap().unwrap()
})위 내용은 jquery 요소 래핑의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.