html+css+js+jQuery学习笔记(一)

简介: html+css+js+jQuery学习笔记

Css中“.”可以选择包含两个样式的东西“,”可以都选上


img可以把div撑开 只设置宽 或者高那么将按照比列缩放扩大


Outline:none;//input text类型有外边框;


Preferences->Key Bindings->user->编辑文档 //代码对齐
{ "keys": ["ctrl+alt+l"], "command": "reindent" },


cursor:pointer 小手


sub 上标


背景图定位:左右反 上下正


Display:none;放弃原来位置隐藏;


visibility:visible/hidden;平时可视/平时隐藏


play:none;不占位隐藏


visibility:hidden;占位隐藏


opacity 透明度


filter:alpha(opacity=60); 浏览器自己的透明滤镜


text-transform:uppercase;英文大写


text-transform:lowercase;英文小写


text-transform:capitalize;单次首字母大写


text-transform:none;原样式


prompt("");//


alert(“”);


confirm(“”)//弹出带选择选择框


Border-collapse:collapse;//table表的双边框变成但边框


**transition:all 5s ease 0s;//css样式转变时间//!!!震惊我一年!!


transform:rotate(90deg);//顺时针旋转九十度


Text-indent:-999em 或者px//段落首行缩进


=== 全等于


!== 不全等


条件 ? val1 : val2


Math.pow(5,7)


Math.sqrt()


Math.round()四舍五入的原理是在参数上加0.5然后进行下取整


有公式,如果想要在[a,b]闭区间取随机数,能取到a,也能取到b:


Math.random()能够生成一个0~1的数字,不包括0,也不包括1。术语叫做(0,1)开区间。


parseInt(Math.random() * (b - a + 1)) + a;


//


/数组


!!!!下标越界不报错 是unfinde


***push 尾插


***pop 尾删


***unshift 头插


***shift 头删


***Concat()//连接 连接的时候还得重新赋值 arr=arr.concat(arr2)


***Slice();//截取数组某一部分


***arr.slice(start,end) 返回一个新的数组,包含从 start 到 end (不包括该元素)的元素。


/


arr.splice(3,2,"斑马","骆驼");

一旦应用,arr立即改变。并不需要重新复制,换句话说,这个函数不返回新的数组。


var arr = ["A","B","C","D","E","F","G"];
arr.splice(3,2,"X","Y","Z","思密达"); //从数组下标为3开始这项,连数2项,改为……
console.log(arr);

image.png

// ***************插入一些项 ***************
var arr = ["A","B","C","D","E","F","G"];
arr.splice(2,0,"嘻嘻","哈哈"); //插入到下标为2的项前,不删除项目
console.log(arr);

image.png


***reverse();//翻转数组


***sort();数组排序


***arr.sort(function(a,b){


//如果a要放在b前面,那么返回负数
//如果a要放在b后面,那么返回正数
//如果a和b不区分大小,那么返回0
if(a < b){
return -1;
}else if(a > b){
return 1;
}else if(a == b){
return 0;
}

});


//


///字符串///


***var str = arr.join(分隔符);如果不写分隔符,那么等价于用逗号分开


转为字符串


***charAt() 返回在指定位置的字符。


"abcdef".charAt(0);

image.png

和数组下标类似的。


***Arr.length


***indexOf() 检索字符串 //可以用于字符串


"我爱你亲爱的祖国的人民币".indexOf("的");     //5

***replace() 替换 funciton(match,....)中的match为 替换前的字符串


"abcdefgaa".replace("a","0");    // "0bcdefgaa"

把a替换为0 , 只替换1个。


***split() 把字符串→数组,  从什么地方拆分, 就是参数


"我爱你亲爱的祖国的人民币".split("的");

image.png


***substr() 截取子串  


“字符串”.substr(start,length)


"abcdefghijklmn".substr(3,5);

image.png

 从下标为3的地方开始,取5个字符


***substring() 截取子串


“字符串”.substring(start,end); 不包括end


"abcdefghijklmn".substring(3,5);

image.png


***toLowerCase()、toUpperCase();


转换为大小写


split转为数组;


Join转为字符串


字符串方法返回值有三类:


返回数字类型:indexOf,lastIndexOf,search , charCodeAt


返回数组的方法:split,match


返回字符串的方法:charAt,substring,substr, slice, replace


//


//


正则表达式


Exec ///test


var str = /abc/g;

console.log(str.exec(demo));

image.png


普通字符包括:字母(abcABC),数字(123),_等等


特殊字符:() [] {} ^ $ * ? \ | + .


单词分隔符我们用\b表示 [a-zA-Z_0-9]之外的字符


