分类默认分类下的文章

页面基础（含DOM）

作者: Starlet
时间: 2024-10-27
分类: 默认分类
评论

1、浏览器渲染过程

HTML 解析：浏览器首先解析 HTML 文档，构建 DOM 树。在解析过程中，如果遇到外部资源（如 CSS 文件、JavaScript 文件、图片等），会发起相应的请求去获取这些资源。
CSS 解析：同时，浏览器会解析 CSS 文件，构建 CSSOM（CSS Object Model）树。CSSOM 描述了文档的样式信息，包括每个元素的样式规则。
构建渲染树：结合 DOM 树和 CSSOM 树，浏览器构建渲染树。渲染树只包含需要显示的节点和这些节点的样式信息。
布局（Layout）：确定每个节点在屏幕上的位置和大小。布局过程会考虑元素的盒模型、定位方式、尺寸等因素。
绘制（Painting）：根据渲染树，浏览器将每个节点绘制到屏幕上。绘制过程包括填充颜色、绘制边框、绘制文本等操作。

继续阅读->

CSS 选择器详解：~、>、+、[]、: 和::

作者: Starlet
时间: 2024-10-25
分类: 默认分类
评论

在 CSS 中，选择器是用来指定要应用样式的 HTML 元素的工具。不同的选择器有着不同的作用和用法，下面就来详细介绍一下~、>、+、[]、:和::这些选择器。

一、>选择器（子选择器）

>选择器用于选择指定元素的直接子元素。

div > p {
  color: blue;
}

在这个例子中，只有作为<div>直接子元素的<p>元素的文本颜色会被设置为蓝色。这意味着如果<p>元素被嵌套在其他元素中，而不是直接在<div>元素下，那么这个样式将不会被应用。

二、+选择器（相邻兄弟选择器）

+选择器用于选择紧接在指定元素后的第一个兄弟元素。

h1 + p {
  font-size: 18px;
}

在这个例子中，紧接在<h1>元素后面的第一个<p>元素的字体大小会被设置为 18 像素。如果有多个<p>元素紧接在<h1>元素后面，只有第一个<p>元素会受到影响。

三、~选择器（通用兄弟选择器）

~选择器用于选择指定元素之后的所有兄弟元素。

h2 ~ p {
  color: green;
}

在这个例子中，<h2>元素后面的所有<p>元素的文本颜色都会被设置为绿色。

四、[]选择器（属性选择器）

[]选择器根据元素的属性来选择元素。

input[type="text"] {
  border: 1px solid gray;
}

在这个例子中，所有type属性为text的<input>元素会有一个 1 像素宽的灰色边框。

还可以使用其他属性选择器的语法，如：

[attribute^="value"]：选择属性值以指定值开头的元素。
[attribute$="value"]：选择属性值以指定值结尾的元素。
[attribute*="value"]：选择属性值包含指定值的元素。

五、:伪类选择器

伪类选择器用于选择处于特定状态的元素。

例如：

:hover：选择鼠标悬停在其上的元素。
:active：选择被激活（如被点击）的元素。
:visited：选择被访问过的链接。
:first-child：选择父元素的第一个子元素。
:last-child：选择父元素的最后一个子元素。
:nth-child(n)：选择父元素的第 n 个子元素。

六、::伪元素选择器

伪元素选择器用于选择元素的特定部分。

例如：

::before：在元素内容的前面插入内容。
::after：在元素内容的后面插入内容。
::first-letter：选择元素内容的第一个字母。
::first-line：选择元素内容的第一行。

用选择器实现二级分栏

HTML 结构：

   <div class="container">
       <div class="first-level">一级栏目 1</div>
       <div class="second-level">
           <div>二级栏目 1.1</div>
           <div>二级栏目 1.2</div>
       </div>
       <div class="first-level">一级栏目 2</div>
       <div class="second-level">
           <div>二级栏目 2.1</div>
           <div>二级栏目 2.2</div>
       </div>
   </div>

这里使用div元素创建了一个包含一级栏目和二级栏目的容器。每个一级栏目后面紧跟着对应的二级栏目。

