Day 55
今日内容概要
- 一.jQuery更多操作
- 1.筛选器方法
- 2.操作标签
- 3.jQuery事件
- 4.jQuery动画效果
- 二.Bootstrap页面框架
今日内容详细
一.jQuery其他操作
1.筛选器方法
$("#id").next() //找同级别下一个标签
$("#id").nextAll() //找同级别下所有标签
$("#id").nextUntil("#i2") //找同级别下所有标签,直到#i2就不拿了
$("#id").prev() //找同级别上一个标签
$("#id").prevAll() //找同级别上所有标签
$("#id").prevUntil("#i2") //找同级别上所有标签,直到#i2就不拿了
$("#id").parent() //找父标签
$("#id").parents() // 找当前标签的所有的父标签
$("#id").parentsUntil() // 找当前标签的所有的父标签,直到遇见匹配的那个标签为止。
$("#id").children();// 查找所有儿子标签
$("#id").siblings();// 查找所有兄弟标签
'''链式操作的底层原理'''
对象调用方法之后还会返回一个对象可以再次调用,所以实现了链式操作的效果
eg:
$("#id").parent().parent().parent() //找父父父标签
#或查找一下标签然后赋值来点
let $pEle=$('#d1')
$pEle.parent().parent() //找父父父标签
——————————————————————————————————————————————————————
可以在一行同时改多行的样式
$pEle.parent().css('color','blue').parent().css('color','red') //找父父父标签
2.操作标签
1.操作标签类：
| jQuery操作 |
JS操作 |
作用 |
| addClass(); |
classList.add() |
添加类名 |
| removeClass(); |
classList.remove() |
删除类名 |
| hasClass(); |
classList.contains() |
判断类名是否存在 |
| toggleClass(); |
classList.toggle() |
有则移除，没有则添加 |
2.操作标签样式：
| jQuery操作 |
JS操作 |
作用 |
| .css('样式名','样式值') |
style.样式名 = '样式值' |
设置样式的格式 |
3.操作标签文本：
| jQuery操作 |
JS操作 |
作用 |
| text() |
innerText() |
添加文本 |
| html() |
innerHTML() |
添加文本+html格式 |
| val() |
value |
获取值 |
| [0].files |
files |
获取标签内的文件值 |
4.操作标签属性：
| jQuery操作 |
作用 |
JS操作 |
| attr() |
静态属性(针对动态变换的属性无法判断) |
setAttribute()
getAttribute() |
| prop() |
动态变换(checked) |
|
5.操作标签文档处理：
| jQuery操作 |
作用 |
| $(A).append(B) |
把B追加到A |
| $(A).prepend(B) |
把B前置到A |
| $(A).after(B) |
把B放到A的后面 |
| $(A).before(B) |
把B放到A的前面 |
| remove() |
移除标签 |
| empty() |
清空标签 |
6.位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
scrollTop(0) 表示元素移到顶部（常用于滚动条）
3.jQuery事件
1.事件绑定
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)})
"""
如果方式1绑定事件如果无法触发 可以切换为方式2
"""
2.阻止后续事件
能够触发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>
给已经有事件的标签绑定事件 会先执行绑定的 再去执行默认的
我们也可以让标签之前的事件不执行：需要加 return false
#方式一：
<script>
$(':submit').click(function (){
alert('一定要细心 千万不要慌!!!')
return false
})
</script>
————————————————————————————————————————————————————————————
#方式二：
<script>
$(':submit').click(function (e){
alert('一定要细心 千万不要慌!!!')
e.preventDefault()
})
</script>
3.事件冒泡
涉及到标签嵌套并且有相同事件的时候,就会逐级往上反馈并执行这就是事件冒泡。
#方式一：
<script>
$("span").click(function () {
alert("span");
return false;
});
</script>
————————————————————————————————————————————————————————————
#方式二：
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation()
});
</script>
4.事件委托
"""
创建标签的两种方式
1.JS
document.createElement('标签名')
document.createElement('button')
2.jQuery
$('<标签名>')
$('<button>')
"""
事件绑定默认情况下是不会对动态创建的标签生效的 如果想生效需要事件委托
$('标签名').on('事件','选择器',function(){
alert('xxxxx')
})
#将标签接收到的所有事件全委托给选择器查找到的标签去执行
'上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)'
————————————————————————————————————————————————
<body>
<div>
<button>按钮1</button>
<button>按钮2</button>
</div>
<script>
$('div').on('click','button',function (){
alert('这是事件委托')
})
</script>
</body>
5.克隆事件
<body>
<button id="d1" class="c1">阿巴阿巴</button>
<script>
let $btnEle=$('#d1');
$btnEle.click(function(){
//this指代的是当前被操作的标签对象 如果想调用jQuery的方法 需要转换$()
$('body').append($(this).clone(true))//加true就是连该标签的事件也一起克隆
})
</script>
</body>
6.悬浮事件
// 鼠标悬浮上去和移开各自触发一次
$('#d1').hover(function () {alert(123)})
// 如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)}, # 鼠标悬浮时触发
function () {alert(123)} # 鼠标移走时触发
)
7.监听事件
<!DOCTYPE html>
<html lang="en">
<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>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化，
* 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
4.jQuery动画效果
基本：
show() // 展示
hide() // 隐藏
toggle() // 如果在展示中就隐藏起来,如果是隐藏状态就展示出来
滑动：
slideDown() // 向下滑动
slideUp() // 向上
slideToggle() // 判断状态如何取反
淡入淡出：
fadeIn() // 淡入
fadeOut() // 淡出
fadeToggle() // 判断状态如何取反
自定义：（了解即可）
animate(p,[s],[e],[fn])
案例：点赞动画
<!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="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
二.Bootstrap页面框架
提前写好了所有的标签样式 直接拷贝使用即可
使用之前需要先导入bootstrap涉及到js的部分需要使用jQuery
网址：http://www.fontawesome.com.cn/
bootstrap中文文档：https://v3.bootcss.com/
最初是为Bootstrap而设计的，现在Font Awesome适用于所有框架。
#响应式布局就是根据浏览器窗口大小，自动展示局部。
布局容器与栅格系统
1.栅格
2.表格
3.表单
4.按钮
全局css样式
框架组件
js插件
作业
1.整理今日内容及博客
2.熟悉bootstrap框架
3.复习一下socket模块及http协议 准备明天的django知识
浙公网安备 33010602011771号