一、JavaScript
基本语法
- 在
<script>HTML元素中放置JavaScript代码 - 正确位置是在
<body>和<head>部分均可
数据的定义
var x = 30;
var a,b;
alter(typeof x); //输出 x的类型 ---- “number”
x = "hello";
alter(typeof x); //输出 x的类型 ---- “string”
函数
预定义函数
parseInt(string,[index]);//解析字符串，从中返回一个整数
pareseFloat();//解析字符串，返回浮点数
isNaN(val);//返回是否是数字 , val 是参数
eval(string);//将字符串作为脚本代码执行
对话框函数
alter();//显示一个提醒对话框，包含一个OK按钮
confirm();//显示一个确认对话框，包含一个OK按钮和1个Cancel
prompt();//显示一个输入对话框，提示用户输入
自定义函数
命名函数
function f(x){ //x是参数
//code here
}
匿名函数
function(x){ //x是参数
//code here
}
//样例
var f = function(user){
alter(user);
}
f("x");
var test = f;
test("x");
//以上调用完全一致
对象函数的定义
var f = new Function([,,,,,],code);
自调用函数
var u = "x";
(function(x){
alter(x);
})(u);
运算符
可以参考c和java， 包括注释的方式 单行：// 多行：/*......*/
with语句
with(document){
write("<table border = '1'>");
write("<tr>");
write("</tr>");
//。。。。。。。。。
}
JavaScript对象
Array
定义
new Array();new Array(size);new Array(1,2,3,4,5[.....]);
属性
constructor :返回对创建对象的构造函数的应用
length: 返回数组的长度
prototype: 为对象添加属性和方法
数组对象的常用方法
是用方法： 数组名.方法名
concat()//用于连接两个或者多个数组
join()//用于吧数组中的所有元素放入一个字符串，并用指定的分隔符隔开
push()//在数组的末尾添加一个或多个元素
pop()//删除并返回最后一个元素
shift()//删除并返回第一个元素
reverse()//在原有的基础上，颠倒数组
slice()//返回指定的元素
sort()//排序
splice()//添加或者删除一个元素，返回被删除元素
unshift()//在开头添加一个或者多个，返回新的数组长度
String字符串对象
定义
'和"均可生成字符串
var x = "aadsad";var y = 'dasdsdas';
new 方式
var x = new String("adsasda");//类型为String对象var y = String("asdsadsad"); //类型为string类型
string和String的区别：
- String 是string的包装类
- string是一种基本的数据类型，没有提供substring()等方法
- string没有提供prototype原型对象，而String对象有。
- 使用typeof()函数查看类型时，string返回string，String对象返回Object，String返回function
- 使用
==比较时，string判断值是否相等，而String对象则判断是否同一对象进行引用 - 生命周期不同，new创建的对象一直存在，而string类型自动生成的会在代码执行后自动销毁
Date日期对象
定义
new Date();new Date(num); //num是1970年1月1日凌晨到目标时间的毫秒数new Date(y,m,d);new Date(y,m,d,h,m,s);new Date(m/d/y h:m:s);new Date(m d,y);new Date(m d,y h:m:s);
Math数学对象
同java
自定义对象（JSON方式）
方式：原始方式，构造函数方式，原型方式，混合方式，JSON方式
直接上样例：
var goods = { name: "男士衬衣", type:"男装", price:200, color:"白色", showInfo:function(){ alert(this.name+this.type+this.price+this.color); }, showcolor:function(){ alert(this.color); }}//方法调用goods.showInfo();goods.showcolor();
二、BOM与DOM
window 对象
在JavaScript中，window对象是全局对象，所有表达式都在当前的环境中进行计算，在使用窗口属性和方法时，允许以全局变量或系统函数的方式来使用，例如window.document可以简写成为document的形式
window的常用方法
open(url,name,features,replace)/*打开一个新的窗口,均为可选参数，replace为true创建新的历史记录，否则替换旧的历史记录*/close()//关闭当前界面setTimeout(code,time)/*计时器，在指定时间间隔后调用函数或计算表达式，仅运行一次*/
clearTimeout(id_of_timeout)//清空指定计时器的计时setInterval(code,time)/*都是必须参数没经过time的时间，调用一次表达式，time（以毫秒计时）*/
location对象
location对象是window对象的子对象，用于提供当前窗口或者指定框架的URL地址。
示例：改变页面url 的方法：
location.href = "http://www.baidu.com";location = "http://www.baidu.com";
location对象的方法
- assign(url)：加载一个新的文档
- reload(force)：重新加载当前文档。参数缺省时默认为false，false时候，从缓存区中装载文档，true时，从服务器端口重新加载文档
- replace(url)：使用一个新的文档取代当前文档，且不会再history对象中生成新的记录
history对象
history对象用于保存用户在浏览网页时候访问URL的地址，history对象中的length属性表示访问历史记录的数量，JavaScript不允许通过history对象获取已经访问过的URL。
history对象的方法
history.go(-1);//后退history.back();//后退history.go(1);//前进history.forward();//前进
navigator对象
navigator对象包含浏览器相关信息 包括浏览器名称版本号等
document对象
整体上分为两个大类：
- 对文档流的操作
- 对文档元素的操作
write()和writeln()方法
基本相同，区别是writeln()会在每次输出后额外加一个换行符
getElementById()方法
返回指定的ID元素。在当前界面有多个ID相同的元素时候，只返回第一个符合条件的元素
getElementByName()方法
用于返回指定name属性的元素的集合。
getElementByTagName()
返回指定标签名元素的集合，当参数为
*时候返回所有的标签元素
getElementByClassName()
返回指定class属性的元素集合
querySelector()
返回指定的CSS选择器的元素
Form对象
是document对象的子对象，通过form对象可以实现表单验证等效果。
语法：
document.表单名称.属性
document.表单名称.方法(参数)
document.forms[索引].属性
document.forms[索引].方法(参数)
方法名：
- submit() 表单数据提交到web服务器
- reset() 对表单的元素进行重置
Table对象
DOM节点
三、JQuery
引入JQuery库
<script type="text/javascript" src="js/jquery.1.x.js"></script>
在引入Jquery库之后，通过
$()函数获取界面中的元素即$("mydiv")等价于jQuery("mydiv")
一、DOM对象和jQuery对象
示例，将DOM对象装成jQuery对象然后调用jquery对象的方法
var domObject = document.getElementById("mydiv");
var jqueryObject = $(domObject);
二、jQuery选择器
四大类选择器：
- 基本选择器
- 层次选择器
- 过滤选择器
- 表单选择器
1.基本选择器
基本选择器最常用的选择器 ， 通过元素的
id,className或者tagName来查找页面中的元素 ID是元素的唯一标识，不能重复，所以ID选择器返回单个jQuery对象；而calss属性用于设定元素的样式，允许多个元素使用同一样式，所以calss选择器返回一个jQuery对象类型的数组。
$("#id_div").css("color","blue");//根据ID属性进行匹配 返回单个jQuery对象
$(".classDiv").css("background-color","#000000");//根据class属性进行匹配 返回对象数组
$("span").css("font_size","20px");//根据元素标签名属性进行匹配 返回对象数组
$("*").css();//当前界面所有元素
$("#id_div,.classDiv").css();//多种匹配，","隔开
2层次选择器
通过各国DOM对象的层次关系来获取特定的元素，如 同辈元素 ，后代元素 ，子元素 和相邻元素 等。用法与基本选择器类似，返回均为jQuery对象数组。、
-
后代选择器
格式：
父元素 指定元素（空格隔开）选择父元素的所有指定元素（包括第一代，第二代等等）。
$("父元素 指定元素") -
子代选择器
格式：
父元素 > 指定元素（>隔开）选择父元素的所有第一代的指定元素。
$("父元素 > 指定元素") -
相邻选择器
格式：
元素 + 指定元素（+隔开）选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则取不到，相互之间必须是挨着的）。
$("元素 + 指定元素") -
同辈选择器 ，
格式：
元素 ~ 指定元素（~隔开）选择元素下面的所有指定元素。
$("父元素 ~ 指定元素")
3过滤选择器
可以满足大部分页面元素的选取需求
-
简单过滤选择器
$(table tr:first)//first样例 选取第一个元素 :last//选取最后一个元素 :even //索引值为偶数的元素，从0开始计数 :odd //索引值为奇数的元素，从0开始计数 :foucs//选取获取焦点的元素 :root//获取文档的根元素 :animated//选取正在执行动画效果的元素 :eq(index)//选取索引等于index的元素 :gt(index)//选取索引大于index的元素 :lt(index)//选取索引小于index的元素 :not(selector)//选取selector以外的元素 -
内容过滤选择器
:contains(text)//选取包含text内容的元素 :has(selector)//选取含有selector所匹配的元素 :empty//选取不包含文本或者子元素的空元素 :parent//选取含有子元素或文本的元素 -
可见性过滤选择器
:hidden//选取所有不可见元素 或者type为hidden的元素 :visible//选取所有可见的元素 -
属性过滤选择器
以
"["开始以"]"结束[attribute]//选取包含指定属性的元素 [attribute = value]//选取属性等于某个特定值的元素 [attribute != value]//选取属性不等于某个特定值的元素 [attribute ^= value]//属性以某个值开始的元素 [attribute $= value]//属性以某个值结尾的元素 [attribute *= value]//包含 [attribute1][ attribute2][ attribute3]//复合属性 -
子元素过滤选择器
见书p421
-
表单对象属性过滤选择器
:enabled//属性为可用的元素 :disabled//不可用的元素 :checked//被选中的元素（单选按钮，复选框） :selectd//被选中的元素（下列列表）
4表单选择器
表单选择器可能够让用户更加方便的处理表单数据，通过表单选择器可以快速定位到某类表单的对象。
详见书上p424。
jQuery基本操作
以下操作只能在jQuery中操作
一、属性操作
attr()和prop()
区别：
-
如果是固有属性，
attr()和prop()方法均可获取 -
如果是自定义属性，只有
attr()可以获取 -
如果返回的是Boolean类型的属性：
若设置了属性，
attr()返回具体的值，prop()返回true若设置了属性，
attr()返回undefinded，prop()返回false
$("img").attr("src")
$("#myImg").attr("src")
$("#myImg").attr("src","xxx/xxx.png")//设置myimg的src属性
$("#myImg").attr({src:"xxx/xxx.png",title:"dsadsas"});
$("#myImg").attr("title",function(){return this.src });
-
获取属性
attr(属性名)prop(属性名)$("#checkbox").attr("checked");//checked undefinded $("#checkbox").prop("checked");//true false -
设置属性
-
移除属性
removeAttr(属性名)
removeProp(属性名)
二、样式的操作
通过class属性指定的HTML标签的样式名方法为：
attr("class")addClass()删除：removeClass()
方法：
除去以上
-
toggleClass()
$("#checkbox").toggleClass(className) $("#checkbox").toggleClass(className,true/false)//true时样式允许切换 -
css()
$("#checkbox").toggleClass(属性名) $("#checkbox").toggleClass(属性名,属性值) $("#checkbox").toggleClass(样式) $("#checkbox").toggleClass(属性名,function(元素索引位置,修改之前的属性值))
三、内容操作
-
html()
html()//获取元素内容，包含HTML标签（非表单元素） html("内容")//设置元素内容，包含HTML标签（非表单元素） -
text()
text()//获取元素纯文本内容，包含HTML标签（非表单元素） text("内容")//设置元素纯文本内容，包含HTML标签（非表单元素） -
val()
val()//获取元素的值，（表单元素） val("内容")//设置元素的值，（表单元素）
扫一扫
1131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
