欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

6月21号学习jquery(文档操作)

程序员文章站 2022-07-12 21:41:51
...
今天的学习

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 元素有的都会一除掉 是个纯删除的方法