文章目录
一.JavaScript基础
1.JavaScript的嵌入
1.1内部引用
- 放在head标签内部
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="javascript">
document.write("VSCode编辑javascript！")
</script>
<title>Document</title>
</head>
- 放置于标签内
<body>
<script language="javascript">
alert("提示information");
</script>
</body>
两个要点：
- 在script标签内部
- language = “javascript”
Note：浏览器读取网页代码的顺序：从上到下
head会在页面加载之前加载到浏览器中，body标签中会在页面加载之后再读取
1.2外部引用
外部引用JavaScript文件：
<font color="#FF0000" size="18"><script language="javascript"
src="testjs.js"></script></font>
1.3内联引用
通过html中事件属性实现，可以理解为事件调用JavaScript程序
<input type="button" value="单击调用" onclick="alert('你单击了该按钮');">
2.语法规则
命名规则
- 第一个字母必须是字母/下划线/美元符号，除第一个外可以是前面的加上数字
- 字母可以包括中文
- 大小写敏感
数据类型
- 数值型 Number
- 字符串型 String var s = new string(“ada”);
- 布尔型Boolean
- 未定义类型（表示变量不含值）
当变量未初始化时
当变量未定义时
函数无明确返回值时返回Undefined
- 空值型：没有指向对象的指针
Note:HTML name id class的区别
name
name作为可传递给服务器表单变量名，username=‘text的值’
input type='radio’单选标签：把几个单选标签的 name设为一个相同值时，将会进行单选操作
name属性的值，在当前page页面中并非唯一性
id
页面中指定标签的唯一标识
class
指定标签的类名
css，把一些特定的样式放到一个class类中，需要此样的样式就可把此类加
可以把多个类，放在一个class属性里，但必须用空格隔开；如：class=‘btnsubmit btnopen’
3.流程控制
javascript中可以通过document中的各个组件的id获取组件，并作出动作。
文档🔗
4.javascript中变量作用域
4.1局部变量
只能在函数内部访问，函数执行完毕后，变量会被删除
4.2全局变量
函数外声明的变量可以被网页上所有的脚本和函数访问，页面结束，变量终结了
二.CSS样式表
1.选择器
css的基本语法
selector {property: value; , property: value}
1.1标签选择器
<style>
p{
color: rebeccapurple;
font-size: 18px;
}
</style>
其可以置于head标签内
1.2类选择器
对网页中部分标签进行设置一样的样式，给这些标签起一个类名，
分两步：
- 给标签定义新别名
- 网页中未对应标签使用类选择器
<标签 class=“新别名”>
1.3ID选择器
在HTML中需要唯一标识一个元素时，就会赋予它一个ID，以便对文档处理时能够很快找到这个元素。ID选择器可以对这一单一元素定义一个独特的样式。格式如下：
#新别名{属性：值； 属性：值}
#one{
color: sandybrown;;
font-size: 18px;
}
#two{
font-size: 30px;
flood-color: royalblue;
}
<p class="one">选择器one</p>
<p>选择器与标签选择器1</p>
<p class="two">选择器two</p>
<p class="three">选择器</p>
<p id="one" >ID选择器one</p>
<p id="two">ID选择器</p>
1.4其他选择器
- 派生选择器
当仅仅欲对某一元素中的子元素进行样式指定时，派生选择器就派上用场，指定选择器中一个元素包含后一个元素，元素之间使用空格作为分隔符。
<style type="text/css">
p b{
font-size: 18px;
text-decoration: underline;
}
</style>
<body>
<p>
嵌套<b>用了css样式</b>标签的method
</p>
<b>wei qiantao</b>
</body>
</html>
-
伪类
不是选择器，为了让页面呈现丰富的特殊属性，其指定的对象在文档中并不存，是元素的某种状态- 未访问的状态（a:link）
- 已访问状态（a:visited）
- 鼠标悬停在连接上的状态（a:hover）
- 被激活（点击与释放之间发生的事件）的链接状态（a:active）
-
群选择器
如需要为多个元素使用相同的设定，使用群选择器，将选择器全写在一起，逗号隔开
h2.special, .special, #one{
font-size: 18px;
}
//h2.special表示标签为h2，类名为special的元素
- 通配符选择器
表示对所有元素使用同一的内容样式设置
* {
color: purple;
font-size: 18px;
}
2.css的使用方法
2.1行内样式
<p style="color: red; font-size: 25px; font-weight: bold; font-style: italic;">嵌入式</p>
2.2内嵌式
<style type="text/css">
body{
cursor: pointer;
}
.charal{
font: optional;
background-color: #90bcff;
}
.charal td{
text-align: center;}
a:hover{
color: #ffff00;
text-decoration: underline;
}
h2.special, .special, #one{
font-size: 18px;
}
</style>
```
## 2.3链接式
testcss.css文件为
```css
h2{
color: #0000ff;
}
p {
color: #ff00ff;
text-decoration: underline;
font-weight: bold;
font-size: 22px;
}
html代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="testcss.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>紫色</p>
<h2>css标题</h2>
</body>
</html>
标签的格式需要的时候才会以链接的方式导入
2.4导入样式
<style type="text/css">
@import url(testcss.css)
</style>
作为文件的一部分，初始化时一起导入HTML文件
3.css应用
3.1长度单位：
绝对长度：in（英寸），cm（厘米），mm（毫米），pt（1/72英寸）
相对长度：em-当前字体尺寸，ex-当前字体尺寸一半，px-一个像素
3.2 css字体
font-family（字体名称）
font-size（字体大小）
font-style（样式效果）默认/倾斜/偏倾斜
font-weight（字体粗细）normal/bold/bolder/lighter/100-900
font-variant（字体较小但小写变成大写）small-caps/normal
3.3 css设置文本
color 颜色
direction 文本方向
line-height：行高
text-align：水平对齐方式
text-decoration：文字装饰
text-transform：转换字母大小写
word-spacing：单词间距
text-indent：文本缩进
letter-spacing：字符间距
3.4 css设置图像
border-style:边框风格样式dotted，dashed（虚线）
border-color
border-width：边框的宽度
img.test1{
border-style: dotted;
border-color: #000088;
border-width: 6px;
}
<img src="C:\Users\ZDH\Pictures\Saved Pictures\西安.jpg" class="test1">
css设置背景
background-color
background-image
background-repeat（重复背景图）
background-position（x, y)
background-attachment（scroll/fixed固定）
list-style
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
<body>
<p>无序列表实例:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
三.DOM
DOM基础
document object model
浏览器中基于dom的html分析器，把一个页面转化成一个对象模型的集合，JavaScript可以在任何时候访问html文档中的一部分数据。每个HTML页面都是一个document，而document对象是window对象的一部分。通过window.document对其进行访问。
常用函数
write
createElement(tag)
getElementById(id)
getElementByClassName(class)
Note：window.onload()函数：用于在网页加载完毕后立刻执行的操作，即当 HTML 文档加载完毕后，立刻执行某个方法。
window.onload() 通常用于 body 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码
javascript代码是顺序执行的，可能执行JavaScript代码时某些DOM元素尚且没有加载出来。
四.jQuery
1.jQuery基础
1.1 选择器
$(“h2 a”)表示选择h2标签下的所有子标签a
$("#Div1")
$(".someClass")
$(“p:odd”)
所有位于基数行的p标签
$(“td:nth-child(1)”)
$(“li>a”) li标签下的子元素
按照属性查找：
var email = $(’[name=email]’);
var names =
(
′
[
n
a
m
e
('[name
(′[name=with]’); // 找出所有name属性值以with结尾的DOM
多样选择器
$('p.red,p.green'); // 把<p class="red">和<p class="green">都选出来
window.onload函数的jQuery写法
$(function(){
});
1.1.1层级选择器
如果两个DOM元素具有层级关系，就可以用$(‘ancestor descendant’)来选择，层级之间用空格隔开。
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出，因为<div>和<li>不构成父子关系
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
