detach()从DOM中把所有段落删除
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
<span style="color:#CC33CC;"> $('p').detach();</span>
});
</script>
</head>
<body>
<p>hello</p>nihao <p>kaixin</p>
</body>
</html>
最后页面显示的:你好,左右2年的p标签被删除了。
after( )在每个匹配的元素之后插入内容。
append( )在每个匹配的元素之后插入内容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
<span style="color:#6633FF;"> $('p').after('<b>你好</b>');</span>
});
</script>
</head>
<body>
<p>hellokaixin</p>
</body>
</html>
最后页面显示的:
hellokaixin你好
attr({ : ' ' , : ' ' })
修改:属性名称,属性值
<span style="font-size:14px;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
img{
width:100px;
height:100px;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').attr({src:'m2.jpg',title:'可恶'});
});
</script>
</head>
<body>
<img >
</body>
</html>
最后页面显示的图片是:'m2.jpg',title:'可恶'
bind(type,[data],fn)
概述
为每个匹配元素的特定事件绑定事件处理函数。
参数
type,[data],function(eventObject)String,Object,FunctionV1.0
type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false String,Object,boolV1.4.3
type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
false: 将第三个参数设置为false会使默认的动作失效。
eventsStringV1.4
一个或多个事件类型的字符串和函数的数据映射来执行他们。
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
.replaceWith()替换原来标签里面的内容
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>replaceWith demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>cruel</p>
<p>World</p>
<script>
$( "p" ).replaceWith( "<b>Paragraph. </b>" );
</script>
</body>
</html>
最后的结果是:所有的p标签,全部改成
"<b>Paragraph. </b>
返回值:focusin([data],fn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.xiao{
width:100px;
height:100px;
}
</style>
<script type="text/javascript" src="jquery-1.11.1.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('p').focusin(function(event) {
$(this).find('span').css('display','inline').fadeOut(1000)
});
});
</script>
</head>
<body>
<p><input type="text"><span>nihao</span></p>
<p><input type="password"><span>nihao</span></p>
</body>
</html>
最后页面显示:当input标签获得焦点,span内容慢慢消失。