10、jQuery中CSS与HTML代码的基本操作示例

Sian · 发表于 2016-2-20 20:28:00

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
<head>
	<title>jQuery</title>
	<meta charset="utf-8"/>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
		.red{
			color: red;
		}
	</style>
	<script>
	$(document).ready(function(){
		$('button').click(function(){
			/** CSS类 **/
			// 增加一个类
			// $('span').addClass('red');
			// 删除一个类
			// $('span').removeClass('red');
			// 如果存在则删除，如果不存在则添加
			// $('span').toggleClass('red');
			
			/** HTML代码/文本/值 **/
			// 1、html，参数为空则获取，否则修改
			// var html = $('span').html();
			// console.log(html);
			// $('span').html('<p>你最喜欢的网站</p>');
			// 2、text，参数为空则获取，否则修改
			// var text = $('span').text();
			// console.log(text);
			// $('span').text('<p>你最喜欢的网站</p>');
			// html与text的根本区别在于是否包含标签内容
			// 3、对象操作示例
			// var display = $('span').css('display');
			// console.log(display);
			// $('span').css('color', 'blue');
			// $('span').css({color:"green", width:"500px"});
			// var obj = $('button').offset();
			// console.log('top:'+obj.top+';left:'+obj.left);
			// 4、创建节点$('<span>节点</span>')即为创建节点对象
			// $('<span>节点</span>').insertAfter('div');
			// 5、移动对象，bofore插入的方式或remove|detach移动的方式,detach会携带事件
			// $(':checkbox:first').before($(':checkbox:eq(1)'));
			// var obj = $(':checkbox:eq(1)').remove();
			// $(':checkbox:first').before(obj);
		});
	});
	</script>
</head>
<body>
	<span style="display: block; color:red">选择你喜欢的网站</span>
	<div>
		<input type="checkbox" name="site" value="php"/>[url]www.php.com[/url]
		<input type="checkbox" name="site" value="ios"/>[url]www.ios.com[/url]
		<input type="checkbox" name="site" value="zend"/>[url]www.zend.com[/url]
	</div>
	<button>按钮</button>
</body>
</html>

帐号		自动登录	找回密码
密码			立即注册

[jQuery] 10、jQuery中CSS与HTML代码的基本操作示例