js基础总结_js基础知识总结笔记

javascript:js-15天
10-12:js原生态代码
Ajax和jquery
13-15
2天前台框架 bootstrap
———————————————————————
js_01
———————————————————————
1.什么是js？
原名javascript，正式名式ECMAscript，这个标准由ECMA发展和维护的，ECMA-262是正式的标准，
他是基于网景公司提出的javascript语言和微软公司提出的jscript。
基于对象和事件驱动的，并具有安全性的脚本语言，目的是与web交互，美化页面。
基于对象:
现实生活中:就是形形色色可以看得见
代码里面:由代码执行出来的效果就是对象
对象: 属性方法
js原理:就是在文本对象里面找见元素对象，对元素对象进行修饰 var img
获取属性或者方法:是通过 . 获取的
事件驱动:
事件:当键盘或者鼠标进行操作的时候，类似于点击，双击，键盘的上下左右
驱动:事件发生的时候，就会产生一个驱动。
脚本语言:就是对软件进行操作的，基于客户端。
2.js特点
（1）是解释性语言：所有的语言都必须转换为机器语言，也就是程序员写出的代码，要翻译为机器语言才可以用。
编译器:编译解释，如果翻译的方式是通过解释的方式进行编译的，那么这种语言就叫解释性语言。类似于javascript
（2）语法结构与java和c++ 十分的相似。
（3）基于对象的语言
（4）跨平台性:只与浏览器有关，与操作环境无关
(5) 安全性和简单性
3.javascript和java的关系
就像雷锋和雷峰塔的关系，类似于java和javascript 借java的语言名气推广javascript
4.优点
（1）在客户端进行数据验证，节省服务器资源
（2）使网页更加友好
（3）支持分布式的运算和处理（客户端），不需要网络和服务器的参与
5.缺点
（1）浏览器兼容性问题
（2）不能读写打开和保存计算机上的文件
6.编译环境
（1）sublime vi nop++编辑器
（2）浏览器（与服务器没有关系）
7.语法
（1）html页面写js代码
a.<script type=“text/javascript”> js代码</script >
b.<script type=”text/javascript” src=”导入的js文;件”>不允许写任何的js代码</script >
c.<button onclick=”alert(‘aaaa’)”>点击</button>
d.<a href=”javascript:alert(‘vvvvvvv’)”></a>
(2)引号嵌套
双引号里面可以写单引号，单引号里面可以写双引号双引号里不能嵌套双引号，单引号也是如此
（3）js注释单行 // 多行/* */
(4) 语句结尾一般加分号如果忽略分号的话，就会由解析器确定语句的结尾，一般情况下换行会被当做一个语句的结尾（规范语句后面加结尾 ;）
(5) 变量是用来存储数据的格式: var 变量名相当于一个变量可以加var 也已不加var
（6） js输出方式: alert()
document.write(“aaaa”);
(7) 获取元素标签 document.getElementById(“id值”);
（8）如果在一条语句里面同时写多个变量格式: var name=”aa”,age=18,sex=”nv”;
(9) js代码”一般”可以随意放置，规范:加在body体后面
</body>
<script type=”text/javascript”>
//获取id值为did的div元素或者标签
var did=document.getElementById(“did”);
// alert(did);
did.onclick=function(){
did.style.width=”400px”;
did.style.height=”400px”;
did.style.backgroundColor=”red”;
}
</script>
（10）+连接符的问题 +运算符只有在+的两边都是整数的时候，才可以运算（运算顺序问题，从左到右） “10”代表的是字符串连接变量连接字符串和整数
javacript_02
——————————————————————————–
1.关键字和保留字
标识符:给变量，函数，对象起的名字块，就是标识符。
标识符第一个字符可以是字母，下划线，$(美元符号)，但是不能以数字开头
关键字和保留字:true false break continue var while finally for else switch case enum int float short ….
关键字和保留字不能用作标识符
2.变量的局部和全局
局部：指的的是在特定的区域块内使用，全局是在整个区域可以使用
在函数的外部:加var和不加var 都是全局变量
在函数的内部，加var是局部变量，不加var 是全局变量
在函数外部定义一个全局变量和在函数内部定义一个相同的全局变量，在函数外部，使用的话，函数内部的全局变量会覆盖函数外部的全局变量。
3.数据类型
（1）typeof 判断数据的类型
（2）数据类型的8个
a. 数值 //number 十进制八进制（以0开头，而且后面都是数字）十六进制（以0x开头，后面是从A开始的大写字母，A代表的10，依次增加）小数型
所有的八进制和十六进制二进制都必须转换为十进制才可以用
整形十进制八进制十六进制小数型
浮点型数值里面必须包含小数点，而且小数点后面必须有一位小数 0.1
b.字符串型 string 是由字符，标点，数字组成的一系列的字符串 “11111”“abc123”
单引号和双引号是不能解析变量的
c.布尔型 boolean 返回的只有两个值 true 1 false 0
d.数组 object 和对象一样就是数据的集合这些数据可以是字符串，数值，布尔型，数组取数据是通过下标取的，下标识从0开始的
e.对象 object 就是数据的集合这些数据可以是字符串，数值，布尔型
f.null object 空 var a=null；
g.undefined 未定义的 undefined（ var =；）
h.函数（function） function
其中数组和null返回的数据类型是object（对象）
字符串型和布尔型，数值型数据类型都可以转换为对象通过一个关键字 new

