黑马程序员技术交流社区

标题: 学习总结 [打印本页]
作者: 呐喊。    时间: 2018-5-3 15:35
标题: 学习总结
本帖最后由 呐喊。 于 2018-5-3 15:52 编辑

石家庄校区学习总结分享

HTML
表单标签
<form action="表单数据提交的地址" method="提交的方式：方式有很多，常用的get,post">
    get/post提交的区别：
        1.数据在地址栏是否显示
        2.提交的数据是否有大小的限制
   
    表单元素：
        表单的输入：input
                    根据type属性的不同有不同的输入类型
         <input type="text" name="" value="默认值"/>
         <input type="password" name="" value="默认值" maxLength="输入的最大的长度"/>
   
         <input type="radio" name="" value="提交到后台的值" checked="checked"/>
         <input type="checkbox" name="" value="提交到后台的值" checked="checked"/>
         <input type="file" name="" /> 文件上传
         <input type="submit"  value="是显示在按钮上的字"/>
         <input type="reset"  value="是显示在按钮上的字"/>
         <input type="button"  value="是显示在按钮上的字"/>
        表单文本域：textarea
            <textarea name="" rows="几行" cols="几列"></textarea>
        表单下拉列表：select
            <select  name="">
                <option value="提交到后台的值"></option>
             </select>
   
</form>表格<table>
    <tr>
        <td  colspan="" rowspan=""></td>
    </tr>
</table>
​
单元格的合并：
    只要找准跨行还是跨列图片
<img src="图片的地址：目前相对路径的写法，总是要找相对的位置  ./ 代表当前的路径  ../ 回到上一层的路径 "/>超链接
<a href="要跳转的一个地址" target="打开的方式：_self  _blank">链接</a>CSS三种引入的方式及其优先级关系
1.行内样式：直接在标签上写style属性，
2.页面内样式：在head标签内写style标签，在style标签中写样式
3.外部样式：定义外部样式文件，.css文件，然后在html中 引入即可，引入的用link
优先级关系：就近原则
选择器
1.元素选择器：直接写标签名  div{  }
2.ID选择器：使用#号    #id名称{ }
3.类选择器：使用.  .类名{ }
4.后代选择器：使用空格   div #id1{ }
浮动和清除浮动
浮动：
​        float
清除浮动：
​        clear
盒子模型和定位
盒子模型：
​        外边距：margin
​        边框：border
​        内边距:padding
定位：position,left,top
​        position:
​                absolute
​                fixed
显示和隐藏
display:
​        block:显示
​        none:隐藏
​        inline:在一行显示
JSECMASCRIPT:语法
记跟java语法不一致的地方：
​        弱变量类型的语言：                体现在变量的声明上:var
​        ===：全等：类型和值都相等的时候才为true
内置对象：
​        Date：
​                new Date().getTime():毫秒值/缓存
js中的事件：以on开头
​        鼠标类：
​                onclick:单击
​                ondblclick:双击
​                onmouseover:鼠标在某个元素上面
​                onmousemove:移动
​                onmouseout:离开
​        键盘类：
​                onkeyup:弹起
​        焦点类：
​                onfocus:获得焦点
​                onblur:失去焦点
​        表单提交：
​                onsubmit
​        页面的加载：
​                onload
​        下拉列表的改变：
​                onchange
BOM：浏览器对象模型
window:
​        setInterval()/clearInterval()
​        setTimeout()/clearTimeout()
​        alert()：一般做调试用
​        confirm()：确认框
​        prompt()：可输入的对话框
​        open():打开一个小窗口
history:
​        history.go(-1)/history.back()
location:
​        location.href="":可以用作页面的跳转
DOM：文档对象模型
document:
​        整个html文档加载到内存中可以用document对象表示
element:
​        标签
attribute:
​        标签上的属性
text:
​        文本
获得页面的元素：
​        document.getElemenById():只能获得到一个元素
​        document.getElementsByName();获得的是元素的一个集合
创建元素：
​        document.createElement():创建元素
​        document.createTextNode():创建文本
添加元素：
​        element.appendChild()
移除元素：
​        element.removeChild()
Jquery核心
jQuery的方法只能由jQuery的对象调用
核心的函数：$()
​        括号里面可以写：
​                1.选择器
​                2.原生的Js对象
​                3.数组
入口函数：

$(function(){
   
});
​
$(document).ready(function(){
   
});选择器
1.id选择器

$("#自定义的id名称")
2.类选择器

$(".自定义的类名")
3.元素选择器

$("直接写元素名称")
4.后代选择器

$("form input") 使用空格
5.属性选择器

$("input[属性名称=属性值]")
6.表单对象属性
:checked  单选/复选
:selected  下拉列表
效果函数
基本的显示和隐藏：show()/hide()
向下/上滑动：slideDown()/slideUp()
淡入/淡出:fadeIn()/fadeOut()
jQuery改变页面元素样式的两类方式
1.通过css()函数：适用于样式代码比较少的情况
2.addClass()/removeClass()/toggleClass():适用于样式事先定义好的情况
jQuery操作元素属性
attr()/prop()

$("#id").prop("src")  获得属性的值
$("#id").prop("src","da") 修改属性的值
$("#id").prop({"":"","":""}) 一次性修改多个属性html/text/val
html()/text()/val()

$("#id").html();获取元素里面的html代码
$("#id").html("<span>da</span>") 用括号里面的内容覆盖原有的内容，可以在里面写html标签
​
$("#id").text();获取元素里面的文本
$("#id").text("<span>fada</span>");用括号里面的内容覆盖原有文本内容，如果写了html标签不会被识别为html
​
$("#id").val():获取元素value属性的值
$("#id").val("afda") 用括号里面的内容去设置元素value属性jQuery的文档操作
1.append()
2.appendTo()
3.insertBefore()
4.insertAfter()
5.empty()
6.remove()
事件
跟原始的事件是一致的，只不过是去掉on：focus,blur,click,dblclick,mouseover,mousemove,mouseout,keyup,keydown,keypress,submit,change

$("#id").click(function(){
   
});
$("#id").on("click",function(){
   
});
$("#id").bind("click",function(){
   
});
​
事件的委托：delegate()
$("#id").delegate(".aaa","click",function(){
   
});
​
鼠标悬停的事件：hover
1.如果鼠标悬停只想有样式的效果：可以使用CSS的伪类
2.除了样式的效果还有别的业务逻辑的操作,hover函数jQuery的遍历
$("img").each(function(i,n){
    i:遍历的下表
    n:遍历出来的每一个
});
$.each(object,function(i,n){
    object:待遍历的数组
    i:遍历的下表
    n:遍历出来的每一个
});查找/过滤
1.parent()
2.find()
3.is()






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