黑马程序员技术交流社区

标题: [石家庄校区]JavaEE 前端笔记 [打印本页]

作者: 小强皮厚    时间: 2017-11-18 23:08
标题: [石家庄校区]JavaEE 前端笔记
本帖最后由 小强皮厚 于 2017-11-25 16:01 编辑

CSS:界面美化(重点)
JS:轮换图
JQurey:对JS的包装
BootStrap:相当于UI
serviet:处理前端和数据库的业务逻辑
重要的标签div a span i

HTML:Hyper Text Markup Language 超文本标记语言
标记语言:指的是通过一组标签的形式描述事物的语言
作用:展示网页数据

空格
原样显示<pre></pre>
html5:对标签的增强,对CSS的一个增强,JavaScript的增强

无序列表
<ul style = "list-style : none;">(清除小圆点)
        <li>内容</li>
</ul>
超链接标签:
<a href = "" target = "_self">百度(显示的文字)</a>
href:链接的路径
target:打开的方式
两个值:
_self:在自身页面打开
_blank:新窗口打开
_parent:有框架的时候用

align:表格水平位置 :left center right
单元格里可以嵌套表格

合并单元格:
colspan = "列数"
rowspan = "行数"


表单标签:<form>
表单元素:
<input type = "text" name = "username" value = "zhanghao" placeholder = "请输入用户名">(文本框)
常用属性:
name:表单元素的名称.必须有这个属性,后台才可以接收数据
value:文本框里的默认值.
size:文本框的长度
maxlength:文本框里最大输入长度
readonly:只读文本框

<input type = "password">(密码框)
<input type = "radio">(单选按钮)
checked:默认选中
<input type = "checkbox">(多选按钮)
checked:默认选中
<input type = "button" value = "普通">(普通按钮,没有任何功能的按钮)
<input type = "submit" value = "注册">(提交按钮)
<input type = "reset" value = "重置">(重置按钮)
<input type = "file">(文件上传)
<input type = "hidden">(隐藏域,一般是主键)
<input type = "image">(引用图片覆盖按钮)

<select>:下拉列表
<option>--请选择</option>
<option value = "">--北京</option>
selected:默认选择
<option value = "">--上海</option>
</select>

<textarea cols = "4" rows = "20">:文本域(多行输入)
我是...(默认值)
<textarea>

form上的属性
action:数据要提交的路径,默认提交到当前的页面
method:提交的方式,get和post,默认是get,get没有post安全,post没有大小限制
        get:数据会显示到地址栏中.get方式提交是有大小限制的
        post:数据不会显示到地址栏中.post方式提交的是没有大小限制


背景相关
        背景颜色 background-color:red;
        背景图片 background-image:"url(xx.png)";
        背景重复 background-repeat:no-repeat;
        背景位置 background-position
        背景缩写 background:颜色 图片  重复方式  位置
        背景大小 background-size:

边框
        边框样式 border-style:none/solid;        
        边框宽度 border-width:
        边框简写 border:1px solid black
        
文本
        左右对齐 text-align:center/left/right
        去除下划线 text-decoration:none
        上下居中 line-height=100px; height=100px;
字体
        字体大小 font-size:12px;
        字体:font-
        family:"微软雅黑";
        字体加粗: font-weight:400px;
        字体样式:font-style:normal/italic
        简写 :font: style weight size family.常用的是font: size family
        颜色 : color:red
列表
        list-style:none
1.常用标签 <div> <span> <ul> <a> <i>
2.块级元素和行内元素
        块级元素:独占一行,可以修改高度和宽度    div  块级元素转行内元素添加属性display:inline;
        行内元素:不独占一样,不可以修改高度和宽度 span  行内元素转块级元素添加属性display:block;
        行内块级元素:不独占一行,并且可以修改高度和宽度 img display:inline-block;
3.table和div布局的区别
        div更加灵活并且解析加载速度快
4.CSS引入方式
        引入外部css文件:多个HTML文件中使用了相同的样式