4. parseInt（）
parseInt()的转换规则：
1.忽略字符串前面的空格，直到找到第一个非空格字符2.如果第一个字符不是数字或者是负号，返回NaN
3.空字符串，返回NaN4.如果第一个字符是数字，会继续解析第二个字符，直到解析完所有后续字符或遇到了一个非数字字符。
5.如果字符串以0x开头且后面跟数字字符，就会将其转为16进制数，同样，八进制也一样。 Num（）（了解）
Number()函数的转换规则：
1.如果是布尔值，true和false将分别转换为1和02.如果是数字值，只是简单的传入和返回
3.如果是null，返回0
4.如果undefined，返回NaN
parseFloat (了解)
1.第一个小数点是有效的，第二个小数点无效2.始终忽略前面的0，不分进制数
3.十六进制会被转换成十进制4.空字符串转换为NaNNaN:not a number 判断不是一个数值
isNaN 来判断不是一个数值返回的结果是true和false
var b=”123″ //123;
document.write(“b”+isNaN(b)+”<br>”);
以上的例子:在使用isNaN的时候，系统会自动的吧“123”先转换为123，然后再去判断它是不是一个数值5.运算符
一元：
a++；先赋值后运算
++a；先运算后赋值
a–；先赋值后运算
–a；先运算后赋值
三元：
条件? 真:假如果条件为真的时候返回的就是？号后面的语句真为假的话，返回的是:后面假
6.简单的计算器
javascript_03
————————————————————————————-
1.二元运算符:+ – * / %(取余)

2.= 赋值
== 等于数值相等，类型可以不同
=== 等同数值和类型都必须相等
b+=a 相当于b=b+a
3.!= 不等于（数值不同）
!== 不等同于（数值和类型都不等同于）
4.|| 或在||的前后只要有一个为真的，括号里面条件就为真
&& 与在&& 的前后，两个必须都为真，括号里面才为真，只要有一个为假，那么，括号里面条件就为假
语句:
5.if语句
if 格式 : if(条件){执行代码块} 如果条件为真的话，那么就去执行花括号里面的代码块
if else 格式:if(条件){执行代码块1}else{执行代码块2} 如果条件为真的话，执行代码块1，如果条件为假的话，执行代码块2
if else if else :格式 if(条件1){执行代码1}else if(条件2){执行代码2}else{执行代码块3} 如果条件1和条件2都为假的时候，就去执行代码块3
if 和else中间加空格
if 嵌套
6.switch :switch(变量){case 常量:代码块 break；case 常量:代码块 break；default:代码块} 常量去匹配变量，如果匹配正确的话
，就去执行相对应的代码块。如果没有匹配成功，就去执行默认的default后面的代码 break 阻止代码向下执行，跳出
7.for循环 :基本格式:for(赋值条件;判断条件;运算条件){执行代码块} 先去执行赋值条件，再去判断条件里面对比，
如果符合判断的条件的话执行相对应的代码块，在去执行运算条件。直到不满足判断条件为止，跳出for循环
8.continue 结束本次语句，继续执行下边代码
9.do{} while（）;
//先去运算，后执行循环语句
var i=1;
var num=0;
do{
num+=i; //num=1+0=1 2+1=3 3+3=6
i++;
}while(i<=100);
alert(num);
10. while(){}
//先去执行循环语句，后运算
while(i<=100){
num+=i; //num=0+1; 2+1=3 3+3=6
i++;
}
alert(num);
11. 数组 in 判断数据是否在数组里面或者对象属性是否在对象里面
数组定义:
var a=[10,20,30,40];
alert(a.length);//4
遍历数组:
for(var i=0;i<a.length;i++){
alert(a[i]);
}
12.逗号运算符:

