学习python-Day49

今日内容

作业

尝试编写JS时间案例
	页面定时器案例
    	有一个input框 两个按钮 一个开始 一个结束
        	1.点击开始按钮 input内展示当前时间并按秒数刷新
           2.点击结束按钮 input内展示停止
       ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
         思考如何解决
		let inputEle = document.getElementById('d1');
        // 1.先查找按钮标签
        let startEle = document.getElementById('start');
        let endEle = document.getElementById('end');
        // 将存储循环定时任务的变量定位为全局变量
        let t = null;
        // 将展示时间的代码单独封装成一个函数
        function showTime() {
            // 3.获取当前时间
            let currentTimeObj = new Date();
            // 4.转换成格式化时间 便于用户查看 将上述时间添加到input框中
            inputEle.value = currentTimeObj.toLocaleString();
        }
        // 2.给开始按钮绑定一个点击事件
        startEle.onclick = function (){
            if(!t){
                t = setInterval(showTime, 1000)
            }
        }
        // 给结束按钮绑定一个点击事件
        endEle.onclick = function () {
            // 结束循环定时任务
            clearInterval(t)
            t = null;
        }
 	搜索框案例
    	input内有默认的文本值  用户一旦选择该input想做内容修改
        就提前把内容清空
       let iEle = document.getElementById('d1')
        iEle.onfocus = function () {
            this.removeAttribute('placeholder')
        }
        iEle.onblur = function () {
            this.setAttribute('placeholder','再见！！！！')
        }

筛选器的方法

部分代码：
 <p>111</p>
    <p>222</p>
    <div id="d2">div
        <span>444</span>
        <p>div>p
            <span id="d1">div>p>span</span>
        </p>
        <span>333</span>
    </div>
    <p>555</p>
    <p>666</p>

let $dEle = $("#d2")

下个元素

>>$dEle.next()  #下一个元素
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
>>$dEle.nextAll() #下一个全部元素
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]
>>$dEle.nextUntil() #下一个全部元素
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]

上个元素

>>$dEle.prev()
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
>>$dEle.prevAll()
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]
>>$dEle.prevUntil()
jQuery.fn.init(2) [p, p, prevObject: jQuery.fn.init(1)]

父亲元素

>>$dEle.parent()  #父元素
jQuery.fn.init [body, prevObject: jQuery.fn.init(1)]
>>$dEle.parent().parent() #父元素的父元素
jQuery.fn.init [html, prevObject: jQuery.fn.init(1)]
>>$dEle.parent().parent().parent()#父元素的父元素的父元素
jQuery.fn.init [document, prevObject: jQuery.fn.init(1)]
>>$dEle.parent().parent().parent().parent()
jQuery.fn.init [prevObject: jQuery.fn.init(1)]

#注意：可多次调用jQuery方法，体现出jQuery的链式操作的特点，底层原理就是（调用此方法并返回此方法，然后就可以连续调用此方法）

儿子和兄弟元素

>>$dEle.children()  #子元素
jQuery.fn.init(3) [span, p, span, prevObject:jQuery.fn.init(1)]
>>$dEle.siblings() #兄弟元素
jQuery.fn.init(4) [p, p, p, p, prevObject: jQuery.fn.init(1)]

>>$dEle.children().prevUntil()  #子元素的上一个元素
jQuery.fn.init(2) [p, span, prevObject: jQuery.fn.init(3)]

'''链式操作的底层原理'''
底层原理就是（调用此方法并返回此方法，然后就可以连续调用此方法）
对象调用方法之后还会返回一个对象,从而实现链式操作的效果

class MyClass(object):
    def func1(self):
        print('from func1')
        return self
    def func2(self):
        print('from func2')
        return self

    def func3(self):
        print('from func3')
        return self
obj = MyClass()
obj.func1().func2().func3()

操作标签

比较jQuery和js操作

jQuery操作	JS操作	说明
addClass()	classList.add()	添加类名
removeClass()	classList.remove()	删除类名
hasClass()	classList.contains()	判断是否存在类名
toggleClass()	classList.toggle()	有，则删除；无，则添加；
.css(‘样式名’,’样式值’)	style.样式名 = ‘样式值’	样式添加
text()	innerText()	添加文本
html()	innerHTML()	添加文本+html格式
val()	value	值
[0].files	files	标签对象获得文件

