jquery中的元素

最新推荐文章于 2023-03-10 15:07:49 发布

柠拧檬

最新推荐文章于 2023-03-10 15:07:49 发布

阅读量283

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/jsrgxll/article/details/49175515

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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内容慢慢消失。