用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

皇家    -  云代码空间

——

JQuery操作与遍历元素并设置其属性、样式和内容

2022-08-16|100阅||

摘要:一、操作属性属性分类固有属性href、src.....共有属性id,class,name......自定义属性abc= '1234'操作属性的方法区别1.prop不能操作自定义属性2.

一、操作属性

属性分类

  • 固有属性

    href、src.....

  • 共有属性

    id,class,name......

  • 自定义属性

    abc= '1234'

操作属性的方法

  • 区别

    1.prop不能操作自定义属性

    2.prop获取boolean类型的属性是 true/false

  • 获取属性值

    attr(属性名称) 操作 checkbox 时, 获取指定的属性值,选中返回 checked,没有选中返回 undefined

    op(属性名称) 获取具有true和false两个属性的属性值

  • 设置属性值

    attr(属性名称,属性值);

    prop(属性名称,属性值);

  • 移除属性

    removeattr("属性")


<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <form action="" id="myform">
            <input type="checkbox" id="ch1" name="ch1" abc='123' checked="checked"/>  aa
            <input type="checkbox" id="ch2" name="ch2" abc='456'/>    bb
        </form>
        <script type="text/javascript">
            var ch1 =  $("#ch1");
            var ch2 =  $("#ch2");
             
            //获取固有属性
            console.log(ch1.attr('type'));
            console.log(ch1.prop('type'));
             
            //获取共有属性
            console.log(ch1.attr('name'));
            console.log(ch2.prop('name'));
             
            //获取自定义属性   prop不能操作自定义属性
            console.log(ch1.attr('abc'));
            console.log(ch2.prop('abc'));//undefined
             
            //获取boolean类型的属性
            console.log(ch1.attr('checked'));//checked
            console.log(ch1.prop('checked'));//true
             
            //设置boolean类型属性
            ch1.attr("checked",0);
            ch2.attr("checked","checked");
            //效果相同
            ch1.prop("checked",false);
            ch2.prop("checked",true);
             
            //设置自定义属性
            ch1.attr("abc",'999');
            //prop不能操作自定义属性
            ch2.prop("abc",'999'); //---设置无效
             
            //设置共有属性
            ch1.attr("name",'ab1');
            ch2.prop("name",'ab1'); 
             
            //移除属性
            ch1.removeattr("checked");//boolen类型
            ch1.removeattr("abc");//自定义属性
            ch1.removeattr("name");//共有属性
            ch1.removeattr("type");//独有属性 
        </script>
    </body>
</html>

二、操作样式

  • attr(“class”) 获取class属性的值,即样式名称
  • attr(“class”,”样式名”) 修改class属性的值,修改样式
  • addclass(“样式名”) 添加样式名称
  • css() 添加具体的样式 相当于直接设置行内style
  • removeclass(class) 移除样式名称
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div{
                padding: 8px;
                width: 180px;
            }
            .blue{
                background: blue;
            }
            .larger{
                font-size: 30px;
            }
            .green {
                background : green;
            }
        </style>
    </head>
    <body>
        <h3>css()方法设置元素样式</h3>
        <div id="conblue" class="blue larger">天蓝色</div>
        <div id="conred">大红色</div>
        <div id="remove" class="blue larger">天蓝色</div>
         
        <script type="text/javascript">
            //获取class属性的值,即样式名称
            var clas = $("#conblue").attr("class");
            console.log(clas);
             
            //修改class属性的值,修改样式
            $("#conblue").attr("class","green");//把字体的大小样式和颜色均覆盖
             
            //addclass(“样式名”)       添加样式名称
            $("#conred").addclass("larger");
             
            //css()
            $("#conred").css("color","red");
             
            //removeclass(class)                移除样式名称
            $("#remove").removeclass("larger");
 
        </script>
    </body>
</html>

三、操作元素内容

html()

获取或设置元素的内容,包含html内容 可以识别纯文本内容

取值:html()

赋值:html("html,内容")

text()

获取或设置元素的内容,不包含html内容 只能识别纯文本内容

取值:text()

赋值:text("html,内容")

val()

获取或设置元素的值

取值:val()

