6月21号学习jquery(文档操作)
程序员文章站
2022-07-12 21:41:51
...
今天的学习
1、addClass()
$("button").click(function(){
$("p:first").addClass("intro");
});
将原来在jquery里面设定好的类 直接通过jquery加入到第一个p标签里面去使得第一个p标签里面的字体加大120%和字体颜色变成红色
2、after()
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
向每一个p标签的后面都通过jquery加入一个Hello world!的内容直接加入
3、append()
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
是向每个p标签的结尾加入Hello world!是结尾不是最后所以加入的内容是和p标签里面的内容平齐的
4、attr()
$("button").click(function(){
$("img").attr("width","180");
});
可以直接改变图像的 width 属性值
5、before()
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
实在每个段落前面插入一段新的段落只要在原来的填写p标签的位置写入任何段落都可以添加
6、clone()
是复制所有p标签里面的内容在按钮的后面实现出来不管p标签有多少全部都会复制出来
7、detach()
移除所有 p 元素有的都会一除掉 是个纯删除的方法
1、addClass()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p:first").addClass("intro");
});
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>向第一个 p 元素添加一个类</button>
</body>
</html>
$("button").click(function(){
$("p:first").addClass("intro");
});
将原来在jquery里面设定好的类 直接通过jquery加入到第一个p标签里面去使得第一个p标签里面的字体加大120%和字体颜色变成红色
2、after()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>
$("button").click(function(){
$("p").after("<p>Hello world!</p>");
});
向每一个p标签的后面都通过jquery加入一个Hello world!的内容直接加入
3、append()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
是向每个p标签的结尾加入Hello world!是结尾不是最后所以加入的内容是和p标签里面的内容平齐的
4、attr()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("img").attr("width","180");
});
});
</script>
</head>
<body>
<img src="/i/eg_smile.gif" />
<br />
<button>设置图像的 width 属性</button>
</body>
</html>
$("button").click(function(){
$("img").attr("width","180");
});
可以直接改变图像的 width 属性值
5、before()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").before("<p>Hello world!</p>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>
$("button").click(function(){
$("p").before("<p>Hello world!</p>");
});
实在每个段落前面插入一段新的段落只要在原来的填写p标签的位置写入任何段落都可以添加
6、clone()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").clone());
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>
</body>
</html>
是复制所有p标签里面的内容在按钮的后面实现出来不管p标签有多少全部都会复制出来
7、detach()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").detach();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>删除 p 元素</button>
</body>
</html>
移除所有 p 元素有的都会一除掉 是个纯删除的方法
上一篇： j2se 用友面试题