将jq转为原生js格式

简介: 将jq转为原生js格式
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>jQuery-位置选择器</title>
    <script type="text/JavaScript" src="./js/jquery-3.4.1.js"></script>
  </head>
  <body>
    <h2>位置筛选器</h2>
    <h3>$("selector:first")、$("selector:last")、
      $("selector:odd")、$("selector:even")</h3>
    <div class="div">
      <p>第一个:first</p>
      <p>偶数:even</p>
    </div>
    <div class="div">
      <p>奇数:odd</p>
    </div>
    <div class="div">
      <p>偶数:even</p>
    </div>
    <div class="div">
      <p>奇数:odd</p>
    </div>
    <div class="div">
      <p>偶数:even</p>
    </div>
    <div class="div">
      <p>最后一个:last</p>
      <p>奇数:odd</p>
    </div>
  </body>
</html>
<!-- <script type="text/JavaScript">
    //找到第一个div
    $(".div:first").css("color", "blue");
</script>
<script type="text/JavaScript">
    //找到最后一个div
    $(".div:last").css("color", "red");
</script>
<script type="text/JavaScript">
    //:even 选择所引值为偶数的元素,从 0 开始计数
    $(".div:even").css("background", "pink");
</script>
<script type="text/JavaScript">
    //:odd 选择所引值为奇数的元素,从 0 开始计数
    $(".div:odd").css("background", "yellow");
</script> -->
 
<script type="text/JavaScript">
  // 第一个
  let one=document.querySelector('.div');
  console.log(one);
  one.style.color="blue";
  // 最后一个
  let last=document.getElementsByClassName('div')[5];
  console.log(last);
  last.style.color="red";
  // 偶数行
  let ou=document.getElementsByClassName('div');
  console.log(ou);
  for (let i = 0; i < ou.length; i++) {
    if(i%2==0){
      ou[i].style.background="pink";
    }else{
      ou[i].style.background="yellow";
    }
  };
  
</script>
目录
相关文章
|
5月前
|
JavaScript 前端开发
JS将两个数组和合并成数组包对象格式的方法
JS将两个数组和合并成数组包对象格式的方法
65 0
|
5月前
|
前端开发 JavaScript Java
JavaScript复制内容到剪切板 带格式的复制
JavaScript复制内容到剪切板 带格式的复制
|
5月前
|
JSON JavaScript 数据格式
Node.js实现服务器端生成Excel文件(xls格式、xlsx格式文件)并弹出下载文件
Node.js实现服务器端生成Excel文件(xls格式、xlsx格式文件)并弹出下载文件
|
5月前
|
JSON JavaScript 数据格式
JS 将 json 对象转成字符串并保留格式 - JSON.stringify()
JS 将 json 对象转成字符串并保留格式 - JSON.stringify()
174 0
|
11天前
|
XML JSON JavaScript
js的json格式
js的json格式
|
8天前
|
SQL 安全 数据库
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
用html+javascript打造公文一键排版系统2:显示源码/显示预览、清除格式
|
3月前
|
存储 资源调度 前端开发
JavaScript 使用axios库发送 post请求给后端, 给定base64格式的字符串数据和一些其他参数, 使用表单方式提交, 并使用onUploadProgress显示进度
使用 Axios 发送包含 Base64 数据和其他参数的 POST 请求时,可以通过 `onUploadProgress` 监听上传进度。由于整个请求体被视为一个单元,所以进度可能不够精确,但可以模拟进度反馈。前端示例代码展示如何创建一个包含 Base64 图片数据和额外参数的 `FormData` 对象,并在上传时更新进度条。后端使用如 Express 和 Multer 可处理 Base64 数据。注意,实际进度可能不如文件上传精确,显示简单加载状态可能更合适。
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
文本vitepress,如何设置背景图,如何插入背景图,如何插入logo,为了放背景图片,我们要新建pubilc的文件夹,插入logo要在config.js中进行配置,注意细节,在添加背景时,注意格式
|
4月前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
31 0
|
5月前
|
JavaScript 前端开发
将base64格式的图片画到canvas上(js和vue两种)
将base64格式的图片画到canvas上(js和vue两种)
372 1