10、jQuery中CSS与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"/>www.php.com
<input type="checkbox" name="site" value="ios"/>www.ios.com
<input type="checkbox" name="site" value="zend"/>www.zend.com
</div>
<button>按钮</button>
</body>
</html>
页:
[1]