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

xjwolaile

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

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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("Hello world!");
});

向每一个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(" Hello world!");
});

是向每个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("Hello world!");
});

实在每个段落前面插入一段新的段落只要在原来的填写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仿新浪微博图片文字列表间歇上下滚 ... | jQuery图片鼠标悬停效果-20130620

2013-06-22 00:50
浏览 491
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

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

最近访客更多访客>>