码上快乐

相关内容   简体   繁体

01-JQuery选择器+JQuery操作样式

本文转载自  查看原文  2021-11-12 23:11  92    06-jQuery
jQuery阶段: 将webAPI阶段进行一个封装
 
本质:
通过jQuery的方式实现网页中的各种效果
 
jQuery阶段学习核心:
操作网页 ---> 操作标签 ---> 获取标签 --> 设置样式 --> 注册事件
 

1. JQuery概述

1.1 概念

1. 什么是jQuery?
  • jQuery 是一个javaScript库 (jQuery本身就是一个js文件,文件中封装了大量的用来操作网页的方法)
  • 跨各种浏览器都能使用 (体现jQuery的兼容性)
  • 总结: jQuery就是一个具有很好兼容性并且能够实现各种效果的一个js文件

  • 举例说明

    例如: 点击按钮实现页面元素显示效果
    //原生DOM版本
    var btn = document.querySelector('button');
    btn.onclick = function() {
    var divs = document.querySelectorAll('div');
     for(var i = 0; i < divs.length; i++) {
      divs[i].style.display = 'block';
     }
    }
    //JQ版本
    $('button').click(function(){
     $('div').show();
    })

  • 概念详解

    • 什么叫 JavaScript 库

      ☞仓库：可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
      ​
      ☞JavaScript库：是一个封装好的特定的集合包大量的方法。从封装函数的角度理解库，就是在JavaScrip库中，封装了很多预先定义好的函数在里面
      ​
      ☞简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
      ​
      JQuery就是这样的一个js文件: 本质上就是对我们之前原生js代码封装后的一个js文件
      ​
      //备注: j 代表js Query 代表查询

  • jQuery优点

    • 轻量级。核心文件才几十kb，不会影响页面加载速度

    • 跨浏览器兼容。基本兼容了现在主流的浏览器

    • 链式编程、隐式迭代

    • 对事件、样式、动画支持，大大简化了DOM操作

    • 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等

    • 免费、开源

1.2 使用

  • 下载

    官网地址: https://jquery.com/
    版本地址: https://code.jquery.com/

  • 版本介绍

    1. jQuery目标最新的版本是 v3.6.0【该版本不兼容IE6，7，8但是官网主要维护更新的版本】
    2. jQuery v2版本 【不兼容IE6,7,8，不再维护】
    3. jQuery v1版本 【兼容IE6,7,8,不再维护】
    ​
    //Download the compressed, production jQuery 3.6.0       用于生产环境压缩后的文件
    //Download the uncompressed, development jQuery 3.6.0   用于开发环境没有经过压缩
  • jQuery基本使用:
  1. 先下载jQuery文件
  2. 在网页中引入jQuery文件(压缩版本和开发版本二选一)
     注意:
     在网页的任何位置都可以引入,jQuery就是一个js文件
      最好将文件放在html结构的后面
           
            // 3. 只要页面中引入了JQuery文件,那么就可以使用jQuery中的方法
            // 注意: 引入了jQuery文件,可以不用提供的方法,使用webAPI中的方法也可以 

    2. 在HTML页面中引用JQ文件 
    例如:
    <head>
     <meta charset="UTF-8">
     <title>Document</title>
     <script type="text/javascript" src="jQuery.js"></script>
     //或者
     <script type="text/javascript" src="jQuery.min.js"></script>
    </head>
    3. 使用

1.4 入口函数

  • DOM中如果在HTML结构之前写JS代码,需要设置加载事件,获取HTML元素

    <script type="text/javascript">
     window.onload = function() {
      var div = document.querySelector('div');
      console.log(div);
     }
    </script>

  • JQ如果在HTML结构之前写js代码,需要设置加载事件(入口函数)

    $(function(){
     var div = document.querySelector('div');
     console.log(div);
    })
    ​
    //或者
    $(document).ready(function(){ 
        var div = document.querySelector('div');
     console.log(div);
    });
    ​
    备注:
    // 如果将JQ代码写到HTML结构后面,则可以设置入口函数也可以不用设置

  • JQ入口函数与js中的load事件区别

    ☞ js中的load事件是整个页面都加载完成后包括外部的资源文件都加载完毕后才执行
    ☞ jQuery中的入口函数是整个文档加载完成后就立即执行代码
    ​
    ☞ js中的load事件只能写一个,如果写多个会被覆盖掉
    ☞ Jquery中的入口函数可以写多个

