Web前端（一）

1..HTML概述:

HTML: Hyper Text Markup Language 超文本标记语言

超文本: 比普通文本功能更加强大,可以添加各种样式

标记语言: 通过一组标签.来对内容进行描述. <关键字> , 是由浏览器来解释执行

<!--
    1. 上面是一个文档声明 
    2. 根标签 html
    3. html文件主要包含两部分. 头部分和体部分
        头部分 : 主要是用来放置一些页面信息
        体部分 : 主要来放置我们的HTML页面内容
    4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
    5. 标签不区分大小写, 官方建议使用小写
-->

p标签: 段落标签

br标签: 简单换行

h1-h6: 标题标签

hr标签: 水平分割线, 华丽的分割线

font标签: color属性改变颜色 , size

b标签: 加粗

i标签: 斜体

strong标签: 带语义的加粗

em标签: 斜体标签,带语义

img标签: 图片标签 显示图片

​ src: 指定图片路径(相对路径)

​ width: 宽度

​ height: 高度

​ alt: 图片加载失败时的提示

相对路径:

​ ./ 代表当前路径

​ ../ 代表的是上一级路径

​ ../../ 代表的是上上一级路径

ul标签: 无序列表

ol标签: 有序列表

li标签: 列表项

a标签: 超链接标签:

​ target: 打开方式

​ href: 指定要跳转的链接地址

table标签: table > tr > td

tr标签: 行

td标签: 列

​ 合并行: rowspan

​ 合并列: colspan

网站注册案例:

​ form 标签: 表单标签,主要是用来向服务器提交数据

​ method: 提交方式 get post

​ action : 提交的路径

​ input 标签:

​ type:

​ password: 密码框

​ text : 文本

​ submit: 提交

​ button: 普通的按钮

​ reset: 重置按钮

​ radio: 单选按钮 设置name属性让它们是一组

​ checkbox: 复选按钮

​ email:

​ date:

​ tel:

frameset : 框架标签

​ rows:

​ cols:

frame:

2.css

CSS: 层叠样式表

主要作用: 美化页面, 将美化和HTML进行分离,提高代码复用性

选择器:

​ 元素选择器: 元素的名称{}

​ 类选择器: . 开头

​ ID选择器: #ID选择器

​

​ 后代选择器: 选择器1 选择器2

​ 子元素选择器: 选择器1 > 选择器2

​ 选择器分组: 选择器1,选择器2,选择器3{}

​ 属性选择器: 选择器[属性的名称=’属性的值’]

​ 伪类选择器:

浮动:

​ float 属性: left right

清除浮动:

​ clear 属性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向

​ 内边距: 控制的盒子内距离

​ 边框: 盒子的边框

​ 外边距: 控制盒子与盒子之间的距离

绝对定位: position : absolute; top: left

3.js

JS开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译

JS声明变量: var 变量的名字;

JS声明函数: function 函数的名称(参数的名字){}

JS开发的步骤:

1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作,  弹框, 修改页面内容,动态去添加一些东西

定时器:

​ setInterval clearInterval

​ setTimeout clearTimeout

显示: img.style.display = “block”

隐藏: img.style.display = “none”

img 对象

​ style属性: style对象

使用JQuery完成表格的隔行换色

获得所有的行

​ table.rows[]

修改行的颜色

​ row.bgColor =”red”

​ row.style.backgroundColor = “black”

​ row.style.background = “red”

​ “background-color:red”

​ “background:red”

使用JQuery完成复选框的全选效果

checked属性

如何获取所有复选框:

​ document.getElementsByName get Elements By Name 数据库里面

使用JQuery完成省市联动效果

​ JS中的数组: [“城市”]

​ new Array()

​ DOM树操作:

​ 创建节点: document.createElement

​ 创建文本节点: document.createTextNode

​ 添加节点: appendChild

使用JQuery完成下列列表左右选择

​ select下拉列表

​ multiple 允许多选

​ ondblclick : 双击事件

​ for循环遍历,一边遍历一边移除出现的问题

使用JQuery完成表单的校验(扩展)

​ 事件:

​ 获得焦点事件: onfocus

​ 失去焦点事件: onblur

​ 按键抬起事件: onkeyup

​ 鼠标移入: onmouseenter

​ 鼠标移出: onmouseout

​ JS引入外部文件 : script

4.Jquery

write less do more 写更少的代码,做更多的事情 javascript函数库

基本选择器:

​ ID选择器: #ID名称

​ 类选择器: .类名

​ 元素选择器: 元素的名称

​ 通配符选择器: * 找出页面上所有元素

​ 选择器分组: 选择器1,选择器2 [选择器1 , 选择器2]

层级选择器:

​ 后代选择器: 选择器1 选择器2 找出来的选择器1 下面的所有选择器2 子孙

​ 子元素选择器: 选择器1 > 选择器2 找出来的是所有的子节点 儿子

​ 相邻兄弟选择器: 选择器1+选择器2 找出来的紧挨着自己的弟弟

​ 兄弟选择器: 选择器1~选择器2 找出所有的弟弟

​ (找出所有兄弟: $(“div”).siblings() )

属性选择器:

选择器 div
选择器[title]
选择器[title='test']
选择器[title='test'][style]

基本的过滤器: 选择器:过滤器 $(“div:first”)

​ :first : 找出第一个元素

​ :last 找出最后一个元素

​ :even 找出偶数索引

​ :odd 找出奇数

​ :gt(index) greater-than大于

​ :lt(index) 小于

​ :eq(index) 等于

表单选择器:

​ :input 找出所有的输入项, textarea select button

​ :password

​ :text

​ :radio

表单对象属性的过滤器

​ :selected

​ :checked

常用函数:

​ 属性prop() properties

​ 如果传入一个参数 就是获取

​ prop(“src”,”../img/1.jpg”);

​ 设置图片路径

​ attr : 操作一些自定义的属性

​ prop: 通常是用来操作元素固有属性的 ,建议大家使用prop来操作属性

​ css() ; 修改css样式

​ addClass() : 添加一个class样式

​ removeClass() : 移除

​

​ blur : 绑定失去焦点

​ focus: 绑定获得焦点事件

​ click:

​ dblclick

​ change

​

​ append : 给自己添加儿子

​ appendTo : 把自己添加到别人家

​ prepend : 在自己子节点最前面添加子节点

​ after : 在自己后面添加一个兄弟

​ before: 在自己前面添加一个兄弟

​

​ $(“数组对象”).each(function(index,data))

​ $.each(arr,function(index,data))

​