2.函数的调用
（1）普通的调用:
//自定义函数普通调用
function fun(a,b){
return a+b;
}
document.write(“自定义函数:”+fun(10,20)+”<br>”);
调用的格式:函数名（）；
（2）事件引入方式:
<button onclick=”alert(fun(10,20))”>调用</button>
自定义函数事件引入调用
function fun(a,b){
return a+b;
}
(3)赋值调用
/自定义函数赋值调用
function fun(a,b){
return a+b;
}
var c=fun(10,20);
alert(c);
（4）a标签调用:
<a href=”javascript:void(0)” onclick=”alert(fun(10,20))”>调用一</a>
<a onclick=”javascript:alert(fun(10,20))”>调用二</a>
//自定义函数 a标签调用(不常用)
function fun(a,b){
return a+b;
}
3.函数的参数
当实际参数的个数大于形式参数的个数，多余的实际参数会被省略掉
当实际参数的个数小于形式参数的个数，形式参数多余的个数就会被定义为NaN
4.函数的参数值
arguments 代表的是参数
//自定义函数普通调用
function fun(a,b){
//函数的参数的长度
// alert(arguments.length);
//遍历参数
for(var i=0;i<arguments.length;i++){
alert(arguments[i]);
}
}
fun(10,20);
5.编码和反编码
escape 编码:把一些特殊符号，字母，转换为ASCII 值，目的是保护网站安全，防止黑客的侵入
unescape 反编码
6.eval :将一个字符串转换为js表达式
7.内置对象的定义方式（了解）
//自定义的
var ob=new Object();
//成员属性
ob.name=”蛋蛋”;
ob.age=10;
ob.info=function(){
return ob.name+”:”+ob.age;
}
document.write(ob.info()+”<br>”);
//json格式
var ob={“name”:”双双”,”age”:12};
json：{属性:属性值，属性2：属性2值} 相当于对象（重点）
document.write(ob.name+”:”+ob.age+”<br>”);
//函数定义
function fun(){
this.name=”大柳”;
this.age=8;
this.info=function(){
return this.name+”:”+this.age;
}
}
var ob=new fun();
document.write(ob.name+”:”+ob.age+”<br>”);
8.图片轮播

9.时分秒的倒计时
js_05
——————————————————————————————————–
1.时分秒，图片轮播，计算器
2.for in （判断对象属性值属于对象）
3.with 指定的是特定的区域块
4.布尔对象
new Boolean(参数); 将参数转换为布尔值，并创建一个布尔对象
var a=new Boolean();
// alert(typeof(a));
//0
var a=new Boolean(0);
document.write(“参数转换为false:”+a+”<br>”);
//null
var a=new Boolean(null);
document.write(“参数转换为false:”+a+”<br>”);
//false
var a=new Boolean(false);

document.write(“参数转换为false:”+a+”<br>”);
//undefined
var a=new Boolean(undefined);

document.write(“参数转换为false:”+a+”<br>”);
//空
var a=new Boolean();
document.write(“参数转换为false:”+a+”<br>”);
//NaN
var a=new Boolean(NaN);