1.4 $ 介绍

  • $ 就是JQuery的一个别名

    $(function(){}) 
    ​
    // 可以写成如下写法:
    ​
    jQuery(function(){
     var div = document.querySelector('div');
     console.log(div);
    })

  • $ 是JQ中的顶级对象

    ☞ 在原生js中,顶级对象是window
    ☞ 在Jq中,顶级对象是 $, 本质就是通过JQ的方式将 window 对象转化为JQ对象
    //例如:
    $(function(){
     console.dir($);
    })

1.5 DOM对象和JQ对象转化

  • JQ就是对JS的封装,可以通过原生的JS获取页面元素,那么也可以通过JQ获取页面元素

  • 体验通过JQ获取页面元素,并设置样式

    //通过JQ方式隐藏页面中的div标签
    var div = $('div');
    div.hide();

  • DOM对象

    通过 document 方式获取到的元素都叫DOM对象

  • JQ对象

    通过 $ 方式获取到的元素都叫 JQ对象
    ​
    //结论:
    //1 .JQ对象中的方法或者属性原生DOM对象是不能使用的,反过来原生DOM对象中的方法或者属性JQ对象也无法使用
    ​
    //例如:
    var div = $('div');
    div.style.display = 'none';

  • 将JQ对象转为DOM对象方式一:

    var div = $('div');
    console.log(div);
    ​
    //通过$获取到的div就是一个JQ对象,那么JQ对象本质上就是一个伪数组,这个数组中存储的就是DOM对象
    ​
    //第一种转化方式: JQ对象[索引]
    ​
    //代码演示:
    var div = $('div');
        div = div[0];
    div.style.display = 'none';

  • 将JQ对象转化为DOM对象方式二:

    //语法: JQ对象.get(索引)
    ​
    //例如:
    var div = $('div');
     div = div.get(0);
    div.style.display = 'none';

  • 将DOM对象转化为JQ对象

    // 语法: $(dom对象)
    // 例如:
    var div = document.querySelector('div');
     div = $(div);
    div.hide();

2. JQ获取页面元素API

1.1基础选择器

  • 语法

    $('选择器');
    注意: 选择器就是CSS选择器

  • ID选择器

    $('#id名')

  • 通配符选择器

    $('*');

  • 标签选择器

    $('标签名');

  • 并集选择器

    $('选择器, 选择器..');

  • 交集选择器

    $('标签名.class');

1.2层级选择器

  • 子代选择器

    $('选择器 > 选择器');

  • 后代选择器

    $('选择器 选择器');

1.4 结构选择器

  • :first

    $('选择器:first');   //获取第一个元素

  • :last

    $('选择器:last');  //获取最后一个元素

  • eq(index)

    $('选择器:eq(值)');    //获取第n个元素,从0开始,

  • odd

    $('选择器:odd');     //获取索引是奇数的元素

  • even

    $('选择器:even');    //获取索引是偶数的元素

1.5通过方法筛选

  • parent() 或者 parents(选择器)

    $('元素').parent();      //获取当前元素的直接父元素
    ​
    //例如:
    var p = $('span').parent();
    console.log(p);
    ​
    ​
    $('元素').parents([选择器]);    //获取所有的父元素或者指定父元素
    //例如:
    var p = $('span').parents();
    console.log(p);
    ​
    var p = $('span').parents('div');
    console.log(p);

  • children([选择器])

    $('元素').children([选择器]);    // 获取当前元素的直接子元素,子代选择效果一样

  • find(选择器)

    $('元素').find(选择器);    //获取当前元素下所有满足条件的子元素, 后代选择器
    例如:
    var res = $('div').find('span');
    console.log(res);

  • siblings(选择器)

    $('元素').siblings([选择器]);    //获取当前元素的所有同级兄弟元素或者指定兄弟元素
    ​
    //例如:
    var res = $('a').siblings();   //获取当前a标签所有兄弟元素
    console.log(res);
    ​
    ​
    var res = $('a').siblings('p');  //只获取当前元素的兄弟元素p
    console.log(res);

  • nextAll([选择器])

    $('元素').nextAll([选择器]);    // 获取当前元素后面所有同级兄弟元素或者指定兄弟元素
    ​
    //例如:
    var res = $('a').nextAll();   //获取当前a标签后面所有兄弟元素
    console.log(res);
    ​
    ​
    var res = $('a').nextAll('h4'); //获取当前a标签后面的h4兄弟元素
    console.log(res);

  • prevAll([选择器])

    $('元素').prevAll([选择器]);  //获取当前元素前面所有同级兄弟元素或者指定元素
    ​
    例如:
    var res = $('a').prevAll();
    console.log(res);

  • eq(值)

    $('元素').eq(值);    //获取第几个元素, 从0开始
    ​
    例如:
    var res = $('span').eq(1);
    console.log(res);

