新手入門:
alert的使用:
在alert中\xB0可以输出温度(centigrade)的符号,\xNN可以输入一些不能输入的特殊字符,NN是两个十六进制数,表示字符在latin-1 字符集中的编号。。
注:特殊字符并不是跨平台兼容,\xNN在windows 平台中代表特定的字符,但在mac或unix系统中,它可能代表的是另一字符。
alert(Number(null)); 弹出的是个0;
在javascript 中空值用NaN(Not a Number)来表示
在javascript中 \” 是个转义字符,用来表示单个双引号,一般都是成对出现的
prompt() 方法用于显示一个带有提示信息,并且用户可输入信息的对话框,第一个参数为提示信息,第二个参数为文本框默认值。
数据类型的转换:
parseInt()、parseFloat()函数,可以将字符串转换成整数、浮点数,处理机制:逐字符地解析字符串中的字符,并检查其中是否是一个有效的数字,如果是,转换为对应的数字,否则,终止解析,返回NaN,并将该字符之前的字符串转换为对应的数值
数组:
声明一个变量,并将变量定义成一个数组
Array()是一个构造函数,可以传递一个整型数据,表示数组的长度,,js中数组的最大长度为2的32次方
var array; array= new Array();
或:var array = new Array();
Number()函数:
把对象的值转换成数字
怎么表示乘方与开根号:
例: var a = Math.pow(3,4); 表示3的4次方
var a = Math.sqrt(81); 表示81的开方
在js中的函数调用不分先后顺序的,可以先调用再实现
在写javascript的代码时一定要用单引号或者双引号括起来,不带引号的话就以字符串来处理
在javascript里面不能以纯数字或者click命名函数或者变量
要想修改标签的属性,在html里面怎么写,javascript里面就怎么写,但有一个例外,就是class,要写成className
鼠标的响应事件:onmouseOver、onmouseOut
在javascript中获得标签的属性值有两种方法,点( . )或者方括号 [ ] (这是万能的)
设置标签的背景图片: background-image:url(‘jrwm.png’);或者直接写background:url() top center 也是可以的、 注意一定得是单引号,如果是双引号就不行了
style加的样式是加在行间的
标签的优先级:
行间>id>class>标签
js里面的匿名函数,就是直接写在function(),不用取名字,方便
html在head中有时候标签没执行,就调用这个未知的标签就会报错,window.onload就可以解决这个问题,作用是等页面加载完成之后调用
window.onload=function() { 这里面写函数内容}
返回的是一个数组,运用和c语言的数组一样
document.getElementsByTagName(这里面写标签的类型,比如div,然后用单引号或双引号括起来)
在js中input的checkbox要想选种就要这样写:xxx.checked=ture/false;
在javascript中,this的作用就相当于oc中的self,谁调用它就是谁
Sting 对象:
charAt()方法和charAtCode()方法
charAt()方法和charAtCode()方法:获取字符串中指定位置的字符及该字符在Unicode字符集中的编码值
charAt() 参数变回所选取字符在字符串中的位置,返回值为该位置上的字符
charAtCode () 参数为所选取字符在字符串中的位置,返回值为该位置上的字符的Unicode编码值
for …in 循环
注意:遍历出来的元素是不是元素而是整数,要在遍历的数组中[遍历的数]才取得出
window.onload=function() {
var nav1 = document.getElementById("nav");
var ele;
var i;
var allli = nav1.getElementsByTagName("li");
// for(ele in allli) {
// allli[ele].index = ele;
// allli[ele].onmousemove = function () {
// for(var b in allli) {
// allli[b].style.borderBottom = "0px";
// }
//执行到这里面的时候就会出现莫名的错误,尽量不要用for in 来遍历
// };
// 同样的代码,这里就不会出错
for (i = 0; i < allli.length; i++)//循环每个按钮
{
allli[i].onmousemove = function ()//按钮的第i个点击事件
{
for (i = 0; i < allli.length; i++)//循环去掉button的样式,把div隐藏
{
allli[i].style.borderBottom = "0px ";
}
this.style.borderBottom="4px solid red";
}
}
}
还是不要用for in 好点,用for循环,因为有时候就会出错
引用外面的js文件:
<script src=“xxxx.js” type=“text/javascript”></script>
类型转换:
字符串转换: string();
布尔转换: !!放在前面即可
数值转换: number()
js的动画效果
常见的三种输出语句:
1、Alert() 弹出警告框 完整的写法: window.alert();
2、控制台输出 console.log()
3、文档打印 document.write("要打印的内容");
事件的三要素:事件源、事件、事件处理程序
onclock 鼠标单击 、 ondblclick 鼠标双击
onkeyup 按下并释放键盘上的一个键触发
onchage 文本框或者是下拉菜单,或者是文本内容的选项发生改变的时候
onfocus 获得焦点 获取鼠标的光标
onblur 失去焦点 失去鼠标的光标
onmouseover 鼠标悬停,即鼠标停留在图片等的上方
onmouseout 鼠标移出,即离开图片等的所在区域
onload 网页文档加载完成的时候调用
onunload 关闭网页时
onsubmit 表单提交事件
onreset 重置表单时
string
返回字符串的长度:length
为字符串添加样式:“xxx”.big()/“xxx”.small()/“xxx”.bold()/blink()/tolowerCase()/toUpperCase()等
返回字符串中指定的文本首次出现的位置: -indexOf()方法,如果找到就返回,没有就返回-1
查找字符串中特定的字符,若找到,则返回该字符 -match()方法 没有找到就返回 null
替换字符串中的字符 -replace(); 例:document.write(str.replace("ni","wo"));
Date日期对象
使用Date( )方法来返回今天的日期和时间
使用getTime()来计算从1970、1、1到今天的;毫粆数吧,但是得有个前提: 必须先创建一个日期date对象
var d=new Date();
document.write(d.getTime());
使用setFullYear()设置具体的日期 ,前提和上面一样
使用toUTString()把当日的日期(根据UTC)转换为字符串, 前提和上面的一样
使用getDay() 来显示星期,而不仅仅是数字,前提和上面一样,不过调用返回的是整数,比如星期二就是2
时钟的方法: getHours() getMinutes() getSeconds() 不过前提和上面一样
数组
合并两个数组 - concat()
用法: 数组1.concat(数组2)
用数组元素组成字符串 -join() 这个括号里面填的是分隔符
数组根据名称或者数字来排列数组元素
sort() 如果元素是字母的话,以字母的顺序排序,如果想排序数字的数组,那就用sort(sortNumber)
css中的伪类:
何为伪类:
也就是实际实现了类的效果,但是并没有实际添加到标签中的类,这样的就是伪类,伪类的典型构成就是使用了(:)冒号
1、先说最常用的a链接的伪类,目前市场上的主流浏览器都支持
: link 链接样式
: visited 链接访问过后的样式(只要访问历史记录存在)
:hover 鼠标悬停样式
:active 鼠标按下样式
before 与after 伪类的用法:http://justcoding.iteye.com/blog/2032627
一个放在当前的前面,反之后面, 这两个伪类的特有属性content
background-size: length|percentage|cover|contain;
cover:意思是把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
“appearance”功能听起来蛮大的,不过可惜的是,目前各个浏览器厂商各自为政,还无法达到统一的标准,至今天也只有两个内核的浏览器可以使用,其一是“webkit”,其二是“ff”也就是firefox浏览器的,也就是说在使用“appearances”时,需要加上各浏览器厂前缀。mozilla是moz的全称,是火狐浏览器的生产厂商,即是一家公司。
注意:使用是前面要加一个 -
-moz-代表firefox浏览器私有属性
-ms-代表IE浏览器私有属性
-webkit-代表chrome/safri私有属性
-o-代表opera私有属性,说白了就是为了兼容
去除系统默认appearance的样式,常用于IOS下移除原生样式,比如在新世界这个项目中的select就用到
了解更多:http://www.css88.com/book/css/webkit/visual/appearance.htm
-webkit-appearance: none
-moz-appearance: none;
header标签:
<header> 标签定义文档的页眉(介绍信息)。是html5新出的
letter-spacing 属性增加或减少字符间的空白(字符间距)。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */