jQuery第1天

时间  2019-11-13
标签 jquery 1天 栏目 JQuery 繁體版
原文   原文链接

概念

jQuery 是一个 JavaScript 库，其实就是经过 原生JS 封装了的不少的 方法 和 属性。javascript

 

JS 库特色

JavaScript 库：由第三方开发者基于原生 JS 基础上，封装了不少更方便的方法，目的为了快速开发。css

通常状况下 JavaScript 库，都是调用第三方封装好的方法较多，( ) 括号 调用方法会比较多。html

jQuery相关资料

jQuery 特色

官方广告语：写的少，作的多 。write less，do more浏览器

其余特色：兼容好，隐式遍历，链式编程 ...less

 

选择器选中元素对比

原生 JS 选中元素：

# 低版本浏览器，IE8 如下浏览器不支持
document.querySelector("选择器")

jQuery 选中元素：

# 兼容所有浏览器
$("选择器")

jQuery 和 Zepto

Zepto 实际上是参考 jQuery，他们两者使用起来几乎同样。

jQuery 支持的浏览器更多，1.x.x 版本可兼容全部浏览器，而 Zepto 主要支持移动端。

 

jQuery 版本区别

目标

了解 jQuery 版本区别

jQuery 版本

 

1.x.x（推荐使用）
 兼容性最好，甚至能兼容到IE6，几乎能兼容全部 PC 端浏览器
​
2.x.x
 只兼容 IE9+ 和主流浏览器，低版本浏览器不兼容
​
3.x.x
 3.x是2.x版本的升级，2.x再也不维护了，也是只兼容 IE9+
​
带min的表明压缩版：
     发布到线上的时候用min压缩版，加载和读取更快。
     开发的时候带不带min均可以。

小结

咱们选择哪一个jQuery版本进行开发？

1. 公司原本用哪一个jQuery版本，就直接用那个版本。
2. 若是没有，建议用 jquery-1.12.4.min.js 版。

在引入 jQuery 的页面中，jQuery 会占用两个名字。

jQuery === $     // true,彻底相等

 

 

load 事件 和 jQuery 入口函数

目标

区别 load 事件 和 jQuery 入口函数

 

两者对比

共同点：

两个事件处理函数内的代码都会自动执行。

执行时机不一样：

load 事件：当浏览器资源加载完毕后执行，图片，外链文件。
​
jQuery 入口函数：当 页面 DOM 加载完毕后执行。
# jQuery 入口函数 比 load 事件更早执行。

入口函数写法

写法1

$(function(){
    
})

写法2

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

写法3 了解

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

 

jQuery常见错误

 引入 jQuery 文件失败，因此报错信息为 $ 符号未定义。

 

隐式遍历 / 隐式迭代

目标

了解 jQuery 隐式迭代特征

概述

jQuery 不少方法内部都会有遍历，直接调用便可。

$()   循环选中全部符合规则的选择器
​
.on()   把全部的JQ对象遍历添加事件
​
.css()   jQuery内部也有遍历

