jQuery

最新推荐文章于 2024-07-24 22:39:14 发布
最新推荐文章于 2024-07-24 22:39:14 发布
阅读量134 收藏
点赞数
分类专栏： 前端基础 文章标签： js css javascript java jquery
原文链接：https://kaiwu.lagou.com/
版权

1 介绍

jQuery由美国人John Resig（约翰·莱西格）于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装

  • jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高开发效率
  • jQuery和JavaScript的之间的关系，可以理解为“成语”和“白话文”之间的关系，成语是对白话文的高度压缩，而jQuery也是对JavaScript的高度压缩库

2 jQuery的使用

jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突，可直接引入

<script src="js/jquery-3.4.1.min.js"></script>
2.1 基本的语法介绍
<script>
	$(selector).action();
</script>

工厂函数 $() ：将DOM对象转化为jQuery对象

选择器 selector：获取需要操作的DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法“$”等同于“ jQuery ”

例如：

<body>
	<p>hello</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
	alert( $("p").text() ); // 弹出hello
</script>
2.2 jQuery对象与DOM对象

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

$("#title").html();
// 等同于
document.getELementById("title").innerHTML;

想混用，要转换

  • DOM对象转jQuery对象
var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象
  • jQuery对象转DOM对象
var a = $("#name"); // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象
2.3 选择器
基本选择器
名称语法构成描述示例
标签选择器element根据给定的标签名匹配元素$(“h2” )选取所有h2元素
类选择器.class根据给定的class匹配元素$(" .title")选取所有class为title的元素
ID选择器#id根据给定的id匹配元素$(" #title")选取id为title的元素
并集选择器selector1,selector2,…,selectorN将每一个选择器匹配的元素合并后一起返回$(“div,p,.title” )选取所有div、p和拥有class为title的元素
交集选择器element.class或element#id匹配指定class或id的某元素或元素集合$(“h2.title”)选取所有拥有class为title的h2元素
层次选择器
名称语法构成描述示例
后代选择器ancestor descendant选取ancestor元素里的所有descendant（后代）元素$("#menu span" )选取#menu下的元素
子选择器parent>child选取parent元素下的child（子）元素$(" #menu>span" )选取#menu的子元素
相邻元素选择器prev+next选取紧邻prev元素之后的next元素$(" h2+dl " )选取紧邻

元素之后的同辈元素

同辈元素选择器prev~sibings选取prev元素之后的所有siblings元素$(" h2~dl " )选取

元素之后所有的同辈元素 

<h3>000</h3>
<div id="x">
    111
    <p>p1</p>
    <div>
        <p>p2</p>
    </div>
