第五十五天jQery内容的进阶

其他 2020-04-05 14:17:32 阅读次数: 0

1.上节课内容回顾：

<div id="left">
    <div class="title">菜单一
        <div class="menu hidden">
            <a href="">第一个</a><br>
            <a href="">第二个</a><br>
            <a href="">第三个</a>
        </div>
    </div>
    <div class="title">菜单二
        <div class="menu hidden">
            <a href="">第一个</a><br>
            <a href="">第二个</a><br>
            <a href="">第三个</a>
        </div>
    </div>
    <div class="title">菜单三
        <div class="menu hidden ">
            <a href="">第一个</a><br>
            <a href="">第二个</a><br>
            <a href="">第三个</a>
        </div>
    </div>
</div>

<script src="jquery-3.4.1.min.js"></script>
<script>
    $('.title').click(function(){
      $(this).children().removeClass('hidden');
      $(this).siblings().children().addClass('hidden');
        console.log( $(this).siblings().children())
View Code

2.属性选择器：

  console.log($("[type='text']"));
View Code

3.表单选择器：

    console.log($(':input'));
View Code

4.今日面试题补充·：

　　1.format和%s进行格式化时候的区别：

　　1.%s在进行格式化的时候如果是元组或者列表的一个值进行传输时，必须要加括号：但是format就不需要：

c1=[321,331]
s1='敌人位置在%s'%(c1,) #价格逗号说明不是传入的数据类型是一个元组
s2='敌人位置在{}'.format(c1)
print(s1,s2)
View Code

　　2.format 格式化的一种方法：

name='alex'
age=132
s3='{}的年龄是{}'.format(name,age)
print(s3)
View Code

　　3.format的第二种方法：

name='alex'
age=132
print(f"{name} is {age}")
View Code

　　4.使用面像对象来写一个format函数：

class Person:
    def __init__(self,name,age):
        self.name=name
        self.age=age
    def __str__(self):
        return f'{self.name}is {self.age}'
p1=Person('alex',123)
print(p1)
View Code

　　5.使用序号来使用format函数：

data=[11,33]
s1='{0[0]}--{0[1]}'.format(data)
print(s1)
View Code

　　6^< >分别是指居中、左对齐、右对齐，后面宽度：后面带填充字符，并且只能有一个字符，不指定默认为空格

s1='{:*>13}'.format('hello')
print(s1)
结果为
********hello
View Code

　　7.zifill使用0进行填充：

s1='alwx'.zfill(12)
print(s1)
结果为
00000000alwx
View Code

　　8.浮点数位数显示：

s1='{:4.2f}'.format(123.34344)
print(s1)
结果为
123.34
View Code

　　9.当整数过多的时候，3位下面一个逗号：

s1='{:,}'.format(123565677785432)
print(s1)
结果为
123,565,677,785,432
View Code

10自定义模块框：

　　·10.1自己写的：

 <style>
        *{
            margin:0;
            padding:0;
        }
        .model{
            height: 100%;
            width:100%;
            position: absolute;
            top:0px;
            left:0px;
            buttom:0px;
            right:0px;
            background-color:rgba(0,0,0,0.4);
            z-index: 999;
        }
        .cover{
            height:400px;
            width:600px;
            background-color:white;
            position:absolute;
            top:50%;
            left:50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 100000;

        }
        .hidden{
            display: none;
        }

    </style>
</head>
<body>

<input id="s1" type="button" value="点击就送">
<div class="model hidden"></div>
<div class="cover hidden">
        <form action="">
            <p>
                <label >用户名
                     <input id="i1" name="input" type="text">
                </label>
            </p>
            <p>
                <label >用户密码
                    <input id="i2" name="passwd" type="password">
                </label>
            </p>
            <p>
                <input id="start" type="submit" value="登陆">
                <button id="cancle">取消</button>
            </p>
        </form>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
    $('#s1').click(function(){
        console.log(this);
        $('.cover').removeClass('hidden');
        $('.model').removeClass('hidden');

    }
    )
    $('#cancle').click(function(){
        $('.cover').addClass('hidden');
        $('.model').addClass('hidden');
        
    })
</script>
View Code

　　10,2老师写的：

<style>
        .cover {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: rgba(0,0,0,0.4);
            z-index: 998;
        }

        .modal {
            height: 400px;
            width: 600px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -300px;
            margin-top: -200px;
            z-index: 1000;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
<button id="b1">屠龙宝刀,点击就送!</button>
<div class="cover hide"></div>
<div class="modal hide">
    <form>
        <p>
            <label>用户名:
                <input type="text">
            </label>
        </p>
        <p>
            <label>密码:
                <input type="password">
            </label>
        </p>
        <p>
            <input type="submit" value="登录">
            <input id="cancel" type="button" value="取消">
        </p>
    </form>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
    // 找到点击弹出模态框的按钮
    $("#b1").click(function () {
        // 把.cover和.modal显示出来(去除掉.hide)
        $(".cover").removeClass("hide");  // 显示背景
        $(".modal").removeClass("hide"); // 显示模态框
    });

    // 找到取消按钮,绑定事件
    $("#cancel").click(function () {
        // 给背景和模态框都加上hide类
        $(".cover").addClass("hide");
        $(".modal").addClass("hide");
    })
</script>
View Code

11.改变当前标签的字体颜色、字体大小：

<div class="c1">
    <button id="s1">点击文章变颜色</button>
    <p>在苍茫的大海上，狂风卷记着乌云积分空间</p>
</div>
<script src="jquery-3.4.1.min.js"></script>
<script>
    $('#s1').click(function(){
        $(this).siblings().css('color','red');
        $(this).css('font-size','30px');
    })
</script>
View Code

　　11.2如果同时改变多个css变量也可以用字典来进行写：例子如下：

<script>
    $('#s1').click(function(){
        $(this).siblings().css({'color':'red','font-size':'30px'});

    })
</script>
View Code

12.怎么把jQuery加入到每次写的模块中：

13. offset（） 用于获取当前窗口相对偏移或者设置元素的位置：相当于css中的relative（这个有点问题：）

<style>
        *{
            margin: 0;
            padding:0;
        }
        .c1,
        .c2,
        .c3{
            height:300px ;
            width:300px;
        }
        .c1{
          background-color: red;
        }
        .c2{
            background-color:green;

        }
        .c3{
            background-color:yellow;
        }
    </style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

<script src="jquery-3.4.1.min.js"></script>
<script>
    console.log($('.c2').offset());
    $('.c2').offset({top:100,left:200})
</script>
View Code

14.position（）获取元素相对父元素的偏移量：

<script>
    console.log($('.c2').position());
   结果为
{top: 300.00000762939453, left: 0}
top: 300.00000762939453
left: 0
__proto__: Ob
View Code

15.scrollTop（）获取匹配元素相对滚动条顶部的偏移量： scrollLeft（）获取匹配元素滚动条左侧的偏移量：

　　15.1位置相关实例：我的

 <style>
        *{
            margin:0;
            padding:0;
        }
        .c2{
            height: 50px;
            width:100px;
            position: fixed;
            bottom:15px;
            right:12px ;
            background-color:red;

        }
        .hidden{
            display: none;
        }
        .c3{
            font-size:20px;
        }
    </style>
</head>
<body>
<button id="d1">点我</button>
<div class="c1"></div>
<div class="c3">0</div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3">11</div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<div class="c3"></div>
<button id="d2" class="hidden c2" >返回顶部</button>


<script src="jquery-3.4.1.min.js"></script>
<script>
    $(window).scroll(function(){
        if ($(window).scrollTop()>100){
            $('#d2').removeClass('hidden');
        }
        else{
            $('#d2').addClass('hidden');

        }


    });
    $('#d2').click(function(){
        $(window).scrollTop(0);

    })
</script>
View Code

　　15.2老师的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>位置相关示例之返回顶部</title>
  <style>
       * {
           margin: 0;
       }
    .c1 {
      width: 100px;
      height: 200px;
      background-color: red;
    }

    .c2 {
      height: 50px;
      width: 50px;

      position: fixed;
      bottom: 15px;
      right: 15px;
      background-color: #2b669a;
    }
    .hide {
      display: none;
    }
    .c3 {
      height: 100px;
    }
  </style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>

<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
  $(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
  $("#b2").click(function () {
    $(window).scrollTop(0);
  })
</script>
</body>
</html>
View Code

猜你喜欢

转载自www.cnblogs.com/ab461087603/p/12636986.html
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022