jQuery_02 $工具方法 jQiuery属性和CSS

weixin_64692712

已于 2022-03-20 14:27:24 修改

阅读量540

点赞数

文章标签： jquery

于 2022-03-19 17:46:28 首次发布

本文链接：https://blog.csdn.net/weixin_64692712/article/details/123599130

版权

$工具方法 jQiuery属性和CSS

原码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery02:$工具方法&属性css</title>
    <style type="text/css"> 
    .xx{
        border: solid darkblue 6px;
    }
    .aaa{
        background-color: orange;
    }
    .bbb{
        background-color: orchid;
    }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js">
        
    </script>
    <script>
        $(function(){
            // 一、$工具方法
            //1.1$.each()遍历数组、对象的数组
            //定义对象{}
            // var stu={"name":"牛逼","age":38};
            //遍历对象
            // console.info(stu.name,stu.age);
            // $.each(stu,function(k,v){//key,value
            //     console.info(v);
            // })
              
            //定义数组
            // var  names=["欧阳钦","欧阳建敏","欧阳俊熊","欧阳老狗"];
            // //遍历数组
            // $.each(names,function(i,n){
            //     console.info(n);
            // });


            //定义对象数组
            // var stus=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":38}];
            // $.each(stus,function(i,s){
            //     // console.info(s.name,s.age);//方式 一
            //    $.each(s,function(k,v){
            //     // console.info(v);//方式二
            //    })
            // })

            //1.2 $.trim()去除前后空格
            // var str="  eking  ";
            // console.info($.trim(str).length);

            //1.3 $.type()得到数据类型
            // var str=[{"name":"niiT","jdo":90},{"name":"niiT","jdo":90}];
            // var stus=1.5;
            // console.info($.type(str));

            //1.4 $.isFunction() 判断是否是函数
            //1.5 $.isArray() 判断是否是数组
            // var stu={"name":"你比","age":38};
            // var str=[{"name":"niiT","jdo":90},{"name":"niiT","jdo":90}];
            // console.info($.isArray(str));
            // console.info($.isFunction(myf));

            //1.6 $.parseJSON() 解析 json格式的字符串-->js 的数组/对象
            // var stuStr='{"name":"你比","age":9}';
            // console.info($.type(stuStr));
            //对象字符串-->对象
            // var stu=$.parseJSON(stuStr);
            // console.info($.type(stu));
            // console.info(stu.name,stu.age);
            // $.each(stu,function(i,z){
            //     console.info(z);
            // })

            //定义对象数组的字符串
            // var strStr='[{"name":"niiT","jdo":90},{"name":"niiT","jdo":80}]';
            //转成js对象数组
            // console.info($.type(strStr));
            // console.info($.parseJSON(strStr));
            // var str=$.parseJSON(strStr);
            //遍历对象数组
            // $.each(str,function(k,v){
            //     console.info(v.name,v.jdo);
            // })

            
            //二、属性和css
            //2.1 attr()拿值 设值
            // var meath=$("#aa").attr("width");
            // console.info(meath);//拿值
            
            //设置
            // $("#aa").attr("str","img/wallhaven-1k2gdv.jpg");
            // $("#aa").attr("width","200px");

            //2.2 removeAttr() 移除属性值
            // $("#aa").removeAttr("width");

            //2.3 addClass() 动态增加样式
            // $("#aa").addClass("xx"); //样式叠加
            // $("#aa").attr("class","xx");//样式替换

            //2.4 removeClass()  删除对应样式
                // $("#aa").removeClass("xx");

            //2.5prop和attr的区别  prop适合用于属性值是boolean类型的时候
            // 给图片增加name 值
            // $("#aa").attr("name","abc");
            // $("#aa").prop("name","abc");
            //使用复选空实现全选框功能 考虑完善
            $("#ok").click(function(){
                $(".abc").prop("checked",true);
            })
            $("#onok").click(function(){
                // alert(1);
                $(".abc").prop("checked",false);
            })

            //案例3.优化表格的隔行换色
            // $("table tr:even").addClass("aaa");
            // $("table tr:odd").addClass("bbb");

            //2.6 html()和 text()的区别
            // var  a=$("p").html();
            // console.info(a);
            // var b=$("p").text();
            // console.info(b);

            //2.7 val() 拿值 设置
            //那文本框的value值
            // var a=$("#a").val();
            // console.info(a);
            //设置
            // $("#a").val("哈哈哈");


            //CSS
            //设置值
            $("p").css("background","#48AFFF");//单属性
            // $("p").css({"background":"yellow","color":"red"})
            //拿值
            var a=$("p").css("background")
            console.info(a);
        })
        function myf(){
            alert(23);
        }
    </script>