</div>
<h3>222</h3>
<h3>333</h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
        //$("#x p").css("color","red"); // 后代选择器，忽略层级 p1 p2变红
        //$("#x>p").css("color","red"); // 子代选择器，只负责子级 p1变红
        //$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3 222变红
        $("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3 222 333变红
</script>
属性选择器
名称语法构成描述示例
属性选择器[attribute]选取包含给定属性的元素$(" [href]" )选取含有href属性的元素
[attribute=value]选取等于给定属性是某个特定值的元素$(" [href =’#’]" )选取href属性值为“#”的元素
[attribute !=value]选取不等于给定属性是某个特定值的元素$(" [href !=’#’]" )选取href属性值不为“#”的元素
[attribute^=value]选取给定属性是以某些特定值开始的元素$(" [href^=‘en’]" )选取href属性值以en开头的元素
[attribute$=value]选取给定属性是以某些特定值结尾的元素 ( " [ h r e f (" [href ("[href=’.jpg’]" )选取href属性值以.jpg结尾的元素
[attribute*=value]选取给定属性是以包含某些值的元素$(" [href* =‘txt’]" )选取href属性值中含有txt的元素
[s1] [s2] [sN]选取满足多个条件的复合属性的元素$(“li[id][title=新闻]” )选取含有id和title属性为新闻的<li>元素
<a href="www.lagou.com">拉勾网</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>

<script src="js/jquery-3.4.1.min.js"></script>
<script>

    //$("[href]").css("color","red"); // 选取拥有href属性的元素
    //$("[href='x']").css("color","red"); // 选取拥有href=x的元素
    //$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
    //$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
    //$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
    //$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
    $("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素

</script>
过滤选择器
语法构成描述示例
:first选取第一个元素$(" li:first" )选取所有
  • 元素中的第一个
  • 元素
:last选取最后一个元素$(" li:last" )选取所有
  • 元素中的最后一个
  • 元素
:even选取索引是偶数的所有元素（index从0开始）$(" li:even" )选取索引是偶数的所有
  • 元素
:odd选取索引是奇数的所有元素（index从0开始）$(" li:odd" )选取索引是奇数的所有
  • 元素
:eq(index)选取索引等于index的元素（index从0开始）$(“li:eq(1)” )选取索引等于1的
  • 元素
:gt(index)选取索引大于index的元素（index从0开始）$(" li:gt(1)" )选取索引大于1的
  • 元素（注：大于1，不包括1）
:lt(index)选取索引小于index的元素（index从0开始）$(“li:lt(1)” )选取索引小于1的
  • 元素（注：小于1，不包括1）
2.4 事件
鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法描述执行时机
click( )触发或将函数绑定到指定元素的click事件单击鼠标时
mouseover( )触发或将函数绑定到指定元素的mouse over事件鼠标移过时
mouseout( )触发或将函数绑定到指定元素的mouse out事件鼠标移出时
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">

<script src="js/jquery-3.4.1.min.js"></script>
<script>

    $("img").click( function(){
        //点击一下，换照片
        $(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
    } );

    $("img").mouseover( function(){   //移动到元素上
        $(this).css( "border","2px solid red" );
    } );
    $("img").mouseout( function(){    //离开元素
        $(this).css( "border","2px solid white" );
    } );

</script>
键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法描述执行时机
keydown( )触发或将函数绑定到指定元素的keydown事件按下键盘时
keyup( )触发或将函数绑定到指定元素的keyup事件释放按键时
<input>
<h3></h3>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("input").keyup( function(){
        var str = $(this).val(); // 获取框中的值
        $("h3").text( str ); // 将h3元素中的文本内容更改为str
    } );
</script>
表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法描述执行时机
focus( )触发或将函数绑定到指定元素的focus事件获得焦点
blur( )触发或将函数绑定到指定元素的blur事件失去焦点
<form action="">
    <p>帐号: <input id="a" value="请输入帐号..."> </p>
    <p>电话: <input id="b"> </p>
</form>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    //获得焦点（激活/点击一下）
    $("#a").focus(function(){
        $(this).val("");
    });

    //失去焦点（未激活/未点击）
    $("#a").blur(function(){
        $(this).val("请输入帐号...");
    });
</script>
鼠标悬停复合事件

hover()方法相当于mouseover与mouseout事件的组合

<img src="img/3.jpg" width="400">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("img").hover(
        function(){
            $(this).css("border","5px solid red");
        },
        function(){
            $(this).css("border","5px solid white");
        }
    );
</script>
事件的动态绑定

对dom元素绑定事件的另一种写法

  • 绑定一个事件
$(".del").on('click', function() {
	alert('hello');
})
  • 绑定多个事件
$(".del").on('click mouseover', function() {
	alert('hello');
})
2.5 元素的隐藏和显示
改变元素的宽和高（带动画效果）
  • show( speed )：显示
  • hide( speed )：隐藏
  • toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: black;
    }
</style>
<body>
  
    <button id="btn1">显示</button>
    <button id="btn2">隐藏</button>
    <button id="btn3">切换</button>
    <div></div>
  
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn2").click(function(){
            //fast:快速的
            //slow:缓慢的
            //毫秒：自定义
            $("div").hide(2000); 
        });
     
        $("#btn1").click(function(){
            $("div").show('slow');
        });

        $("#btn3").click(function(){
            $("div").toggle(1000);
        });
    </script>
</body>
改变元素的高（拉伸效果）
  • slideDown( speed ) ：显示
  • slideUp( speed )：隐藏
  • slideToggle( speed )等价于slideDown+slideUp

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

不改变元素的大小（淡入淡出效果）
  • fadeIn( speed ) 显示
  • fadeOut( speed ) 隐藏
  • fadeToggle( speed ) 等价于fadeIn+fadeOut动画
  • fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒

链

链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，用.连接，可以把动作/方法链接在一起。

例如：点击一次按钮，让div完成4个指定动作

  1. 背景变粉
  2. 字体变绿
  3. 收缩
  4. 拉伸
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        $("div").css("background-color","pink").css("color","green").slideUp(1000).slideDown(1000);
    });
