简介

  1. jQuery封装了一部分的函数,简化了原生js的写法,在实际使用时,jQuery对DOM树进行操控,即:首先有一个写好的html页面,再对其修改操作,如写按钮事件函数,点击隐藏、切换、页面跳转等
  2. 以前的jQuery很火,火到前端工程师必须学,这样才能去找工作,就跟现在一样必学vue与react。对比主流框架,jQuery效率不如前者,操作事情繁琐,生态人数逐渐减少,学会它对帮你找工作,没有任何好处
  3. 什么时候会用它?比如,我所在的公司还在使用jQuery技术,那么你就很有必要去学一下,不用学得很深,只需了解它的原理,在学会使用jq插件库就足够了

基本使用

  1. jQuery官网:https://jquery.com/download/
  2. production生产版,代码经过压缩;development开发版,保留原有格式,方便阅读代码
  3. 个人使用最新生产版,不需要考虑IE兼容了,点击后会弹出代码页面,复制代码到js文件中,这份装有jQuery代码的文件,通过script标签引入到html文件中,这样就能使用jQuery语法了
  4. 仅供参考,建议script标签放在上方,而不是放在head标签中,避免js提前渲染问题
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>学习jQuery</title>
    <link rel="stylesheet" href="test.css">
    </head>
    <body>
    <div></div>
    <script src="jquery.min.js"></script>
    <script src="test.js"></script>
    </body>
    </html>
  5. jQuery的入口函数,等着页面DOM加载完毕再去执行js代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 传统写法
    $(document).ready(function (){
    $("div").hide();
    });

    // 简化写法
    $(function () {
    $("div").hide();
    });
  6. 用原生js获取过来的对象就是DOM对象,用jquery获取过来的对象就是jquery对象;DOM对象使用原生的js属性和方法,jquery只能使用jquery方法,不能使用原生js的属性和方法
  7. DOM对象转换jquery对象
    1
    2
    const myVideo = document.querySelector("video");
    $(myVideo); // 注意不要加引号,这是DOM转换jquery
  8. jquery对象转换DOM对象
    1
    $("video")[0].play();

常用的Api

基础选择器

  1. $(“选择器”)里面选择器直接写CSS选择器即可,但是要加引号
    名称 用法 描述
    ID选择器 $(“#id”) 获取指定ID的元素
    类选择器 $(“.class”) 获取同一类class的元素
    全选选择器 $(“*”) 匹配所有元素
    标签选择器 $(“div”) 获取同一类标签的所有元素
    并集选择器 $(“div,p,li”) 选取多个元素
    交集选择器 $(“li.current”) 交集元素
  2. 设置类选择器的背景颜色为粉色
    1
    $(".myColor").css("background-color", "pink");
  3. 筛选选择器
    语法 用法 描述
    :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元素中,选择索引号为偶数的元素
  4. 筛选选择器2
    语法 用法 描述
    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开始
    1
    2
    // eq放到外面可以写变量,放到里面写变量需要拼接
    $("ul li").eq(index).css("color", "blue");
  5. 排他思想,只有我选中,其他人被取消
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <body>
    <button>点我</button>
    <button>点我</button>
    <button>点我</button>
    <script src="jquery.min.js"></script>
    <script>
    $(function () {
    $("button").click(function () {
    $(this).css("background", "pink");
    $(this).siblings("button").css("background", "");
    })
    });
    </script>
    </body>
  6. jQuery得到当前元素索引号$(this).index()

样式操作

  1. 参数只写属性名,则是返回属性值
    1
    $(this).css("color");
  2. 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
    1
    $(this).css("color", "red");
  3. 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号
    1
    2
    3
    4
    $(this).css({
    "color": "white",
    "font-size": "20px"
    });

设置类样式方法

  1. 添加类
    1
    $("div").addClass("current");
  2. 移除类
    1
    $("div").removeClass("current");
  3. 切换类
    1
    $("div").toggleClass("current");