jQuery17(html,attr,removeAttr,动态创建元素)

最新推荐文章于 2022-12-01 22:18:22 发布

天赋进行时

最新推荐文章于 2022-12-01 22:18:22 发布

阅读量522

点赞数

分类专栏： JS-Dom-Jquery

本文链接：https://blog.csdn.net/xbc1213/article/details/50641489

版权

JS-Dom-Jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

html,attr,removeAttr方法

html方法对应的是Dom中的innerHtml方法,text对应的是Dom中的innerText方法.
html方法:
实例:

$('div').html('<font color="red">哈哈</font>');

注意,如果html中不写的话表明是获取.

attr方法:
一般写两个值,属性及属性值.注意.如果是要写true,false.例如attr('disabled',true) 如果写了一个属性,则表示是获取该属性的值.
实例:

$('#ck').attr('checked', true);

removeAttr方法:
移除属性及属性值,较为干净
实例:

 $('div').removeAttr('属性的名字');

完整实例:

<!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 () {
                //html--对应dom中的innerHtml
                //text--对应dom中的innerText
                //$('div').html('<font color="red">哈哈</font>');
                //使用attr() 方法读取或者设置元素的属性,对于jquery没有封装的属性,用attr进行操作
                //attr 一般写两个值,属性和属性值,如果值写了一个属性,那么获取的是该属性的值
                //请注意,这边如果加单引号的话,转换为bool则是true,建议不加引号,降低效率
                //$('#ck').attr('checked', true);
                //添加类 cls
                $('div').attr('class', 'cls');
                //表示的移除该属性.属性没有,值也没有
                //这种写法较为干净
                $('div').removeAttr('属性的名字');
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="设置" id='btn' />
    <div style='width: 300px; height: 200px; background-color: Green; border: 1px solid red;'>
        <input type="checkbox" name="name" value="1" id='ck' />
    </div>
</body>
</html>

动态创建元素

关键字:append,appendTo.
注意:父元素.append(子元素)
子元素.appendTo(父元素)
两部版:

 var akObj = $('<a href="http://www.baidu.com"></a>').text('百度')
 $('body').append(akObj);

一部版:

$('<a href="http://www.baidu.com"></a>').text('百度').appendTo($('body'));

完整实例:

<!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 () {
                //创建一个超链接添加到body中
                //appendTo追加到--
                //在这里需要注意的是,追到的是已经转换为jquery对象的body中.因为该方法为jquery方法
                //$('<a href="http://www.baidu.com"></a>').text('百度').appendTo($('body'));
                //在body中添加超链接.分两步做,是上面版本的拆开版
                var akObj = $('<a href="http://www.baidu.com"></a>').text('百度')
                $('body').append(akObj);
            });
        });
    </script>
</head>
<body>
    <input type="button" name="name" value="创建一个元素" id='btn' />
</body>
</html>

天赋进行时

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery17(html,attr,removeAttr,动态创建元素)

html,attr,removeAttr方法html方法对应的是Dom中的innerHtml方法,text对应的是Dom中的innerText方法. html方法: 实例:$('div').html('<font color="red">哈哈</font>');注意,如果html中不写的话表明是获取.attr方法: 一般写两个值,属性及属性值.注意.如果是要写true,false.例如attr
复制链接

扫一扫