</script>
2.6 DOM和CSS的操作
属性函数

  • attr( “属性” ); 获得元素的属性值

    • attr( “属性” , “新值” ); 修改元素的属性值
    • attr( 样式参数 ) ：样式参数可以写成json格式

  • val() ; 获得表单元素中的value值

    • val(“x”) 修改表单元素中的value值

  • html(); 获得元素中的内容（标签+文本）

    • html(“x”) 修改元素中的内容（标签+文本）

  • text(); 获得元素中的文本

    • text(“x”) 修改元素中的文本
<button>试试</button>
<hr>
<input id="username">

<div>
    <h1><i>中国加油！</i></h1>
</div>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //alert($("input").val()); //input框中的值
        //$("input").val("哈哈哈"); //修改input框中的值   

        //alert( $("div").html() ); //获得div中的内容（包含标签信息）
        //alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）
        $("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）
    });
</script>
样式函数
  • css( “属性”); 获得该属性值
  • css( “属性”,“值”); 设置属性的值
  • css( { json} ); 设置多个属性的值
<style>
    div{
        width: 150px;
        height: 150px;
        background-color: #000;
    }
</style>
<body>
    <button>试试</button>
    <hr>
    <div></div>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("button").click(function(){
            //var w = $("div").css("width"); // 获取css属性，width的值

            //1.一个键值对
            //$("div").css("background-color","pink");

            //2.链式编程
            //$("div").css("background-color","pink").css("border-radius","50%");

            //3.json为参数
            $("div").css({
                opacity:"0.4",
                background:"orange",
                borderRadius:"50%"
            } );
           
        });
    </script>
</body>
类样式函数
  • addClass(); 为元素添加类样式
  • removeClass(); 将元素的类样式移除
  • toggleClass(); 样式的切换（有->无，无->有）
<style>
    div{
        width: 100px;
        height: 100px;
        background-color: #000;
    }   

    .a{
        background: palevioletred;
        border-radius: 50%;
    } 
    .b{
        border:5px dashed darkcyan;
        opacity: 0.6;
    }

    .cn{
       background: #000;
       color:#FFF; 
       font-family: 字魂49号-逍遥行书;
    }
</style>
<body>
    <button id="btn1">试试</button>
    <button id="btn2">取消透明度</button>
    <button id="btn3">样式切换</button>
    <hr>
    <div></div>
    <h1>中华人民共和国，万岁！</h1>

    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $("#btn1").click(function(){
            // $("div").addClass("a");
            $("div").addClass("a b");
        });

        $("#btn2").click(function(){
            $("div").removeClass("b");
        });

        $("#btn3").click(function(){
            $("h1").toggleClass("cn");
        });
    </script>
</body>
节点操作
  • 创建节点
    • 工厂函数$()用于获取或创建节点
  • 插入节点
    • 插入子节点
语法功能
append(content) ( A ) . a p p e n d ( B ) 表 示 将 B 追 加 到 A 中 ， 如 ： (A).append(B)表示将B追加到A中，如： (A).append(B)表示将B追加到A中，如：(“ul”).append($newNode1);
appendTo(content) ( A ) . a p p e n d T o ( B ) 表 示 把 A 追 加 到 B 中 ， 如 ： (A).appendTo(B)表示把A追加到B中，如： (A).appendTo(B)表示把A追加到B中，如：newNode1.appendTo(“ul”);
prepend(content) ( A ) . p r e p e n d ( B ) 表 示 将 B 前 置 插 入 到 A 中 ， 如 ： (A). prepend (B)表示将B前置插入到A中，如： (A).prepend(B)表示将B前置插入到A中，如：(“ul”). prepend ($newNode1);
prependTo(content) ( A ) . p r e p e n d T o ( B ) 表 示 将 A 前 置 插 入 到 B 中 ， 如 ： (A). prependTo (B)表示将A前置插入到B中，如： (A).prependTo(B)表示将A前置插入到B中，如：newNode1. prependTo (“ul”);
  • 插入同辈节点