非单词分隔符我们用\B表示


****字符集[] 里面放的东西test对象的一个东西


3.5预定义类


. [^\n\r] 除了换行和回车之外的任意字符


\d [0-9] 数字字符


\D [^0-9] 非数字字符


\s [ \t\n\x0B\f\r] 空白字符


\S [^ \t\n\x0B\f\r] 非空白字符


\w [a-zA-Z_0-9] 单词字符(所有的字母)


\W [^a-zA-Z_0-9] 非单词字符


3.6 量词


? 软性量词 出现零次或一次


* 软性量词 出现零次或多次(任意次)


+ 软性量词 出现一次或多次(至道一次)


{n} 硬性量词 对应零次或者n次


{n,m} 软性量词 至少出现n次但不超过m次(中间不能有空格)


{n,} 软性量词 至少出现n次(+的升级版)


3.7 修饰符


g 表示全局匹配


i 忽略大小写


m 多行匹配


3.8其他


[\u4e00-\u9fa5]表示中文集


| 表示或者的意思


alert(/a|b/.test('b')) =》 true


alert(/a|b/.test('c')) =》 false


3.9 分组


分组


1 解决多个字符串重复


2 可以在外面获取


格式 (任意个字符)


获取


在正则表达式内部获取:\数字


在正则表达式外部获取:$数字


注意数字是从1开始的。


//
(function fun(){
alert("哈哈")
})();

闭包


function text() {
        var arr = [];
        for (var i = 0; i < 10; i++) {
            (function (a) {
                arr[a] = function () {
                    console.log(a);
                } //保存的是立即执行函数的成果AO()
            }(i))
        }
        return arr;
    }
//

不仅仅是class属性需要用className避讳一下,还有:


class 要写成.className


for 要写成.htmlFor  (label用的)


rowspan 要写成rowSpan


colspan 要写成colSpan


setAttribute()、getAttribute()。


getAttribute();   //得到属性
setAttribute();   //设置属性
oImg.setAttribute("src","images/2.jpg");
等价于
oImg.src = “images/2.jpg”;

setAttribute和点语法有一丢丢不一样:


第一,所有自定义的属性,都不能通过点语法得到


<div shaoshanhuan=”38”></div>
alert(oBox.shaoshanhuan);  //undefined,自定义的属性,不是w3c的属性,都不能用点语法
alert(oBox.getAttribute("shaoshanhuan")); //38

Onclick 单击


Onmouseover 鼠标进入


Onmouseout 鼠标离开


Ondblclivk 双击


Onfouse 得到焦点


Onblue 失去焦点


Onmousedown 鼠标按下


Onmouseup 鼠标按键抬起


Windows.onload 页面中的代码完全加载完毕以后


play:none;隐层


play:block;显示


innerHTML//内部文本


document.getElementsByName(“”)//里面放的是表单中的name


window.getComputedStyle(oDiv).getPropertyValue("width")

getPropertyValue看上去就像打它,看着就不爽,所以可以简写:


getComputedStyle(oDiv)["padding-left"]

好用的东西,一定不兼容。所以IE6、7、8不兼容getComputedStyle.getPropertyValue()的写法,另外一套写法:附加在元素身上的currentStyle属性,它表现和style点语法一样,使用驼峰式访问。


oDiv.currentStyle.width

现在要注意,它必须使用驼峰:


oDiv.currentStyle.paddingTop
oDiv.currentStyle["paddingLeft"]

总结:


高级:

高级:
window.getComputedStyle(oDiv).getPropertyValue("padding-left");
getComputedStyle(oDiv).getPropertyValue("padding-left");
getComputedStyle(oDiv)["padding-left"];
IE6、7、8:
oDiv.currentStyle.paddingLeft;
oDiv.currentStyle["paddingLeft"];

兼容性问题


if(window.getComputedStyle){
alert("我会getComputedStyle");
}else{
alert("我不会getComputedStyle,那四个啥?")

}


现在我们要在一个轮子,就是封装一个函数,这个函数接收两个参数,第一个是对象,第二个是属性名。

fetchComputedStyle(obj,”padding-left”);
fetchComputedStyle(obj,”paddingLeft”);

这个函数返回的是这个属性值的计算后的样式。更牛逼的是,我们无论用户输入的是驼峰还是非驼峰,都让这个函数鲁棒。

image.png


div.currentStyle.opacity   //可以得到css清单中的opactiy里面写的值。而不是filter的值。

支持opacity的浏览器,总会将.6这种写法规范为0.6 。 而不支持opacity的浏览器则会返回原有的形式.6。这是一个小坑,进行比较的时候需要注意。

image.png


IE6、7

