目录

上周作业

页面定时器案例：
	有一个input框
	两个按钮：开始 结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
计时器：<input type="text" id="input">
<button id="start">开始</button>
<button id="stop">结束</button>
<script>
    // 1.找按钮标签
    let btnEle1 = document.getElementById('start')
    let btnEle2 = document.getElementById('stop')
    let inpEle = document.getElementById('input')
    // 定义一个全局变量存储循环定时任务
    let t = null;
    // 将展时间的代码单独封装成一个函数
    let func1 = function () {
        // 获取当前时间
        let time = new Date()
        // 转为格式化时间，便于用户查看，将格式化时间添加到input框中
        let n = time.toLocaleTimeString()
        inpEle.value = n
    }
    console.log(inpEle)
    // 给开始按钮绑定一个点击事件
    btnEle1.onclick = function () {
        if (!t) { // 判断全局变量是否为空
            t = setInterval(func1, 1000)
        }
    }
    // 给结束按钮绑定一个点击事件
    btnEle2.onclick = function () {
        clearInterval(t)
        t = null; // 把全局变量清空
    }
</script>

搜索框案例
	input内有默认的文本值
	用户一旦选择该input想做内容修改
	就提前把内容清空
<body>
    <p><input type="text" id="d1"></p>
    <p><button id="d2">dian!</button></p>
    <script>
       let inpEle = document.getElementById('d1')
       inpEle.onfocus = function (){
           this.removeAttribute('placeholder')
        }
       inpEle.onblur = function (){
           this.setAttribute('placeholder','欢迎下次光临')
        }
    </script>
</body>

筛选器方法

1.链式操作的 底层原理

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

2.方法说明

方法 说明
$(“#id”).next() 查找当前元素的下一个
$(“#id”).nextAll() 查找当前元素的下面所有的
$(“#id”).nextUntil(“#i1”) 查找当前元素的所有的下一个元素，直到遇到匹配的那个元素
$(“#id”).prev() 查找当前元素的上一个
$(“#id”).prevAll() 查找当前元素的上面所有的
$(“#id”).prevUntil(“#i1”) 查找当前元素的所有的上一个元素，直到遇到匹配的那个元素
$(“#id”).parent() 查找当前元素的父辈元素
$(“#id”).parents() 查找当前元素的所有父辈元素
$(“#id”).parentsUntil(#i2) 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素
$(“#id”).children(); 查找当前元素的儿子们
$(“#id”).siblings(); 查找当前元素的兄弟们

操作标签

jQuery操作 JS操作 说明
addClass() classList.add() 添加指定class类名
removeClass() classList.remove() 移除指定class类名
hasClass() classList.contains() 判断是否存在类名，返回值为true 、false；
toggleClass() classList.toggle() 切换CSS类名，如果有就移除，如果没有就添加
.css(‘样式名’,’样式值’) style.样式名=’样式值’ 修改样式
text() innerText() 文本内容
html() innerHTML() html内容
val() value 值
[0].files files 文件
attr() setAttribute()
getAttribute()		 静态属性
prop() 动态变换(checked)
append() append() 向每个匹配的元素内部追加内容
prepend() 被选元素的开头插入指定内容。
after() 每个匹配的元素之后插入内容
before() 每个匹配的元素之前插入内容
remove() 移除标签
empty() 清空标签

位置操作

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

'''
offset()方法：
	允许我们检索一个元素相对于文档的当前位置
position()方法：
	是相对于父级元素的位移
'''

文本操作

1.HTML：
html()	# 取得第一匹配元素的html内容
html(val)	# 设置所有匹配元素的html内容
2.文本值：
text()	# 取得所有匹配元素的内容
text(val)	# 设置所有匹配元素的内容
3.值
val()	# 取得第一个匹配元素的当前值
val(val)	# 设置所有匹配元素的值
val([val1,val2])	# 设置多选的checkbox、多选select的值

文档处理

$(A).append(B) 	# 把B追加到A
$(A).appendTo(B)	# 把A追加到B
$(A).prepend(B)		# 把B前置到A
$(A).pretendTo(B)	# 把A前置到B
$(A).after(B)	# 把B放到A的后面
$(A).insertAfter(B)	# 把A放到B的后面
$(A).before(B)	# 把B放到A前面
$(A).insertBefore(B)	# 把A放到B前面
remove()	# 从DOM中删除所有匹配的元素
empty()		# 删除匹配的元素集合中所有的子节点

jQuery绑定事件

<!--JS绑定事件-->
标签对象.on事件名 = function(){事件代码}
	btnEle.onclick = function(){alert(123)}
<!--jQuery绑定事件-->
方式一：
	jQuery对象.事件名(function)(){事件代码}
	$btnEle.click(function)(){alert(123)}
方式二：
	jQuery对象.on('事件名',function(){事件代码})
	$btnEle.on('click',function(){alert(123)})

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
	<!--方式二 e.preventDrfault()-->
})

事件冒泡

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

事件委托

'''
创建标签的两种方式
JS:
	document.createElement()
jQuery:
	$('<标签名>')
'''

事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托
$('div').om('click','button',function(){
    alert('加油加油加油')
})
上述方式就可以解决动态标签事件的执行问题（注意委托指的是标签内部的标签）

Bootstrap框架

http://www.fontawesome.com.cn/

提前写好了所有的标签样式，直接拷贝即可
使用之前需要先导入，bootstrap涉及到js的部分需要用到jQuery
布局容器
栅格系统
全局css样式
组件
版权声明：本文为Zhang614原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/Zhang614/p/16637498.html