黑马程序员技术交流社区

标题: 【石家庄校区】Web学习笔记（1-5） [打印本页]

---

作者: 李时珍的皮~    时间: 2018-5-3 15:43
标题: 【石家庄校区】Web学习笔记（1-5）

第1天 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>

第2天 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:在一行显示

第3天 JS

ECMASCRIPT:
语法记跟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.getElementById():只能获得到一个元素

​        document.getElementsByName();获得的是元素的一个集合

创建元素：

​        document.createElement():创建元素

​        document.createTextNode():创建文本

添加元素：

​        element.appendChild()

移除元素：

​        element.removeChild()

第4天和第5天 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