参考代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="美女1">
    <input type="button" value="美女2">
    <input type="button" value="美女3">
    <input type="button" value="美女4">
    <script src="./lib/jquery-1.12.4.js"></script>
    <script>
        // ---------------- 原生的写法 ----------------
        // // 1. 查找元素
        // var inputs = document.querySelectorAll("input");
        // // 2. 循环遍历，才能够给每一个 input 添加事件
        // inputs.forEach(function (item, index) {
        //     item.addEventListener("click", function () {
        //         // 排他第二步，确立本身
        //         this.style.backgroundColor = "pink";
        //     })
        // });

        // ---------------- jQuery 的写法 ----------------
            // 1.查找元素
            var $inputs = $('input');
            // 2.绑定事件
            $inputs.on('click',function(){
                // 3.排他思想，排除其余元素，确立本身
                $(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
            })
    </script>
</body>

</html>

 

jQuery 链式编程

目标

使用 jQuery 链式编程化简代码

 

概述

jQuery 不少方法都容许链式编程。

JQ对象在调用完某个 方法 后，能够继续调用其余方法。

像链条同样连续书写，连续调用。

 

参考代码

$("div").css("background", "red").css("width", "300px").css("height", "300px");

 

 

 

jQuery 修改 CSS 行内样式

目标

学习 jQuery 修改行内样式方法

核心方法

.css()

三种用法

用法1：修改单个样式

.css('属性', '值')

用法2：获取单个属性的值(不传值表明获取)

.css('属性')

用法3：修改多个样式(传入样式对象，同时修改多个)

.css({ 属性: 值 , 属性: 值 })

小结

JQ的CSS方法根据传参的不同，调用不一样的功能。

修改单个样式

.css("属性", "值")

修改多个样式

.css({
   属性1: "值1",
   属性2: "值2"
})

若是样式对象的值的单位是 px，能够直接写成数值型数据。

单个样式获取

.css("属性")

 

 

JQ 类名操做

目标

学会 jQuery 经常使用类名操做方法

方法名

功能 方法名 备注
添加类 addClass() 功能相似 classList.add()
移除类 removeClass() 功能相似 classList.remove()
切换类 toggleClass() 自带开关，添加或删除类的综合体
检测是否有类 hasClass() 检测是否有某个类名，布尔类型

 

 

鼠标移入移出事件

目标

学习 鼠标移入移出事件的其余绑定方式

 

on 写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="美女1">
    <input type="button" value="美女2">
    <input type="button" value="美女3">
    <input type="button" value="美女4">
    <script src="./lib/jquery-1.12.4.js"></script>
    <script>
        // ---------------- 原生的写法 ----------------
        // // 1. 查找元素
        // var inputs = document.querySelectorAll("input");
        // // 2. 循环遍历，才能够给每一个 input 添加事件
        // inputs.forEach(function (item, index) {
        //     item.addEventListener("click", function () {
        //         // 排他第二步，确立本身
        //         this.style.backgroundColor = "pink";
        //     })
        // });

        // ---------------- jQuery 的写法 ----------------
            // 1.查找元素
            var $inputs = $('input');
            // 2.绑定事件
            $inputs.on('mouseover',function(){
                // 3.排他思想，排除其余元素，确立本身
                $(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
            });
            $inputs.on('mouseout', function(){
                $inputs.css({
                    "backgroundColor" : "",
                });
            })
    </script>
</body>

</html>

 

事件函数写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="美女1">
    <input type="button" value="美女2">
    <input type="button" value="美女3">
    <input type="button" value="美女4">
    <script src="./lib/jquery-1.12.4.js"></script>
    <script>
        // ---------------- 原生的写法 ----------------
        // // 1. 查找元素
        // var inputs = document.querySelectorAll("input");
        // // 2. 循环遍历，才能够给每一个 input 添加事件
        // inputs.forEach(function (item, index) {
        //     item.addEventListener("click", function () {
        //         // 排他第二步，确立本身
        //         this.style.backgroundColor = "pink";
        //     })
        // });

        // ---------------- jQuery 的写法 ----------------
            // 1.查找元素
            var $inputs = $('input');
            // 2.绑定事件
            $inputs.mouseover(function(){
                // 3.排他思想，排除其余元素，确立本身
                $(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
            });
            $inputs.mouseout(function(){
                $inputs.css({
                    "backgroundColor" : "",
                });
            })
    </script>
</body>

</html>

 

hover 写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <input type="button" value="美女1">
    <input type="button" value="美女2">
    <input type="button" value="美女3">
    <input type="button" value="美女4">
    <script src="./lib/jquery-1.12.4.js"></script>
    <script>
        // ---------------- 原生的写法 ----------------
        // // 1. 查找元素
        // var inputs = document.querySelectorAll("input");
        // // 2. 循环遍历，才能够给每一个 input 添加事件
        // inputs.forEach(function (item, index) {
        //     item.addEventListener("click", function () {
        //         // 排他第二步，确立本身
        //         this.style.backgroundColor = "pink";
        //     })
        // });

        // ---------------- jQuery 的写法 ----------------
            // 1.查找元素
            var $inputs = $('input');
            // 2.绑定事件
            $inputs.hover(function(){
　　　　// 是 jQuery 封装了鼠标移入移出的综合方法，容许传入两个事件处理函数，
　　　　// 第一个表明鼠标移入触发，第二个是鼠标移出触发 
                $(this).css("backgroundColor", "pink").siblings().css("backgroundColor", "");
            },function(){
                $inputs.css("backgroundColor", "");
            })
    </script>
</body>

</html>

 

jQuery 选择器

目标

学习 jQuery 选择器

 

选择器三大模块

  1. CSS选择器 - 彻底支持 ，如 $("div"), $("#id") , $(".class")

  2. JQ 额外还加了一些 基本筛选器

选择器 选择器功能 备注
:eq(索引值) 经过索引值选中第几个 如 $("li:eq(0)")
:even 索引值偶数  
:odd 索引值奇数  
:first 第一个 至关于 :eq(0)
:last 最后一个 至关于 :eq(-1)

  1. 选择器的方法 - 父子兄

经过方法形式调用，方法记得带括号。

功能 方法名 备注
父 .parent() 父级就只有一个
子 .children() 可选传入参数，筛选孩子
兄 .siblings() 可选传入参数，筛选兄弟
     
祖先 .parents("选择器") 必传，祖先必定要传入选择器
后代 .find("选择器") 必传，查找后代，也须要传入
     
选中第几个 .eq(索引值) 功能和 :eq() 同样

 

小结

jQuery 选择器特色？

功能强大，灵活，兼容好。

 

 

案例练习

 1.点击按钮变换盒子颜色

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    input {
      margin: 20px;
    }

    div {
      background-color: pink;
      width: 100px;
      height: 100px;
      transition: all .4s;
      margin: 20px;
    }
    
    .current {
      background-color: lightgreen;
      width: 200px;
      height: 200px;
    }
  
    
  </style>
  <!-- 1. 引入 jQuery 核心库 -->
  <script src="./lib/jquery-1.12.4.js"></script>
  <!-- 2. 新建 script 写业务逻辑 -->
  <script>
      // 3. jQuery 入口函数，业务代码写到入口函数内部
      $(function () {
          // 查找元素
          var $input = $('input');
          var $boxs = $('div');
          // 开关思想
          var flag = true
          // 绑定事件
          $input.on('click', function(){
            // 点击后给div们增长current类
            if(flag){
              $boxs.addClass('current');
              flag = false;
            }else{
              $boxs.removeClass('current');
              flag = true;
            }
          })
      });
  </script>
</head>
<body>
  <input type="button" value="点我修改/还原盒子样式">
  <div></div>
  <div></div>
</body>
</html>

 

 2.点击按钮变换盒子颜色经过toggle实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    input {
      margin: 20px;
    }

    div {
      background-color: pink;
      width: 100px;
      height: 100px;
      transition: all .4s;
      margin: 20px;
    }
    
    .current {
      background-color: lightgreen;
      width: 200px;
      height: 200px;
    }
  
    
  </style>
  <!-- 1. 引入 jQuery 核心库 -->
  <script src="./lib/jquery-1.12.4.js"></script>
  <!-- 2. 新建 script 写业务逻辑 -->
  <script>
      // 3. jQuery 入口函数，业务代码写到入口函数内部
      $(function () {
          // 查找元素
          var $input = $('input');
          var $boxs = $('div');
          // 开关思想
          $input.on('click', function(){
            // toggleClass()方法在内部就判断$boxs是否有current这个类，若是有就删除,没有就添加
            $boxs.toggleClass('current');
          })
      });
  </script>
</head>
<body>
  <input type="button" value="点我修改/还原盒子样式">
  <div></div>
  <div></div>
</body>
</html>

 

 

3.唱大戏jQuery版本

<!DOCTYPE html>
<html>

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

    ul {
      list-style: none;
    }

    body {
      background: #000;
    }

    .container {
      margin: 100px auto 0;
      width: 630px;
      height: 394px;
      padding: 10px 0 0 10px;
      background: #000;
      overflow: hidden;
      border: 1px solid #fff;
    }

    .container li {
      float: left;
      margin: 0 10px 10px 0;
      transition: all .4s;
      
    }

    .container li img {
      display: block;
      border: 0;
    }

    .tuise {
            opacity: 0.2;
            transform: rotate(30deg);
        }
  </style>
  <!-- <script>
        // load 浏览器加载事件
        window.addEventListener("load", function () {
            // 1. 查找元素
            var lis = document.querySelectorAll("li");
            // 2. 遍历伪数组
            lis.forEach(function (item) {
                // 2.1 给伪数组的每一个li添加鼠标移入事件
                item.addEventListener("mouseover", function () {
                    // 1. 排除全部
                    lis.forEach(function (item) {
                        item.style.opacity = "0.2";
                    });
                    // 2. 确立当前
                    this.style.opacity = "1";
                });
                // 2.2  给伪数组的每一个li添加鼠标移出事件
                item.addEventListener("mouseout", function () {
                    // 遍历伪数组
                    lis.forEach(function (item) {
                        // 把遍历的每一个 li 设置成不透明
                        item.style.opacity = "1";
                    });
                });
            });

        });
    </script> -->

  <!-- 1. 引入 jQuery 核心库 -->
  <script src="./lib/jquery-1.12.4.js"></script>
  <!-- 2. 新建 script 写业务逻辑 -->
  <script>
    // 3. jQuery 入口函数，业务代码写到入口函数内部
    $(function () {
      // 查找元素
      var $lis = $('li');
      $lis.on('mouseover', function(){
        // 排除全部，确立当前
        $(this).removeClass('tuise').siblings().addClass('tuise');
      });

      $lis.on('mouseout', function(){
        // 排除全部，确立当前
        $lis.removeClass('tuise');
      })
    });
  </script>
</head>

<body>
  <div class="wrap">
    <ul class="container">
      <li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
      <li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
      <li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
      <li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
      <li><a href="#"><img src="img/05.jpg" alt="" /></a></li>
      <li><a href="#"><img src="img/06.jpg" alt="" /></a></li>
    </ul>
  </div>
</body>

</html>

效果

 

4.jQ实现下拉菜单

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <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-color: pink;
        }

        .wrap li {
            background-color: hotpink;
        }

        .wrap>ul>li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
  </style>
  <!-- 1. 引入 jQuery 核心库 -->
  <script src="./lib/jquery-1.12.4.js"></script>
  <!-- 2. 新建 script 写业务逻辑 -->
  <script>
      // 3. jQuery 入口函数，业务代码写到入口函数内部
      $(function () {
          // 查找元素，子代选择器，只查找亲儿子
          var $lis = $('.nav > li');
          // 绑定事件，鼠标移上去就显示
          $lis.on('mouseover', function(){
            // 给当前元素的ul孩子标签设置样式
            $(this).children('ul').css("display", "block")；
          });
          $lis.on('mouseout', function(){
            // 鼠标移出就隐藏
            $lis.children('ul').css('display', 'none');
          })
      });
  </script>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li>
                <a href="javascript:;">一级菜单1</a>
                <ul class="ul">
                    <li><a href="javascript:;">二级菜单11</a></li>
                    <li><a href="javascript:;">二级菜单12</a></li>
                    <li><a href="javascript:;">二级菜单13</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">一级菜单2</a>
                <ul>
                    <li><a href="javascript:;">二级菜单21</a></li>
                    <li><a href="javascript:;">二级菜单22</a></li>
                    <li><a href="javascript:;">二级菜单23</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">一级菜单3</a>
                <ul>
                    <li><a href="javascript:;">二级菜单31</a></li>
                    <li><a href="javascript:;">二级菜单32</a></li>
                    <li><a href="javascript:;">二级菜单33</a></li>
                </ul>
            </li>
        </ul>
    </div>

</body>

</html>

效果

 

5.jQ实现下拉菜单hover方法

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <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-color: pink;
        }

        .wrap li {
            background-color: hotpink;
        }

        .wrap>ul>li {
            float: left;
            margin-right: 10px;
            position: relative;
        }

        .wrap a {
            display: block;
            height: 30px;
            width: 100px;
            text-decoration: none;
            color: #000;
            line-height: 30px;
            text-align: center;
        }

        .wrap li ul {
            position: absolute;
            top: 30px;
            display: none;
        }
  </style>
  <!-- 1. 引入 jQuery 核心库 -->
  <script src="./lib/jquery-1.12.4.js"></script>
  <!-- 2. 新建 script 写业务逻辑 -->
  <script>
      // 3. jQuery 入口函数，业务代码写到入口函数内部
      $(function () {
          // 查找元素，子代选择器，只查找亲儿子
          var $lis = $('.nav > li');
          // 绑定事件，hover方法内部封装了鼠标移入和鼠标移出事件
          $lis.hover(function(){
            // toggle方法内部判断若是子元素ul为隐藏状态就显示，不然就隐藏
            $(this).children('ul').toggle();
          })
      });
  </script>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li>
                <a href="javascript:;">一级菜单1</a>
                <ul class="ul">
                    <li><a href="javascript:;">二级菜单11</a></li>
                    <li><a href="javascript:;">二级菜单12</a></li>
                    <li><a href="javascript:;">二级菜单13</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">一级菜单2</a>
                <ul>
                    <li><a href="javascript:;">二级菜单21</a></li>
                    <li><a href="javascript:;">二级菜单22</a></li>
                    <li><a href="javascript:;">二级菜单23</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:;">一级菜单3</a>
                <ul>
                    <li><a href="javascript:;">二级菜单31</a></li>
                    <li><a href="javascript:;">二级菜单32</a></li>
                    <li><a href="javascript:;">二级菜单33</a></li>
                </ul>
            </li>
        </ul>
    </div>

</body>

</html>

 

6.jQ实现点击关闭广告

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father {
            width: 300px;
            height: 100px;
            background-color: pink;
            position: relative;
            margin: 20px;
        }

        .son {
            width: 30px;
            line-height: 30px;
            background-color: skyblue;
            text-align: center;
            position: absolute;
            right: -30px;
            top: 0;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 父盒子是广告分区， son 是关闭按钮 -->
    <div class="father">
        父级广告1
        <div class="son">
            x
        </div>
    </div>
    <div class="father">
        父级广告2
        <div class="son">
            x
        </div>
    </div>
    <div class="father">
        父级广告3
        <div class="son">
            x
        </div>
    </div>
    <div class="father">
        父级广告4
        <div class="son">
            x
        </div>
    </div>
</body>

</html>
<script>
    // // 需求：点击关闭按钮，关闭对应的父元素广告
    // 1. 查找元素
    // var sons = document.querySelectorAll(".son");
    // // 1. 循环遍历全部的 son 元素
    // for(var i=0; i<sons.length; i++){
    //     // 2. 循环内部给每一个 son 元素添加点击事件
    //     sons[i].onclick = function(){
    //         // 3. this 表明当前点击的这个元素，经过 parentNode 查找到对应父级，关闭
    //         this.parentNode.style.display = "none";
    //     }
    // }
</script>

<!-- 1. 引入 jQuery 核心库 -->
<script src="./lib/jquery-1.12.4.js"></script>
<!-- 2. 新建 script 写业务逻辑 -->
<script>
    // 3. jQuery 入口函数，业务代码写到入口函数内部
    $(function () {
        // 查找全部类名为son的元素
        var $sons = $('.son');
        $sons.on('click', function(){
          // 找当前元素的父元素隐藏就完事了
          $(this).parent().hide();
        })
    });
</script>

 效果

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程