`

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

 
阅读更多
今天的学习

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 元素有的都会一除掉 是个纯删除的方法
分享到：
| jQuery图片鼠标悬停效果-20130620
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics