001-jQuery

jQuery

简介 - 从这里开始

(一) 概述

JavaScript + Query(查询) = jQuery ,jQuery是一个非常优秀的 JavaScript框架,在js的基础上做出了很多扩展操作,例如,事件处理动画,或者与Ajax交互,并且可以更加快速的查询使用页面上的一些控件,总之还是非常值得我们学习的

本质:就是封装了js原生代码的一些js文件

(二) 版本

基本版本介绍

版本 描述
1.x 兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增,最终版本:1.12.4
2.x 不兼容ie678,很少人使用,官方只做bug维护,功能不再新增,最终版本:2.2.4
3.x 不兼容ie678,只支持最新的浏览器。目前该版本是官方主要更新维护的版本。截至2019年4月11日,最新版本:3.4.1

选择什么版本呢?

首先呢,版本的选择不是固定的,我们需要根据我们的需求决定,关键在于我们需要项目兼容一个什么样的平台环境,通过上面的介绍可以看到,只有 1.x 版本是兼容所有浏览器的,但3.x却是持续更新中的较新版本,自然拥有许多新特性

所以总结一下:

PC端我们最好选择 jQuery 1.9版本(1.7以及以上要好一些),首先IE8的兼容还是有必要的,API版本已经在旧版本(1.7以下)有了很大的完善,选择器,函数都较旧版本趋于规范以及高效(如.on函数)

移动端我们当然选择新版本 也就是 Jquery3.x版本,应该3.41就是最后的3系小版本了

下载好对应版本后,有两个文件 jquery-x.x.x.jsjquery-x.x.x.min.js 其中第一个文件会大一些但是缩进清晰代码条理,适合程序员查看源码,但是我们真正导入的是 min文件,它没有任何缩进,但是文件体积却小很多,加载更快

(三) jQuery的好处——封装优化代码

既然 JQuery 是在 JavaScript的基础上进行封装,封装从最表面来看,简化操作是一定的,那么我们自已试着封装一下看一下与原来的js代码会有什么区别

1、定义三个div,分别设置其id以及内容,要求通控件过id获取其内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
</head>
<body>

<div id="d1">This is div1</div>
<div id="d2">This is div2</div>
<div id="d3">This is div3</div>
......
</body>

2、使用js实现

<script>
    var d1 = document.getElementById("d1");
    alert(d1.innerHTML);

    var d2 = document.getElementById("d2");
    alert(d2.innerHTML);

    var d3 = document.getElementById("d3");
    alert(d3.innerHTML);

    ......
</script>

2、自定义模拟封装实现

<script>

    function alertById(id) {
        var elementById = document.getElementById(id);
        alert(elementById.innerHTML);
    }

    alertById("d1");
    alertById("d2");
    alertById("d3");

    ......
</script>

这里很好理解,我们将一些重复的代码封装成方法,很好的优化了代码,毕竟在js中控制控件的方法名都很长

那么Jquery又是怎么封装的呢,参考第五点中

(四) jQuery和js对象的区别与联系

JQuery和JavaScript对象之间的方法是不通用的,但是两者又可以相互转换由于JQuery相较与js更加简洁方便所以我们更倾向于将Js对象转换为JQuery对象

(1) jQuery –> JavaScript

  • jQuery对象[索引]
  • jQuery对象.get(索引)

(2) JavaScript –> jQuery

  • $(js对象)

(五) jQuery入门程序

这就是一个最简单的jQuery程序,作用是通过id获取输出控件中的内容,可以对照一下第三点中的js代码实现,看看是否jQuery是否简单了很多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo1</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

<div id="d1">This is div1</div>
<div id="d2">This is div2</div>
<div id="d3">This is div3</div>

</body>

<script>
    alert($("#d1").html());
    alert($("#d2").html());
    alert($("#d3").html());
</script>
</html>

jQuery的语法主要是为了方便我们能对Html页面中的元素进行查询以及操作,所以我们首先先来了解一下如何准确的获取到我们所需要的元素呢?至于我们可以对其进行的操作(一些API的介绍)我们放到后面介绍

(六) 选择器-这东西可得会用

下面的选择器我将基本所有的情况都有书写,但是个别用的比较少的我省略了

