jQuery(六)jQuery DOM操做

                                               JQuery DOM操做javascript

元素的属性操做html

当属性不存在时,添加属性:java

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js" ></script>
	    <script type="text/javascript" src="js/operation.js" ></script>
	</head>
	<body>
		<p>
			<input type="button" />
			毫无疑问,库里是当今<a href="http://www.nba.com" >nba</a>可是他当初签下这份低价的合同也实属无奈。因为连续遭遇脚踝受伤,库里在2012-13赛季开始以前被迫签了一份4年4400万美圆的合同。
		</p>
	</body>
</html>

//js
$(document).ready(function(){
	$('input').attr({'value':'按钮'});
});

//为相同标签设置不一样的属性:
$(document).ready(function(){
	var num=0;
	$('input').each(function(index){
		$(this).attr({'value':num++});
	});
});

$()的一些神奇的用法,建立部分页面内容,并插入页面node

function two(){
	$('<p>nihao</p>').insertAfter($('p'));
}
//insertAfter()插入代码到页面,比js的常见元素内容要更加简单

移动元素jquery

function three(){
	$('p').insertAfter($('h1'));
	
}

function four(){
	$('<ul id="nodes">this</ul>').insertAfter('h1');
	$('p').appendTo('#nodes');
	
}

jQuery 文档操做方法

这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html()。api

方法 描述
addClass() 向匹配的元素添加指定的类名。
after() 在匹配的元素以后插入内容。
append() 向匹配元素集合中的每一个元素结尾插入由参数指定的内容。
appendTo() 向目标结尾插入匹配元素集合中的每一个元素。
attr() 设置或返回匹配元素的属性和值。
before() 在每一个匹配的元素以前插入内容。
clone() 建立匹配元素集合的副本。
detach() 从 DOM 中移除匹配元素集合。
empty() 删除匹配的元素集合中全部的子节点。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
insertAfter() 把匹配的元素插入到另外一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另外一个指定的元素集合的前面。
prepend() 向匹配元素集合中的每一个元素开头插入由参数指定的内容。
prependTo() 向目标开头插入匹配元素集合中的每一个元素。
remove() 移除全部匹配的元素。
removeAttr() 从全部匹配的元素中移除指定的属性。
removeClass() 从全部匹配的元素中删除所有或者指定的类。
replaceAll() 用匹配的元素替换全部匹配到的元素。
replaceWith() 用新内容替换匹配的元素。
text() 设置或返回匹配元素的内容。
toggleClass() 从匹配的元素中添加或删除一个类。
unwrap() 移除并替换指定元素的父元素。
val() 设置或返回匹配元素的值。
wrap() 把匹配的元素用指定的内容或元素包裹起来。
wrapAll() 把全部匹配的元素用指定的内容或元素包裹起来。
wrapinner() 将每个匹配的元素的子内容用指定的内容或元素包裹起来。

复制元素app

function five(){
	$('p').clone(true).insertAfter($('h1'));
	$('button').click(function(){
		alert("click btn1");
	});
	
	
}
//clone为true时一些事件也一块儿复制,不过有一些自己就能够响应
相关文章
相关标签/搜索