jQuery---基本语法

82550495 2020-02-20

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>

相关推荐

Web全栈笔记 / 0评论 2020-06-15