欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端--初识jQuery

程序员文章站 2022-09-14 17:05:59
jQuery 一.jQuery介绍 1.jQuery是一个轻量级.兼容多浏览器的js库. 2.jQuery使用户能够更方便地处理HTML Document,Events,实现动画效果,方便的进行Ajax交互,能够极大的简化js编程,它的宗旨就是"Write less,do more." 二.为什么要 ......

 jquery

一.jquery介绍

1.jquery是一个轻量级.兼容多浏览器的js库.

2.jquery使用户能够更方便地处理html document,events,实现动画效果,方便的进行ajax交互,能够极大的简化js编程,它的宗旨就是"write less,do more."

- 版本
- 1.x
兼容ie8。。。
- 3.x
最新
- .min.xx
压缩的:生产环境用
- 没有压缩的(没有.min.xx):开发用

二.为什么要用jquery?

写起来简单,省事,开发效率高,兼容性好

三.什么是jquery?

jquery是一个兼容多浏览器的js库(类似于python中的模块)

四.如何使用jquery?

1.导入<script src = "jquery-3.3.1.js"></script>或者<script src = "jquery-3.3.1.min.js"></script>

2.语法规则:$(" ")

五.js和jquery的区别?

jquery就是js写的

js是基础,jquery是工具

六.选择器:

1.基础选择器

  --id选择器                        $("#id的值")

  --类选择器(class)             $(".class的值")

  --标签选择器(html标签)    $("标签的名字")

  --所有标签                      $("*")

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

2.层级选择器

  --从一个标签的子子孙孙去找                       $("父亲    子子孙孙")

  --从一个标签的儿子里找                              $("父亲>儿子标签")

  --从紧挨着的标签(毗邻标签)                        $("标签+下面紧挨着的那个标签")

  --找后面所有同级的                                     $("标签~兄弟")

七.jquery对象:

  --用jquery选择器查出来的就是jquery对象

  --如果是jquery对象,它可以使用jquery方法,不能使用dom的方法

  --dom对象和jquery对象转换:

    --$(".c1")[0] ----> dom对象

    --$(dom对象)

前端--初识jQuery

八.筛选器

  --写在引号里面的

    基本筛选器

      $("    :first")             找第一个

      $("    :not(' ')")         不是/非

      $("    :even")           偶数

      $("    :odd")             奇数

      $("    :eq(index)")    找等于index的

      $("    :gt(index)")     找大于index的

      $("    :lt(index)")      找小于index的

      $("    :last")             最后一个

      $("    :focus")          焦点

前端--初识jQuery

      内容==========

        $(".c1:contains('我是第一个')")          包含文档的内容的标签

        $("    :empty")                                    标签内容为空的

        $("    :has(' ')")                                   包含标签的标签

        $("    :parent")                                    找有孩子的父亲

        $(" #i7").parent                                  找i7的父亲

      可见性==========

        $("    :hideen")              找到隐藏的

        $("    :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(index)  找等于index的

        .hasclass()         判断有没有某个类的

      查    找==========

        .children()          找孩子

        .find()                 查找

        .next()                下面的

        .nextall              下面所有的  

        .nextuntil()         直下面的直到找到某个标签

        .parent()             找父亲

        .parents()            找所有的父亲

        .parentsuntil()     直到找到你要找的那个父亲为止

        .prev()                 上面的

        .prevall()             上面的所有

        .prevuntil()          上面的直到找到某个标签为止

        .siblings()             所有的兄弟

----toggleclass()                切换|开关:有就移除,没有就添加

----addclass("hide")           添加类

----removeclass("hide")     删除类

前端--初识jQuery

注:

1)

前端--初识jQuery

2)

前端--初识jQuery

3)

前端--初识jQuery