基本选择器(元素、id、类…)

  • 元素选择器
    • $(“html元素名”):获取所有对应的HTML元素
  • id选择器
    • $(“#id属性值”):根据id的属性值获取到匹配的元素
  • 类选择器
    • $(“.class属性值”):获取与class属性值匹配的元素

层次选择器

  • 后代选择器

    • $(“A B”):获取A元素内部的所有B元素
  • 子选择器(父子关系)

    • $(“A > B”):获取A元素内部的所有B子元素
  • 兄弟选择器

    • $(“A + B”):获取A元素后第一个B元素

    • $(“A ~ B”):获取A元素后面的所有B元素

属性选择器

  • 属性名称选择器

    • $(“A[属性名]”):获取含有指定属性的选择器
  • 属性选择器

    • $(“A[属性名 = ‘值’]”):获取含有指定属性等于指定值的选择器
  • 复合属性选择器

    • $(“A[属性名 = ‘值’][]…”) :获取包含多个属性条件的选择器

过滤选择器

  • 大于索引选择器
    • gt(index):获取大于指定索引的元素
  • 小于索引选择器
    • lt(index):获取小于指定索引的元素
  • 等于索引选择器
    • eq(index):获取等于指定索引的元素
  • 首/尾元素选择器
    • first/last:获取选中元素中的第一个/最后一个元素
  • 标题选择器
    • header 获取标题

表单所需选择器

  • 选中选择器
    • checked:获取单选框/复选框中所选中的元素
    • selected:获取下拉框中选中的元素
  • 可用/不可用元素
    • enabled/disabled:获取可用/不可用元素

(七) Dom操作

认识了这么多选择器,我们可以轻易的获取到 HTML中的各种标签,但是只有对其进行一定的操作,我们才可以让页面 “动起来” ~

标签内容和属性

内容

  • text():获取元素的标签体中的文本内容 eg:<div><p>你好</p></div> ——> 你好
  • html():获取元素的标签体 eg:<div><p>你好</p></div> ——> <p>你好</p>
  • val():获取元素的value属性值

属性

普通属性

  • attr()或prop():获取元素的属性

  • removeAttr()或removeProp():删除属性

    注意:如果操作的是元素的固有属性,推荐使用prop,自定义属性,推荐使用attr

针对class的属性

  • addClass():增加class属性值
  • removeClass():删除class属性值
  • toggleClass():切换class属性
  • toggleClass(“A”):添加或者将原存在的属性值A删掉

增删改操作

  • append():子元素追加到父元素末尾 eg:父.append(子) 下同
  • prepend():子元素添加到父元素的开头
  • appendTo():将调用元素添加到参数元素内部末尾 eg:A.appendTo(B) 下同
  • prependTo():将调用元素添加到参数元素内部开头
  • after():将参数元素添加到调用元素后面 eg:A.after(B) B添加到A后
  • before():将参数元素添加到调用元素前面
  • insertAfter():调用元素添加到参数元素后面 eg:A.after(B) A添加到B后
  • insertBefore():调用元素添加到参数元素前面
  • remove():移除元素
  • empty():清空元素的所有后代元素
  • clone():只复制样式,不复制行为
  • clone(true):同时复制样式和行为

动画效果

显示和隐藏元素

默认方式

  • show()
  • hide()
  • toggle()

滑动方式

  • slideDown()

  • slideUp()

  • slideToggle()

淡入淡出方式

  • fadeIn()

  • fadeOut()

  • fadeToggle()

注意:以上方法含有相同参数,eg:show([speed,[easing],[fn]])

参数解释:

[speed] 动画的速度 ,slow,normal,fast 或表示动画时长(毫秒为单位)

[easing] 切换效果 swing,linear

  • swing:先慢,中快,后慢
  • linerr:匀速动画

[fn] 动画完成时执行此函数

遍历方式

  • each()

使用:

//参数是一个需要进行处理的函数
//index-索引
//element-每一个元素对象
jquery对象.each(function(index,element){
    .....
});

jQuery3.0后提供 for…of 方式,自行了解

事件

关于事件的API

  • ready:浏览器加载web页面时触发,后者不覆盖前者

  • window.onload:浏览器加载web页面时触发,后者覆盖前者

  • mouseover :鼠标移入触发

  • mouseover :鼠标移出触发

  • click :单击触发

  • dblclick :双击触发

  • change :内容改变触发

简单列举了几个常见的,如果需要使用更加丰富的api可以查一下文档

事件绑定

  1. 标准绑定方式

    jQuery对象.方法(回调函数);

  2. on绑定/off解绑

    jQuery对象.on(“事件名称”,回调函数)

    jQuery对象.on(“事件名称”)

    注意:如果off上不写参数,组件上的所有事件都会被解绑

  3. toggle事件切换

    jq对象.toggle(f1,f2…)

    单击组件后,执行f1,第二次执行f2

结尾:

如果内容中有什么不足,或者错误的地方,欢迎大家给我留言提出意见, 蟹蟹大家 !^_^

如果能帮到你的话,那就来关注我吧!(系列文章均会在公众号第一时间更新)

在这里的我们素不相识,却都在为了自己的梦而努力 ❤

一个坚持推送原创Java技术的公众号:理想二旬不止


   转载规则


《001-jQuery》 BWH_Steven 采用 知识共享署名 4.0 国际许可协议 进行许可。
  目录