jQuery

jQuery基础

概述

• 背景

  • JavaScript 原生dom的不便之处
    • api单词过多
    • 代码繁琐
    • 容易写错。
    • 动画需要手写。

• 概念

  • jQuery是一个第三方的JavaScript的函数库。jQuery本质是一个js文件。里面包含了大量写好的函数，可以直接使用。
  • 在线文档https://jquery.cuishifeng.cn/

• 作用

  • 减少DOM操作代码

• 版本

  • 第一版是2006年出来的。国内流行时是在09年后，13年巅峰。到了16年之后就走下坡路了。有更好的框架来处理dom(vue react)
  • 以前用的 比较多的 是1.11.3。因为是支持ie8的最高版本。jQuery从2.0开始就不再支持ie8.目前用的最多的是3.5.1. 国外用的4.x。

• 引入jQuery

  • 下载jQuery的文件
  • 通过<script src>引入进去就可以用

jQuery&原生DOM

• 使用了jQuery之后，无法兼容原生的dom api。即用jQuery获取的标签只能用jQuery的api来进行操作
• 需要使用jQuery的语法来完成所有的dom操作

对象转换

• dom标签转为jQuery

  var $str=$(原生 dom 标签变量名);
  

• jQuery标签转为dom原生标签

  var 标签变量名 =  $jQuery标签变量名.get(下标);
  

jQuery基本DOM操作

获取标签

• $('css选择器')；

//例子1：获取id为box的标签
var $box = $('#box');
//例子2：获取所有的 class为item的标签
$('.item');
//例子3：获取id为box下的所有p标签
$('#box p');
//例子4：获取id为box下的第一个子标签
$('#box :first-child');

获取子、父、兄弟标签

获取父标签

• parent() 获取某jQuery标签的直接父标签

• parents([val]) 根据css选择器获取某jQuery标签的祖先标签

  jQuery标签变量名.parent();
  jQuery标签变量名.parents("css选择器");
  

  若不给parents不给参数，会获得其所有的祖先标签

获取子标签

• children():获取所有的直接子标签

  find():通过css选择器获取指定的后代标签

  jQuery标签变量名.children();
  jQuery标签变量名.find("css选择器");
  

获取兄弟标签

• prev() 获取上一个兄弟标签

• next()获取下一个兄弟标签

• siblings() 通过css选择器获取指定的 兄弟标签,如果不带参数，获取的是所有的兄弟标签

jQuery标签变量名.prev();
jQuery标签变量名.next();
jQuery标签变量名.siblings("css选择器");

修改标签内容和属性

内容

针对双标签

• html() —-> innerHTML
• text()——> innerText

针对表单标签

• val()

属性

• attr() 添加或修改某个标签属性
• removeAttr()：删除某个标签属性

//1. 获取属性
jQuery变量名.attr("属性名");
//2.设置属性
jQuery变量名.attr("属性名","属性值");
//3. 删除属性
jQuery变量名.removeAttr("属性名");

添加标签

• append:在父标签中作为最后一个子标签新增在页面上

  //1. 创建标签
  var $newTag = $("标签的代码");
  //2. 加入并作为最后一个子标签加到页面上的某个已存在标签
  $父标签变量名.append(新的子标签);
  

• before:在兄弟标签之前插入一个新标签

  //1. 创建标签
  var $newTag = $("标签的代码");
  //2.找到其兄弟标签，调用before即可
  $兄弟标签.before($newTag);
  

删除标签

• remove

  $待删除标签.remove();
  

css的获取&修改

• css()

  //1.获取css属性值
  $标签变量名.css('css属性名');
  //2. 设置css属性值
  //单个属性
  $标签变量名.css('css属性名',"css属性值");
  //多个属性
  $标签变量名.css({
      "css属性名1":"css属性值1",
      "css属性名2":"css属性值2",
      "css属性名3":"css属性值3"
  });
  

jQuery 遍历

• eq():通过下标获取指定的jQuery标签
• first():指的是获取的jQuery标签的第一个。等同于jQuery标签变量名.eq(0)
• last():指的是获取的jQuery标签的最后一个。等同于jQuery标签变量名.eq(jQuery标签变量名.length-1)
• each():jQuery专属的遍历方法，用于替代传统的for循环遍历

1. 利用for进行jQuery遍历
for(var i=0;i<$jquery变量名.length;i++){
    var $item =$jquery变量名.eq(i);  //$item就是当前遍历的标签
}
2. 用each完成遍历
$jquery变量名.each(function(index,value){
//   每次都会把当前遍历的数据作为实际参数放入该函数并执行
 //   value:遍历的标签，注意是原生的dom元素
  //  index:该遍历数据的下标
});
eq: 获取所有div中的第二个
$('div').eq(1);

jQuery 事件

• on

  $("body").on('事件名','设置事件的标签css选择器',function(){
      //触发事件时要执行的代码
  });
  //例子：给id为box的div设置点击事件，输出helloworld
  $('body').on('click','#box',function(){
      console.log('hello world');
  });
  

jQuery 动画

• 提供了多个api来使用常见的动画以及自定义动画

自带动画

• 淡入淡出
  • fadeIn()
  • fadeOut()
• 下拉上滑
  • slideDown()
  • slideUp()

自定义动画

• animate()

 //轮播动画
function lunBO(index) {
        $('.banners').animate({
            'marginLeft': `-${100 * index}vw`
        }, 1000,function(){
            flag=true;
        });
    }

//动画完成后执行指定的代码
//id为box的标签在淡出后输出helloworld
$("#box").fadeOut(2000,function(){
    alert('hello world');
})

• jquery所有动画api都支持额外的一个参数，是一个函数。用于在动画结束后要执行的 代码。

jQuery 链式调用

• 概念：能够实现减少jQuery代码的一个技巧。

• 链式调用

  • 当对同一个标签设置属性、内容等，可以省 出重复获取标签的代码

    $('.banner_btn').children().eq(circle).attr('id', 'index_btn').siblings().removeAttr('id');