一、清除浏览器样式
/*Reset CSS*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
二、box-sizing 规定多个并排的带边框的框
div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}
/*
a、content-box 默认的盒子尺寸计算方式。
b、border-box 置盒子的尺寸计算方式为从边框开始,盒子的尺寸,边框和内填充算在盒子尺寸内
c、inherit 规定应从父元素继承 box-sizing 属性的值。
*/
三、CSS 浏览器兼容
-moz- /* Firefox */
-webkit- /* Safari */
四、响应式布局
1、head部分viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
2、使用CSS3媒体查询@media 查询
@media 类型 and (条件1) and (条件二)
{
css样式
}
例:
@media screen and (max-width:980px ) {
body{
background-color: red;
}
}
3、其他的一些注意点
3.1.不使用绝对宽度,不能指定像素宽度:width:xxx px;只能指定百分比宽度:width: xx%;或者width:auto;
3.2.使用相对大小的字体rem而不是px,父级元素未指定字体尺寸,则em相对的是浏览器默认的字体尺寸(16px)。
3.3.使用流式布局(fluid grid)
.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
3.4.清除浮动的四种方法
1.父级添加overflow: hidden;
子元素浮动了,会造成父元素的高度坍塌。只要给父元素添加overflow: hidden;属性,就可以解决浮动带来的影响。
2.通过属性clear:both;达到清除浮动的目的;
3.通过给父级元素添加伪类after,达到清除浮动的目的(使得页面结构更简洁);
4.使用双伪类;(和3原理一样,代码更简洁)。
.cc:after,
.cc:before {
content: "";
display: block;
clear: both;
}
3.5.图片的自适应(fluid image)
img { max-width: 100%;}
五、弹性盒模型布局 display:flex
Flex实例:https://www.ruanyifeng.com/blog/2015/07/flex-examples.html
六、CSS选择器(备忘)
选择器 | 例子 | 例子描述 |
---|---|---|
* | * | 选择所有元素。 |
element,element | div, pdiv, p | 选择所有
元素和所有
元素。选择所有 元素和所有
元素。 |
element>element | div > p | 选择父元素是
的所有
元素。 |
element+element | div + p | 选择紧跟
元素的首个
元素。 |
element1~element2 | p ~ ul | 选择前面有
元素的每个
|
[attribute] | [target] | 选择带有 target 属性的所有元素。 |
[attribute=value] | [target=_blank] | 选择带有 target="_blank" 属性的所有元素。 |
:active | a:active | 选择活动链接。 |
:checked | input:checked | 选择每个被选中的 元素。 |
:disabled | input:disabled | 选择每个被禁用的 元素。 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个
元素。 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个
元素。 |
::first-line | p::first-line | 选择每个
元素的首行。 |
:focus | input:focus | 选择获得焦点的 input 元素。 |
:not(selector) | :not(p) | 选择非
元素的每个元素。 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个
元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 |
:only-child | p:only-child | 选择属于其父元素的唯一子元素的每个
元素。 |
::placeholder | input::placeholder | 选择已规定 "placeholder" 属性的 input 元素。 |
::selection | ::selection | 选择用户已选取的元素部分。 |
:target | #news:target | 选择当前活动的 #news 元素。 |
七、CSS函数(备忘)
-
calc() :计算元素的宽度/高度
width: calc(100% - 100px);
-
cubic-bezier() :定义三次贝塞尔曲线(Cubic Bezier curve)。
/*从开始到结束变速的过渡效果:*/ div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1); }
-
linear-gradient() :将线性渐变设置为背景图像。定义至少两种颜色(从上到下)。
#grad { background-image: linear-gradient(red, yellow, blue); }
-
radial-gradient() :将径向渐变设置为背景图像。定义至少两种颜色(从中心到边缘)。
-
rgba():定义不同的带不透明度 RGB 颜色(RGBA)
八、CSS使用自定义字体
@font-face{
font-family: test;
src:url('./方正胖头鱼简体.ttf');
}
p{
font-family: test;
}
九、实现html 页面内锚点定位及平滑滚动
1、使用animate属性,当点击锚点后,页面滚动到相应的DIV
$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
注意:
-
运行上面的脚本的之前,先将为锚点增加相应的id,同时去掉href属性。
-
$("html, body")可以替换为响应的div,如果不起作用,试着给该div增加overflow:scroll属性。
-
另外,脚本可以进一步优化。
-
这样做的好处是:URL地址不会变,同时点击锚点时会自动响应scroll事件,不需要重新绑定。
-
缺点是:如果页面复杂的话,偏移值可能会发生变化需要算法辅助。
2、使用js的srollIntoView方法(推荐的)
document.getElementById("divId").scrollIntoView();
比如:
//点击id是#roll1的元素可以滚动到id是#roll1_top的地方
document.querySelector("#roll1").onclick = function(){
//scrollIntoView(ture)元素上边框与视窗顶部齐平
document.querySelector("#roll1_top").scrollIntoView(true);
}
// querySelectorAll 方法接收的参数是一个 CSS 选择符。
//注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果需要返回所有的元素,请使用 querySelectorAll() 方法替代。
3、可以使用以下JQuery代码来获得平滑的滚动效果
function enterSite(){
$('html, body').stop().animate({
scrollTop: $('#content').offset().top
}, 1500);
});
或:
$("html, body").animate({ scrollTop: $([ELEMENT]).position().top }, 1000);
十、CSS雪碧图(精灵图、CSS Sprites)
.twoimage{
width:84px;
height: 47px;
background-image: url(images/cssjlt.png);
background-position: -425px -250px;
/* background: url(./images/map-icon.png) no-repeat -60px 0; 合并写法 */
}
十一、CSS动画
1、@keyframes 规则
/* 动画代码 */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* 动画代码2 */
@keyframes example2 {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* 向此元素应用动画效果 */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
2、所有 CSS 动画属性:
下表列出了 @keyframes 规则和所有 CSS 动画属性:
属性 | 描述 |
---|---|
@keyframes | 规定动画模式。 |
animation | 设置所有动画属性的简写属性。 |
animation-delay | 规定动画开始的延迟。 |
animation-direction | 定动画是向前播放、向后播放还是交替播放。 |
animation-duration | 规定动画完成一个周期应花费的时间。 |
animation-fill-mode | 规定元素在不播放动画时的样式(在开始前、结束后,或两者同时)。 |
animation-iteration-count | 规定动画应播放的次数。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-play-state | 规定动画是运行还是暂停。 |
animation-timing-function | 规定动画的速度曲线。 |
使用简写属性,将动画与 div 元素绑定:
div
{
animation:mymove 5s infinite; /* infinite 规定动画应该无限次播放。n */
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
语法
animation: name duration timing-function delay iteration-count direction;
值 描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
十二、CSS翻转、旋转transform
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */
}
none 定义不进行转换。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x,y) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
十三、CSS其他方法
1、文字选中变颜色
p::selection {
background:#ccc;
color:#ff645d;
}
p::-moz-selection {
background:#ccc;
color:#ff645d;
}
p::-webkit-selection {
background:#ccc;
color:#ff645d;
}
2、搜索框focus效果
input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
3、box-shadow
box-shadow:2px 2px 3px #aaaaaa inset;
/* box-shadow: offset-x offset-y blur spread color inset; */
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展] [阴影颜色] [投影方式];
4、为元素添加Hover旋转效果
.turn{
width:100px;
height: 100px;
background: aqua;
margin: 100px auto;
}
.turn:hover{
animation:turn 1s linear infinite;
}
/*
turn : 定义的动画名称
1s : 动画时间
linear : 动画以何种运行轨迹完成一个周期
infinite :规定动画应该无限次播放
*/
@keyframes turn{
0%{-webkit-transform:rotate(0deg);}
25%{-webkit-transform:rotate(90deg);}
50%{-webkit-transform:rotate(180deg);}
75%{-webkit-transform:rotate(270deg);}
100%{-webkit-transform:rotate(360deg);}
}
5、导航栏Hover效果
.nav_box li:hover a:after{
width: 100%;
}
.nav_box a:after{
display: inline-block;
height: 4px;
width: 0;
transition: all .3s;
background: #4fa10b;
position: absolute;
bottom:0;
left: 0;
z-index: 1;
}
6、需要解读(看不懂)
7、封面Hover翻转过渡效果
1、https://www.jq22.com/jquery-info2044
2、https://blog.csdn.net/echokkk/article/details/78820393
可以通过判断是否存在某种ID值,然后添加id实现。
十三、jQuery回到顶部功能
<script type="text/javascript">
$(document).ready(function() {
//首先将#btn隐藏
$("#btn").hide();
//当滚动条的位置处于距顶部50像素以下时,跳转链接出现,否则消失
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 50) {
$("#btn").fadeIn(200);
} else {
$("#btn").fadeOut(200);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#btn").click(function() {
$('body,html').animate({
scrollTop: 0
},
500);
return false;
});
});
});
</script>
参考:https://www.cnblogs.com/Emily-m/p/11099181.html
十四、jQuery动画
附零、CSS 基础篇、绝对有你想要
链接:https://www.cnblogs.com/suoning/p/5625582.html
附一、jQuery常用方法备忘
链接:https://www.cnblogs.com/YangJavaer/p/5849079.html
一、选择器
基本筛选器
$('li:first') //第一个元素
$('li:last') //最后一个元素
$("tr:even") //索引为偶数的元素,从 0 开始
$("tr:odd") //索引为奇数的元素,从 0 开始
$("tr:eq(1)") //给定索引值的元素
$("tr:gt(0)") //大于给定索引值的元素
$("tr:lt(2)") //小于给定索引值的元素
$(":focus") //当前获取焦点的元素
$(":animated") //正在执行动画效果的元素
内容选择器
$("div:contains('nick')") //包含nick文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(p)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
$("input:checked") //所有选中的元素
$("select option:selected") //select中所有选中的option元素
二、筛选器
过滤
$("p").eq(0) //当前操作中第N个jQuery对象,类似索引
$('li').first() //第一个元素
$('li').last() //最后一个元素
$(this).hasClass("test") //元素是否含有某个特定的类,返回布尔值
$('li').has('ul') //包含特定后代的元素
查找
$("div").children() //div中的每个子元素,第一层
$("div").find("span") //div中的包含的所有span元素,子子孙孙
$("p").next() //紧邻p元素后的一个同辈元素
$("p").nextAll() //p元素之后所有的同辈元素
$("#test").nextUntil("#test2") //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").prev() //紧邻p元素前的一个同辈元素
$("p").prevAll() //p元素之前所有的同辈元素
$("#test").prevUntil("#test2") //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾
$("p").parent() //每个p元素的父元素
$("p").parents() //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2") //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾
$("div").siblings() //所有的同辈元素,不包括自己
三、属性操作
基本属性操作
$("img").attr("src"); //返回文档中所有图像的src属性值
$("img").attr("src","test.jpg"); //设置所有图像的src属性
$("img").removeAttr("src"); //将文档中图像的src属性删除
$("input[type='checkbox']").prop("checked", true); //选中复选框
$("input[type='checkbox']").prop("checked", false);
$("img").removeProp("src"); //删除img的src属性
CSS类
$("p").addClass("selected"); //为p元素加上 'selected' 类
$("p").removeClass("selected"); //从p元素中删除 'selected' 类
$("p").toggleClass("selected"); //如果存在就删除,否则就添加
HTML代码/文本/值
$('p').html(); //返回p元素的html内容
$("p").html("Hello <b>nick</b>!"); //设置p元素的html内容
$('p').text(); //返回p元素的文本内容
$("p").text("nick"); //设置p元素的文本内容
$("input").val(); //获取文本框中的值
$("input").val("nick"); //设置文本框中的内容
四、CSS操作
样式
$("p").css("color"); //访问查看p元素的color属性
$("p").css("color","red"); //设置p元素的color属性为red
$("p").css({ "color": "red", "background": "yellow" }); //设置p元素的color为red,background属性为yellow(设置多个属性要用{}字典形式)
位置
$('p').offset() //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position() //元素相对父元素的偏移,对可见元素有效,Object {top: 117, left: 250}
$(window).scrollTop() //获取滚轮滑的高度
$(window).scrollLeft() //获取滚轮滑的宽度
$(window).scrollTop('100') //设置滚轮滑的高度为100
尺寸
$("p").height(); //获取p元素的高度
$("p").width(); //获取p元素的宽度
$("p:first").innerHeight() //获取第一个匹配元素内部区域高度(包括补白、不包括边框)
$("p:first").innerWidth() //获取第一个匹配元素内部区域宽度(包括补白、不包括边框)
$("p:first").outerHeight() //匹配元素外部高度(默认包括补白和边框)
$("p:first").outerWidth() //匹配元素外部宽度(默认包括补白和边框)
$("p:first").outerHeight(true) //为true时包括边距
五、文档处理
内部插入
$("p").append("<b>nick</b>"); //每个p元素内后面追加内容
$("p").appendTo("div"); //p元素追加到div内后
$("p").prepend("<b>Hello</b>"); //每个p元素内前面追加内容
$("p").prependTo("div"); //p元素追加到div内前
外部插入
$("p").after("<b>nick</b>"); //每个p元素同级之后插入内容
$("p").before("<b>nick</b>"); //在每个p元素同级之前插入内容
$("p").insertAfter("#test"); //所有p元素插入到id为test元素的后面
$("p").insertBefore("#test"); //所有p元素插入到id为test元素的前面
替换
$("p").replaceWith("<b>Paragraph. </b>"); //将所有匹配的元素替换成指定的HTML或DOM元素
$("<b>Paragraph. </b>").replaceAll("p"); //用匹配的元素替换掉所有 selector匹配到的元素
删除
$("p").empty(); //删除匹配的元素集合中所有的子节点,不包括本身
$("p").remove(); //删除所有匹配的元素,包括本身
$("p").detach(); //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)
复制
$("p").clone() //克隆元素并选中克隆的副本
$("p").clone(true) //布尔值指事件处理函数是否会被复制
六、事件
页面载入
当页面载入成功后再运行的函数事件
$(document).ready(function(){
do something...
});
//简写
$(function($) {
do something...
});
页面处理
//bind 为每个匹配元素绑定事件处理函数,绑定多个用{}。
$("p").bind("click", function(){
alert( $(this).text() );
});
$(menuF).bind({
"mouseover":function () {
$(menuS).parent().removeClass("hide");
},"mouseout":function () {
$(menuS).parent().addClass("hide");
}
});
$("p").one( "click", fun...) //one 绑定一个一次性的事件处理函数
$("p").unbind( "click" ) //解绑一个事件
页面委派
// 与bind 不同的是当时间发生时才去临时绑定。
$("p").delegate("click",function(){
do something...
});
$("p").undelegate(); //p元素删除由 delegate() 方法添加的所有事件
$("p").undelegate("click") //从p元素删除由 delegate() 方法添加的所有click事件
事件
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当元素的值发生改变时触发事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时
(event object) 对象
所有的事件函数都可以传入event参数方便处理事件
$("p").click(function(event){
alert(event.type); //"click"
});
(evnet object)属性方法:
event.pageX //事件发生时,鼠标距离网页左上角的水平距离
event.pageY //事件发生时,鼠标距离网页左上角的垂直距离
event.type //事件的类型
event.which //按下了哪一个键
event.data //在事件对象上绑定数据,然后传入事件处理函数
event.target //事件针对的网页元素
event.preventDefault() //阻止事件的默认行为(比如点击链接,会自动打开新页面)
event.stopPropagation() //停止事件向上层元素冒泡
七、效果
基本
$("p").show() //显示隐藏的匹配元素
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为900毫秒
$("p").hide() //隐藏显示的元素
$("p").toggle(); //切换 显示/隐藏
滑动
$("p").slideDown("900"); //用900毫秒时间将段落滑下
$("p").slideUp("900"); //用900毫秒时间将段落滑上
$("p").slideToggle("900"); //用900毫秒时间将段落滑上,滑下
淡入淡出
$("p").fadeIn("900"); //用900毫秒时间将段落淡入
$("p").fadeOut("900"); //用900毫秒时间将段落淡出
$("p").fadeToggle("900"); //用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒时间将段落的透明度调整到0.6
八、对象访问
$.trim() //去除字符串两端的空格
$.each() //遍历一个数组或对象,for循环
$.inArray() //返回一个值在数组中的索引位置,不存在返回-1
$.grep() //返回数组中符合某种标准的元素
$.extend() //将多个对象,合并到第一个对象
$.makeArray() //将对象转化为数组
$.type() //判断对象的类别(函数对象、日期对象、数组对象、正则对象等等
$.isArray() //判断某个参数是否为数组
$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)
$.isFunction() //判断某个参数是否为函数
$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象
$.support() //判断浏览器是否支持某个特性
九、插件拓展机制
//方式一
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
//方式二
jQuery.extend({
min: function(a, b) { return a < b ? a : b; }, //三元运算
max: function(a, b) { return a > b ? a : b; }
});
jQuery.min(2,3); //2
jQuery.max(4,5); //5
附二、JavaScript常用方法备忘
JS: 注意:
这些都是我自己总结的,只是部分常用的函数属性!!古斌12-21
-js常用函数。
** alert(); 普通弹出框
** document.write(); 向页面(body标签) 写入内容
** console.log(); 向控制台输出
** typeof();查看当前数据类型
** length 返回字符串的长度
** bold(); 字体加粗
** fontcolor(red); 设置字体的颜色
** fontsize(1-7); 设置字体大小
** link(); 将字符串设置成超链接 (字符串.link(链接地址);
** sub() sup() 将文 0-字设置成上标或下标 比如设置度数
** prototype 向对象函数中添加方法
例:function Person(){ 创建对象函数
}
Person.prototype.getal(){ 添加方法
alert(123);
}
new Person().getal(); 调用函数 结果弹出123
- 与java相似的函数:
** concat() 连接字符串 将 "123" 与 "456" 连接在一起(个人感觉没什么用)
** charAt(索引) 返回指定位置的字符串,如果索引有误 返回空字符串
** indexOf(字符串); 返回指定位置的字符串索引 如果不存在返回-1
** split(以什么切 分); 返回字符串数组
** replace(); 传递两个参数,第一个是原始字符 第二个是要替换成的字符
** substr() 同样也是2个参数, 从第几个开始,向后截取几个
** subString() 两个参数从第几位开始,到底几位结束 不包含做后一个
- js与数组相关的函数:
** length 返回数组长度 这个是属性 不是方法 所以不要加“()”
** concat() 将数组链接,返回一个新的数组
** join() 根据指定数组以指定符号分割
** push() 向数组末尾添加元素,返回新的数组长度,如果添加的是一个数组,就存取的是整个字符串
** pop() 删除数组最后一位元素,并返回这个元素!
** reverse() 颠倒数组元素的顺序 随机顺序排列
-js中Dete对象的函数: 注意严谨区分大小写
** new Date(); 获取当前时间 国外定义
** new Date().toLocaleString(z); 获取本地时间 正常的格式
** new Date().getFullYear();得到当前年
** new Date().getMonth() 得到当前月份 ,因为国外是从 0-11 所以得到月份 需要+1
** new Date().getDay() 得到当前的当前的星期 周一到周六都正常 如果周日会显示0
** new Date().getDate() 得到当前的天(对于这个月来说) 1-31
** new Date().getHours() 得到当前的小时
** new Date().getMinutes() 得到当前的分钟
** new Date().getSeconds() 得到当前的秒
** new Date().getTime() 得到当前的毫秒 返回的是1970-1-1 的毫秒数
-js中Math对象 *以下写的方法都不用 new 直接使用 Math. 调用 类似静态
** ceil(); 向上舍入
** floor(); 向下舍入
** round();四舍五入
** Math.random(); 随机数
-js中的全局函数:
** eval(); 执行字符串中的js代码,如果不是js代码将不执行并且报错
** encodeURI(); 对字符进行编码
** decodeURI(); 对字符进行解码
** isNaN() :判断当前字符是否是数字,如果是返回 false 如果不是返回 true
** parseInt(); 将类型转换成数字,如果不能转换返回NAN
- js中的bom对象:
** navigate 获取客户端的信息
-navigate.appName; 返回该浏览器的名字
** screen 获取屏幕信息
- screen.while; 返回屏幕的宽度
- screen.height;返回屏幕高度
**history :请求url的历史记录
-history.back(); 访问上一次记录
-history.go(-1); 访问上一次记录
-history.forward(); 访问下一个页面
-history.go(1); 访问下一个页面
**location 请求url地址
-location.href; 得到当前url地址
-location.href = "url"; 设置访问url地址
例:
function a(){
location.href = "www.baidu.com";
}
<input type="button" value="访问百度" onclick="a()"/>
**-window-**对象-所有bom对象的顶层对象
-window.alert(); 普通弹出框;
-window.confirm(); 确认框
-window.prompt(); 输入弹出框
-window.open();打开一个新的窗口 三个参数 ("URL",("name"),"with,height")
-window.close();关闭窗口(兼容性差,极大部分浏览器不支持)
-函数 window.opener; 返回父页面
-js中的定时器函数(bom对象)hi
-setInterval("js代码",毫秒数); 表示每过多少秒,执行以下函数
-setTime("js代码",毫秒数); 表示多少秒之后执行 注意只执行一次
-clearInterval(); 清除第一种定时器函数
-clearTimeout(); 清除第一种定时器函数
-js中的DOM对象:
-document.getElementById() ; 通过设置的ID获取 返回一个对象
-document.getElementsByName(); 通过设置的name获取 返回一个集合
-document.getElementsByTagName();通过标签获取 返回一个集合
- var check = document.getElementsByTagName('input')[0];
console.log(check.checked);//false
判断复选框是否被选中
-js中Note节点对象:
- 1 .向节点中添加元素
例:向ul中添加一个li
获取ul标签
var ul1 = document.getElementById("ul1");
创建li标签
var li1 = document.createElement("li");
创建文本
var test1 = document.createTextNode("5555");
向li标签加入文本
li1.appendChild(test1);
向ul中添加li
ul1.appendChild(li1);
-js 中的 element 对象: 这个对象的方法必须使用document对象调用
- setAttribute(“id”,123);
- getAttribute(“属性”)
- removeAttribute(“id”) 注意 value不可删除
- ul1.getElementsByTagName("li"); // 获取ul标签下面所有的子标签
*- 列:
<input type="button" id = "aL" value="ac"/>
var a = document.getElementById("aL");
原来
alert(a.id);
a.setAttribute("id",123);
现在
alert(a.getAttribute("id"));
**一些小知识点-只需了解就行了**
- js中有重载吗?
答:1.js中没有重载!
2.但是可以通过 argumengts 数组来模拟“重载”
function ovv(){
if(arguments.length == 2){
return arguments[0]+arguments[1];
}else if(arguments.length == 3){
return arguments[0]+arguments[1]+arguments[2];
}
}
document.write(ovv(1,2));
document.write(ovv(1,3,6));
- js的递归函数:输出n次helloword
答:
function print(n){
if(n == 0){
return;
}
document.write("Hello Word </br>");
return print(n-1);
}
print(100);
-js中Note节点对象:
- 1 .向节点中添加元素
例:向ul中添加一个li
获取ul标签
var ul1 = document.getElementById("ul1");
创建li标签
var li1 = document.createElement("li");
创建文本
var test1 = document.createTextNode("5555");
向li标签加入文本
li1.appendChild(test1);
向ul中添加li
ul1.appendChild(li1);
附三、W3C 代码标准规范
记不住啊:https://www.w3cschool.cn/xuexiw3c/xuexiw3c-standards.html
抛弃声明:以后我们将抛弃font标签,新的页面中不应该再出现如,已经存在的老的页面也应该在修改时尽量替代,替代方法:<span
class=”red_tex”>。
一个标准XHTML头信息格式如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<meta charset="utf-8" />
<title>W3Cschool - 学技术查资料,从w3cschool开始!</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="keywords" content="w3cschool,w3cschool在线教程,技术文档,编程入门教程,W3Cschool,W3C,HTML,HTML5,CSS,Javascript,jQuery,Bootstrap,PHP,Java,Sql" />
<meta name="description" content="w3cschool是一个专业的编程入门学习及技术文档查询网站,提供包括HTML,CSS,Javascript,jQuery,C,PHP,Java,Python,Sql,Mysql等编程语言和开源技术的在线教程及使用手册,是类国外W3Cschool的W3C学习社区及菜鸟编程平台。" />
</head>
1、什么是DOCTYPE
DOCTYPE是document type(文档类型)的简写,用来说明你用的XHTML或者HTML是什么版本。其中的DTD(例如xhtml1-transitional.dtd)叫文档类型定义,里面包含了文档的规则,浏览器就根据你定义的DTD来解释你页面的标识,并展现出来。要建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分;除非你的XHTML确定了一个正确的DOCTYPE,否则你的标识和CSS都不会生效。
XHTML 1.0 提供了三种DTD声明可供选择:
i) 过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
ii) 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如
。
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
iii) 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。
完整代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
注:DOCTYPE声明必须放在每一个XHTML文档最顶部,在所有代码和标识之上。
2、名字空间 namespace
通常我们HTML4.0的代码只是,这里的"xmlns"是什么呢?
这个“xmlns”是XHTML namespace的缩写,叫做“名字空间”声明。XHTML是HTML向XML过渡的标识语言,它需要符合XML文档规则,因此也需要定义名字空间。又因为XHTML1.0不能自定义标识,所以它的名字空间都相同,就是"http://www.w3.org/1999/xhtml"。目前阶段我们只要照抄代码就可以了。
**3、定义语言编码**
为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言,我们一般使用gb2312(简体中文),制作多国语言页面也有可能用Unicode、ISO-8859-1等,根据你的需要定义。
注:如果忘记了定义语言编码,可能就会出现,你在DW(dreamweaver)做完一个页面,第二次打开时所有的中文变成了乱码。
**4、Javascript定义**
Js必须要用