前端笔记3
2021-11-11 13:40:50 0 举报AI智能生成
结合了JQuery、bootSto响应式框架以及display:flex布局技术的前端笔记3来啦！不过，这三样技术靠深层一些，前端萌新极度不建议购买
作者其他创作
大纲/内容
概念：JQuery是js的一个库。其实就是把js里面的一些常用的方法拿出来进行封装了一下，方便直接使用，说白了就是一个框架
先引用JQuery插件库才能进行使用
使用
$(document).ready(function(){}）
$(function(){})
js的入口函数执行比jq的入口函数要晚一些
jq的入口函数等待网页加载完成之后才开始执行 但是不会等待图片的加载
js的入口函数等待页面加载完成之后 并且等待图片加载完成才开始执行
js入口函数会覆盖 普通函数也会覆盖
jq可以写多个入口函数 并且不会覆盖
入口函数对比
入口函数
相当于window.onload = function(){}
语法要比js简单，粗暴
查找元素方法多 简单灵活
拥有隐式迭代特性，不用写for循环
兼容性好，因为jq已经做了兼容了
优点
注意：jq和js语法不能混用，但是可以写部分的js代码
初识
语法：$(\" 参数 \") : 参数不同功能也不同
获取格式：$获取dom元素是一个数组
类名获取：$(\".div\")
id获取：$(\"#div\")
标签名获取：$(\"div\")
后代选择器获取：$(\"#div p\")
子代选择器获取：$(\"#div>p\")
交集选择器获取：$(\"#div.pop\")
并集选择器获取：$(\
选择器获取
通过索引取偶数：$(\"li:even\")
通过索引取奇数：$(\"li:odd\")
大于某个索引：$(\"li:gt(2)\")
小于某个索引：$(\"li:lt(3)\")
通过属性获取：$(\"a[aaa=123]\")
组节点获取
子代获取：$(\"ul\").children(\"span\") 【相当于子代选择器】
后代获取：$(\"ul\").find(\"li\") 【相当于后代选择器】
获取除自己之外的所有兄弟节点：$(\"#first\").siblings(\"li\")
获取下一个兄弟节点：$(\"#four\").next()
获取上一个兄弟节点：$(\"#four\").prev()
获取父节点：$(\"#first\").parent()
通过索引获取：$(\"li\").eq(4)
方法获取
获取节点
语法：$(\"li\").mouseenter(function(){})
mouseover：会触发事件冒泡
mouseenter：不会触发事件冒泡
mouseleave：鼠标移出
鼠标移入移出事件
鼠标移入
语法：$(\"li\").show()
显示节点：show() 【相当于style.display = \"block\"】
隐藏节点：hide() 【相当于style.display = \"none\"】
显示/隐藏
在JQ事件里面，this相当于当前触发事件的单个元素
this
语法：$(\"#div\").index()
作用：返回当前元素所在的索引值
index()
slideUp()：划入效果
slideDown()：划出效果
初始动画
添加/修改单个属性：$(\"参数\").css(\"属性名\
$(\"参数\").css(\"属性名1\
$(\"参数\").css({ \"属性名1\":\"属性值\
添加/修改多个属性
添加css样式
常用1
参数1：slow(慢)/fast(快)/毫秒
参数2：linear(匀速)、ease(逐渐慢下来)、ease-in(由慢到快)、ease-in-out(先慢到快再到慢)、cubic-bezier(该值允许你去定义一个时间曲线)
参数3：是一个回调函数
参数
语法：$('dom元素')，animate({参数1}，参数2，参数3，参数4)
参数1：定义的css样式（对象格式【必填】）
参数2：速度（slow、fast、毫秒）
参数3：过渡：linear（匀速)、swing（缓速）【默认】
参数4：是一个回调函数
自定义动画animate()
概念：在JQuery中，动画按顺序执行，且需要执行完毕当前动画后才能执行后面的动画
参数1(true/false)：是否清除队列 默认false
参数2(true/false)：是否跳转到当前动画的最终状态 默认false
动画队列
动画
height过度
scale()、opacity过度
opacity过度
var li=$(\"<li>我是新创建的li</li>\")
创建节点并设置内容
$('ul').append(li)
li.appendTo($(\"ul\"))
加到后面
$('ul').prepend(li)
li.prependTo($('ul'))
加到前面
添加节点
$('ul').empty() 删除所有的子节点
empty() 移除被选元素的所有子节点和内容
删除节点
$(\"<h1>我是新创建实现修改操作的</h1>\").replaceAll($('.box2 p:eq(0)'))
replaceAll() 修改替换
修改节点
参数true/false 默认false
将box3下面的p克隆到box3下面
$(\".box3\").append($(\".box3 p\").clone(true))
clone()克隆节点
克隆节点
获取内容
text()
获取内容级标签名
html()
text&html
DOM操作
可以获取属性也可以设置属性
$(\"img\").attr(\"src\
操作布尔类型属性 主要用于表单按钮选择上单选全选
$(\"#cd\").prop(\"checked\
属性操作
$(\"li\").addClass(\"bigger\")
添加类名 addClass
$(\"li\").removeClass(\"bigger\")
移除类名 removeClass
$(\"li\").toggleClass(\"bigger\")
切换类名 toggleClass判断有没有这个类名，如果 有就移除，如果没有就移除
Class操作
使用：$()元素.事件名( 执行函数 )
click()：鼠标单击
dblclick()：鼠标双击
mouseenter()：鼠标移入
mouseleave()：鼠标移出
hover()：可以写两个函数，相当于鼠标移入/移出
鼠标事件
keydown()：键盘按下
keypress()：键盘点击
keyUp()：按键抬起
键盘事件
submit()：表单提交时
change()：表单元素值改变时
focus()：获取焦点时
blur()：失去焦点时
表单事件
load()：元素加载时
resize()：浏览器窗口改变时
scroll()：窗口滚动时
unload()：离开页面时
窗口/文档事件
解绑事件：$(元素).unbind(' 事件名 ')
事件绑定/解绑
事件
JQuery
响应式：需要在<head></head>里加入<meta name=\"viewport\" content=\
container：版心
container-fluid：宽度100%的盒子
布局容器
概要
定义：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
行(row)：必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中
xs- 超小屏幕 手机 (<768px)
sm- 小屏幕 平板 (>=768px)
md- 中等屏幕 桌面显示器 (>=992px)
lg- 大屏幕 大桌面显示器 (>=1200px)
列(col-)
最后的取值在1—12之间
列溢出：如果在一个 .row 内包含的列大于12个，包含多余列的元素将作为一个整体单元被另起一行排列
列偏移：使用.col-md-offset- 可以将列向右偏移
栅格系统
Bootstrap
概念：部分浏览器html支持1rem=16px的单位换算，并且会随着页面的缩放而进行改变
使用：在初始化设置时，为html设置font-size:62.5%; 可以实现1rem=10px的简易单位换算
1，响应式单位rem
1，概念：lex布局意为\"弹性盒子\"，用来为盒状模型提供最大的灵活性，设为Flex布局以后，子元素的float、clear、vertical-align属性会失效display:fiex 是一种布局方式 它既可以应用于容器中，也可以应用于行内元素
容器（flex-container）：采用flex布局的元素被称为容器
项目（flex-item）：在flex布局中的子元素被称为项目
2，内容
作用：容器内元素的排列方向(默认横向排列)绝对子元素的方向
row(默认值):沿着水平轴让元素从左往右排列
row-reverse:沿着水平轴让元素从右往左排列;
column:沿着垂直轴从上往下垂直排列
column-reverse:沿着垂直轴从下往上垂直排列
取值
flex-direction
作用：容器内元素换行(默认不换行)绝对子元素的方向
nowrap(默认):不换行
wrap:换行
wrap-reverse:换行，倒着排列，从下往上
flex-wrap
作用：是flex-direction与flex-wrap的复合型简写
flex-flow
作用：元素在主轴(页面)水平居中排列
flex-start(左对齐)
flex-end(右对齐)
center(居中对齐)
space-between(两端对齐，项目之间间隔相等)
space-around(每个项目两侧间隔相等)
justify-content
flex-start(垂直居上对齐)
flex-end(垂直居下对齐)
center(垂直居中对齐)
baseline(项目的第一行文字的基线对齐)
stretch(默认值，如果项目没有设置高度或者auto，将沾满整个容器)
align-items
3，容器常用属性
设置项目的排序位置，默认是0，数值越小越靠前
order
用来控制当前项目是否放大显示，默认0，表示即使容器有剩余空间也不放大，如果设置为1，则平均分摊后放大显示
flex-grow
默认为0，若为1则等比显示
flex
4，项目常用属性
2，flex布局
flex布局
前端笔记3
0 条评论
回复 删除
下一页
