6-1、jQuery入门

最新推荐文章于 2022-12-03 22:00:00 发布

鸵鸟大师

最新推荐文章于 2022-12-03 22:00:00 发布

阅读量175

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_30754745/article/details/108428254

版权

JQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Internet Explorer 6/7/8兼容最高版本 jQuery1.9.1
win10最低是IE11，所以不慌

Jquery放在其他js文件上面，要在第一个。
$ 符号

在这里插入图片描述
$使用：

// ⭐ jq格式
$(document).ready(function(){	//建议使用这种
});

$().ready(function(){ 
});

$(function(){
});

结构层

<a href="#"></a>	//加 # 生效但不跳转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./js/jquery-3.5.1.min.js"></script>
  <script src="./js/jq.js"></script>
  <link rel="stylesheet" href="./css/jq.css">
  <title>Document</title>
</head>
<body>
  <span></span>
  <nav>
    <a href="#">文本1</a>
    <a href="#">文本2</a>
    <a href="#">文本3</a>
    <a href="#">文本4</a>
    <a href="#">文本5</a>
    <a href="#">文本6</a>
    <a href="#">文本7</a>
    <a href="#">文本8</a>
    <a href="#">文本9</a>
    <a href="#">文本10</a>
    <a href="#">文本11</a>
    <a href="#">文本12</a>
  </nav>
  <div>
    <img src="./img/img (1).jpg" alt="">
    <img src="./img/img (2).jpg" alt="">
    <img src="./img/img (3).jpg" alt="">
    <img src="./img/img (4).jpg" alt="">
    <img src="./img/img (5).jpg" alt="">
    <img src="./img/img (6).jpg" alt="">
    <img src="./img/img (7).jpg" alt="">
    <img src="./img/img (8).jpg" alt="">
    <img src="./img/img (9).jpg" alt="">
    <img src="./img/img (10).jpg" alt="">
    <img src="./img/img (11).jpg" alt="">
    <img src="./img/img (12).jpg" alt="">
  </div>
</body>
</html>

表示层

*{
  margin: 0;
  padding: 0;
  border:none;
}
html,body{
  height: 100%;
  background-color: #93b3c6;
  overflow: hidden;
}
span{
  display: block;
  height: 10px;
  width: 10px;
  margin: 30px auto 40px;
  border-radius: 50%;
  background-color: #fff;
}
nav{
  position: relative;
  display: flex;
  width: 78vw;  /* 相对单位，1vw等于可视窗口宽度的1% */
  margin: 0 auto 45px;
  justify-content: space-between;   //均匀分布
}
/* 伪元素 */
nav:before{
  position: absolute;
  top: 20px;
  width: 100%;
  height: 10px;
  background-color: #fff;
  display: block;
  content: " "; /*激活*/
}
nav>a{
  position: relative; 
  font: 20px;
  padding: 10px;
  border: 2px solid #5395b4;
  color: #255d7e;
  text-decoration: none;
  background-color: #fff;
  border-radius: 6px;
  /* z-index: 2; */
}
div{
  position: relative;
  overflow: hidden;
  width:78vw;
  height: 75vh; /*1vh = 可视高度的1%*/
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 30px rgba(8, 1, 3, .3);
}
div>img{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width:98%;
  height: 96%;


}

行为层

⭐⭐⭐链式结构！
eq () 方法将匹配元素集缩减值指定 index 上的一个。
siblings () 方法返回被选元素的所有同级元素。

$(document).ready(function(){
  $('a').click(function(){
    $('img')
    .eq($(this).index())
    .css({'opacity':1})
    .siblings()
    .css({'opacity':0});
  });
});

在这里插入图片描述

方法：

css html text函数：

$(document).ready(function(){
  $('a').click(function(){
    $('img')
    .eq($(this).index())
    .css({'opacity':1})
    .siblings()
    .css({'opacity':0});
  });
  var alinks = $('a');
  for(i=alinks.length-1;i>=0;i--){
    alinks.eq(i).css({
      'background' :  'red',
      'border' :  '3px solid yellow',
      'color' : '#fff',
    })
    .html('<i>七彩云南'+i+'</i>')
    // .text('云南'+i)
    //改变内容，text就可以。需要添加标签用 .html
  }
});