</head>
<body>
    <input type="text" value="史华志" id="a">
    <p>心疼他们三个<span>一秒钟</span></p>
    <img src="img/wallhaven-1k2gdv.jpg" width="300" id="aa" class="yy">
    <pre>




        
    </pre>
    <hr>
    <input type="button" value="全选" id="ok">
    <input type="button" value="取消全选" id="onok">
    <input type="checkbox" class="abc"  value="植物大战僵尸">植物大战僵尸
    <input type="checkbox" class="abc" value="牛逼大战小钦">牛逼大战小钦
    <input type="checkbox" class="abc" value="大炮大战小杨">大炮大战小杨
    <table border="1px" width="50%">
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
        </tr>
    </table>

</body>
</html>

$工具方法

            // 一、$工具方法
            //1.1$.each()遍历数组、对象的数组
            //定义对象{}
            // var stu={"name":"牛逼","age":38};
            //遍历对象
            // console.info(stu.name,stu.age);
            // $.each(stu,function(k,v){//key,value
            //     console.info(v);
            // })
              
            //定义数组
            // var  names=["欧阳钦","欧阳建敏","欧阳俊熊","欧阳老狗"];
            // //遍历数组
            // $.each(names,function(i,n){
            //     console.info(n);
            // });


            //定义对象数组
            // var stus=[{"name":"大牛逼","age":38},{"name":"小牛逼","age":38}];
            // $.each(stus,function(i,s){
            //     // console.info(s.name,s.age);//方式 一
            //    $.each(s,function(k,v){
            //     // console.info(v);//方式二
            //    })
            // })

            //1.2 $.trim()去除前后空格
            // var str="  eking  ";
            // console.info($.trim(str).length);

            //1.3 $.type()得到数据类型
            // var str=[{"name":"niiT","jdo":90},{"name":"niiT","jdo":90}];
            // var stus=1.5;
            // console.info($.type(str));

            //1.4 $.isFunction() 判断是否是函数
            //1.5 $.isArray() 判断是否是数组
            // var stu={"name":"你比","age":38};
            // var str=[{"name":"niiT","jdo":90},{"name":"niiT","jdo":90}];
            // console.info($.isArray(str));
            // console.info($.isFunction(myf));

            //1.6 $.parseJSON() 解析 json格式的字符串-->js 的数组/对象
            // var stuStr='{"name":"你比","age":9}';
            // console.info($.type(stuStr));
            //对象字符串-->对象
            // var stu=$.parseJSON(stuStr);
            // console.info($.type(stu));
            // console.info(stu.name,stu.age);
            // $.each(stu,function(i,z){
            //     console.info(z);
            // })

            //定义对象数组的字符串
            // var strStr='[{"name":"niiT","jdo":90},{"name":"niiT","jdo":80}]';
            //转成js对象数组
            // console.info($.type(strStr));
            // console.info($.parseJSON(strStr));
            // var str=$.parseJSON(strStr);
            //遍历对象数组
            // $.each(str,function(k,v){
            //     console.info(v.name,v.jdo);
            // })

jQuery属性和CSS

案例

//二、属性和css
            //2.1 attr()拿值 设值
            // var meath=$("#aa").attr("width");
            // console.info(meath);//拿值
            
            //设置
            // $("#aa").attr("str","img/wallhaven-1k2gdv.jpg");
            // $("#aa").attr("width","200px");

            //2.2 removeAttr() 移除属性值
            // $("#aa").removeAttr("width");

            //2.3 addClass() 动态增加样式
            // $("#aa").addClass("xx"); //样式叠加
            // $("#aa").attr("class","xx");//样式替换

            //2.4 removeClass()  删除对应样式
                // $("#aa").removeClass("xx");

            //2.5prop和attr的区别  prop适合用于属性值是boolean类型的时候
            // 给图片增加name 值
            // $("#aa").attr("name","abc");
            // $("#aa").prop("name","abc");
            //使用复选空实现全选框功能 考虑完善
            $("#ok").click(function(){
                $(".abc").prop("checked",true);
            })
            $("#onok").click(function(){
                // alert(1);
                $(".abc").prop("checked",false);
            })

            //案例3.优化表格的隔行换色
            // $("table tr:even").addClass("aaa");
            // $("table tr:odd").addClass("bbb");

            //2.6 html()和 text()的区别
            // var  a=$("p").html();
            // console.info(a);
            // var b=$("p").text();
            // console.info(b);

            //2.7 val() 拿值 设置
            //那文本框的value值
            // var a=$("#a").val();
            // console.info(a);
            //设置
            // $("#a").val("哈哈哈");


            //CSS
            //设置值
            $("p").css("background","#48AFFF");//单属性
            // $("p").css({"background":"yellow","color":"red"})
            //拿值
            var a=$("p").css("background")
            console.info(a);
        })

weixin_64692712

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_02 $工具方法 jQiuery属性和CSS

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title...
复制链接

扫一扫