3. JQ方式元素注册事件

1.1 直接注册事件

语法:
JQ对象.事件名称(function(){
     处理程序
})
​
例如:
<input type="button" value="按钮">
$('input').click(function(){
 alert(123);
})
​
//补充事件名称:
点击事件: click
鼠标进入事件: mouseenter
鼠标离开事件: mouseleave

1.2隐式迭代

<input type="button" value="btn1">
<input type="button" value="btn2">
<input type="button" value="btn3">
​
//注册事件
var btns = $('input');
btns.click(function(){
 console.log(this.value);
})
​
//补充: 获取每一个元素的索引位置 JQ对象.index();
​
//分析: 获取页面中的所有按钮后,给按钮注册事件,JQ不需要我们手动遍历注册,自己内部就可以遍历注册事件
​
//隐式迭代: JQ内部自动遍历DOM元素的过程

4. JQ方式操作元素样式

1.1 通过.css方式操作样式

  • .css设置单个样式

    语法:
    $('元素').css('属性', 值);
    ​
    //例如:
    $('div').css('background-color','red');
    ​
    //注意:
    1. 这种写法只能给元素设置一个样式
    2. 这种写法本质上就是通过行内样式给标签设置样式
    ​
    //思考: 如果页面中有多个元素,通过这种方式能否给所有的标签都设置样式?
    <div></div>
    <div></div>
    $('div').css('background-color','red');
    ​
    //代码验证: 是可以的, 因为这里面有隐式迭代

  • 课堂案例-导航隐藏显示

    <div class="nav">
      <div class="w">
       <ul class="ul1">
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">关于我们</a></li>
        <li>
         <a href="javascript:;">联系我们</a>
         <ul class="u2">
          <li><a href="javascript:;">邮件联系</a></li>
          <li><a href="javascript:;">电话联系</a></li>
          <li><a href="javascript:;">微信联系</a></li>
         </ul>
        </li>
       </ul>
      </div>
    </div>
    ​
    //鼠标进入:
    $('.ul1 > li:last').mouseenter(function(){
        //备注: 这里必须写$(this). 因为 find是JQ对象中的方法,必须将DOM对象转化为JQ对象
     var ul = $(this).find('.u2');
     ul.css('display','block');
    });
    //鼠标离开:
    $('.ul1 > li:last').mouseleave(function(){
     $('.u2').css('display', 'none');
    });

  • 导航隐藏显示案例-链式编程写法

    $('.ul1 > li:last').mouseenter(function(){
     var ul = $(this).find('.u2');
     ul.css('display','block');
    }).mouseleave(function(){
     $('.u2').css('display', 'none');
    })
    ​
    //总结:
    1. 给元注册事件,可以在当前元素后面连着继续写
    2. 链式编程核心,给具体的对象设置,如果不是一个对象,则不能使用链式编程写法

  • .css设置多个样式

    语法:
    $('元素').css({
       '属性': '值',
       '属性': '值',
        ...
    })
        
    例如:
    $('div').css({
     'width': '200px',
     'height': 200,
     'background-color': 'red'
    })
    //注意:
    1. 如果设置的值是数字,可以不用带有引号
    2. 如果属性是按照CSS的属性方式设置,需要带有引号 . 例如 'background-color' 或者 backgroundColor

  • 课堂案例淘宝

    1. 获取元素索引位置

      //DOM版本
      var divs = document.querySelectorAll('div');
      for(var i = 0; i < divs.length; i++) {
       divs[i].index = i;
       divs[i].onclick = function() {
        alert(this.index);
       }
      }
      //JQ版本 通过 index()方法获取
      $('div').click(function(){
       console.log($(this).index());
      })

    2. 排他思想实现

      //DOM实现排他思想, 点击div设置文字颜色
      var divs = document.querySelectorAll('div');
      for(var i = 0; i < divs.length; i++) {
       divs[i].onclick = function() {
        for(var j = 0; j < divs.length; j++) {
         divs[j].style.color = '#000';
        }
        this.style.color = 'red';
       }
      }
      //JQ实现排他思想
      $('div').click(function(){
       $(this).css('color', 'red').siblings().css('color','#000');
      })

    3. 实现淘宝案例

      //每一个item注册一个鼠标进入事件
      $('.item').mouseenter(function(){
       //当前元素设置背景图片
       $(this).css({
        'background-image': 'url(imgs/abg.gif)',
        'color' : '#fff'
       })
       //当前元素对应的图片显示
       var index = $(this).index();
           
           //根据当前index显示对应的内容
       $('img').eq(index).css({
        'display': 'block'
       }).siblings().css({
        'display' : 'none'
       })
          
      }).mouseleave(function(){
       $(this).css({
        'background-image' : 'linear-gradient(to bottom, #fff, pink)',
        'color' : '#000'
       })
      })

    4. 改进版淘宝案例写法

      • hover方法介绍

        语法:
        hover(function(){}, function(){});
        ​
        //代码演示:
        $('div').hover(function(){
         console.log('鼠标进入');
        }, function(){
         console.log('鼠标离开');
        })
        ​
        介绍:
        1. 第一个参数回调函数,表示鼠标进入时候触发的事件 (mouseenter)
        2. 第二个参数回调函数,表示鼠标离开时候触发的事件 (mouseleave);

      • 改版后淘宝案例

        $('.item').hover(function(){
         $(this).css({
          'background-image': 'url(imgs/abg.gif)',
          'color' : '#fff'
         })
         //当前元素对应的图片显示
         var index = $(this).index();
         //根据当前index显示对应的内容
         $('img').eq(index).css({
          'display': 'block'
         }).siblings().css({
          'display' : 'none'
         })
        },function(){
         $(this).css({
          'background-image' : 'linear-gradient(to bottom, #fff, pink)',
          'color' : '#000'
         })
        })