赋值:val(‘值’)

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <h3><span>html()和text()方法设置元素内容</span></h3>
        <div id="html"></div>
        <div id="text"></div>
        <input type="text" name="uname" value="oop" />
         
        <script type="text/javascript">
            //获取元素的内容
            var ht = $("h3").html();
            var te = $("h3").text();
            console.log(ht);
            console.log(te);
             
            //设置元素内容
            $("#html").html("<b>加粗效果</b>");
            $("#text").text("<b>text加粗效果</b>");
             
            //val() 获取元素值
            var input = $('[type="text"]').val();
            console.log(input);
            //val() 设置元素值
            $('[type="text"]').val("jquery");
        </script>
    </body>
</html>

四、创建和添加元素

prepend(content)

在被选元素内部的开头插入元素或内容,被追加的 content 参数,可以是字符、html 元素标记。

$(content).prependto(selector)

把 content 元素或内容加入 selector 元素开头

append(content)

在被选元素内部的结尾插入元素或内容,被追加的 content 参数,可以是字符、html 元素标记。

$(content).appendto(selector)

把 content元素或内容插入selector 元素内,默认是在尾部

before()

在元素前插入指定的元素或内容:$(selector).before(content)

after()

在元素后插入指定的元素或内容:$(selector).after(content)

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div {
                margin: 10px 0px;
            }
            span{
                color: white;
                padding: 8px
            }
            .red{
                background-color: red;
            }
            .blue{
                background-color: blue;
            }
            .green{
                background-color: green;
            }
        </style>
    </head>
    <body>
        <span class="red">男神</span>
        <span class="blue">偶像</span>
        <div class="green">
             <span >小鲜肉</span>
        </div> 
          
        <script type="text/javascript">
            //创建元素
            var newp = $("<span>段落标签</span>");
            console.log(newp);
             
            //添加元素  prepend(content)  内部前追加
            //获取参考位置的元素
            var str = "<span>pdd</span>";
            $('.green').prepend(newp);
            $('.green').prepend(str);   
            //prependto();  被内部前追加
            var str2 = "<span>麻辣香锅</span>";
            $(str2).prependto($(".green"));
             
             
            //append()  内部后追加
            $('.green').append("<span >周杰伦</span>");
            //appendto(); 被内部后追加
            $("<span >林俊杰</span>").appendto($('.green'));
             
            //before  同级前追加
            $(".red").before("<span style='color:black'>薛之谦</span>");
            //after   同级后追加
            $(".blue").after("<span style='color:black'>李荣浩</span>");
        </script>
    </body>
</html>

五、删除元素

  • remove()

    删除所选元素或指定的子元素,包括整个标签和内容一起删

  • empty()

    清空所选元素的内容

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{
                background-color: green;
            }
            .blue{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <h3>删除元素</h3>
        <span class="green">jquery<a>删除</a></span>
        <span class="blue">javase</span>
        <span class="green">http协议</span>
        <span class="blue">servlet</span>
         
        <script type="text/javascript">
            //删除
             //$(".green").remove();
            //清空
             $(".green").empty();
        </script>
    </body>
</html>

六、遍历元素

格式:

$("值").each(function(index,element){

});

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <style type="text/css">
            span{
                color: white;
                padding: 8px;
                margin: 5px;
                float: left;
            }
            .green{
                background-color: green;
            }
            .blue{
                background-color: blue;
            }
        </style>
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
         
        <h3>遍历元素 each()</h3>
        <span class="green">jquery</span>
        <span class="green">javase</span>
        <span class="green">http协议</span>
        <span class="green">servlet</span>
         
        <script type="text/javascript">
            $(".green").each(function(index,ele){
                //当前元素的索引位置
                console.log(index);
                //获取当前 dom 对象
                console.log(ele);
                console.log(this);
                 
                //统一设置样式需要用jquery对象
                $(ele).attr("class","blue");
            });
        </script>
    </body>
</html>
到此这篇关于jquery操作和遍历元素的文章就介绍到这了。




顶 0踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 皇家
    • 等级: 中级程序员
    • 积分: 245
    • 代码: 0 个
    • 文章: 5 篇
    • 随想: 0 条
    • 访问: 1 次
    • 关注

    人气代码

      最新提问

        站长推荐