jQuery操作	JS操作	说明
attr()	setAttribute() getAttribute()	静态属性(浏览器操作的属性查找不到，只能识别底层代码)
prop()		动态变换(checked)(专门对动态属性判断)
append()	append()	对标签内容尾部添加
prepend()		被选元素的开头插入指定内容
after()		被选元素的后面插入指定内容
before()		在被选元素之前插入指定的内容

remove()	移除标签	从DOM中删除所有匹配的元素。
empty()		清空标签	 删除匹配的元素集合中所有的子节点。只清空标签内的子节点，不移除标签，只留个框架。

位置操作（jQuery）

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

scrollTop(0)	表示元素移到顶部

了解跟多jQuery可以参考：https://www.runoob.com/jquery/html-prepend.html

jQuery绑定事件

JS绑定事件

标签对象.on事件名 = function(){事件代码}
btnEle.onclick = function(){alter(123)}

jQuery绑定事件

方式一：
	jQuery对象.事件名(function(){事件代码})
    $btnEle.click(function(){alter(123)})
方式二：
	jQuery对象.on('事件名',function(){事件代码})
    $btnEle.on('click',function(){alter(123)})
    
如果使用方式一绑定事件如果无法触发，可以切换方式二。

事件案例

鼠标悬浮事件

<p>王一博：我大摩托呢？？？</p>

 <script>
        $('p').hover(
        function () {
            alert('肖战真的帅，我是真的迷死他啦')
        },
        function () {
            alert('王一博怕了，好好对待他！！')
        }
    )
</script>

鼠标悬浮在上面会弹出弹出两句提示框。

克隆事件

 
  <button id="d1" class="c1">克隆体</button>
  <script>
        let $btnEle = $('#d1');
        $btnEle.click(function () {
            // this指代的是当前被操作的标签对象,
            //如果想调用jQuery的方法,需要转换 $()
            $('body').append($(this).clone(true))
        })
    </script>

input监听事件

<input type="text" id="d1">

    <script>
        $('#d1').on('input', function (){
            console.log(this.value)
        })
    </script>
    
输入每个字的变化，都会被实时地校验。

阻止后续事件

能够触发form表单提交数据动作的标签有两个
	<input type="submit">
    <button></button>
给已经有事件的标签绑定事件，会先执行绑定的，再执行默认的。
我们可以将默认的事件不执行就用：return false / e.preventDefault()

$(':submit').click(function (e)){
    alter('哈喽嗨咯！！！！')
    // return false	方式1
    e.preventDefault()	方式2
}

事件冒泡

<div>大
        <p>中
            <span>小</span>
        </p>
    </div>

    <script>
        $('div').click(function (e) {
            alert('我是大')
        })
        $('p').click(function (e) {
            alert('我是中')
            //e.stopPropagation()
        })
        $('span').click(function (e) {
            alert('我是小')
            // return false
        })
    </script>
'''
如果没有 retrun false 或者 e.stopPropagation 阻止后续事件发生的话，点击小，可连续触发小事件提示框，连带则中和大事件也触发，因为小包括在中，大事件里面。所以向冒泡一样出来。阻止后续事件触发，当前事件可执行后续事件不可执行。
'''

事件委托

创建标签的两种方式：
	JS：document.createElement()
    jQuery：	$('<标签名>')
事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托

<div>
    <button>点我123</button>
    <button>点我321</button>
</div>
    <script>
        // $('button').click(function () {
        //     alert('button按钮 天下无敌')
        // })
        $('div').on('click','button',function () {
            alert('你犯困的样子萌萌哒')
        })
    </script>
    
'''
将该标签内部的点击事件全部委托给内部给内部一个标签去实现动态标签也能生效。
'''

jQuery动画效果

<!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>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0
    }, 3000)
  })
</script>
</body>
</html>

bootstrap入门

Bootstrap框架

提前写好所有的标签样式，直接拷贝使用即可。
使用之前需要先导入bootstrap涉及到js的部分需要使用jQuery.
网址：http://www.fontawesome.com.cn/
bootstrap中文文档：https://v3.bootcss.com/
最初是为Bootstrap而设计的，现在Font Awesome适用于所有框架。

注意:响应式布局就是根据浏览器窗口大小，自动展示局部。

布局容器与栅格系统

栅格
表格
表单
按钮

全局css样式

框架组件

js插件

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/python/282931.html

学习python-Day49

今日内容

作业

筛选器的方法

操作标签

jQuery绑定事件

事件案例

鼠标悬浮事件

克隆事件

input监听事件

阻止后续事件

事件冒泡

事件委托

jQuery动画效果

bootstrap入门

Bootstrap框架

相关推荐

发表回复