jQuery

Posted 2020-10-10

首先呢,我们来研究,为什么要用jQuery?

Because 短小,精悍,写起来简单,省事儿,开发效率高.

jQuery的宗旨就是 : Write Less,Do More.

什么是jQuery?

类似python里面的模块,在jQuery里面就是库或者说是插件.

如何使用jQuery?

1. 导入<script src="jquery-3.2.1.js"></secript>     类似python的 import os
2. jquery.*** --> $("")   类似于python的 os.**
3. 兼容性很厉害

---

js与jQuery的关系

1. jQuery就是JS写的
2. JS是基础,jQuery是工具.

---

jQuery介绍 : 

.min.xx
    压缩版本,生产环境用
没有压缩的
    开发用

---

用jQuery找到目的标签

    - 选择器  伏笔         语法规则：$("xxx")

      基本选择器：

        - ID选择器                   $("#id的值")
        - 类选择器（class）          $(".class的值")
        - 标签选择器(html标签)       $("标签的名字")
        - 所有标签                   $("*")

        - 组合选择器              $("xx,xxx")


      层级选择器

        - 从一个标签的子子孙孙去找   $("父亲 子子孙孙")
        - 从一个标签的儿子里面找     $("父亲>儿子标签")
        - 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
        - 找后面所有同级的           $("翔哥~女人")

    jQuery对象：
        - 用jQuery选择器查出来的就是jQuery对象
        - jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法

        - DOM对象和jQuery对象转换：
            - $(".c1")[0] --> DOM对象
            - $(DOM对象)


    - 筛选器
        - 写在引号里面的

            $(" :first") 
            $(" :not(‘‘)")
            $(" :even")
            $(" :odd")
            $(" :eq")
            $(" :gt")
            $(" :last")
            $(" :focus")

            内容
            $(":contains")
            $(" :empty")
            $(" :has(‘‘)")
            $(" :parent")  *****   区别于$("").parent()

            可见性
            $(" :hidden)
            $(" :visible")

            属性
            input[name]  --> 有name属性的input
            input[type=‘password‘]  --> 类型是password的input标签

            表单
            :input
            :password
            :checkbox
            :radio
            :submit
            :button
            :image
            :file

            表单对象属性
            :enable
            :disable
            :checked
            :selected

        - 写在信号外面当方法用的

          过滤
            $("").first()
            $("").parent()
            $("").eq()
            .hasClass()

          查找
            .children()
            .find()
            .next()
            .nextAll()
            .nextUntil()

            .parent()
            .parents()
            .parentsUntil()

            .prev()
            .prevAll()
            .prevUntil()

            .siblings()

        作业：
            - toggleClass()

            - 兄弟标签 紧挨着的ul标签 隐藏  addClass("hide")
            - 把自己 紧挨着的ul标签显示  removeClass("hide")