JS之JQuery的属性操作

来源：互联网发布：xp连接网络打印机步骤编辑：程序博客网时间：2024/06/05 17:48

属性操作

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>属性操作</title></head><body><img src="../img/qiuqian.jpg" alt="秋千" id="img" title="qiuqian"><button onclick="changeImg()">换图</button><button onclick="deleteAlt()">变提示</button></body><script src="../js/jquery.min.js"></script><script>    /*js提供的方法*/    /*getAttribute*/    //    var src = document.getElementById("img").getAttribute("src");    /*点符号法*/    //    var src = document.getElementById("img").src;    /*jquery提供的属性获取的方法*/    var src = $("#img").attr("src");    console.log(src);    /*jquery提供的修改属性的方法*/    /*方法1：键值对方法     比较慢 属性需要一个一个修改*/    //        $("#img").attr("src","../img/city.jpg");    //        $("#img").attr("alt","city");    /*方法2：对象方法  比较简单*/    function changeImg() {        var img = {            src: "../img/city.jpg",            alt: "city"        };        /*对象方法*/    //        $("#img").attr({src:"../img/city.jpg",alt:"city"});   //这个等于正上边var加正下边这行代码的作用        $("#img").attr(img);    }    /*jquery提供的移除属性的方法*/    function deleteAlt() {        $("#img").removeAttr("alt")    }</script></html>

分别给不同的元素添加不同的属性

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>分别给不同的元素添加不同的属性</title></head><body><ul>    <li id="l1">北京大学1</li>    <li id="l2">北京大学2</li>    <li>北京大学3</li>    <li>北京大学4</li></ul></body><script src="../js/jquery.min.js"></script><script>    $("li").attr("id", function (i, att) {        /*1：i：元素的索引         * 2：att：某元素属性原来的值*/        console.log(att);        return "li" + (i + 1);    });</script></html>

样式类

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        .h1{            color:red;            text-align: center;            font-family: 宋体;        }        .h2{            color: #7db5ff;            text-align: center;            font-family: 宋体;        }        .h3{            color: #31ff22;            text-align: center;            font-family: 宋体;        }        .h4{            color: #ffff20;            text-align: center;            font-family: 宋体;        }        .h5{            color: #3c42ff;            text-align: center;            font-family: 宋体;        }    </style>    <title>样式类</title></head><body><h1 class="title">    如月制衡日只剩！</h1><ul>    <li>北京大学1</li>    <li>北京大学2</li>    <li>北京大学3</li>    <li>北京大学4</li></ul></body><script src="../js/jquery.min.js"></script><script>    /*方法1：attr属性方法实现*///    $(".title").attr("style","font-family: 宋体;text-align: center;color:red;")    /*方法2：添加样式类*///    $(".title").addClass("h1")    /**/    $("li").addClass(function (i) {        return "h"+(i+1);    });    /*等于    $("li").attr("class",function (i) {        return "h"+(i+1);    });*/</script></html>

移除和切换样式类

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <style>        .qh{            color: #585858;            font-size: 50px;            text-align: center;        }    </style>    <title>移除和切换样式类</title></head><body><div class="qh" id="jredu">清华大学</div><button onclick="toggleCss()">切换样式类</button></body><script src="../js/jquery.min.js"></script><script>    /*移除样式类*///    $(".qh").removeClass("qh");    /*切换样式泪 没有就添加 有就删除*/    function toggleCss() {        $("#jredu").toggleClass("qh")    }    /*切换样式 没有就添加    有就不变了*/    function toggleCss() {        $("#jredu").toggleClass("qh",true)    }</script></html>

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>html</title></head><body><div>jieruijiaoyu</div><div>jieruijiaoyu2</div></body><script src="../js/jquery.min.js"></script><script>    /*获取所有匹配元素中第一个元素的内容*/    console.log($("div").html());    /*修改所有匹配元素的内容   可以解析标签*/    $("div").html("ccy");    /*分别给不同的元素返回不同的结果*/    $("div").html(function (index,val) {        return "杰瑞教育"+(index+1);    });</script></html>

文本

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>文本</title></head><body><div>jieruijiaoyu</div><div>jieruijiaoyu2</div></body><script src="../js/jquery.min.js"></script><script>    /*获取所有匹配元素的内容*/    console.log($("div").text());    /*设置所有匹配元素的内容*///    $("div").text("北大");    $("div").text(function (index,val) {       return val+"hh";    });    /*html和xml不同点总结：    * 1：html不能适用于xml    但是text可以。    * 2：html设置内容的时候有解析标签的能力，但是text不可以。    * 3：html只获取第一个匹配元素的值，text获取全部匹配元素的内容。*/</script></html>

阅读全文

0 0