document.write(“参数转换为false:”+a+”<br>”);
//”false”
var a=new Boolean(“false”);

document.write(“参数转换为true:”+a+”<br>”);
5.日期对象
var a=new Date();
// alert(typeof(a));
//年
year=a.getFullYear();
document.write(year+”<br>”);
//月
month=a.getMonth()+1;
document.write(month+”<br>”);
//日
date=a.getDate();
document.write(date+”<br>”);
//星期几
day=a.getDay();
document.write(day+”<br>”);
//时
hour=a.getHours();
document.write(hour+”<br>”);
//分
minute=a.getMinutes();
document.write(minute+”<br>”);
//秒
second=a.getSeconds();
document.write(second+”<br>”);
//毫秒
millisecond=a.getMilliseconds();
document.write(millisecond+”<br>”);
//时间戳
time=a.getTime();
document.write(time+”<br>”);
//时区差（了解）
timeoffset=a.getTimezoneOffset();
document.write(timeoffset+”<br>”);
//本地化时间
localtime=a.toLocaleString();
document.write(localtime+”<br>”);
6.数学对象
//进一取整
document.write(“进一取整:”+Math.ceil(1.6)+”<br>”);
//退一取整
document.write(“退一取整:”+Math.floor(1.23)+”<br>”);
//最大值
document.write(“最大值:”+Math.max(10,20)+”<br>”);
//最小值
document.write(“最小值:”+Math.min(10,20)+”<br>”);
//0.0-1.0之间的随机数
document.write(“0.0-1.0之间的随机数:”+Math.random()+”<br>”);
//0-9之间的整数
document.write(“0-9之间的整数:”+Math.floor(Math.random()*10)+”<br>”);//0.013 0.13 0 0.923
// 0-9
document.write(“0-9之间的整数:”+Math.ceil(Math.random()*10-1)+”<br>”); //0.013 0.13 1 -1=0 0.923 9.23 10 -1 9
//四舍五入
document.write(“四舍五入:”+Math.round(1.2)+”<br>”);
7.字符串对象
//返回的字符串取得是包含start 但是不包含end之间字符串 slice（start，end）
document.write(“返回子字符串在字符串里面最后一次出现的位置：”+ob.slice(2,5)+”<br>”);
//返回的字符串取得是包含start ，length个字符串 sunstr（start，length）
document.write(“返回的字符串取得是包含start ，length个字符串 sunstr（start，length）:”+ob.substr(2,5)+”<br>”);
//返回的字符串取得是包含start 但是不包含end之间字符串 subsring（start，end）
document.write(“返回的字符串取得是包含start 但是不包含end之间字符串 subsring（start，end）：”+ob.substring(2,5)+”<br>”);
//字符串小写
document.write(“字符串小写 “+str.toLowerCase()+”<br>”);
//字符串大写
document.write(“字符串小写 “+ob.toUpperCase()+”<br>”);
//字符串长度
document.write(“字符串小写 “+str.length+”<br>”);

8.数组对象
//将数组转换为字符串
document.write(“将数组转换为字符串”+ob.toString()+”<br>”);
//将数组连成字符串
document.write(“将数组连成字符串”+ob.join(“.”)+”<br>”);
//在数组尾部添加元素返回的是数组长度
document.write(“在数组尾部添加元素”+ob.push(40)+”<br>”);
//替换数组元素返回替换掉的元素
document.write(“替换数组元素返回替换掉的元素”+a.splice(2,1,”f”)+”<br>”);
// alert(a);
//颠倒数组中元素
var b=[“a”,”b”,”c”,”d”,”e”];
document.write(“颠倒数组中元素”+b.reverse()+”<br>”);
//排序
var f=[5,2,0,1,3,8,4];
document.write(“在数组头部添加元素”+f.sort()+”<br>”);
//delete只能删除元素值，不能减少元素的个数或者长度
var h=[10,20,30,40];
delete(h[0]);
alert(h.length);
for(i=0;i<h.length;i++){
alert(h[i]);
}