CSS 样式：

  .container {
       display: flex;
       flex-wrap: wrap;
   }
  .first-level {
       width: 200px;
       background-color: #f0f0f0;
       padding: 10px;
   }
  .second-level {
       display: none;
       width: 200px;
       background-color: #e0e0e0;
       padding: 10px;
   }
  .first-level:hover +.second-level {
       display: block;
   }

通过 CSS 设置容器为弹性布局，一级栏目和二级栏目分别设置宽度和背景颜色。当鼠标悬停在一级栏目上时，显示对应的二级栏目。

继续阅读->

关于原生JS选择元素

作者: Starlet
时间: 2024-09-25
分类: 默认分类
评论

关于原生JS选择元素

this.domArray = [];
this.addDom();  
addDom(){
    const menuNum = $(".menu-item>a").length;
    for(let i = 0; i < menuNum; i++) {
      this.domArray.push($(".menu-item>a").eq(i));
    }
  }

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：$(selector).action()

美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

eq()方法

在 JavaScript 中，$是类似于 jQuery 的库函数，那么.eq()方法主要用于从一个匹配的元素集合中选取特定索引位置的元素。

假设我们有一个匹配的元素集合$('selector')，那么使用.eq(index)的方式来选取特定位置的元素，其中index是要选取的元素在集合中的索引位置，索引从 0 开始。

// 假设有以下 HTML 结构
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

const secondListItem = $('li').eq(1);
// 这里选取了第二个 <li> 元素（索引为 1），此时 secondListItem 就代表了 <li>Item 2</li> 这个元素。

jquery选择器

使用 $("menu-item>a") 这个选择器可以非常准确地定位到具有 “menu-item” 类的元素下的直接子元素<a>标签。

通过这个选择器选中的元素集合，可以方便地应用各种 jQuery 方法。例如，可以使用.css()方法来修改链接的样式，让菜单在视觉上更加突出或与页面整体风格相匹配。

$("menu-item>a").css("color", "blue");

还可以使用.click()方法为链接添加点击事件处理程序，实现交互功能。

$("menu-item>a").click(function() {
    // 处理点击事件的代码
});

继续阅读->

Typecho 主题修改：实现内容摘要与截断

作者: Starlet
时间: 2024-09-24
分类: 默认分类
评论

一、初始状态

默认主题中的代码如下：

<?php $this->content('- 阅读剩余部分 -');?>

这段代码只是简单地输出文章内容，并在末尾添加了一个固定的文本 “- 阅读剩余部分 -”，但没有实现根据内容长度进行截断以及动态显示剩余字数的功能。

二、第一次修改

为了实现能够兼容多种内容的截断，我们先尝试添加一些内容和编码的判断，来确定是否需要截断内容。修改后的代码如下：

<?php
$content = $this->content;
$utf8ContentLength = mb_strlen($content, 'utf-8');
if ($utf8ContentLength > 270) {
    $displayContent = mb_substr($content, 0, 270);
    $remainingLength = $utf8ContentLength - 270;
    echo $displayContent;
    echo '余'. $remainingLength. '字';
    echo '</br><p class="more"><a href="'. $this->permalink(). '" title="'. $this->title(). '">阅读全文</a></p>';
} else {
    echo $content;
}
?>

这段代码首先获取文章内容并计算其 UTF-8 编码下的长度。如果长度大于 270，则截取前 270 个字符显示，并在后面显示剩余字数和阅读全文链接；如果长度小于等于 270，则直接输出完整内容。

三、进一步优化

我们可以添加对  标记的判断，以及处理文章中的图片标签。修改后的代码如下：

<?php
$content = $this->content;
$utf8ContentLength = mb_strlen($content, 'utf-8');