语法功能
after(content) ( A ) . a f t e r ( B ) 表 示 将 B 插 入 到 A 之 后 ， 如 ： (A).after (B)表示将B插入到A之后，如： (A).after(B)表示将B插入到A之后，如：(“ul”).after($newNode1);
insertAfter(content) ( A ) . i n s e r t A f t e r ( B ) 表 示 将 A 插 入 到 B 之 后 ， 如 ： (A). insertAfter (B)表示将A插入到B之后，如： (A).insertAfter(B)表示将A插入到B之后，如：newNode1.insertAfter(“ul”);
before(content) ( A ) . b e f o r e ( B ) 表 示 将 B 插 入 至 A 之 前 ， 如 ： (A). before (B)表示将B插入至A之前，如： (A).before(B)表示将B插入至A之前，如：(“ul”).before($newNode1);
insertBefore(content) ( A ) . i n s e r t B e f o r e ( B ) 表 示 将 A 插 入 到 B 之 前 ， 如 ： (A). insertBefore (B)表示将A插入到B之前，如： (A).insertBefore(B)表示将A插入到B之前，如：newNode1.insertBefore(“ul”);
  • 替换节点
    • replaceWith()
    • replaceAll()
  • 复制节点
    • clone()
  • 删除节点
    • remove()删除整个节点
    • empty()清空节点内容
<input> <button id="test">测试</button>

<ul>
    <li>金瓶梅</li>
    <li>貂蝉往事</li>
    <li>东京热不热</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("#test").click(function(){
        var bookname = $("input").val();
        var newli = $("<li>"+bookname+"</li>"); //通过工厂函数，创建新的li节点

        /*添加子节点*/
        //$("ul").append(newli); // newli添加到ul后面
        //newli.appendTo("ul"); // newli添加到ul后面
        //$("ul").prepend(newli); // newli添加到ul前面
        //newli.prependTo("ul");

        /*添加同辈节点*/
        //$("li:last").after( newli ); // newli添加到最后的li的后面
        //newli.insertAfter("li:last");
        //$("li:last").before(newli); //newli添加到最后的li的前面
        //newli.insertBefore("li:last");

        /*替换节点*/
        //$("li:eq(1)").replaceWith(newli); // 将第二个li替换成newli
        //newli.replaceAll( "li:eq(1)" );

        /*复制节点*/
        //$("li:first").clone().insertAfter("li:last"); // 复制第一个li，并插入到最后一个li的后面

        /*删除节点*/
        //$("li:eq(1)").empty(); // 清空了节点上的文本（节点并没有消失）
        $("li:eq(1)").remove(); //删除节点

    });
</script>
2.7 遍历节点
祖先元素

用于向上遍历 DOM 树的方法

  • parent() 返回被选元素的直接父元素，仅仅是上一级 （找爸爸）
  • parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分
<p><button>测试</button></p>
<ul>
    <li>a</li>
    <li>
        <b>b</b>
    </li>
    <li>c</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("b").parent().html(); // 找爸爸
        //var x = $("b").parents("ul").html(); // 找祖宗 ul
        //var x = $("b").parents("body").html(); // 找祖宗 body
        alert( x );
    });
</script>
同辈元素
  • next() 获取紧邻匹配元素之后的元素
  • prev() 获取紧邻匹配元素之前的元素
  • siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素
后代元素

后代是子、孙、曾孙等等

  • children( [selector] ) （有中括号：可选）方法返回被选元素的所有直接子元素，“孩子”

  • find( 选择器 ) （无中括号：必写）方法返回被选元素的后代元素，一路向下直到最后一个后代

元素的过滤
  • first()：过滤第一个元素
  • last()：过滤最后一个元素
  • eq(index)：过滤到下标为index的元素
  • not()：除了什么之外的元素
  • is()：返回布尔，判断是不是这种元素
<button>测试</button>
<ul>
    <li>盘古</li>
    <li>蚩尤</li>
    <li>刑天</li>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    $("button").click(function(){
        //var x = $("li").first().text(); // 第一个li
        //var x = $("li").last().text(); // 最后一个li
        //var x = $("li").eq(1).text(); // 下标为1的li
        //var x = $("li").not("li:eq(1)").text(); // 除了下标为1的其余所有li
        var x = $("li").parent().is("ul"); // 返回布尔型，li的父节点是不是ul

        alert(x);
    });