<link rel="stylesheet" type="text/css" href=""/>
        页面内样式:同一个HTML文件中多个标签共用这个样式
<style type="text/css">
                        
        </style>
        行内样式:只有某个标签自己使用
5.选择器的优先级
        ID选择>类选择器>标签选择器
5.1 复合选择器
        子孙元素选择器  div a{}
        子元素选择器 div > a{}
        属性选择器 标签名[属性名='属性值']{}        
-------------------------------------------------------------
6.
/*清除浮动样式*/
                        .clearfix:before,
                        .clearfix:after {
                        content: "";
                        display: table;
                        }
                        
                        .clearfix:after {
                        clear: both;
                        }
                        
                        .clearfix {
                        *zoom: 1;
                        }        
-------------------------------------------------------------
7.CSS中的继承问题
        在CSS中宽度是可以继承,高度不可以继承
        注意:浮动以后的元素是不会继承宽度的
        
8.div居中  margin:0 auto;
9.百分比和PX的计算 calc(100% - 45px);注意事项:减号的两边必须有空格
10.盒模型
        外边距:盒子与盒子的距离 margin
        内边距:padding
        宽度计算方式 padding-left + padding-right + border-left + border-right + content;

11.定位
        position        
                        absolute :绝对定位 默认相对于body
                        relative :相对定位 默认相对于父元素
                        只需要记住使用的时候:子绝父相
                        <body>
                                <!--需求:里面的小盒子定位是absolute,想要根据外面div的盒子设置左右距离-->
                                <div style="width: 500px;height: 500px;background-color:aqua;margin-left: 30px;position:relative"> <!-- 父元素相对定位 -->
                                        <div style="width: 100px;height: 100px;background-color: red;position:absolute;top:0;left:0"><!-- 子元素绝对定位 -->
                                                
                                        </div>
                                </div>
                        </body>
                        
                        fixed : 制作广告的时候使用
                        <body>
                                <div style="height: 200px;width: 100px; background-color: #000000;position:fixed;right: 0;top:30px;"></div>
                        </body>

12.伪类
        :link :visited :hover :active 顺序不能乱,href属性中必须有值,记忆方法是 驴哈


通过ID属性获取dom对象
document.getElementById("")
通过Name属性的值获取dom对象
document.getElementsByName("")
通过样式名获取dom对象
document.getElementsByClassName("")
修改输入框里面的数据
document.getElementById("输入框的ID").value = "";
获取图片对象的图片地址
document.getElementById("").src
修改背景色
document.getElementById("").style.backgroundColor = 'red';
设置多选框为选中状态
document.getElementById("").checked=true;
创建标签对象
document.createElement("div")
创建文本对象
document.createTextNode("文本")
给id="a"的div添加一个子div
document.getElementById("a").appendChild(document.createElement("div"));
给id="a"的div添加文字"你好"
document.getElementById("a").appendChild(document.createTextNode("你好"));
document.getElementById("a").innerHTML = "你好";
删除id="tb"的表格的第一行
document.getElementById("tb").removeChild(document.querySelectorAll("tr")[0])
将字符串转成整型和浮点型
var intNum = parseInt("123");
var floatNum = parseFloat("123");
给定字符串"alert(1)",请将该字符串运行起来
eval("alert(1)");
每隔5S输出一次"班主任真漂亮"
setInterval(function(){
        console.log("班主任真漂亮");
},5000)
提交表单触发事件
<form action="">

onchange select下拉框的值改变时触发
1.基本语法
        定义变量 var 变量名 = 值;
        变量名:局部变量(定义在方法内部的变量)我们以_开头。
        给变量赋予默认的值
                如果是基本类型 var num = undefined;
                如果是引用类型 var person = null;
        在控制台打印变量 console.log(变量名);
        定义对象 var person = {
                                                        name:"张三",
                                                        age:14,
                                                        gender:'女'
                                                   }
        定义方法(函数) function 方法名(){}
                                   function 方法名(name,id){}
                                   function (){} //匿名方法,当作为方法的实际参数的时候使用
        方法的调用
                                   方法名();
        null和undefined报错问题
                Cannot read property 'name' of undefined   原因是调用了undefined.name
                Cannot read property 'name' of null         原因是调用了null.name
        
        
