PYTHON第五十八天笔记11.15

一、自记录：

jQuery库引用两种方式：

　　下载好的jquery文件：

　　　　<script src="jquery-3.2.1.min.js"></script>

　　jquery cdn网络地址：

　　　　<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

jQuery中使用：引入可以使用jQuery(“d1”)或者使用$(“d1”)，也就是说$变量代替了jQuery使用，都是一样的。

jQuery库的下载文件：

　　….juery.js：内容是没有压缩的

　　….juery.min.js：内容是压缩过的，可用浏览器中的{}查看换行。

和JS的一点差别：

　　$(“#i4”).siblings() 　　#jquery中可以查找所有兄弟。而JS不能查找所有的。

二、课堂笔记：

1 样式类操作示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式类操作示例</title>

    <style>
        .c1 {
            background-color: yellow;
        }
    </style>
</head>
<body>

<div id="d1" class="c1 c2">111</div>

<button onclick="mySwitch();">屠龙宝刀，点击就送</button>
<div id="deng" style="width: 100px;height: 100px;border-radius: 50%" class="c1"></div>

<script src="jquery-3.2.1.min.js"></script>

<script>
    function mySwitch() {
        $("#deng").toggleClass("c1");
    }
</script>
</body>
</html>

样式类操作

2 jQuery的左侧菜单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左侧菜单示例</title>

    <style>
        .hide {
            display: none;
        }

        .menu {
            width: 100px;
            height: 600px;
            border: 1px solid black;
        }

        .title {
            background-color: #4949ff;
            height: 36px;
            line-height: 36px;
        }
    </style>
</head>
<body>

<div class="menu">
    <div class="title" onclick="showBody(this);">菜单一</div>
    <div class="body hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>

    <div class="title" onclick="showBody(this);">菜单二</div>
    <div class="body hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>

    <div class="title" onclick="showBody(this);">菜单三</div>
    <div class="body hide">
        <div>内容一</div>
        <div>内容二</div>
        <div>内容三</div>
    </div>
</div>

<script src="jquery-3.2.1.min.js"></script>
<script>
    function showBody(ths) {
        // 显示当前点击的title后毗邻的body
        // 把其他的title(兄弟)后毗邻的body隐藏
        // ths --> 当前点击的标签 --> DOM对象
        // $(ths) --> 得到jQuery对象 --> 就能使用jQuery的方法了
        // $(ths).next();  --> 毗邻我点击标签的下一个要显示的.body
        // $(ths).next().removeClass("hide")   --> 显示当前的这个.body
        // $(ths).next().removeClass("hide").siblings(".body")  --> 找到要显示的.body所有的兄弟标签
        $(ths).next().removeClass("hide").siblings(".body").addClass("hide");

    }
</script>

</body>
</html>

jQuery左侧菜单

3 课上笔记：

day58

jQuery

为什么要用jQuery
    jQuery写法简单，提高开发效率

既然用jQuery为什么要学JS？
    JS是基础，jQuery就是用JS写的
    jQuery里面没有还是要自己写JS来实现

什么是jQuery？
    类库类似于Python中的模块

jQuery如何使用？
    导入jQuery文件  -> script标签导入
        1. 直接下载文件，然后放到目录下，src指向该文件
        2. CDN <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 必须联网
    开始用
    Python:  import re re.search()
    jQuery： jQuery.xxx  --> $
    
jQuery下载
    https://jquery.com/
    版本的区别： IE678兼容性的区别
    
jQuery内容：
    HTML
    CSS
    JS
    
    前端这部分：找到标签让他做什么事儿（css变换，DOM位置变化）
    
    
    前提是找标签 --> jQuery找标签 --> $(" ")
    
    基本语法：
        $(xx).方法名()
    
    选择器：
        id选择器： $("#id值")
        class选择器： $(".c1")
        大包大揽选择器：$("*")
        标签名选择器： $("div") $("a") $("p")
        组合选择器：$("#i1, p")
        
    几个补充：
        版本的区别：
            压缩与未压缩
            浏览器如何查看压缩的JS或CSS文件
            
        区别大不大：
            1.x和3.x区别
                之前有，后来版本去掉了
                新版本新加的内容
    
    jQuery对象：
        DOM对象转换成jQuery对象
        ele --> $(ele)
        
        jQuery对象转换成DOM对象
        $ele --> $ele[index]
        
        *jQuery对象赋值给变量的时候，变量名最好以$开头，方便区分
        
    
    层级选择器：
        子子孙孙选择器： $("选择器1 空格 选择器2")
        儿子选择器：     $("选择器1 > 选择器2")
        毗邻选择器：     $("选择器1+选择器2")
        弟弟选择器：     $("选择器1~选择器2")
        
    筛选器：
        0是偶数
        
        :first
        :last
        :even
        :odd
        
        :eq(index)
        :gt(index)
        :lt(index)
        
    
    属性选择器
        $("input[type='text']")  --> 注意：双引号里面用单引号
    
    表单选择器
        :checkbox
        :text
        :password
    
    筛选器：
    
        和上面的区别：上面的是写在引号里面的
        这个是作为方法来使用的
        
        * 括号里面都可以加选择器条件
        
        往后找：     
            .next()
            .nextAll()
            .nextUnitl()
            
        往前找：
            .prev()
            .prevAll()
            .prevUntil()
            
        往外层找：
            .parent()
            .parents()
            .parentsUntil()
        
        查找方法：
            .find()
                
        后代选择器： .children()
        兄弟选择器： .siblings()
            
    补充：
    
        not:
            写在引号里面的：        --> $("#my-checkbox input:not(:checked)")
            写在外面当方法用的      --> $("#my-checkbox input").not(":checked")
            
        has:
            写在引号内表示有什么的  --> $("label:has('input')")
            写在外面当方法用的：    --> $("label").has("input")
                
    综合练习：
        左侧菜单（jQuery一句话）

课堂笔记

三、课堂图片：