前端六

• 作业讲解
• jQuery更多操作(属性、样式、数据值)
• jQuery绑定事件
• jQuery简易动画效果
• Bootstrap页面框架

今日内容详细

作业讲解

尝试编写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','大爷下次再来哟')
        }

筛选器方法

$("#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()  静态属性			setAttribute() getAttribute()
prop()	动态变换(checked)

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
 	"""

阻止后续事件

能够触发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/