9.全选，全不选，反选

js_06
—————————————————————————-
1.事件
当鼠标或者键盘操作文本区的时候，会产生一个事件
事件:事件源事件处理程序
<!– 事件源 button按钮事件单击事件处理程序 fun() –>
<button onclick=”fun()”>点击</button>
function fun(){
alert(“我的有点是，我很帅，缺点是帅的不明显”);
}
this 代表的是自己对象
2.事件驱动
当产生一个事件的时候，会自动的调用程序去处理，事件调用程序，叫做事件驱动
3.事件的设置
事件引入设置
<!– 事件的引入方式去设置 –>
<button onclick=”fun()” id=”dd”>点击</button>
function fun(){
alert(“我咒你一辈子吃方便面没有调料包”);
}
在标签对象上面设置
//事件设置二获取div
did=document.getElementById(“did”);
did.onclick=function(){
this.style.width=”400px”;
this.style.height=”400px”;
this.style.borderColor=”orange”;
}
4.事件
onclick 单击事件
ondblclick 双击事件
oncontextmenu 鼠标右击
clientX 代表的是获取鼠标指针相对于浏览器的水平坐标
clientY 代表的是获取鼠标指针相对于浏览器的垂直坐标
onmouseover 鼠标移入事件
onmouseout 鼠标移出事件
onfocus 获得焦点事件
onblur 失去焦点事件
5.树形菜单
6.选项卡
7.右键菜单效果
js_07
—————————————————————————————
1.onmousemove 鼠标移动事件
offsetWidth 获取元素标签自身的宽度和高度
offsetHeight
2.onchange 文本区发生改变的时候，产生的事件
3.onmousedown 鼠标按下事件
onmouseup 鼠标抬起事件
offsetTop 元素（border）距离控件（父元素）(border)的left和top距离
offsetLeft
4.onselect 当文本区被选中的时候，产生的事件
onreset 当点击form表单按钮的时候，产生的事件
5.onkeypress 键盘的按下和释放事件
keyCode 获取键盘值
6.特效
放大镜
城市级联
拖拽效果
贪吃蛇的前奏
js_08
—————————————————————————————————–
onkeydown 键盘的按下
onkeyup 键盘抬起
bom:
bom browser object model 浏览器对象模型（记住）
bom提供独立内容和浏览器窗口交互
bom用于浏览器窗口和子窗口的通讯上其核心是 window（记住）
bom有对象对象有很多的属性和方法
1.window
属性:
onload 先去加载页面，后执行js代码
parent 父窗口
history 历史对象
方法:
alert()警告框
confirm（）确定框
prompt（）对话框
open（）打开窗口
close()关闭窗口
2.navigator（了解）
document.write(“返回浏览器的代码名字”+navigator.appCodeName+”<br>”);
document.write(“返回浏览器的名称”+navigator.appName+”<br>”);
document.write(“返回浏览器的版本”+navigator.appVersion+”<br>”);
document.write(“返回浏览器的语言”+navigator.language+”<br>”);
document.write(“返回浏览器的编译平台”+navigator.platform+”<br>”);
document.write(“返回浏览器的用户表头”+navigator.userAgent+”<br>”);
3.screen（记住）
document.write(“返回屏幕的高度”+window.screen.height+”<br>”);
document.write(“返回屏幕的宽度”+window.screen.width+”<br>”);
document.write(“返回屏幕的可用高度（不包括底部任务栏）”+window.screen.availHeight+”<br>”);
document.write(“返回屏幕的可用宽度（不包括底部任务栏）”+window.screen.availWidth+”<br>”);
document.write(“返回屏幕的可用高度（不包括任务栏）”+window.screen.availHeight+”<br>”);
document.write(“返回文档的可用高度（不包括底部的任务栏）”+window.innerHeight+”<br>”);
document.write(“返回文档的可用宽度（不包括任务栏）”+window.innerWidth+”<br>”);
clientX 鼠标点击的位置相对于浏览器的水平坐标
clientY 鼠标点击的位置相对于浏览器的垂直坐标
offsetWidth 元素的自身宽度
offsetHeight 元素的自身的高度
offsetTop 元素border 距离父元素（border）的top值
offsetLeft 元素border 距离父元素（border）的left值
top 元素相对于浏览器的top值
left 元素相对于浏览器的left值
4.history
go（1）前进
go（-1）后退
back（）后退
forward（）前进
5.location(了解)
返回的是一个完整URl地址
document.write(window.location.href+”<br>”);
返回的是一个路径名
document.write(window.location.pathname+”<br>”);
返回当前的URL协议
document.write(window.location.protocol+”<br>”);
返回是端口号
document.write(window.location.port+”<br>”);
返回的是主机名
document.write(window.location.hostname);
6.弹力球（漂浮广告）
js_09
————————————————————————
dom:定义了访问和操作html文档的标准方法
dom可以把html 分为元素文本属性结构树（节点树）
使用dom可以改变html里面每个项目，包括删除，增加，改变
dom分为3个部分
1.core dom 针对的是所有的结构化文档属性
2.xml dom 只针对xml文档对象
3.html dom 针对的是html的文档对象（重点）
节点:html里面的每个成分都是一个节点