</script>
我要成为罗宾姐姐
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
阶段三模块二 jQuery
wangxu123445678的博客
01-31 126
内容输出来源：拉钩教育Java就业训练营 1 jQuery 1.1 jQuery能做什么 访问和操作DOM元素 控制页面样式 对页面事件进行处理 扩展新的jQuery插件 与Ajax技术完美结合 使用jQuery能大幅提高开发效率 1.2 jQuery优势 体积小，压缩后只有100KB左右 强大的选择器 出色的DOM封装 可靠的事件处理机制 出色的浏览器兼容性 2 jQuery的使用 jQuery作为一个单独存在的js文件，并不会与其他的js文件发生冲突 在页面中使用传统引入js文件的方式引入即可。
jQuery中的几个模块总结
weixin_30563319的博客
09-08 113
Query插件，以备并希望在前端方面有所长进。请批评指正。 一，类型判断全解 JQuery判断类型扩展方法：$.type() 1 /*type: function( obj ) { 2 if ( obj == null ) { 3 return obj + ""; 4 } ...
jquery多个标签绑定同一个事件
weixin_43862596的博客
02-14 3706
jQuery为多个元素绑定同一个事件的目的是当触发一个事件后，会同时影响多个元素，这样可以减少代码量，不用分开绑定事件了。 如果想为多个元素绑定同一个事件，可以使用英文逗号将不同的元素隔开。 下面是jQuery为多个元素绑定同一个事件的代码： $("#div1,#divN,xxxxxxx").click(function(){ }); //在此示例中，具有类名“ p1 ”和“ p2 ”，id为“ div3 ”的元素将动态添加红色边框。 $(".p1, .p3, #div3").css("border",
jQuery源码解析(架构与依赖模块)一、理解架构
Fair_feng的博客
04-14 1066
一、设计原理 轻量级的js库，兼容CSS3，兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0+），Jquery2.0及后续潘奔不在支持IE6/7/8浏览器。jQuery一个比较大的优势是，它的文档说明很全，并且各种应用很详细，同时还有许多成熟的插件提供。核心：The Write Less，Do More（写更少，做更多）。简洁的API、优雅的链式、强大的查询与便...
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jquery-3.7.0.min.js（jQuery下载）
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 326
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
css性能优化的方法
jht_520的博客
07-21 304
避免使用过多的动画和过渡效果：过多的动画和过渡效果会占用更多的 CPU 和内存资源，降低性能。以上是一些常见的 CSS 性能优化方法，具体的优化策略和技巧还需要根据具体的项目和需求来确定。避免嵌套和选择器冗余：尽量避免使用过多的嵌套和冗余的选择器，这会增加解析和匹配的时间。使用标准字体：使用浏览器默认的字体，而不是使用自定义字体文件，可以减少请求和文件大小。），会消耗更多的性能。避免使用昂贵的选择器：某些选择器，如后代选择器和通用选择器（使用缩写和简写属性：尽量使用简写属性来减少代码量，例如使用。
CSS相关记录
oThrowsException的博客
07-24 536
它接受两个参数，分别表示在X轴和Y轴上的缩放比例。如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。CSS的transform属性是一个功能强大的工具，允许你对HTML元素应用2D或3D转换效果，包括旋转、缩放、倾斜和移动等。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。scaleX()、scaleY()、scaleZ()：这些函数分别用于沿X轴、Y轴和Z轴缩放元素。
CSS学习笔记[Web开发]
Jenlibein的博客
07-19 692
CSS 是一种描述 HTML 文档样式的语言。CSS 描述应该如何显示 HTML 元素。CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。CSS指的是层叠样式表* (CascadingStyleSheets)CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在CSS 文件中***：**也称级联样式表。一张 HTML 页面 可以有 多个样式下面是一张提供了四个不同样式表的 HTML 页面。
CSS 创建：从入门到精通
wjs2024的博客
07-24 273
CSS是网页设计和开发的重要组成部分。通过掌握CSS的创建和应用，您可以更好地控制网页的布局和样式，创建出既美观又实用的网站。不断实践和学习，您将能够熟练地使用CSS来实现各种设计效果。
css上下动画 和淡化
ssorth的博客
07-24 230
上下动画
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1170
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
CSS的常见难见
weixin_62432037的博客
07-24 976
选择器的优先级是指在多个选择器匹配同一元素时，决定哪个样式生效的规则。优先级越高的选择器，其样式越优先应用。
CSS（四）——CSS Text(文本）
最新发布
m0_62701594的博客
07-24 968
颜色属性被用来设置文字的颜色。
Vue 3 + Vite 项目中安装 Tailwind CSS
lq099526的专栏
07-22 369
安装 Tailwind CSS步骤，失效，样式不加载
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值