浮动
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1 {
width: 180px;
height: 100px;
background-color: red;
float: left;
}
.div2 {
width: 100px;
height: 120px;
background-color: blue;
float: left;
/*clear: left;*/
}
.div3 {
width: 200px;
height: 90px;
background-color: cyan;
float: left;
}
.div4 {
width: 150px;
height: 100px;
background-color: yellowgreen;
/*clear: both;*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</body>
div是块级元素，一个div在页面中独占一行，多个div自上而下排列，也就是传说中的标准流中的div。
那么如何做到在一行显示多个div元素呢? 浮动来处理。其核心功能是解决水平布局问题。
浮动可以理解为让某个div元素脱离标准流， 漂浮在标准流之上，下一个元素顶替位置，和标准流不是一个层次。
(1) div2浮动，脱离标准流，div1、div3、div4仍然在标准流当中，div3会自动向上移动，占据div2的位置，重新组成一个流。
(2) div2, div3都浮动。
重点 当同时对div2、div3设置浮动之后，div3会跟随在div2之后。div2在每个例子中都是浮动的，但并没有跟随到div1之后？
结论 若某个div元素A是浮动的，如果它上面元素也是浮动的，那么A会跟在上一个元素的后面，如果一行放不下这两个元素，那么A元素会被挤到下一行；如果它的上个元素在标准流中，那么A元素的相对垂直位置不会改变，即A的顶部会和上个元素的底部对齐。
所以， div2, div3都浮动，不再属于标准流，div4会自动上移，与div1组成一个“新”标准流，因设置宽高可能会被遮挡。
clear:left 是消除浮动产生的影响。如此例中，div2中使用了，它仍然是在div1的垂直位置下方，这方面相当于没用浮动似的，但其实是漂浮在标准流上的，其他元素可以顶替其位置。div3,div4仍是标准流中的元素，依旧会向上顶替float元素的位置。
HTML DOM事件
焦点事件 获取焦点 onfocus 失去焦点 onblur
鼠标事件 鼠标按下 onmousedown， 鼠标弹起 onmouseup，鼠标移动onmousemove , 鼠标移到某元素上onmouseover 鼠标从某元素移开 onmouseout
键盘事件 键盘按下，onkeydown, onkeypress 键盘弹起 onkeyup
点击事件 单击 onclick 双击 ondblclick
值发生变化事件 onchange
提交事件 onsubmit
加载事件 onload
重置按钮被点击 onreset
onunload
HTML DOM 元素节点 添加和删除，替换节点（HTML 元素） https://zixuephp.net/manual-javascript-720.html
javascript 嵌入到html网页方式：
(1)外部定义js文件,不要写 script标签(可以远程，可以本地)，通过script标签引入
(2)网页中直接通过script标签定义代码块 javascript代码放在script标签中.script标签可以放在html的任何地方，一般建议放在head标签里.
<script type="text/javascript" src="jquery/jquery3.4.1.min.js"></script>
<script type="text/javascript">
//在这里面写你的js代码
</script>
数据类型
Number 数字 BigInt(存储很大的数值) 数值后加n,或BigInt(数值);
String 字符串
Boolean 布尔值
Object 对象 Array 数组 Function RegExp Date Json
Undefined
Null
java中类型 + 变量名，js 中通过关键字var + 变量名 ，变量声明时不需要说明类型，并且可以随时赋值改变数据类型。var可以省略
console.log(); console.log(“sname 的类型：” + (typeof sname)) alert("");
//定义Array
var nums = [34,true,"hello"];
//遍历数组
for(var idx in nums){
//console.log(idx);//输出的是下标
console.log(nums[idx]);//输出的是值
}
for(var i = 0; i < 10; i++) {
// 循环10次
}
var stu = ''; 0
if(stu){
console.log(true);
}else{
console.log(false);
} //false
//定义一个简单的function，模拟java中的方法
<script type="text/javascript" >
function simple(){
alert("普通方法");
}
simple();
console.log((typeof simple)); //function
var simple2 = function(){
}
---------------------------------------------------
</script>
//自调用函数
(function sayHello(sname){
alert("你好" + sname);
})("zhangsan");//函数内定义变量只在function内作用
(function sayHello(sname,win){
alert("你好" + sname);
console.log(sname);
win.sname = sname;
})("zhangsan",window);//提升了sname的作用域
sname="lisi";
console.log(sname);
----------------------------------------------------
模拟java中的类，以及创建对象
<script>
function Student(sname,age){
this.sname = sname;
this.age = age; //属性public,把属性绑定到对象上
var gender = "保密"; //属性是private
this.sayName = function(){
console.log(this.sname);
}
this.getGender = function(){
return gender;
}
this.setGender = function(gender1){
gender = gender1;
}
}
var stu = new Student("zhangsan",19);
console.log(stu.age);
console.log(stu.sname);
console.log(stu.gender); //undefined
console.log(stu.getGender());
stu.setGender("女");
console.log(stu.getGender());
</script>
定义对象2 var stu = {name:"zhangsan" , sex:"男" , age:22, score:98.5};
console.log(stu.name);
JQuery
1.Jquery与js的关联：
1.js是网页脚本语言，类似java是一种开发常用语言；
2.jQuery是基于js语言封装出来的一个前端框架；
所以最本质的区别是js是一种语言，而jQuery是基于该语言的一种框架。
**Jquery是js类库，是对原生js的封装。**要使用Jquery需要导入一个第三方的javascript库，
jQuery本质上就是一段普通的JavaScript代码， 通常使用引入外部JS的方式来使用jQuery
<script type="text/javascript" src="js/jquery.js"></script>
基础语法： $(selector).action()
- 美元符号$定义 jQuery
- 选择符（selector）“查询"和"查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
实例:
- $(this).hide() - 隐藏当前元素
- $(“p”).hide() - 隐藏所有p元素
- $(“p.test”).hide() - 隐藏所有 class=“test” 的p元素
- $("#test").hide() - 隐藏所有 id=“test” 的元素
( f u n c t i o n ( ) 实 际 上 是 匿 名 函 数 。 这 是 J Q u e r y 的 语 法 ， (function(){ }实际上是匿名函数。这是JQuery的语法， (function()实际上是匿名函数。这是JQuery的语法，表示JQuery对象，可以有好几种用法。比如传递选择器字符串、页面对象等，如果直接传函数体进去，表示当页面加载完毕时执行这个函数。
<script>
$(function(){
$("#b1").click(function(){
$("#d").hide();
});
$("#b2").click(function(){
$("#d").show();
});
});
<button id="b1">隐藏div</button>
<button id="b2">显示div</button>
<br>
<div id="d">这是一个div</div>
jquery选择器 $(selector)
selector是选择器表达式，语法基本和CSS选择器一致。
$(“tagName”) 根据 标签名 选择所有该标签的元素，如 $(“div”)
$("#id")根据 id 选择元素 $("#d1")
( " . c l a s s N a m e " ) 根 据 c l a s s 选 择 元 素 如 (".className") 根据 class 选择元素 如 (".className")根据class选择元素如(".test")
( " s e l e c t o r 1 s e l e c t o r 2 " ) 选 择 s e l e c t o r 1 下 的 s e l e c t o r 2 元 素 。 如 ("selector1 selector2") 选择 selector1下的selector2元素 。如 ("selector1selector2")选择selector1下的selector2元素。如(“div#d3 span”) ， 选择id=d3的div下的span元素
( s e l e c t o r : f i r s t ) 满 足 选 择 器 条 件 的 第 一 个 元 素 ， 如 (selector:first) 满足选择器条件的第一个元素，如 (selector:first)满足选择器条件的第一个元素，如(“div:first”)
( s e l e c t o r : l a s t ) 满 足 选 择 器 条 件 的 最 后 一 个 元 素 ， (selector:last) 满足选择器条件的最后一个元素， (selector:last)满足选择器条件的最后一个元素，(“div:last”)
jquery属性
(1)通过attr()获取一个元素的属性（支持自定义属性)
(2)通过attr(attr,value)修改属性
(3)通过removeAttr(attr)删除属性
<script src="jquery/jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
alert("align属性是:" + $("#h").attr("align") );
$("#h").attr("align","right") ;
$("#h").removeAttr("align");
});
$("#b2").click(function(){
alert("game属性是:" + $("#h").attr("game") );
});
});
</script>
<button id="b1">获取align属性</button>
<button id="b2">获取自定义属性 game</button>
<br>
<br>
<h1 id="h" align="center" game="LOL">居中标题</h1>
jquery事件
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keypress | submit | load 图片加载 |
| dblclick | keydown | change | resize |
| mouseenter鼠标进入 | keyup | focus | scroll |
| mousemove | blur | unload | |
| mouseout | * |
jquery效果
显示 隐藏 切换 分别通过show(), hide(),toggle()实现
向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现
淡入 淡出 切换 指定淡入程度 分别通过fadeIn(), fadeOut(), fadeToggle() fadeTo()实现
通过animate 可以实现更为丰富的动画效果
animate()第一个参数为css样式
animate()第二个参数为延时毫秒，div.animate({left:‘100px’},2000);
easyui 前端框架。 封装了jQuery、Vue等前端JS框架，还提供了一套完善的UI组件，比如窗体、表单、表格、树、进度条、手风琴菜单
使用步骤:
1.下载easyui;
2.引入easyui相关的js,css;
<head>
<link rel="stylesheet" type="text/css" href="css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="css/themes/icon.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script src="js/locale/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script>
</head>
3.需要有一个html标签
比如说：
使用datagrid组件需要添加：
<table id="xxx"></table>
或者创建标签时一并指定样式：
<table id="xxx" class="easyui-datagrid"></table>
4.给标签添加相应的easyui样式(可选)
比如：
按钮
<a class="easyui-linkbutton">EasyUI按钮</a>
窗口
<div class="easyui-window" title="EasyUI窗口"></div>
5.调用easyui相关js方法来初始化。设置组件参数(可选)
// 无参数初始化一个组件
$(selector).组件();
//比如初始化一个日期选择控件
<div id="calendar"></div>
$("#calendar").calendar();
// 有参数初始化一个组件
$(selector).组件({参数key/value形式});
// 示例参见下面的数据表格使用方法
// 调用组件的某个方法
$(selector).组件('组件的方法名');
// 例如：调用窗口的打开方法
$("#win").window('open');
layui前端框架，封装jquery和一套完整的组件样式。
使用步骤：
1.引入layui相关的js,css
<link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
<script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
2.添加样式，或引入js模块
LayUI中的组件分为两种：
一种不要引入单独的模块，直接给原生的DOM元素添加class样式即可，比如按钮、小图标（印章）
另一种需要引入LayUI相关的模块，比如弹出层layer。
练习：轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>轮播图 淡入淡出效果</title>
<style type="text/css">
#img_container{
margin: 0 auto;
margin-top: 100px;
width:745px;
height:410px;
border: 1px solid silver;
position: relative;
}
#img_container img{
position: absolute;
/*z-index: 1;*/
transition: all 1s;
}
.show{
opacity: 1;
}
.hide{
opacity: 0;
}
</style>
</head>
<body>
<div id="img_container">
<img class="hide" src="img/t23.jpg" />
<img class="show" src="img/t54.jpg" />
<img class="hide" src="img/t68.jpg" />
<img class="hide" src="img/t74.jpg" />
</div>
<script type="text/javascript">
var imgs = document.querySelectorAll("#img_container img");
var size = imgs.length;
var idx = 1;
function show(n){
for(var i = 0; i < size; i++){
imgs[i].className="hide";
}
imgs[n].className="show";
}
function begin(){
if(idx > size){
idx = 1;
}
if(idx < 1){
idx = size;
}
show(idx - 1);
console.log("当前显示的是第" + idx + "个");
idx++;
}
var timerId = setInterval(begin,2000);
</script>
</body>
</html>
534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