节点的规定:
文档节点：每个html里面的每个文档都是一个节点
元素节点:html里面的每个标签都是一个元素节点
文本节点:html里面的每个文本都是文本节点
注释节点:
属性节点:html里面的每个属性都称之为属性节点
如何访问节点:
document.getElementById() document.getElementsByTagName()
childNodes 获取所有的子节点 firstChild 获取的第一个子节点 lastChild 获取的是最后一个子节点 parentNode获取父节点
document.all 获取的是document里面所有节点
节点信息:
nodeValue 节点值 nodeValue对元素节点和文本节点是没有用的
nodeType 节点的类型
元素节点： 1
属性节点: 2
文本节点: 3
注释节点: 8
文档节点：9
nodeName 节点的名称
节点:
anchor 获取锚点 document.anchors
images 图片的延迟加载
cookie 会话的跟踪控制
base默认的超链接这个超链接必须是一个完整的url
event 事件
form 表单
check 选中
select 下拉框节点
特效
移动特效
js_10
—————————————————————————————–
XML的DOM

DOM （Document Object Model）文档对象模型
1. document 文档 HTML XML 文件（标记语言)
<body>
<div>
<!– –>
<a href=”#”>wwww</a>
</div>
</body>
节点：
将文档想成一个倒树，每一个部分（根、元素、文本（内容），属性，注释）都是一节点。
根据 DOM，HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
1. 整个文档是一个文档节点(根节点)
2. 每个 HTML 标签是一个元素节点
3. 包含在 HTML 元素中的文本是文本节点
4. 每一个 HTML 属性是一个属性节点
5. 注释属于注释节点

2. 父、子和同级节点
节点树中的节点彼此之间都有等级关系。

父、子和同级节点用于描述这种关系。父节点拥有子节点，位于相同层级上的子节点称为同级节点（兄弟或姐妹）。
1. 在节点树中，顶端的节点成为根节点
2. 根节点之外的每个节点都有一个父节点
3. 节点可以有任何数量的子节点
4. 叶子是没有子节点的节点
5. 同级节点是拥有相同父节点的节点

只要知道一个节点，按关系找到其它节点
父节点： parentNode
子节点（第一个，最后一个） childNodes firstChild lastChild
同胞（同辈）节点（上一个，下一个）nextSibling previousSibling

3。获取节点的方式：
array getElementsByTagName(“节点名”); //获取所对应节点名（所有），返回的是数组
object getElementById(“id名”); //获取id名的唯一节点对象

示例：(找节点)
document.getElementsByTagName(“li”); //所有所有li节点
document.getElementById(“lid”); //获取id值为lid的唯一节点
document.getElementById(“uid”).getElementsByTagName(“li”);
//获取id值为uid中所有li子节点
document.getElementsByTagName(“ul”)[0].getElementsByTagName(“li”);
//获取第一个ul节点中所有li子节点

