jQuery6(获取元素练习,改变标签样式及内容)

时间：2021-09-11 15:11:20

获取元素练习-我们都是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的特性,会自动循环变量.

标签：

相关文章