jQuery操作文档-20130624
今天的学习
unwrap()
$("button").click(function(){
$("p").unwrap();
});
这个可以删除父类的元素 在这个里面两个父类都是设置了背景颜色用unwrap()就可以将背景颜色给删除掉，只要是在父类里面的元素都可以删除掉
val()
$("button").click(function(){
$(":text").val("Hello World");
});
可以直接利用val()来修改input的text类型里面值
wrap()
$(".btn1").click(function(){
$("p").wrap("<div></div>");
});
在div元素中包裹每个段落将事先设定好的样式包裹住p标签
wrapAll()
在div中包裹所有段落这个和上面不同的是上面是每一个段落这个是全部效果的不同时 上面的两个p 之间会有空行 而这个不会有空行是全部的包裹进一个div上面其实是分了两个div来包裹
wrapinner()
$(".btn1").click(function(){
$("p").wrapInner("<b></b>");
});
在每个p元素的内容上包围b元素
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元素