获取到的标记名(多个)、 id（唯一）、 name（多个）

4. 每个节点中的内容
节点类型nodeType、节点名nodeName，节点值nodeValue

节点名nodeName：
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 是属性的名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document

节点值nodeValue
元素节点的 nodeValue 是 undefined
文本节点的 nodeValue 是文本自身
属性节点的 nodeValue 是属性的值

nodeType（节点类型）
元素类型节点类型
元素 1
属性 2
文本 3
注释 8
文档 9

4. Object 对象（HTML元素转成的对象(js对象)）
注意：如果使用js操作HTML文档，就需要选将HTML文档结构转成Js对象
a. 操作属性:
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
其他属性：（针对于节点）
childNodes 返回节点到子节点的节点列表。
firstChild 返回节点的首个子节点。
lastChild 返回节点的最后一个子节点。
nextSibling 返回节点之后紧跟的同级节点。
previousSibling 属性可返回某节点之前紧跟的节点（处于同一树层级）
parentNode 返回节点的父节点。

b. 操作内容

innerHTML //获取的是显示的内容

c. 操作样式
aobj.style.backgroundColor=”red”;
aobj.style.fontSize=”3cm”;
className
aobj.className=”test”;
aobj.className+=” demo”;
aobj.className=””;
e. 操作节点：
appendChild() 向节点的子节点列表的结尾添加新的子节点。
cloneNode() 复制节点。
removeChild() 删除（并返回）当前节点的指定子节点。
replaceChild() 用新节点替换一个子节点。
insertBefore() 在指定的子节点前插入新的子节点。
setAttribute（）设置属性值（改变节点）

f. 创建节点：
* createElement() 创建元素节点