if (strpos($content, '<!--more-->')!== false || $utf8ContentLength < 270) {
    if ($utf8ContentLength > 0) {
        $displayLength = min(270, $utf8ContentLength);
        $displayContent = mb_substr($content, 0, $displayLength);
        $remainingLength = $utf8ContentLength - $displayLength;
        echo $displayContent;
        echo '余'. $remainingLength. '字';
        if ($remainingLength > 0) {
            echo '</br><p class="more"><a href="'. $this->permalink(). '" title="'. $this->title(). '">阅读全文</a></p>';
        }
    } else {
        echo '完';
    }
} else {
    $c = mb_substr($content, 0, 270, 'utf-8');
    $c = preg_replace('/<img.*?src=[\"\'].*?[\"\'].*?>/', '', $c);
    if (strpos($c, '<pre>')!== false) {
        echo $c, '</code></pre>', '余'. ($utf8ContentLength - 270). '字';
    } else {
        echo $c, '余'. ($utf8ContentLength - 270). '字';
    }
    echo '</br><p class="more"><a href="'. $this->permalink(). '" title="'. $this->title(). '">阅读全文</a></p>';
}
?>

首先判断文章内容中是否存在  标记或者内容长度是否小于 270。如果是，则根据长度截取部分内容显示，并在后面显示剩余字数和阅读全文链接；如果不是，则截取前 270 个字符，同时去除其中的图片标签，并在截断处显示剩余字数和阅读全文链接。

四、完整代码


<?php
$content = $this->content;
$utf8ContentLength = mb_strlen($content, 'utf-8');

if (strpos($content, '<!--more-->')!== false || $utf8ContentLength < 270) {
    if ($utf8ContentLength > 0) {
        $displayLength = min(270, $utf8ContentLength);
        $displayContent = mb_substr($content, 0, $displayLength);
        $remainingLength = $utf8ContentLength - $displayLength;
        echo $displayContent;
        echo '余'. $remainingLength. '字';
        if ($remainingLength > 0) {
        echo '</br>','余'. $remainingLength. '字';
        echo '</br><p class="more"><a href="', $this->permalink(), '" title="', $this->title(), '">阅读全文</a></p>';
        }
    } else {
        echo '完';
    }
} else {
    $c = mb_substr($content, 0, 270, 'utf-8');
    $c = preg_replace('/<img.*?src=[\"\'].*?[\"\'].*?>/', '', $c);
    if (strpos($c, '<pre>')!== false) {
        echo $c, '</code></pre>', '</br>', '余'. ($utf8ContentLength - 270). '字';
    } else {
        echo $c,'</br>','余'. ($utf8ContentLength - 270). '字';
    }
    echo '</br><p class="more"><a href="', $this->permalink(), '" title="', $this->title(), '">阅读全文</a></p>';
}
?>

继续阅读->

JavaScript 中“...” 的多种用途

作者: Starlet
时间: 2024-09-23
分类: 默认分类
评论

一、扩展运算符（Spread Operator）

用于数组：可以将一个数组展开为另一个数组的元素。例如：

     const arr1 = [1, 2, 3];
     const arr2 = [4, 5, 6];
     const combinedArray = [...arr1,...arr2];
     console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

可以在函数调用中展开数组参数，使得函数可以接受任意数量的参数。例如：

     function sum(a, b, c) {
       return a + b + c;
     }
     const numbers = [1, 2, 3];
     console.log(sum(...numbers)); // 6

用于对象：可以复制对象的属性到另一个对象。例如：

     const obj1 = { a: 1, b: 2 };
     const obj2 = { c: 3,...obj1 };
     console.log(obj2); // { c: 3, a: 1, b: 2 }

二、剩余参数（Rest Parameters）

在函数定义中，“...” 可以用来收集多个参数到一个数组中。例如：

function addNumbers(...numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(addNumbers(1, 2, 3, 4, 5)); // 15

在这个函数中，“numbers” 是一个包含所有传入参数的数组。可以使用数组的方法如 “reduce” 来处理这些参数。

三、实际代码实例

this.data.orderList
      .filter(item => item.quantity > 0)
      .map(item => ({
        ...item,
        ticket_des: '' // 直接将ticket_des设置为空字符串  
      }));

在这段 JavaScript 代码中，...item是扩展运算符的用法。

这里是在对数组进行map操作时，将原数组中的每个元素（这里是对象item）进行扩展，并添加一个新的属性ticket_des且设置为空字符串，从而创建一个新的对象。

这种用法可以避免手动逐个复制对象的已有属性，使得代码更加简洁和易于维护。例如，如果原对象item有属性a、b、c，使用...item后，新对象会自动包含这些属性，然后再加上新设置的ticket_des属性。

继续阅读->