• 4.设置样式

    目录

    1  css()设置样式

    2  下拉菜单练习

    3  排他思想

    4  淘宝精品服饰案例

    5  链式编程

    5.1  链式编程-排他思想

    5.2  链式编程分析

    6  获取样式

    7.类操作

    7.1  添加类 addClass()

    7.2  删除类 removeClass()

    7.3  切换类 toggleClass()

    8  tab栏切换

    1  css()设置样式

    我们通过 element.css('属性','值')的方法来设置样式

    我们刚刚只有一个盒子，现在我们搞四个盒子

    发现都被设置了样式

    也就是.css方法会将jQuery对象中的所有元素都设置样式。如果你使用原生的JS，你需要将得到的数组进行遍历。但在jQuery中是不用的，不仅是css方法，其余的方法也是一样，我们称这个性质为jQuery的隐式迭代

    如果你要设置的属性值是300px这种，你不需要加引号，直接写300就可以了

    css可以接收键值对形式的值以修改多组样式

    使用键值对的时候属性可以不加引号，但是涉及到横杠的属性(像下面的background-color)要使用驼峰命名法（不使用就会报错）

    2  下拉菜单练习

    鼠标放到哪个微博上哪个菜单就出现下拉菜单

    代码

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9. head>
    10. <style>
    11.     * {
    12.         padding:0px;
    13.         margin:0px;
    14.     }
    15.  
    16.     li {
    17.         list-style: none;
    18.     }
    19.  
    20.     .biggest_ul {
    21.         width:300px;
    22.         display: flex;
    23.         justify-content: space-between;
    24.         margin:100px auto;
    25.     }
    26.  
    27.     .biggest_ul li ul {
    28.         display: none;
    29.     }
    30. style>
    31. <body>
    32.     <ul class="biggest_ul">
    33.         <li>
    34.             <a href="#">微博a>
    35.             <ul>
    36.                 <li>
    37.                     <a href="#">私信a>
    38.                 li>
    39.                 <li>
    40.                     <a href="#">评论a>
    41.                 li>
    42.                 <li>
    43.                     <a href="#">@我a>
    44.                 li>
    45.             ul>
    46.         li>
    47.  
    48.         <li>
    49.             <a href="#">微博a>
    50.             <ul>
    51.                 <li>
    52.                     <a href="#">私信a>
    53.                 li>
    54.                 <li>
    55.                     <a href="#">评论a>
    56.                 li>
    57.                 <li>
    58.                     <a href="#">@我a>
    59.                 li>
    60.             ul>
    61.         li>
    62.  
    63.         <li>
    64.             <a href="#">微博a>
    65.             <ul>
    66.                 <li>
    67.                     <a href="#">私信a>
    68.                 li>
    69.                 <li>
    70.                     <a href="#">评论a>
    71.                 li>
    72.                 <li>
    73.                     <a href="#">@我a>
    74.                 li>
    75.             ul>
    76.         li>
    77.     ul>
    78. body>
    79. <script src="../../jquery-3.6.1.min.js">script>
    80. <script>
    81.     biggest_ul = $('.biggest_ul')
    82.  
    83.     biggest_ul.children('li').mouseover(function() {
    84.         $(this).children('ul').css('display','block')
    85.     })
    86.  
    87.     biggest_ul.children('li').mouseout(function() {
    88.         $(this).children('ul').css('display','none')
    89.     })
    90. script>
    91. html>

    出了上面提到的之外使用了两个事件mouseover与mouseout，另外在jQuery中使用$(this)来代表this

    也可以不用css进行操作，直接使用jQuery中的show()与hide()

    效果相同

    3  排他思想

    思路都是一样的，首先将所有都搞成原样，然后给特定的元素设置

    也可以换一种写法，先给其他同类兄弟搞成原样，然后给点击的元素设置样式

    效果相同

    总的来讲后面这种写法更好些，没有引入变量，维护时方便些

    4  淘宝精品服饰案例

    效果是这样的

    我就不搞淘宝那个图了，我搞点儿别的图

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         section {
    10.             display: flex;
    11.             width:400px;
    12.             height:300px;
    13.             margin:100px auto;
    14.         }
    15.         .left {
    16.             display: flex;
    17.             flex-direction: column;
    18.             width:20%;
    19.             height:100%;
    20.         }
    21.  
    22.         .left div {
    23.             width:100%;
    24.             height:20%;
    25.             border:1px solid red;
    26.             text-align: center;
    27.             padding-top:10px;
    28.         }
    29.         .right {
    30.             width:80%;
    31.             height:100%;
    32.             margin-left: 20px;
    33.         }
    34.         .right img {
    35.             display: none;
    36.             width:100%;
    37.             height:100%
    38.         }
    39.         .right img:nth-child(1) {
    40.             display: block;
    41.         }
    42.     style>
    43. head>
    44. <body>
    45.     <section>
    46.         <div class="left">
    47.             <div>CSS3div>
    48.             <div>JavaScriptdiv>
    49.             <div>jquerydiv>
    50.             <div>opencvdiv>
    51.             <div>pyqt5div>
    52.             <div>pythondiv>
    53.             <div>pytorchdiv>
    54.             <div>ubuntudiv>
    55.         div>
    56.         <div class="right">
    57.             <img src="upload/CSS3.png" alt="">
    58.             <img src="upload/JavaScript.png" alt="">
    59.             <img src="upload/jquery.jpg" alt="">
    60.             <img src="upload/opencv.png" alt="">
    61.             <img src="upload/pyqt5.png" alt="">
    62.             <img src="upload/python.png" alt="">
    63.             <img src="upload/pytorch.png" alt="">
    64.             <img src="upload/ubuntu.png" alt="">
    65.         div>
    66.     section>
    67. body>
    68. <script src="../jquery-3.6.1.min.js">script>
    69. <script>
    70.     all_left_div = $('.left div')
    71.     all_right_img = $('.right img')
    72.  
    73.     all_left_div.mouseover(function() {
    74.         $(this).css('background-color','cyan')
    75.         $(this).siblings('div').css('background-color','')
    76.  
    77.         index = $(this).index()
    78.         all_right_img.eq(index).show()
    79.         all_right_img.eq(index).siblings('img').hide()
    80.     })
    81. script>
    82. html>

    上面用到了 index = $(this).index() 拿到当前左侧悬停的索引

    5  链式编程

    5.1  链式编程-排他思想

    之前我们搞排他思想是这样写的

    发现用了两次$(this)，那么就可以这样写

    效果是一样的

    它是这样的

    5.2  链式编程分析

    可以这样理解，有两种函数，一种是查询函数，一种是执行函数。像siblings()，parents()这种就是查询函数，查询函数能返回一个对象。像CSS这种就是执行函数

    链条中的首位肯定是查询函数（或者叫一个对象）

    这个时候判断是不是跟了一个执行函数，如果是执行函数就执行，执行后再判断是不是

    如果还是就还执行，一直到后面跟的不是执行函数了，这个时候我们要换一个新的对象，再执行后面的执行函数

    我们做一个例子

    css

    html

    JS

    结果是这样的

    首先发现了第一个元素是son，然后发现后面是执行函数，给son搞了一个背景颜色，然后发现又是一个执行函数，给son搞了一个不透明度

    下面发现后面不跟执行函数了，那么这个时候就换了一个对象，从这之后和son没有任何关系了，后面发现是个执行函数，给father搞了一个背景颜色

    下面发现后面不跟执行函数了，这个时候又换了一个对象，从这之后和son,father没有任何关系了，后面发现是个执行函数，给grandpa搞了一个背景颜色

    6  获取样式

    获取样式与设置样式的函数相同，我们使用 element.css('样式名') 来获取样式

    • css()如果不给参数的话会报错

    7.类操作

    如果样式过多我们通常给元素一个类名或删除元素一个类名来修改样式

    7.1  添加类 addClass()

    7.2  删除类 removeClass()

    删除一个类并不影响其他的类

    7.3  切换类 toggleClass()

    toggleClass()可以把有的类变没，没的类变有

    8  tab栏切换

    我们用一下jQuery来实现一下之前做个的tab栏切换功能 

    22.自定义属性_Suyuoa的博客-CSDN博客_removeattribute

    我们依然沿用之前的CSS与html，js我们使用jQuery的方法

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     <style>
    7.         * {
    8.             margin:0px;
    9.             padding:0px;
    10.             box-sizing:border-box;
    11.         }
    12.         li {
    13.             list-style:none;
    14.             float:left;
    15.             margin-left:5px;
    16.             cursor:pointer;
    17.         }
    18.         #tab {
    19.             position:relative;
    20.             width:500px;
    21.             height:500px;
    22.             margin:50px auto;
    23.         }
    24.  
    25.         .content_area {
    26.             position:absolute;
    27.             top:20px;
    28.             width:100%;
    29.  
    30.         }
    31.  
    32.         .current {
    33.             background-color:red;
    34.             color:white;
    35.         }
    36.  
    37.         .content {
    38.             position:absolute;
    39.             display:none
    40.         }
    41.     style>
    42. head>
    43. <body>
    44.     <div id="tab">
    45.         <ul>
    46.             <li class="current">商品介绍li>
    47.             <li>规格与包装li>
    48.             <li>售后保障li>
    49.             <li>商品评价li>
    50.         ul>
    51.         <div class="content_area">
    52.             <div class="content" style="display:block;">商品介绍内容div>
    53.             <div class="content">规格与包装内容div>
    54.             <div class="content">售后保障内容div>
    55.             <div class="content">商品评价内容div>
    56.         div>
    57.     div>
    58. body>
    59. <script src="../jquery-3.6.1.min.js">script>
    60. <script>
    61.     lis = $('#tab ul li')
    62.     contents = $('.content')
    63.  
    64.     lis.click(function() {
    65.         $(this).siblings().removeClass('current')
    66.         $(this).addClass('current')
    67.         
    68.         index = $(this).index()
    69.         contents.css('display','none')
    70.         contents.eq(index).css('display','block')
    71.     })
    72. script>
    73. html>
    74.

    发现可以实现 

  • 相关阅读:
    二、枚举 enum
    CF486D Valid Sets
    【QT进阶】Qt http编程之实现websocket client客户端
    python之计算市场技术指标
    文件的编译与链接
    线程的概念和创建【javaee初阶】
    十种经典排序算法总结
    Java的重要特点
    rke方式安装k8s集群
    【Flowable】使用UEL整合Springboot从0到1（四）
  • 原文地址：https://blog.csdn.net/potato123232/article/details/126705921