JQuery快速学习(上)

最新推荐文章于 2024-08-06 17:48:24 发布
最新推荐文章于 2024-08-06 17:48:24 发布
阅读量134 收藏
点赞数
文章标签： jquery 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yezishuibuxing/article/details/127120582
版权

一个的小案例

原生JS代码

有一个入口函数的页面是怎么样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <style>
        div{
            height: 100px;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<input type="button" value="设置边框" id="btnOne">
<input type="button" value="设置文本" id="btnTwo">
<div></div>
<div></div>
<div></div>
</body>
</html>
<!--需求:点击按钮给三个div设置边框和文本-->
<script>
    //入口函数
    window .onload =function () {
        //1.先要获取对应的元素
        var btnOne=document .getElementById ('btnOne');
        var btnTwo=document .getElementById ('btnTwo');
        var divs=document .getElementsByTagName ('div');
        //2.给btnOne按钮设置点击事件
        btnOne .onclick =function () {
            for (let i = 0; i < divs .length ; i++) {
                divs [i].style .border ='1px solid red';
            }
        }
        //3.给btnOne按钮设置点击事件
        btnTwo .onclick =function () {
            for (let i = 0; i < divs.length; i++) {
                divs [i].textContent ="我是设置的文本";
            }
        }
    }
</script>

再增加一个入口函数，看看页面显示及效果是否发生变化

//再来一个入口函数
window .onload =function () {
    console .log ("我又是一个入口函数");
}

分析一下，原生js的缺点：

  1. 不能够添加多个入口函数（window.onload） 如果添加了多个，后面的会把前面的给覆盖
  2. 原生js的api名字都太长太难记
  3. 原生js有时候代码冗余
  4. 原生js有些属性或者方法，有浏览器兼容问题
  5. 原生js容错率比较低，前面的代码出了问题，后面的代码执行不了

体验JQuery

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="lib/jquery-3.6.1.js"></script>
  <style>
    div{
      height: 100px;
      margin-top: 10px;
    }
  </style>
</head>
<body>
<input type="button" value="设置边框" id="btnOne">
<input type="button" value="设置文本" id="btnTwo">
<div></div>
<div></div>
<div></div>
</body>
</html>
<!--需求:点击按钮给三个div设置边框和文本-->
<script>
  //入口函数
  $(document).ready(function(){
    //设置边框
    $('#btnOne').click(function(){
      $('div').css ('border','1px solid red');
    });

    //设置文本
    $('#btnTwo').click (function () {
      $ ('div').text ('我是设置的文本');
    })
  });

  //这又是一个入口函数
  $(document).ready(function () {
    console .log ('我又是一个入口函数');
  });
</script>

分析一下JQuery的优势：

  1. 是可以写多个入口函数的
  2. JQuery的api名字都容易记忆
  3. JQuery代码简洁（隐式迭代）
  4. Jquery帮我们解决了浏览器兼容问题
  5. JQuery容错率较高，前面的代码出了问题，后面的代码不受影响

初始JQuery

什么是JQuery?

JQuery其实就是一个封装了很多方法的js库

我们学习JQuery其实就是学习这些方法如何使用？（调用参数，返回值，方法有什么效果...）

如何使用JQuery？

  1. 引入JQuery文件

    <script src="lib/jquery-3.6.1.js"></script>

  2. 写一个入口函数

    $(document).ready(function () {

    });

  3. 找到你要操作的元素（JQuery选择器），去操作他（给他添加属性，样式，文本...）

    $(document).ready(function () {

        $('div').width (100).height (100).css('backgroundColor','red').text ('haha');//链式编程

    });

JQuery的个版本及区别

  1. 在官网中下载JQuery文件
  2. JQuery有版本

    1.x  支持老浏览器ie678  停止更新了

    2.x  不支持老浏览器的    停止更新了

    3.x  不支持老浏览器的    更新中...

  3. JQuery版本的了解

    每一个版本JQuery又有压缩版和未压缩版

    compressed        压缩版也叫精简版，去掉了格式，体积小，用于发布

    uncompressed    未压缩版也叫原版，有统一的格式，体积较大，方便阅读，用于测试、学习和开发

JQuery的入口函数

JQuery入口函数的写法2种：

方法一：

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

方法二：（匿名函数，用的多）

$(function () {
  
});

JQuery入口函数和window.onload入口函数的区别：

  1. window.onload入口函数不能写多个，但是JQuery的入口函数是可以写多个的
  2. 执行时机不同：JQuery入口函数要快于window.onload

    JQuery入口函数要等待页面上dom树加载完后执行

    window.onload要等待页面上所有的资源(dom树/外部css/js连接,图片)都加载完毕后执行

$是什么？

如果报了这个错误：$ is not defined，就说明没有引入JQuery文件

JQuery文件结构

其实是一个自执行函数

(function () {
    window.jQuery=window.$=jQuery;
  })();
  • 引入一个js文件，是会执行这个js文件中的代码的 
    • ​console.log(num);//10
  • jQuery文件是一个自执行函数，执行这个jQuery文件中的代码，其实就是执行这个自执行函数
  • 这个自执行文件就是给window对象添加一个jQuery属性和$属性 
    • console.log(window);
  • $其实和jQuery是等价的，是一个函数
console.log(window.jQuery===window.$);//true
console.log(Object.prototype.toString.call($));//[object Function]

$是一个函数，参数传递不同，效果也不一样

//a.如果参数传递的是一个匿名函数--入口函数
  $(function () {

  });
  //b.如果参数传递的是一个字符串--选择器/创建一个标签
  $('#one');

  $('<div>啦啦啦，我是一个div</div>');

  //c.如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象
  $(dom对象);
  1. 如果参数传递的是一个匿名函数--入口函数 
    1. $(function () {

});
  2. 如果参数传递的是一个字符串--选择器/创建一个标签 
    1. $('#one');

$('<div>啦啦啦，我是一个div</div>');
  3. 如果参数是一个dom对象，那他就会把dom对象转换成jQuery对象 
    1. $(dom对象);

dom对象和jQuery对象

1.dom对象

dom对象就是原生js选择器获取到的对象

document.getElementById("");

document.detElementsByTagName("");

特点：

只能调用dom方法或者属性，不能调用jQuery的属性或者方法

div1.style.backgroundColor="red";//dom对象是可以调用dom的属性或者方法

div1.css('backgroundColor','green');//报错了 div1.css is not a function,因为dom对象不能调用jQuery的方法

2.jQuery对象

利用jQuery选择器获取到的对象

let $div1 = $('#one');

特点：只能调用jQuery的方法或者属性，不能调用原生jsdom对象的属性或者方法

$div1.css('backgroundColor','green');//jQuery对象是可以调用jQuery的方法的

$div1.style.backgroundColor='red';//报错了 Cannot set properties of undefined (setting 'backgroundColor')

3.jQuery对象长什么样

jQuery对象是一个伪数组，jQuery对象其实就是dom对象的一个包装集

var div1=document.getElementById('one');
console.log(div1);

var $div1=$('#one');
console.log($div1);

console.log($div1.__proto__ === Array.prototype);//false,jQuery对象是一个伪数组

var $divs=$('div');
console.log($divs);

 4.dom对象如何转换为jQuery

var div1=document.getElementById('one');
console.log(div1);
let $div1 = $(div1);
console.log($div1);

5.jQuery对象要转化成dom对象

 使用下标来取出来

var $divs=$('div');
console.log($divs);
let div1 = $divs[0];
console.log(div1);

 使用jQuery的方法 get()

var $divs=$('div');
console.log($divs);
let div2 = $divs.get(1);
console.log(div2);

案例-开关灯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    img{
      display: block;
      margin: 10px auto;
    }
  </style>
</head>
<body>
<button>开灯</button>
<button>关灯</button>
<img src="images/1.jpg"/>

</body>
</html>

<script src="lib/jquery-3.6.1.js"></script>
<script>
  $(function () {
    //需求：给按钮们添加事件：设置背景色

    //1.获取到按钮们
    var btns=document.getElementsByTagName('button');
    // console.log(btns);

    //2.给关灯按钮设置点击事件
    btns[1].onclick=function () {
      $('body').css('backgroundColor','black');
    }

    //3.给开灯按钮设置点击事件
    $(btns[0]).click(function () {
      $('body')[0].style.backgroundColor='white';
    });
  });
</script>

设置、获取文本内容

text()：设置和获取文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="获取" id="getBtn">
<input type="button" value="设置" id="setBtn">

<div id="div1">我是一个div标签
  <p>我是一个p标签
    <span>span1</span>
  </p>
</div>

<div id="div2">我是一个div2标签
  <p>我是一个p2标签
    <span>span2</span>
  </p>
</div>

</body>
</html>

<script src="lib/jquery-3.6.1.js"></script>
<script>

</script>

1.获取文本：

text()方法不给参数

1.1获取id为div1这个标签的文本

获取到这个标签中所有的文本，包括后代元素的文本

$(function () {
  //1.获取文本:text()方法不给参数
  $('#getBtn').click(function () {
    // console.log($('#div1').text());
  });
});

1.2获取标签为div的元素的文本

包含的多个dom元素的jQuery对象，通过text()方法获取文本，会把所有dom元素的文本获取到

$(function () {
  //1.获取文本:text()方法不给参数
  $('#getBtn').click(function () {
    console.log($('div').text());
  });
});

2.设置文本：

text()方法给参数，参数就是要设置的文本

2.1获取id为div1这个标签设置文本

会覆盖他原来的内容，如果设置的文本中包含标签，是不会把这个标签解析出来的

$(function () {
  //2.设置文本:text()方法给参数，参数就是要设置的文本
  $('#setBtn').click(function () {
    $('#div1').text('我是新设置的文本');
  });
});

$(function () {
  //2.设置文本:text()方法给参数，参数就是要设置的文本
  $('#setBtn').click(function () {
    $('#div1').text('我是新设置的文本<a>我是链接</a>');
  });
});

1.2获取标签为div的元素设置文本

包含的多个dom元素的jQuery对象，通过text()方法设置文本，会把所有dom元素都设置上

$(function () {
  //2.设置文本:text()方法给参数，参数就是要设置的文本
  $('#setBtn').click(function () {
    $('div').text('设置的文本');//隐式迭代
  });
});

设置、获取样式css()

css()：设置、获取样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #div1{
      height: 200px;
      background-color: pink;
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <input type="button" value="获取" id="getBtn">
  <input type="button" value="设置" id="setBtn">
  <div id="div1" style="width: 200px"></div>
  <div id="div2" style="width: 300px"></div>
  <div id="div3" style="width: 400px"></div>

</body>
</html>

<script src="lib/jquery-3.6.1.js"></script>
<script>

</script>

1.获取样式

1.1获取id为div1这个元素的样式

在ie浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框

$(function () {
    //1.获取样式
    $('#getBtn').click(function () {
      console.log($('#div1').css('width'));//200px
      console.log($('#div1').css('height'));//20px
      console.log($('#div1').css('background-color'));//rgb(255, 192, 203)
      console.log($('#div1').css('backgroundColor'));//rgb(255, 192, 203)
      console.log($('#div1').css('border'));//2px solid rgb(255, 0, 0)
      //在ie浏览器中，要获取边框这样的样式值，一定要记得给一个准确的边框
      console.log($('#div1').css('border-top-width'));
    });
  });

1.2获取标签为div的元素们的样式

获取包含了多个dom元素的jQuery对象的样式，只能获取到第一个dom对象的样式

$(function () {
    //1.获取样式
    $('#getBtn').click(function () {
        console.log($('div').css('width'));//200px
    });
  });

 注意：获取样式操作只会返回第一个元素对应的样式值

2.设置样式

设置样式:css()方法要给样式名和样式值

设置的样式是行内样式

2.1给id为div1的这个元素设置样式

设置单样式

$(function () {
  //2.设置样式:css()方法要给样式名和样式值
  //设置的样式是行内样式
  $('#setBtn').click(function () {
    $('#div1').css('width','300px');
    $('#div1').css('height',300);
    $('#div1').css('backgroundColor','red');
    $('#div1').css('border','10px solid green');
  });
});

 设置多样式

$(function () {
  //2.设置样式:css()方法要给样式名和样式值
  //设置的样式是行内样式
  $('#setBtn').click(function () {
    //设置多样式
    $('#div1').css({
      width:300,
      height:'300px',
      backgroundColor:'green',
      // border:'10px solid pink'
      borderTopWidth:'10px'
    });
});

2.2给标签为div的元素们设置样式

$(function () {
  //2.设置样式:css()方法要给样式名和样式值
  //设置的样式是行内样式
  $('#setBtn').click(function () {
    $('div').css({
      width:300,
      height:'300px',
      backgroundColor:'green',
      // 'border-top-width':'10px',
      border:'10px solid red',
      marginTop:10
    });
  });
});

隐式迭代，把每一个div都设置了同样的样式

 jQuery选择器

jQuery选择器就是jQuery为我们提供的一组方法，让我们能更加方便的获取到页面中的元素

jQuery基本选择器

名称用法描述
ID选择器$('#id');

获取指定ID的元素

类选择器$('.class');获取同一类class的元素
标签选择器$('div');获取同一类标签的所有元素
并集选择器$('div,p,li');使用逗号分隔，只要符合条件之一就可
交集选择器$('div.redClass');获取class为redClass的div元素

 总结：跟css的选择器用法一模一样

小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
  <ul>
    <li id="slg">国共联合司令官</li>
  </ul>
<!--  独立团-->
  <ul id="dlt">
    <li class="tz">独立团团长-李云龙</li>
    <li>狙击手</li>
    <li>士兵</li>
    <li>士兵</li>
    <li>士兵</li>
    <li class="hf">伙夫</li>
    <li class="wsy">卫生员</li>
  </ul>
<!--  358团-->
  <ul id="t358">
    <li class="tz">358团团长-楚云飞</li>
    <li>狙击手</li>
    <li class="nj">士兵</li>
    <li>士兵</li>
    <li>士兵</li>
    <li class="hf">伙夫</li>
    <li class="wsy">卫生员</li>
  </ul>
</div>

<div>
  <p class="nj">老百姓</p>
  <p class="nj">老百姓</p>
  <p>老百姓</p>
  <p>老百姓</p>
  <p>老百姓</p>
  <p>老百姓</p>
  <p>老百姓</p>
</div>
</body>
</html>

抗日开始，action

首先，司令官发表讲话

司令官官比较大，要把司令官变得大一点

id选择器

格式：$('#id')

作用：通过id来获取页面中的元素

$(function () {
  $('#slg').css('fontSize',40);
});

团长回去讲话

团长官也比较大，要把团长弄大一点，但是团长官能大过司令官吗？我们要把团长弄二大

类选择器

格式：$('.class')

作用：获取页面中的一类元素，通过class属性来获取

jQuery中支持隐式迭代，迭代就是便利的意思

$(function () {
  $('.tz').css('fontSize',30);
});

接下来，要上战场，全军出击

要把所有的兵都派上去，上战场，前线的兵背景色都是红色

标签选择器

格式：$('标签名')

通过标签来获取元素

$(function () {
  $('li').css('backgroundColor','red');
});

在战场上发现有人背着锅，伙夫和卫生员是没有战斗力的，应该撤下来

需要把伙夫和卫生院的背景色改为白色

伙夫和卫生员也想要帮忙为抗日做贡献

并集选择器  li.crrent

格式：$('selector1,selector2');

获取两个选择器之间的交集

$(function () {
  $('.hf,.wsy').css('backgroundColor','white');
});

现在，突然发现老打败仗，为什么呢？现在在共和联军里面出现内奸

现在把联合军里面的内奸找出来，不能干扰到老百姓

交集选择器

格式：$('selector1selector2'); 注意：中间没有任何空格

获取两个选择器之间的交集

$(function () {
  $('li.nj').css('backgroundColor','green');
});

jQuery层级选择器

名称用法

描述

子代选择器$('ul>li');使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器$('ui li');使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p></p>
<div id="father">
  <div>
    <span>span1</span>
    <span>span2</span>
    <span>span3</span>
  </div>
  <div>
    <b>1</b>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <p></p>
  </div>
  <div></div>
  <p></p>
  <p></p>
  <p></p>
  <span>sss1</span>
</div>
</body>
</html>
<script src="lib/jquery-3.6.1.js"></script>
<script>

</script>

需求1：获取id为father这个元素的所有子div
 

$(function () {
  console.log($('#father>div'));
});

 

需求2：获取id为father这个元素的所有子div以及所有子p

// console.log($('#father>div,p'));//不行，这种意思是获取id为father这个元素的所有子div以及页面上所有的p

$(function () {
  // console.log($('#father>div,p'));//不行，这种意思是获取id为father这个元素的所有子div以及页面上所有的p
  console.log($('#father>div,#father>p'));
});

 

需求3：获取id为father这个div的所有后代div.

$(function () {
  console.log($('#father div'));
});

jQuery过滤选择器

这类选择器都带冒号:

名称用法描述
:eq(index)$(li:eq(2)).css('color','red');

获取到的li元素，选择索引号为2的元素，索引号index从0开始

:odd$('li:odd').css('color','red');获取到的li元素中，选择索引号围殴奇数的元素
:even$('li,even').css('color','red');获取到的li元素中，选择索引号围殴偶数的元素

小案例：

隔行变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>我是第1个li标签</li>
    <li>我是第2个li标签</li>
    <li>我是第3个li标签</li>
    <li>我是第4个li标签</li>
    <li>我是第5个li标签</li>
    <li>我是第6个li标签</li>
    <li>我是第7个li标签</li>
    <li>我是第8个li标签</li>
    <li>我是第9个li标签</li>
    <li>我是第10个li标签</li>
</ul>
</body>
</html>
<script src="lib/jquery-3.6.1.js"></script>
<script>

</script>

设置奇数行li标签颜色为天蓝色

$(function () {
    $('li:odd').css('backgroundColor','skyblue');
});

设置偶数行li标签背景色为粉色

$(function () {
    $('li:even').css('backgroundColor','pink');
});

首位两行li显示红色

$(function () {
    $('li:eq(0)').css('backgroundColor','red');
    $('li:eq(9)').css('backgroundColor','red');
});

jQuery筛选选择器（方法）

 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法

名称用法描述
children(selector)$('ul').children('li');相当于$('ul-li'),子选择器
find(selector)$('ul').find('li');相当于$('ul li'),后代选择器
siblings(selector)$('#first').siblings('li');查找兄弟节点，不包括自己本身
parent()$('#first').parent();查找父亲
eq(index)$('li').eq(2);相当于$('li:eq(2)'),index从0开始
next()$('li').next();找下一个兄弟
prev()$('li').prev();找上一个兄弟

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .wrap{
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url("images/2.jpg");
        }
        .wrap li{
            background-image: url("images/2.jpg");
        }
        .wrap>ul>li{
            float: left;
            margin-right: 10px;
            position: relative;
        }
        .wrap a{
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: black;
            line-height: 30px;
            text-align: center;
        }
        .wrap li ul{
            position: absolute;
            top: 30px;
            display: none;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单2</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单3</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>
<script src="lib/jquery-3.6.1.js"></script>
<script>

</script>

需求：

1.给一级菜单li设置鼠标移入事件，二级菜单显示

2.给一级菜单li设置鼠标离开事件，二级菜单隐藏

获取一级菜单li的方式:

// $('li');//不行
// $('ul>li');//不行
// $('.wrap li');//不行
// $('.wrap>ul>li')//可行的

1.给一级菜单li设置鼠标移入事件，二级菜单显示

$(function () {
    $('.wrap>ul>li').mouseover(function () {
        // console.log(this);//谁触发了鼠标移入事件，那这个this就是谁，this还是一个dom对象
        // $(this).children('ul').css('display','block');//显示就是更改display属性为block
        $(this).children('ul').show();//show()方法本质上还是更新display属性为block
    });
});

2.给一级菜单li设置鼠标离开事件，二级菜单隐藏

$(function () {
    $('.wrap>ul>li').mouseout(function () {
        $(this).children('ul').hide();//hide()方法本质上还是更新dispaly属性为none
    });
});

3.思考题：

为什么不给一级菜单a标签设置鼠标移入和离开事件？

因为这样的话选不到二级菜单

$(function () {
    $('.wrap>ul>li>a').mouseover(function () {
        $(this).siblings('ul').show();
    });

    $('.wrap>ul>li>a').mouseout(function () {
        $(this).siblings('ul').hide();
    });
});

优化：

mouseover事件在鼠标移动到选取的元素及其子元素上是触发

mouseenter事件只在鼠标移动到选取的元素上时触发

mouseout与ouseleave同理

前面案例：

1.给一级菜单li设置鼠标移入事件，二级菜单显示

$(function () {
  var i=0;
  $('.wrap>ul>li').mouseenter(function () {
    i++;
    console.log(i);
    $(this).children('ul').show();
  });
});

2.给一级菜单li设置鼠标离开事件，二级菜单隐藏

$(function () {
  $('.wrap>ul>li').mouseleave(function () {
    $(this).children('ul').hide();
  });
});

以后如果有鼠标移入事件，请使用mouseenter,而不是mouseover

鼠标移开事件使用mouseleave,就不要使用mouseout

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        body{
            background: black;
        }
        .wrap{
            margin: 100px auto 0;
            width: 700px;
            height: 350px;
            padding: 10px 0 0 10px;
            background: black;
            overflow: hidden;
            border: 1px solid white;
        }

        .wrap li{
            float: left;
            margin: 0 10px 10px 0;
        }
        .wrap img{
            display: block;
            border: 0;
        }
    </style>
</head>
<body>
<div class="wrap">
    <ul>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
    </ul>
</div>
</body>
</html>
<script src="lib/jquery-3.6.1.js"></script>
<script>
    
</script>

需求1：给小人物所在的li标签设置鼠标移入事件：当前li标签透明度为1，其他的兄弟li标签透明度

为0.4

需求2：鼠标离开大盒子，所有的li标签透明度改成1

获取小人物们所在的li
$('.wrap li');//可以的
$('.wrap').find('li');//可以的

需求1：

$(function () {
    $('.wrap').find('li').mouseenter(function () {
        // console.log($(this).css('opacity', 1));//这个css方法有返回值，返回值就是设置这个方法的元素本身
        $(this).css('opacity', 1).siblings('li').css('opacity',0.4)
    });
});

需求2：

$(function () {
    $('.wrap').mouseleave(function () {
        // $('.wrap').find('li').css('opacity',1);
        // console.log($(this));//在这个离开事件中，this是这整个大盒子
        $(this).find('li').css('opacity',1);
    });
});

显示效果：网页中整体是黑色，中间有一个盒子，里面有六个图片，当鼠标移动到其中一个图片上时，其他五个都暗色，当鼠标移出盒子，图片都是亮的

小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style-type: none;
        }
        .parentWrap{
            width: 200px;
            text-align: center;
        }
        .menuGroup{
            border: 1px solid grey;
            background: white;
        }
        .groupTitle{
            display: block;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            border-bottom: 1px solid grey;
            cursor: pointer;
        }
        .menuGroup>div{
            height: 200px;
            background-color: white;
            display: none;
        }
    </style>
</head>
<body>
<div>
    <ul class="parentWrap">
        <li class="menuGroup">
            <span class="groupTitle">标题1</span>
            <div>我是弹出来的div1</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题2</span>
            <div>我是弹出来的div2</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题3</span>
            <div>我是弹出来的div3</div>
        </li>
        <li class="menuGroup">
            <span class="groupTitle">标题4</span>
            <div>我是弹出来的div4</div>
        </li>
    </ul>
</div>
</body>
</html>
<script src="lib/jquery-3.6.1.js"></script>
<script>

</script>

需求：点击标题li标签，对应的div显示，他的兄弟标签li下面的div隐藏

$(function () {
    $('.parentWrap>.menuGroup').click(function () {
        //jQuery特性：隐式迭代
        $(this).children('div').show().parent().siblings('li').children('div').hide();
    });
});

jQuery特性：链式编程，在于一个方法返回的是一个jQuery对象，既然是jQuery对象，就可以点出jQuery方法来

长代码解读：

$(this).children('div').show().parent().siblings('li').children('div').hide();

this点的是第二个li，他的children('div')就是<div>我是弹出来的div2</div>，show()让他显示，这个show()方法有返回值，返回当前元素，即console.log($(this).children('div').show());输入为图下

 $(this).children('div').show().parent().siblings('li')，就是他的兄弟第1,3,4个li，再找children('div')，就是第1,3,4个li的子div，让他们隐藏

小案例：淘宝服饰精品

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }

        ul {
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .wrapper{
            width: 298px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            overflow: hidden;
        }
        #left,#center,#right{
            float: left;
        }
        #left li,#right li{
            background: url("images/1.jpg");
        }
        #left li a,#right li a{
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        #left li a:hover,#right li a:hover{
            background: url("images/2.jpg");
        }
        #center{
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <ul id="left">
        <li><a href="#">女靴</a></li>
        <li><a href="#">雪地靴</a></li>
        <li><a href="#">冬裙</a></li>
        <li><a href="#">呢大衣</a></li>
        <li><a href="#">毛衣</a></li>
        <li><a href="#">棉服</a></li>
        <li><a href="#">女裤</a></li>
        <li><a href="#">羽绒服</a></li>
        <li><a href="#">牛仔裤</a></li>
    </ul>
    <ul id="center">
        <li><a href="#"><img src="images/1.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/2.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/3.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/4.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/1.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/2.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/3.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/4.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/1.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/2.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/3.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/4.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/1.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/2.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/3.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/4.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/1.jpg" width="200" height="250"/></a></li>
        <li><a href="#"><img src="images/2.jpg" width="200" height="250"/></a></li>
    </ul>

    <ul id="right">
        <li><a href="#">女包</a></li>
        <li><a href="#">男包</a></li>
        <li><a href="#">登山鞋</a></li>
        <li><a href="#">皮带</a></li>
        <li><a href="#">围巾</a></li>
        <li><a href="#">皮衣</a></li>
        <li><a href="#">男毛衣</a></li>
        <li><a href="#">男棉服</a></li>
        <li><a href="#">男靴</a></li>
    </ul>