2.事件  注意函数必须加()
        ;
      
      
      
         在HTML文本加载完毕后请求图片资源,图片请求回来后执行onload事件

3.定时器
        var timer = setInterval("JS代码",毫秒值)
        var timer = setInterval(function(){},毫秒值);//常用
        clearInterval(timer);
4.CSS显示和隐藏元素的两种方式
        display:block;none;  隐藏后不占位
        visibility:visible;hidden; 隐藏后占位

JS操作属性
        obj.value = "";
        obj.style.样式名 = "";
        obj.src = "";
        obj.属性名 = "值"
        
debug:
        1.打开控制台,查看console是否有错误信息
        2.如果有错误信息,可以直接定位哪里有问题
        3.如果没有错误信息,我们需要打开source,查看源代码,加断点
        4.找事件,根据事件名字找到对应的方法 比如 那我们就可以找到方法是show                方法
        5.在show方法的第一行加断点
        6.仔细观察代码是走到哪一行报错的,并记录下来
        7.通过watch查看出问题的那一行的变量

事件冒泡:
元素里面有元素,且两个元素绑定相同的事件,里面元素触发该事件,外面的元素也会被触发该事件,事件从里到外触发
        
<div style="background-color: red; height: 400px;width: 400px;position: absolute;top:0">
<div style="background-color: green;height: 200px;width: 200px;margin-                left: 100px;margin-top:100px"></div>
</div>

                        function clickOuter(){
                                console.log("外面的div标签被点击了");
                        }
                        function clickInner(){
                                event.stopPropagation();
                                console.log("里面的div标签被点击了");
                        }
               



注意区分JS对象和JQ对象
只有通过$()拿到的才是JQuery对象,其他的都不是。
JQuery对象,实际上是DOM数组,我们操作JQuery对象,实际就是操作里面的每一个元素
--------------------------------------------
JQquery与DOM对象的转换
        JQuery=>DOM $("div")[0]
        DOM=>JQuery  $(dom对象);
---------------------------------------------
注意参数之间的符号
$(function(){
        $("tr:odd").css('background','red');
});
使用jquery删除和添加样式
$("tr:odd").addClass('bg-gray');
$("tr:even").removeClass('bg-red');
---------------------------------------------
        工具类   EXTJS
        框架 AngularJS  Angular  Vue
---------------------------------------------
jquery元素的显示和隐藏
        show()
hide()
选择器
        ID,类,标签,并列,
子孙,子
------------------------------------------------
        prop() :非自定义属性
        attr() :自定义属性
htm()l:覆盖原有文本
val():获取元素的value
------------------------------------------------        
DOM操作
        A.append(B)
        $().each(function(index, element){
        
        });
事件绑定
$().onClick();
-----------------------------------------------------                        
$("button").on('click',function(){
        $("ul").append('<li>棒球棒</li>')
});

获取动态添加的li元素的文本                                                                                
$("ul").on('click','li',function(){
        var _this = $(this);
        alert(_this.html());
});
获取复选框被选中的元素
$("input[type='checkbox']:checked")        
        
通过!!值可以把值转换为bool类型,对于字符串而言如果不是空串值就是true(!!"abc"==true),空串就是false(!!""==false)

triggerHandler的使用,
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作,也不会产生事件冒泡。
这个方法的行为表现与trigger类似,但有以下三个主要区别:
* 第一,他不会触发浏览器默认事件。
* 第二,只触发jQuery对象集合中第一个元素的事件处理函数。
* 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。此外,如果最开始的jQuery对象集合为空,则这个方法返回 undefined 。
find(),查询元素
搜索所有与指定表达式匹配的元素。
parent(),父元素
children(),子元素




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2