前端学习-6

小练习
筛选器方法
操作标签
jQuery绑定事件
jQuery动画效果
阻止后续事件
事件冒泡
事件委托
Bootstrap框架
8.29小练习

小练习

页面定时器案例
有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
    <input type="text" id="d1">
<input type="button" id="start" value="开始~">
<input type="button" id="end" value="结束">

<script>
    let inputEle = document.getElementById('d1');
    // 1. 先查找开始按钮 结束按钮
    let startEle = document.getElementById('start')
    let endEle = document.getElementById('end')
    // 7.将存储循环定时任务的变量定位为全局变量
    let t = null;

    // 将展示时间的代码单独封装成一个函数
    function showTime() {
        // 3.获取当前时间
        let currentTimeObj = new Date();
        // 4.转换成格式化时间 便于用户名查看 将上述时间添加到input框中
        inputEle.value = currentTimeObj.toTimeString();
    }

    // 2.给开始按钮绑定一个点击事件
    startEle.onclick = function () {
        if (!t) {
            t = setInterval(showTime, 1000)
        }
    }
    // 5.给结束按钮绑定一个点击事件
    endEle.onclick = function () {
        // 6.结束循环定时任务
        clearInterval(t)
        t = null;
    }
   

搜索框案例
input内有默认的文本值  用户一旦选择该input想做内容修改就提前把内容清空
    <head>
    <meta charset="UTF-8">
    <title>默认值</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<input type="text" placeholder="啦啦啦~" id="d1">

<script>
    let iEle = document.getElementById('d1')
    iEle.onfocus = function () {
        this.removeAttribute('placeholder')
    }
    iEle.onblur = function () {
        this.setAttribute('placeholder', '略略略~')
    }
</script>
</body>

筛选器方法

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

'''链式操作的底层原理'''
对象调用方法之后还会返回一个对象 从而实现链式操作的效果

操作标签

jQuery	JS操作
addClass	classlist.add()
removeClass	classlist.remove()
hasClass	classlist.contains()
toggleClass	classlist.toggle()
.css('样式名','样式值')	style.样式名 = '样式值'
text()	innerText()
html()	innerHTML()
val()	value
[0].files	files
attr()静态属性 prop()动态变换(checked)	setAttribute getAttribute
append()	append()
prepend()
after()
before()
remove()移除标签
empty()清空标签

jQuery绑定事件

JS绑定事件
    标签对象.on事件名 = function(){事件代码}
    btnEle.onclick = function(){alert(123)}
jQuery绑定事件
    方式1
        jQuery对象.事件名(function(){事件代码})
        	$btnEle.click(function(){alter(123)})
    方式2
        jQuery对象.on('事件名',function(){事件代码})
        	$btnEle.on('click',function(){alter(123)})
 """
 	有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
"""

jQuery动画效果

show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])

阻止后续事件

能够触发form表单提交数据动作的标签有两个
	 <input type="submit">
  	 <button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
	我们也可以让标签之前的事件不执行
    	return false
    
$(':submit').click(function (e){
            alert('铁铁 稳住')
            // return false  方式1
            e.preventDefault()方式2
        })

事件冒泡

涉及到标签嵌套并且有相同事件的时候 那么会逐级往上反馈并执行
$("span").click(function (e) {
    alert("span");
    return false;  		    方式1
    e.stopPropagation(); 	方式2
});

事件委托

"""
创建标签的两种方式
	JS
		document.createElement()
	jQuery
		$('<标签名>')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('div').on('click','button',function () {
            alert('你犯困的样子萌萌哒')
        })
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)

Bootstrap框架

提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入  bootstrap涉及到js的部分需要使用jQuery 
详情:http://www.fontawesome.com.cn/  
Font Awesome中文网

8.29小练习

1.什么是python的垃圾回收机制
python解释器自带的一种机制，专门用来回收不可用的变量值所占用的内存空间
2.你所知道的能够实现单例模式的方式有哪些，尝试着手写几个
	单例模式:多次实例化结果指向同一个实例
        第一种:基于classmethod
        第二种:基于装饰器
        第三种:基于元类
        第四种:基于__new__
        第五种:基于模块
3.列举python中常用模块及主要功能，越多越好！
	os模块	主要是跟当前程序所在的操作系统打交道
    json模块	序列化数据 不同编程语言之间数据交互必备的模块(处理措施)
    datetime和time模块	可导入时间
    openpyxl		主要用于操作excel表格 也是pandas底层操作表格的模块
    collections模块 	给我们提供了更多数据类型
    sys模块	主要是跟python解释器打交道
    random随机数模块
    subprocess模块	模拟计算机cmd命令窗口
    hashlib加密模块
    logging日志模块
4.什么是浮动，浮动的效果是什么，有没有坏处，如何解决
	浮动可以理解为浮动元素会脱离文档的普通流，根据float的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止
    浮动带来的问题
    1. 父元素的高度无法被撑开，影响与父元素同级的元素
    2. 与浮动元素同级的非浮动元素（内联元素）会跟随其后
    3. 如果当前元素浮动会影响后面元素，那么后面元素也得浮动（或者需要清除浮动）
    伪类元素清除浮动
5.你所知道的定位有哪些，每个定位各有什么特点
    1、id定位
    2、name定位
    3、class_name定位
    4、link_text定位
    5、partial_link_text定位
    6、xpath
    7、select定位