IE8 IE9、IE9+、高级浏览器

offsetParent

如果自己没有定位,那么就是自己父亲中有width或者有height或者有定位的元素。

如果自己有定位,那么就是和高级浏览器一致。

和高级浏览器一致 自己祖先元素中,离自己最近的已经定位的元素
offsetLeft

和高级浏览器一致

多算一条border

自己的border外到offsetParet对象的border内


ele.offsetLeft


ele.offsetTop


ele.offsetWidth


ele.offsetHeight


ele.clientWidth


ele.clientHeight


  一、clientWidth和clientHeigh 、 clientTop和clientLeft


       1,clientWidth的实际宽度


       clientWidth = width+左右padding//浏览器的宽度


       2,clientHeigh的实际高度//浏览器的高度


        clientHeigh = height + 上下padding


       3,clientTop的实际宽度


          clientTop = boder.top(上边框的宽度)


       4,clientLeft的实际宽度


           clientLeft = boder.left(左边框的宽度)


   二、offsetWidth和offsetHight 、 offsetTop和offsetLeft


        1,offsetWidth的实际宽度


           offsetWidth = width + 左右padding + 左右boder


        2,offsetHeith的实际高度


           offsetHeith = height + 上下padding + 上下boder


        3,offsetTop实际宽度


           offsetTop:当前元素 上边框 外边缘 到 最近的已定位父级(offsetParent) 上边框 内边缘的 距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离


        4,offsetLeft实际宽度


          offsetLeft:当前元素 左边框 外边缘 到 最近的已定位父级(offsetParent) 左边框 内边缘的距离。如果父级都没有定位,则分别是到body 顶部 和左边的距离


timer = setInterval(function(){
},20)
clearInterval(timer);

这个按钮持续点击,盒子运动越来越快。这是因为每次点击,盒子身上就有更多的定时器在作用。


解决办法,就是四个字的口诀“设表先关”。


startBtn.onclick = function(){
//设表先关
clearInterval(timer);
//设置定时器
timer = setInterval(function(){
nowleft += 2;
oDiv.style.left = nowleft + "px";
}, 20);
}

所以解决办法,就是验收、拉回终点、停表:“拉终停表”


var timer = setInterval(function(){
nowleft += 7;
if(nowleft > 600){
nowleft = 600;
clearInterval(timer);
}
oDiv.style.left = nowleft + "px";
console.log(nowleft);
},20);

间隔时间是以毫秒为单位,1000毫秒就是1秒。


“毫”就是千分之一,


“厘”就是百分之一,


“分”就是十分之一


var obj = {
"name":"考拉",
"age" : 18
};

obj.sex = "刚变完性";


for(var k in obj){
  console.log(k + "的值是" + obj[k]);

}


Var t=new Date();


Call apply//


//


callback.call(elem);

或者:


callback.apply(elem);

执行callback函数,并且让callback函数中的this关键字为elem。


说白了apply、call功能是一样的,功能都是:让函数调用,并且给函数设置this是谁。


function xianshixinxi(a,b,c){
console.log(this.name);
console.log(a + b + c);
}
xianshixinxi.call(obj,2,3,4);

xianshixinxi.apply(obj,[2,3,4]);

image.png


window.setTimeout(函数,时间);

在指定时间之后,执行函数一次,仅仅执行1次。


clearTimeout();

function linear(t , b , c , d){
return c * t / d + b;
}
function easeIn(t,b,c,d){
    return c * ( t /= d) * t + b;
}
function easeOut(t,b,c,d){
    return -c *(t/=d)*(t-2) + b;
}


他们的参数,都是t、b、c、d:


第一个参数t表示当前帧编号


第二个参数b表示起始位置


第三个参数c表示变化量


第四个参数d表示总帧数


函数的返回值,就是t这一帧,元素应该在的位置。


clearTimeout();


目录
相关文章
|
5天前
|
JavaScript 前端开发 API
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
Vue学习笔记3:对比纯JavaScript和Vue实现数据更新的实时视图显示
|
6天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
8天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
16 4
|
5天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
8天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
10天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
24 0
JS配合CSS3实现动画和拖动小星星小Demo
|
8天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
JavaScript 前端开发 UED
9款设计独特的jQuery/CSS3插件
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单、jQuery焦点图、jQuery表单、jQuery图片特效等。下面大家一起来看看吧。
171 0
9款设计独特的jQuery/CSS3插件
|
JavaScript 前端开发
推荐20款基于 jQuery & CSS 的文本效果插件
  jQuery 和 CSS 可以说是设计和开发行业的一次革命。这一切如此简单,快捷的一站式服务。jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件。
1424 0