jQuery基本语法

一、jQuery基础
1.为什么要用jquery？
    写起来简单，省事，开发效率高，兼容性好
2、什么是jQuery?
    jQuery是一个兼容多浏览器的JavaScript库（类似python里面的模块）
3、如何使用jQuery？
    1、导入 <script src="jquery-3.2.1.js"></script>
           或者<script src="jquery-3.2.1.min.js"></script>
    2、语法规则：$("")
4、JS和jQuery的区别？
    jQuery就是用JS写的
    js是基础，jQuery是工具
5、jQuery介绍
    - 版本
      - 1.x
         兼容IE8。。。
      - 3.x
         最新
   - .min.xx
      压缩的：生产环境用
   -  没有压缩的（没有.min.xx）：开发用
6、 jQuery知识点
    　　html:裸体的人
    　　css:穿了衣服的人
   　　 JS：让人动起来
7、选择器：
   1、基本选择器
        - ID选择器                  $("#id的值")
        - 类选择器（class）          $(".class的值")
        - 标签选择器(html标签)       $("标签的名字")
        - 所有标签                  $("*")

        - 组合选择器                $("xx,xxx")
   2、层级选择器
        - 从一个标签的子子孙孙去找    $("父亲 子子孙孙")
        - 从一个标签的儿子里面找      $("父亲>儿子标签")
        - 找紧挨着的标签             $("标签+下面紧挨着的那个标签")
        - 找后面所有同级的           $("标签~兄弟")

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

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

9、筛选器
        - 写在引号里面的
            基本筛选器
            　　$(" :first")   找第一个
            　　$(" :not('')")  不是/非
            　　$("#i1>input":not('.c1,.c2'))
            　　$(" :even")     偶数
            　　$(" :odd")      奇数
            　　$(" :eq(index)")       找等于index的
            　　$(" :gt(index)")       找大于index的
            　　$(" :lt(index)")       找小于index的
            　　$(" :last")     最后一个
            　　$(" :focus")    焦点

            内容==========
            　　$(" .c1:contains('我是第一个')")    包含文档的内容的标签
            　　$(" :empty")     标签内容为空的
            　　$(" :has('')")   包含标签的标签
            　　$(" :parent")    找有孩子的父亲
            　　$("#i7").parent()   找i7的父亲

            可见性========
            　　$(" :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(index) 找等于index的
            .hasClass()  判断有没有某个类的
         查找
            .children() 找孩子
            .find()  查找
            .next()  下面的
            .nextAll()  下面所有的
            .nextUntil() 找下面的直到找到某个标签为止

            .parent() 找父亲
            .parents() 找所有的父亲
            .parentsUntil()  直到找到你要找的那个父亲为止

            .prev()  上面的
            .prevAll()  上面的所有
            .prevUntil()  上面的直到找到某个标签为止

            .siblings()  所有的兄弟

- toggleClass()  切换|开关：有就移除，没有就添加

- addClass("hide")  添加类

- removeClass("hide") 删除类

以下需要注意的几个图片
（1）

（2）

（3）

（4）

二、练习题

答案

三、开关示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>开关</title>

    <style>

        .c1{

            width: 200px;

            height: 200px;

            border :1px solid grey;

            border-radius: 50%;

            display: inline-block;

        }

        .c2 {

            background-color: yellow;

        }

    </style>

</head>

<body>

<div class="c1"></div>

<button class="btn">点击我</button>

<script src="jquery3_0_0.js"></script>

<script>

//    找到button添加事件

    $(".btn").on('click',function () {

        //当点击的时候让变色

        $(".c1").toggleClass('c2')

    });

</script>

</body>

</html>

前端之JQuery：JQuery基本语法的更多相关文章

  1. 前端（jQuery）（1）-- JQuery简介及语法

    1.jQuery库简介 1.1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中 1.2.什么是jQuery: jQuery是一个JavaScript函数库(由于底层封装的问题,不需 ...

  2. 前端学习之jquery/下

    前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...

  3. 前端学习之jquery

    前端学习之jquery 1.   什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...

  4. 前端基础之:JQuery(可编辑版)

     前端基础之jquery   一 jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   ...

  5. 第四篇 前端学习之JQuery基础

    一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...

  6. 前端基础 之 jQuery

    浏览目录 jQuery介绍 jQuery的优势 jQuery对象 jQuery内容 一.jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户 ...

  7. 前端(5)之jQuery

    前端(5)之jQuery jQuery介绍 1.jQuery是一个轻量级的,兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现 ...

  8. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

  9. web前端基础知识 jQuery

    通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...

  10. 网站建设中前端常用的jQuery+easing缓动的动画

    网站建设中前端人员利用jQuery实现动画再简单不过了,只是要实现更酷的效果还需要插件来帮忙,easing就是一款帮助jQuery实现缓动动画的插件,经过试用,效果很不错! 下载该插件:jquery. ...

随机推荐

  1. js获取Session问题

    纯htm页面必须采用AJAX了,ASP页面:var manager='<%=session("manager")%>', ASPX页面:var manager='< ...

  2. Selenium学习之==>18种定位方式的使用

    Selenium的定位方式一共有18种,单数8种,复数8种,最后两种是前面这16种的底层封装 单数形式8种 # 1.id定位 al = driver.find_element_by_id('i1') ...

  3. Native SQL的使用

    OPEN SQL也不是万能的,存在一定的局限性.例如后台数据库为Oracle,对数据表中某个字段大小写是不固定的,若以这个字段为查旬条件,一般Oracle处理方法是使用Upper /Lower函数据将 ...

  4. 中国MOOC_零基础学Java语言_期末考试的编程题_1二进制的前导的零

    期末考试的编程题 返回   这是期末考试的编程题,在60分钟内,你可以多次提交,直到正确为止. 温馨提示: 1.本次考试属于Online Judge题目,提交后由系统即时判分. 2.学生可以在考试截止 ...

  5. Java课堂疑问解答与思考3

    一. 两对整数明明完全一样,为何一个输出true,一个输出false? 答: 整数在小于127时都可以用常量池,因此第一次比较的的地址是取自同一个地址的数字,而第二次比较的数是创建了两个不同地址的对象 ...

  6. 期货、股指期权、ETF期权

    期货与期权: 期权是指一种合约,该合约赋予持有人在某一特定日期或该日之前的任何时间以固定价格购进或售出某种资产的权利. 期货是标准化的合约,赋予参与者在未来的某个时间点以约定好的一个价格去买入或者卖出 ...

  7. 语言I—2019秋作业02

    这个作业属于那个课程 这个作业要求在哪里 我在这个课程的目标是 这个作业在那个具体方面帮助我实现目标 参考文献 C语言程序设计I https://edu.cnblogs.com/campus/zswx ...

  8. Java文件手动编译执行步骤

    Java编译执行步骤: 1)将 Java 代码编写到扩展名为 .java 的文件中.2)通过 javac 命令对该 java 文件进行编译.3)通过 java 命令对生成的 class 文件进行运行. ...

  9. 基类子类在Qt信号量机制下的思考

    背景知识: 基类 superClass class superClass { public: superClass() { std::string m = "superClass() &qu ...

  10. bfs（同一最短路径）

    http://oj.jxust.edu.cn/contest/Problem?id=1702&pid=7 题意:现在有两个相同大小的地图,左上角为起点,右下角问终点.问是否存在同一条最短路径. ...