</div>
</body>
</html>
<script src="lib/jquery-3.6.1.js"></script>
<script>

</script>

需求1：给左边的li标签们设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏

需求2：给右边的li标签们设置鼠标移入事件，让中间索引对应的li显示，其他的li隐藏

需求1：

$(function () {
    $('#left>li').mouseenter(function () {
        //获取当前鼠标移入的这个li标签的索引
        var idx = $(this).index();//索引：表示的是这个元素在它兄弟元素间的排行
        // console.log(idx);
        $('#center>li').eq(idx).show().siblings('li').hide();
    });
});

需求2：

$(function () {
    $('#right>li').mouseenter(function () {
        let idx = $(this).index();
        idx += 9;//9不要写死，9是左边li标签的个数
        idx += $('#left>li').length;//
        // console.log(dix);
        $('#center>li').eq(idx).show().siblings('li').hide();
    });
});

思考题：为什么是给li标签设置鼠标移入事件，而不是给a标签设置鼠标移入事件

因为给a标签设置的话，不能拿到正确的索引

$(function () {
    $('#left a').mouseenter(function () {
        let idx = $(this).index();
        console.log(idx);
    });
});

yezishuibuxing
关注
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
11-24
最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件—-Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到...
快速学习jQuery插件 Cookie插件使用方法
11-23
Cookie是网站设计者放置在客户端的小文本文件。Cookie能为用户提供很多的使得，例如购物网站存储用户曾经浏览过的产品列表，或者门户网站记住用户...1.引入jquery.cookie.js [removed][removed] [removed]</scrip
【JS】如何解决Cannot set properties of undefined
qq_41536505的博客
03-16 1万+
类型错误：无法设置未定义的属性。
vue3中使用 v-viewer 插件报错未定义的属性: Cannot set properties of undefined (setting ‘$viewer），和基本使用。
最爱喝怡宝的博客
10-08 4070
在网上搜了很久也没解决这个问题，在vue2中是不会报错的，后面查看官方文档和百度了几个小时以后，终于解决了，（我个人解决了，版本原因）。因为是 vue3，所以不能直接使用 Vue.use。1.先在main.js 引入。接着安装 viewerjs。
TypeError: Cannot set properties of undefined 解决方案
最新发布
yodoyskts的博客
08-06 554
组件里写了script标签，忘记写export default{}了，把这个加上重新运行一遍就可以解决啦。希望大家引以为戒，这种错误还是不要犯的好哈哈。
【vue报错：Cannot set properties of undefined (setting ‘xxx‘)】
热门推荐
weixin_44665318的博客
08-24 7万+
vue报错：Cannot set properties of undefined (setting 'xxx')
TypeError: Cannot set properties of undefined (setting ‘xx‘)
cozy666的博客
12-08 5954
在调用接口访问后端数据时，前端渲染显示空白，并报此错。例如，我在调用高德地图，输入经纬度信息，希望得到地址名称，我将返回给我的地址赋值给data中的realAddress，代码写为this.realAddress = address，此时就会报错。方案一：回调函数使用箭头函数来使用。普通函数的this默认指向window，箭头函数this与。this指向的对象发生了变化（现在this代表axios对象），需要在函数前将this指向的对象提前保存一下。中的this指向同一个地方，继承了他的父级。
解决Cannot set properties of undefined (setting ‘status‘)
weixin_52169403的博客
03-24 4227
解决Cannot set properties of undefined (setting 'status')
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料.zip
08-04
jQuery快速开发资料jQuery案例 代码 素材 笔记 作业资料，学习资料 01-getElementById获取元素.html 02-getElementsByTagName获取某些元素.html 03-H5新增获取元素方式(1).html 04-获取特殊元素.html 05-事件三要素....
JQuery 快速学习
07-14
jQuery是一个了不起的javascript库，它可以是我们用很少的几句代码就可以创建出漂亮的页面效果。从网站 的方面说，这使得javascript更加有趣。 如果你这样想：“孩子，我需要另外一个javascript库，就好比我I need ...
jQuery学习指南
03-06
综上所述，jQuery是前端开发的强大助手，无论你是初学者还是经验丰富的开发者，深入掌握jQuery API都将极大地提升你的工作效率。通过提供的“jQuery API中英文对照手册”，你可以系统地学习并应用这些知识点，从而在...
JavaScript | 如何解决 Cannot set property of Undefined
分享技术类相关知识点、技巧，和大家一起成长。
06-12 6万+
如何解决 Cannot set property of Undefined
vue -- Cannot set property 'render' of undefined解决方法
积少成多
11-15 3万+
欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言 在用vue-cli3做组件测试时，出现个问题，记录一下 报错如下 Cannot set property ‘render’ of undefined 解决方案 后来发现是因为 组件里写了script标签，没写 export default {} 加上这句话之后就好使了 我的个人博客地址：http://www.xiaol...
VUE项目中遇到的一些问题(壹)
choupixiaolin的博客
08-16 477
vue错误：Cannot set property 'render' of undefined at normalizeComponent... vue文件写了script标签对，却没写 export default {} 这句语句... vue Router中导航守卫完整的导航解析流程 导航被触发。 在失活的组件里调用beforeRouteLeave守卫。 调用全局的beforeEach守卫。 在重用的组件里调用beforeRouteUpdate守卫 (2.2+)。 ...
使用ueditor报错：Cannot set property 'innerHTML' of undefined
w的博客
04-19 1514
在使用ueditor进行赋值时报错，Cannot set property ‘innerHTML’ of undefined 这里引用网上解决办法进行记录。 解决方法移步这位博主
@Vue/Cli 3 关于 render 空的处理
dbghum0371的博客
11-13 169
问题场景 vue-cli 3 在打包部署时候会出现 dist folder not working "Uncaught TypeError: Cannot set property 'render' of undefined 的报错。 问题是这个不会在 dev 时候出现，在搜索结果后发现 issues#2430 里面有人给出问题所在，故此整理给遇到相同问题的小伙伴。 解决方案 通查你现有...
【javascript】Cannot set properties of undefined解决办法
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
01-19 6万+
问题代码 let msgList:any; errors?.map((error: { field: React.ReactText; message: any }) => { msgList[error.field] = error?.message || ""; }); console.log(msgList); 报错信息: TypeError Cannot set properties of undefined (setting 'user') 问题原因 msgList这
TypeError: Cannot set properties of undefined (setting ‘name‘)
flhhly的博客
10-12 3万+
使用ANT DESIGN VUE组件库中的table时，使用文档中的行点击方法，获取到点击行的信息，并且赋值给其他字段报错TypeError: Cannot set properties of undefined (setting 'name') <a-table :customRow="customRow" :columns="columns" :data-source="data"
jquery datatable出现Uncaught TypeError: Cannot set property ‘nTf‘ of undefined错误
sxj的专栏
03-23 1141
如下图所示： 这是由于在table中使用了<tfoot>标签，在该标签中定义了<tr><td>，比如在<thead><tr>中定义了6个<th>，而在<tfoot><tr><td>中有一个属性colspan写成了8个就会出现这样的问题，如： ...
jQuery快速入门与基础实例解析
"jQuery快速入门实例，包括jQuery的基本使用、选择器、链式操作、自定义函数等核心概念。" 在JavaScript的世界里，jQuery是一个非常流行的库，它简化了许多DOM操作和事件处理。本教程旨在帮助初学者快速入门jQuery...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值