jQuery 基础


jQuery

引入 jQuery 的原因:

  • window.onload 有覆盖问题,只能写一个事件
  • 代码容错性差
  • 浏览器兼容性问题
  • 代码量多
  • 代码杂乱
  • 动画实现繁琐

jQuery 是 JS 的一个库,封装了一些常用的功能,方便调用,提高效率。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>EthanLoo's</title>
    <link rel="stylesheet" href="./test.css" />
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: #891;
        display: none;
      }
      body {
        height: 1000px;
        width: 2000px;
      }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  </head>
  <body>
    <div class="box"></div>
    <button>click me</button>
    <script src="test.js"></script>
  </body>
</html>
$(document).ready(function () {
  var btn = $("button"); // 根据标签获取按钮
  var div = $("div"); // 根据标签获取矩形
  btn.click(function () {
    div.show(300); // 300ms 渐变出现
    div.html("233"); // 标签内文本
  });
});

jQuery 特点

  • 链式编程,可以把 div.show(300)div.html('233') 连写成 div.show(300).html('233')
  • 隐式迭代,在方法的内部为匹配到的所有元素进行循环遍历。

jQuery 使用步骤

  1. 引包:<script src='jqery-1.*.min.js></script>'
  2. 入口函数:$(document).ready(function(){})
  3. 事件处理

开发版本一般用 1.10 以上

入口函数

原生 JS 的入口函数为 window.onload = function() {},作用是等页面上的所有内容加载完毕才执行函数。

jQuery 的入口函数写法:

// 1. 文档加载完毕,图片不加载的时候就会执行
$(doument).ready(function () {
   console.log(233); 
});

// 2. 文档加载完毕,图片不加载的时候会执行
$(function(){
	console.log(233);
});

// 3. 文档加载完毕,图片加载完毕的时候执行
$(window).ready(function() {
	console.log(233);
});

jQuery 的入口函数和原生的区别:

  • 原生的入口函数只能出现一次,jQuery 的入口函数可以出现任意多次
  • JS 的入口函数只能在页面所有文件资源加载完成后执行,jQuery 的入口函数是在文档,即 DOM 树加载完成。

$ 符号

jQuery 中使用的两个变量 $jQuery,两者等价,都相当于一个函数。

$(document).ready(function(){}); // 调用入口函数
$(function(){}); // 调用入口函数
$('#ethalu'); // 获取id为ethanlu的元素
$('div'); // 获取所有的div标签

假设当前 DOM 树如下

<div></div>
<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>

原生 JS 获取元素结点(数组)

var box = document.getElementById('box'); // 通过id获取单个元素
var boxArr = document.getElementsByClassName('box'); // 通过class获取数组
var divArr = document.getElementsByTagName('div'); // 通过标签获取数组

jQuery 获取元素结点数组

var box1 = $("#box"); // 通过id获取
var box2 = $(".box"); // 通过class获取
var box3 = $("div"); // 通过标签获取

二者转换

  1. JS 对象转 jQuery 对象:$(JS对象)

  2. jQuery 对象转 JS 对象

    jQuery对象[index]; // 1
    jQuery对象.get(index); // 2
    

jQuery 选择器

  1. 基本选择器

img

  1. 层级选择器

  1. 基本过滤选择器

  1. 属性选择器

  1. 筛选选择器

jQuery 动画

类似 PPT

显示动画

  1. $('div').show():直接显示
  2. $('div').show(2000):2000ms 渐变显示
  3. $('div').show('slow'):slow: 600ms, normal: 400ms, fast: 200ms
  4. $('div').show(2000, function(){}):动画执行完之后运行回调函数

隐藏动画

  1. $('div').hide()

  2. $('div').show(2000)

  3. $('div').show('fast')

  4. $('div').show(2000, function(){})

  5. $("div").toggle(speed, callback):显示和隐藏的切换

滑入和滑出

  1. $('div').slideDown(speed, callback):下滑显示
  2. $('div').slideUp(speed, callback):上滑隐藏
  3. $('div').slideToggle(speed, callback):上滑和下滑切换

淡入和淡出

  1. $('div').fadeIn(speed, callback):淡入
  2. $('div').fadeOut(speed, callback):淡出
  3. $('div').fadeToggle(speed, callback):淡入和淡出的切换

自定义动画

$('div').animate({params}, speed, callback);
  • 参数1:执行动画的 CSS 属性

  • 参数2:动画时长

  • 参数3:回调函数

停止动画

$('div').stop(true, false);
  • 参数1:true=> 后续动画不执行,false=> 后续动画执行
  • 参数2:true=> 立即执行完成当前动画,false=> 立即停止当前动画

不写参数默认为 false,实际开发中,直接用 stop() 比较多

jQuery 操作 DOM

样式操作

  1. $('div').css('background-color', 'red'):设置单个样式
  2. $('div').css({'width':100, 'height': 200}):设置多个样式(json格式)
  3. $('div').css('width'):获取样式

类操作

  1. $('div').addClass('nav'):为指定元素添加 className

  2. $('div').removeClass('nav'):为指定元素删除 className,不指定参数直接移除所有类

  3. $('div').hasClass('nav'):判断元素是否包含类

  4. $('div').toggleClass('nav'):有类就移除,无类就添加