1.2 通过添加类方式操作样式

  • addClass('类名')

    语法:
    $('元素').addClass('类名');
    ​
    //注意:
    1. addClass中设置的是类名,不是类选择器
    ​
    2. 通过addClass如果需要设置多个类名可以调用多次,如下代码:
    $('input').click(function(){
     $('div').addClass('box');
     $('div').addClass('br');
    })
    ​
    3. 设置多个类名还可以如下写法
    $('input').click(function(){
     $('div').addClass('box br');
    })

  • removeCLass('类名')

    语法:
    $('元素').removeClass('类名');
    ​
    //例如:
    $('input').click(function(){
     $('div').removeClass('box')
    })
    ​
    $('input').click(function(){
     $('div').removeClass('box br');
    })
    ​
    $('input').click(function(){
     $('div').removeClass('box');
     $('div').removeClass('br');
    })
    ​
    $('input').click(function(){
     $('div').removeClass('box').removeClass('br');
    })

  • toggleClass('类名')

    语法:
    $('元素').toggleClass('类名');
    ​
    //例如:
    $('input').click(function(){
     $('div').toggleClass('br');
    })
    ​
    $('input').click(function(){
     $('div').toggleClass('br box');
    })

  • 课堂案例-tab栏切换

    $('li').mouseenter(function(e){
     $(this).addClass('active').siblings().removeClass('active');
     let index = $(this).index();
     $('.item').eq(index).show().siblings().hide();
    }).mouseleave(function(){
     $('.item').hide();
     $(this).removeClass('active');
    });

     

  •  

 

 

 

 

 


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 Jquery选择器与样式操作 01-jQuery的介绍 JQuery（选择器、事件、DOM操作） jquery的选择器 jquery的基本选择器 jQuery 选择器 jQuery的选择器和属性操作 jQuery 选择器和dom操作 jQuery之选择器 jquery 选择器 或 且
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM