获取元素练习-我们都是p标签
知识点:jQuery是隐式迭代.不需要for循环.text对应的是dom中的innerText.
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('p').text('都是好人'); //注意不是等号
//这里隐式迭代,不需要在for循环
});
});
</script>
</head>
<body>
<input type="button" name="name" value="改变" id='btn' />
<p>
床前明月光
</p>
<p>
疑是地上霜
</p>
<p>
举头望明月
</p>
<p>
低头思故乡
</p>
</body>
</html>
改变标签内容及样式
知识点:jQuery隐式迭代(可以点下去),设置样式语法css('width','30px').设置小手css('cursor','pointer');恢复默认颜色css('color','');
实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.8.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('p').click(function () {
$(this).text('心疼他').css('color', 'red');
}).mouseover(function () {
$(this).css('cursor', 'pointer');
}).mouseout(function () {
$(this).css('color', '');
});
});
</script>
</head>
<body>
<p>
锄禾日当午
</p>
<p>
汗滴禾下土
</p>
<p>
谁知盘中餐
</p>
<p>
粒粒皆辛苦
</p>
</body>
</html>注意:onmouseover是移动到目标上发生的事件.一般和onmouseout一起使用(恢复默认).
另外,$('p') 得到的是p标签的集合.由于jQuery的特性,会自动循环变量.
590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