有了以上三点的操作之前先转成对象
转成对象的两种形式：
1. 标记名(多个)、 id（唯一）、 name（多个）
document中的三个方法
var objs=document.getElementsByTagName(“div”); //获取多个
var objs=document.getElementById(“one”); //获取一个
var objs=document.getElementsByName(“two”); 获取指定名称的节点
图片轮播加按钮
js_11
———————————————————————————
1.什么是ajax？
可以用于创建快速的动态网页
可以不重新在加载整个页面的情况下，进行网页局部刷新
ajax是一门无刷新的技术，不是一门语言。
2.ajax的优点和缺点？
优点:进行网页的局部刷新
缺点:不利于搜索引擎
3.ajax的运行原理？
创建请求对象
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
初始化请求
xmlhttp.open(“GET”,”01.php”,true);//get是发送方式 01.php请求的服务器端的页面 true 异步发送
执行发送
xmlhttp.send();
获取响应数据
xmlhttp.onreadystatechange=function(){
//4请求状态 200响应状态
if (xmlhttp.readyState==4 && xmlhttp.status==200){
str=xmlhttp.responseText;
alert(str);
}
}
post的提交方式:
//初始化请求
xmlhttp.open(“POST”,”05.php”,true);//post是发送方式 01.php请求的服务器端的页面 true 异步发送
//设置header头
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
//执行发送
xmlhttp.send(‘num1=’+nn1+’&num2=’+nn2+’&c=’+c);
js_12
——————————————————————————————————–
1.ajax的表单验证
2.正则
3.js里面的表单验证
4.图片轮播（加数字图片按钮）
5.复习js
js_13
—————————————————————————————————–
1.jquery
缩写jq，是js的框架，具有优秀的js库，能快速的写js。有完善的ajax，链式的连贯操作，完全的事件处理机制，有独特的选择器
2.jquery的优点
完善的ajax 强大的选择器强大的兼容性出色的dom封装
3.缺点
对服务器会造成一定的压力
4.jquery的引入方式
jquery的入口文件
$(function(){
jquery的代码
})
5.选择器
基本选择器:
id
类
元素
*
组合
层级:
//匹配父元素下面的所有子元素（直系）
$(“ul>li”).css(“color”,”yellow”);
//紧跟在prev元素的next元素
$(“ul+li”).css(“color”,”pink”);
//匹配prev元素的所有同辈元素
$(“ul~li”).css(“color”,”green”);
基本选择器2:
//jquery的入口文件
$(function(){
//匹配的是第一个元素
$(“li:first”).css(“color”,”yellow”);
//匹配的是最后一个元素
$(“li:last”).css(“color”,”pink”);
//匹配索引值是偶数的
$(“li:even”).css(“background-color”,”#ccc”);
//匹配索引值是奇数的
$(“li:odd”).css(“background-color”,”#666″);
//匹配一个给定索引值的元素
$(“li:eq(2)”).css(“background-color”,”#f00″);
//匹配一个大于给定索引值的元素
$(“li:gt(2)”).css(“background-color”,”#0f0″);
//匹配一个小于给定索引值的元素
$(“li:lt(2)”).css(“background-color”,”blue”);
//匹配h1，h2之类的标题元素
$(“:header”).css(“background-color”,”#0f0″);
})
function fun(){
$(“#did”).animate({height:”+=100px”,width:”+=100px”});
}
内容选择器:
//匹配包含给定文本值得元素
$(“div:contains(‘de’)”).css(“border”,”20px dotted green”);
//筛选元素
$(“div:has(p)”).css(“color”,”red”);
//匹配有文本的元素
$(“td:parent”).css(“border”,”1px solid red”);
})
可见性选择器:
//jquery的入口文件
$(function(){
//匹配被隐藏的元素
$(“td:hidden”).css(“display”,”block”);
//匹配可见的元素
$(“td:visible”).css(“display”,”none”);
})
属性选择器：
//匹配给定属性特定值得元素
$(“input[name=’uname’]”).css(“border”,”1px solid red”);
//匹配不给定属性特定值得元素
$(“input[name!=’uname’]”).css(“border”,”1px solid green”);
//匹配给定属性以某些值开始得元素
$(“input[name^=’a’]”).css(“border”,”1px solid orange”);
//匹配给定属性以某些值结束得元素
$(“input[name$=’ss’]”).css(“border”,”1px solid pink”);
//匹配给定属性包含某些值得元素
$(“input[name*=’n’]”).css(“border”,”1px solid green”);
子元素选择器:
//获取父元素下的第n个子元素
$(“ul li:nth-child(2)”).css(“color”,”red”);
//获取父元素下的第一个子元素
$(“ul li:first-child”).css(“color”,”green”);
//获取父元素下的最后一个子元素
$(“ul li:last-child”).css(“color”,”blue”);
//获取父元素下的唯一的一个子元素
$(“ul li:only-child”).css(“color”,”pink”);
表单选择器:
//匹配所有的input
$(“:input”).css(“border”,”1px solid red”);
//获取类型是text的input框（以下三种方法）
$(“:text”).css(“border”,”1px solid green”);
$(“input[type=’text’]”).css(“border”,”1px solid blue”);
$(“input:text”).css(“border”,”1px solid pink”);
//获取被选中的(2种方法) attr 是设置属性值
$(“input:checked”).attr(“checked”,false);
$(“input[type=’radio’]:checked”).attr(“checked”,false);
//改变value值 val() 如果有参数代表的是赋值否则是value值
$(“input:text”).val(“222”);
js_14
————————————————————-
1.jquery的全选全不选反选
2.文档处理
$(this)当前的对象
html()获取文本值
内部插入:
前入式：prependTo prepend
后入式:appendTo append
外部插入: 后插: after insertAfter
前插: before insertBefore
3.表格的删除添加
4.绑定事件和事件处理函数 bind or live
5.jquery的遍历 each
6.效果
普通效果:show hide toggle
滑动效果:slideDown slideUp slideToggle
淡入淡出:fadeIn fadeOut fadeToggle
7.jquery树形菜单 toggle 事件切换
8.jquery的移动特效
js_15
—————————————————————-
1.css 类
addClass 添加css类 removeClass 移除css类
2.菜单的下拉框
3.ajax（jquery的ajax）
load
$.post
$.get
$.ajax

js基础总结_js基础知识总结笔记

相关推荐

发表回复