前端JavaScript

一篇文章带你入门jQuery

2020-04-27  本文已影响0人  晚月川

[TOC]

JavaScript库

JavaScript库：即library,是一个封装好的特定的集合(方法和函数),从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show，比如获取元素等

  • 简单的理解：就是一个js文件，里面对原生js代码进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好的功能了。
  • 比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。

这些库都是对原生JavaScript的封装，内部都是用JavaScript实现的，我们主要学习的是jQuery

jQuery

jQuery是一个快速、简洁的JavaScript库，其设计的宗旨是"write Less, Do More",即倡导写更少的代码，做更多的事情

  • j就是JavaScript; Query查询; 意思就是查询JS，把JS中的DOM操作做了封装
  • jQuery封装了JavaScript常用的功能代码，比如优化DOM操作、事件处理、动画设计和Ajax交互
  • 学习jQuery的本质就是学习调用这些函数(方法);jQuery出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率

jQuery的优点

jQuery的基本使用

  • 官方网址：https://jquery.com/
  • 版本：
    • 1x:兼容IE6~8低版本浏览器，官网不在更新
    • 2x:不兼容IE6~8低版本浏览器，官网不在更新
    • 3x:不兼容IE6~8低版本浏览器，是官方主要更新维护的版本
  • 各个版本的下载：https://code.jquery.com/ 
// jQuery的入口函数
$(function () {
    ...// 此处是页面DOM加载完成的入口
});
$(document).ready(function() {
    ... // 此处是页面DOM加载完成的入口
});

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装(相当于原生js中的DOMContentLoaded,不同的是原生js中的load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码)

jQuery的顶级对象$

  1. 是jQuery的别称，在代码中可以使用jQuery代替,但是一般为了方便，通常都直接使用$
  2. 同时也是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用包装成jQuery对象，就可以调用jQuery的方法

jQuery对象和DOM对象

<div></div>
<script>
    // 原生JS获取DOM元素的方法
    let myDiv = document.querySelector('div');
    // jQuery获取jQuery对象的方法
    $('div'); // $('div')是一个jQuery对象
    // jQuery对象只能使用jQuery方法，而DOM对象只能使用原生的JS属性和方法
    myDiv.style.display = 'none';
    $('div').hide();
</script>

DOM对象和jQuery对象之间是可以相互转换的

  • 因为原生JS比jQuery更大，原生的一些属性和方法jQuery没有给我们封装，要使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用

jQuery常用的API

原生JS获取元素方式很多，很杂，而且兼容性和情况不一致，因此jQuery给我们做了封装，使获取元素统一标准

名称 用法 描述
ID选择器 $("#id") 获取指定ID的元素
全选选择器 $("*") 匹配所有元素
类选择器 $(".class") 获取同一类的class元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 选取多个元素
交集选择器 $("li.current") 交集元素
子代选择器 $("ul>li") 使用>号，获取亲儿子层级的元素；并不会获取孙子层级的元素
后代选择器 $("ul li") 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
  • 隐式迭代：遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代
  • 简单的理解：给匹配到的所有元素内部进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用
语法 用法 描述
:first $("li:first") 获取第一个li元素
:last $("li:last") 获取最后一个li元素
:eq(index) $("li:eq(2)") 获取到的li元素中，选择索引号为2的元素(索引号index从0开始)
:odd $("li:odd") 获取到的li元素中，选择索引号为奇数的元素
:even $("li:even") 获取到的li元素中，选择索引号为偶数的元素
语法 用法 说明
parent() $("li").parent() 查找父级
children(selector) $("ul").children("li") 相当于$("ul>li")，最近一级(亲儿子)
find(selector) $("ul").find("li") 相当于$("ul li")，后代选择器
siblings(selector) $(".first").siblings("li") 查找兄弟节点，不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素的所有弟弟元素
prevAll([expr]) $(".last").prevAll() 查找当前元素的所有哥哥元素
hasClass(class) $('div').hasClass("protected") 检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index) $("li").eq(2) 相当于$("li:eq(2)"),index从0开始

jQuery里面的排他思想

想要多选一的效果，排他思想，当前元素设置样式，其余的兄弟清楚样式

<button>第1个按钮</button>
<button>第2个按钮</button>
<button>第3个按钮</button>
<button>第4个按钮</button>
<button>第5个按钮</button>
<script>
    $(function() {
        // 隐式迭代 给所有的按钮绑定点击事件
        $("button").click(function() {
            // 当前的元素变化背景颜色
            $(this).css("background", "blue");
            // 其余的兄弟去掉背景颜色  隐式迭代
            $(this).siblings("button").css("background", "");
        });
    })
</script>

jQuery样式操作

jQuery可以使用CSS方法来修改简单的元素样式，也可以操作类，修改多个样式

jQuery动画效果

jQuery给我们封装了很多的动画效果，最为常见的如下

  • 显示隐藏：show()、hide()、toggle()
  • 滑动：slideDown()、slideUp()、slideToggle()
  • 淡入淡出：fadeIn()、fadeOut()、fadeToggle()、fadeTo()
  • 自定义动画：animate()
事件切换

hover([over,]out)

  • over:鼠标移到元素上要触发的函数(相当于mouseenter)
  • out:鼠标移出元素要触发的函数(相当于mouseleave)
动画队列及其停止排队方法

jQuery属性操作

购物车案例引出的小知识点

  • 选择器:checked,返回有几个复选框被选中
  • parents("选择器")可以返回指定祖先级元素
  • 通过toFixed(2)方法保留两位小数

jQuery内容文本值

主要针对元素的内容还有表单的值操作

jQuery元素操作

主要是遍历、创建、添加、删除元素操作

  • 遍历元素
    • jQuery里面隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历
<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function() {
        // 针对同一类元素做不同的操作，需要用到遍历元素
        // each() 方法遍历元素
        let arr = ["red","blue","orange"];
        $("div").each(function(index, domEle) {
            // 回调函数第一个参数是索引号  可以自己定义索引号名称
            console.log(index);
            // 回调函数第二个参数一定是DOM元素对象
            console.log(domEle);
            $(domEle).css("color", arr[index]);
        })
    })
</script>
  • 创建元素
    • 语法：$("<li></li>");动态创建一个li
  • 添加元素
    • 内部添加:(内部添加元素，生成之后，他们是父子关系)
      • element.append("内容")把内容放入匹配元素内部最后面，类似原生appendChild
      • element.prepend("内容")把内容放入匹配元素内部最前面
    • 外部添加：(外部元素，生成之后，他们是兄弟关系)
      • element.after("内容") 把内容放入目标元素后面
      • element.before("内容") 把内容放入到目标元素前面
  • 删除元素
    • element.remove() 删除匹配元素(本身)
    • element.empty() 删除匹配的元素集合中的所有的子节点
    • element.html("") 清空匹配的元素内容(子节点)

推荐案例练习：购物车(点击按钮删除和删除勾选的商品以及清空购物车)

上一篇下一篇

猜你喜欢

热点阅读