jQuery操作文档-20130624 -

xjwolaile

浏览: 342028 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery操作文档-20130624

博客分类：

学习
前端技术
jQuery

unwrap val wrap wrapAll wrapinner

今天的学习

unwrap()

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").unwrap();
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
article{background-color:pink;}
</style>
</head>
<body>

<div>
<p>这是 div 元素中的段落。</p>
</div>

<article>
<p>这是 article 元素中的段落。</p>
</article>

<button>删除每个 p 元素的父元素</button>

</body>
</html>

$("button").click(function(){
$("p").unwrap();
});
这个可以删除父类的元素在这个里面两个父类都是设置了背景颜色用unwrap()就可以将背景颜色给删除掉，只要是在父类里面的元素都可以删除掉

val()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(":text").val("Hello Kitty");
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Hello World" /></p>
<button>改变文本域的值</button>
</body>
</html>

$("button").click(function(){
$(":text").val("Hello World");
});

可以直接利用val()来修改input的text类型里面值

wrap()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrap("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用 div 包裹每个段落</button>
</body>
</html>

$(".btn1").click(function(){
$("p").wrap("<div></div>");
});

在div元素中包裹每个段落将事先设定好的样式包裹住p标签

wrapAll()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapAll("<div></div>");
  });
});
</script>
<style type="text/css">
div{background-color:yellow;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">用一个 div 包裹所有段落</button>
</body>
</html>

在div中包裹所有段落这个和上面不同的是上面是每一个段落这个是全部效果的不同时上面的两个p 之间会有空行而这个不会有空行是全部的包裹进一个div上面其实是分了两个div来包裹

wrapinner()

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").wrapAll("<b></b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">加粗段落中的文本</button>
</body>
</html>

$(".btn1").click(function(){
$("p").wrapInner("<b></b>");
});

在每个p元素的内容上包围b元素

分享到：

jQuery图片冒泡插件鼠标悬停图片冒泡动画展 ... | jQuery仿新浪微博图片文字列表间歇上下滚 ...

2013-06-23 23:26
浏览 754
评论(1)
分类:Web前端
查看更多

1 楼萧远山 2013-06-24

标题格式错了
应该是
[JS代码库]jQuery操作文档-20130622

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery操作文档-20130624

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery操作文档-20130624

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>