关于原生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() {
    // 处理点击事件的代码
});

一、初始状态

默认主题中的代码如下：

<?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，则直接输出完整内容。

三、进一步优化

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

<?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>';
}
?>

首先判断文章内容中是否存在 <!--more--> 标记或者内容长度是否小于 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>';
}
?>

一、扩展运算符（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属性。

背景

• 有一个网页URL，其中包含Hash部分（例如：https://example.com/page#section1）。
• 需要根据URL中的Hash部分来设置页面上的不同内容或标题。

问题

• 原始的JavaScript代码尝试通过window.location.href来检查URL，但这不包括Hash部分。
• 需要一种方法来检查Hash部分并据此设置页面的相应内容。

解决方案

1. 使用window.location.hash

   • window.location.hash返回URL中的Hash部分（包括#）。
   • 可以使用startsWith()、includes()或其他字符串方法来检查Hash部分是否符合预期。

2. 设置页面内容

   • 根据Hash部分的内容，更新页面上的标题、显示区域或其他元素。
   • 如果Hash部分是#section1，则显示“第一部分”的内容。
   • 如果不包含#section1，或者需要其他默认情况，则显示默认内容或“首页”内容。

3. 确保DOM已加载

   • 使用window.onload事件来确保在DOM完全加载后再执行设置内容的函数。

示例代码 1

const setupPageContent = () => {  
    // 检查Hash部分  
    const hash = window.location.hash;  
    if (hash.startsWith('#section1')) {  
        // 假设有一个div元素用于显示第一节的内容  
        document.getElementById('section1Content').style.display = 'block';  
        // 可能还需要设置标题或其他元素  
        document.getElementById('pageTitle').textContent = '第一部分';  
    } else {  
        // 显示默认内容或首页内容  
        document.getElementById('defaultContent').style.display = 'block';  
        document.getElementById('pageTitle').textContent = '首页';  
        // 隐藏第一节的内容（如果之前显示了的话）  
        document.getElementById('section1Content').style.display = 'none';  
    }  
}  
  
// 当页面加载完成时调用函数  
window.onload = setupPageContent;

示例代码 2

const setupPageContent = () => {  
    // 检查Hash部分是否包含'section1'  
    if (window.location.hash.includes('section1')) {  
        // 假设有一个DOM元素或变量来接收这个标题  
        // 例如，如果mainTitle是一个input元素，可以这样设置：  
        // document.getElementById('pageTitle').value = "首页";  
        // 或者，如果它是一个文本元素，可以这样设置：  
        // document.getElementById('pageTitleText').textContent = "第一部分";  
        // 这里我们使用console.log来模拟  
        console.log("section1Content");  
    } else {  
        // 模拟设置默认标题  
        console.log("defaultContent");  
        // 类似地，如果pageTitle是DOM元素，则进行相应设置  
    }  
}  
  
// 当页面加载完成时调用函数  
window.onload = setupPageContent;

注意事项

• 确保页面上存在ID为section1Content、defaultContent和pageTitle的DOM元素。
• 如果页面上有多个不同的Hash值需要处理，可以在if-else语句中添加更多的条件分支。
• 考虑使用CSS类来控制元素的显示和隐藏，而不是直接在JavaScript中设置style.display属性，这样可以使代码更加清晰和可维护。
• 如果URL的Hash部分发生变化（例如，用户点击了页面上的锚点链接），你可能还需要监听hashchange事件来更新页面内容。
• 如果URL的Hash部分可能包含多个不同的值，并且每个值都对应一个不同的标题，那么可能需要一个更复杂的条件语句或映射表来根据Hash值设置标题。

如果您看到这篇文章,表示您的 blog 已经安装成功.