本帖最后由 小石姐姐 于 2018-5-4 09:46 编辑
HTML、CSS、JS、JQuery学习笔记
HTML
什么是HTML:
HTML:Hyper Text Markup Language --- 超文本标记语言.
标记语言：指的是通过一组标签的形式描述事物的一门语言.
超文本：比普通的文本更强大.
HTML的作用
HTML是用来制作页面(静态页面)。
HTML在那些地方使用
在设计网站的页面的时候都要使用到HTML。
HTML的标签
HTML的结构标签
跟标签：<html></html>
<head>----html的头标签
<body> -- html的体标签
HTML的字体标签
<font>标签:HTML中的字体标签
使用：<font>文字</font>
<font>标签的属性:color属性:字体颜色、size属性:字体的大小、face属性:字体
HTML的排版标签
标题标签：h标签 <h1>...<h6>
段落标签：p标签 <p>内容</p>
字体加粗标签：b 标签 <b>内容</b>
字体斜体标签：i 标签 <i>内容</i>
字体下划线：u 标签 <u>内容</u>
居中标签：<center>标签 <center>内容</center>
<pre>标签：原生标签
<hr/>标签：横线 <br/>换行
HTML的图片标签
图片标签:<img>
属性:
src 图片的来源
width 图片的宽度
height 图片的高度
alt 图片找不到显示的内容
图片的引入的路径问题:
路径：相对路径.
如果引入的图片和html文件在同一级路径。
直接写文件名或者./文件名
<img src="cs10006.jpg" />
<img src="./cs10006.jpg" />
如果引入的图片在html文件的上一级路径。
<img src="../cs10006.jpg" />
如果引入的图片在html文件的下一级路径。
<img src="img/cs10086.jpg" />
HTML的列表标签
有序列表
type属性：
1：数字类型
a：英文类型
i：罗马字符
start属性：从哪开始
<ol>
<li></li>
</ol>
无序列表
type属性：
disc：实心点
circle：空心点
square：方块
<ul>
<li></li>
</ul>
HTML的超链接标签
HTML的超链接标签：<a>
属性：
href：链接的路径
target：打开的方式
_self：在自身页面打开
_blank：新打开一个窗口
_parent:
HTML的表格标签
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
left
center
right
<td>的属性:
colspan=”列数”
rowspan=”行数”
HTML的表单标签
HTML的表单标签：<form>
常用属性:
action属性:提交的路径.默认提交到当前页面
method属性:请求的方式.GET和POST.默认是GET.
GET方式和POST方式的区别
GET:数据会显示到地址栏中.GET方式提交是有大小的限制.
POST:数据不会显示到地址栏中.POST方式提交的是没有大小限制.
HTML中表单元素：
<input type=”text”> :文本框.
常用属性:
name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
value :文本框的默认值.
size :文本框的长度.
maxlength:文本框输入的最大长度.
readonly:只读文本框.
<input type=”password”> :密码框.
常用属性:
name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
value :密码框的默认值.
size :密码框的长度.
maxlength:密码框输入的最大长度.
<input type=”radio”>:单选按钮.
常用的属性:
name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
value :单选按钮的默认值.
checked:单选按钮默认被选中.
<input type=”checkbox”> :复选按钮.
常用的属性:
name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
value :单选按钮的默认值.
checked:单选按钮默认被选中.
<input type=”button”> :普通按钮.没有任何功能的按钮.
<input type=”submit”> :提交按钮.
<input type=”reset”> :重置按钮.
<input type=”file”> :文件上传的表单项.
<input type=”hidden”> :隐藏字段.
<input type=”image”> :图片按钮
<select> :下拉列表.
<option value=“值”>下拉内容</option>
<textarea> :文本域.
cols:宽
rows:高
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:在一行显示
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.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:遍历出来的每一个
});
|
|
收藏
淘帖
踩
