Javascript基础·
js的String对象
创建String对象
var str="abc";
方法和属性
***属性： length：字符串的长度
***方法：
（1）于html相关的方法
-bold():字体加粗
-fontcolor():字体颜色
-fontsize()：设置字体大小
-link():将字符转换成超链接（ 变量名.link("超链接地址") ）
-sub()：上标 -sup()：下标
（2）于java相似的方法
-concat():连接字符串
**var str1="abc";
var str2="def";
document.write(str1.concat(str2));
-charAt():返回指定位置的字符串
var str3="abcdefg";
document.write(str3.charAt(20)); //字符位置不存在，返回空字符串
-indexOf():返回字符串位置
var str4="poiuyt";
document.write(str4.indexOf(w));//字符不存在，返回-1
-split():切分字符串，成数组
var str5 ="a-b-c-d";
var arr1 =str5.split("-");
document.write("length "arr1.length);
-replace():替换字符串
传递俩个参数：
——第一个参数是原始字符
——需要替换成字符
var str6="abcd";
document.write(str6);
document.write("<br/>");
document.write(str6.replace("a","Q"));
-substr()和substring()
var str 7="abcdefghuiop";
document.write(str7.substr(5,5)); //从第五位开始，向后截五个字符
***从第几个字符开始，向后截取几位
document.write("<br/>");
document.write(str7.substring(3,5)); //从第几位开始到第几位结束[3,5)
***从第几位开始，到第几位结束，但是不包括最后哪一位
js的Array对象
创建数组（三种）
-var arr1=[1,2,3];
-var arr2 =new Array(3);//长度是3
-var arr3 =new Array(1,2,3,);数组中的元素是1 2 3
属性：length：查看数组的长度
方法：
-concat()：数组的连接
var arr11=[1,2,3];
var arr12=[11,12,123];
document.write(arr11.concat(arr12));
-join():根据指定的符号把数组进行分割
var arr13=new Affay(3);
arr13[0]="a";
arr13[1]="b";
arr13[2]="c";
document.write(arr13);
document.write("<br/>");
document.write(arr.13,join("-"));
-push():向数组末尾添加元素，返回数组的新的长度
**如果添加的是一个数组，这个时候把数组当作一个字符串添加进去
push方法演示
-pop():表示删除最后一个元素，返回删除的那个元素
pop方法
-reverse():颠倒数组中的元素顺序
reverse演示
js的date对象
js里如何获取当前时间：
var date =new Date();
document.write(date): //不为习惯中国计时格式
document.write(date.toLocaletString())://转换为习惯的格式
getFullYear():得到当前年的方法
getMonth():得到当前的月的方法
****返回的是0-11月，如果想要得到准确的值，需要加1
var date 1=date.getMonth()+1;
document.write("month: "+date1);
-getday():获取当前的星期
星期日返回的是0 星期一到星期六返回的值为1-6
document.write("week： "+date.getday()):
-getDate:得到当前的天：
document.write((day: )+date.getDate);
-getHours:得到当前的小时：
document.write("hour: "+date.getHors());
-getMinutes:得到当前的分钟：
document.write("minute: "+date.getMinutes());
-getSeconds:得到当前的秒：
document.write("seconds: "+getSeconds());
-getTime():获取毫秒：
js中的math对象
*数学的运算
**里面都是静态方法，使用可以直接使用Math.方法()
-ceil(x):向上舍入
floor(x):向下舍入
found(x):四舍五入
random():得到一个0-1随机数（伪随机数）
document.write(Math.random());
得到一个0-9的随机数：
document.write(Math.floor(Math.random()*10));
js的全局函数
不属于任何一个函数，直接写名称使用
-eval():执行js代码（如果字符串是一个js代码，使用方法直接执行）
var str="alert'1234';";
eval(str);
-encodeURI():对字符进行编码
var str="测试中文aaa1234";
var encode1=encodeURI(str1);
document.write(encode1);
-decodeURI():对字符进行解码
var decode1=decodeURI(ebcode1);
-isNaN():判断当前字符串是否是数字
***如果是数字，返回false
***如果不是数字，返回true
-parseInt():类型转换（字符串转换成数字类型）
js的函数的重载
面试问题回答：js里面是否存在重载？
（1）js里面不存在重载
（2）但是可以使用其他方法来模拟实现重载效果 （通过arguments数组来实现）
js的bom对象
有哪些对象：
navigator:获取客户机的信息（浏览器的信息）
docunment.write(navigator.appName);
csreen:获取屏幕的信息
docunment.write(screen,width);
docunment.write(screen.height);
location:请求url地址
-href：***获取请求的url地址
***设置url地址
-页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个页面
<input type="button" value="tiaozhuan" onclick="href1();"/>
onclick="js的方法；" //鼠标点击事件
location.href="跳转的路径;";
history:请求url的历史记录
-到访问的上一个页面
history.back();
history.go(-1);
-到访问的下一个页面
history.forward();
history.go(1);
window:
window部分方法
window.setIbterval("alert('123');",3000)；//表示每三秒，执行一次alert方法
window.setTimeout("alert('abc');",4000); //表示在毫秒数结束后执行，但只会执行一次
-clearInterval();清除setInterval
-clearTimeout();清除setTimeout
方法演示
js的dom文档
分析如何使用dom解析html
补充上图
DHTML：是很多技术的简称
**html：封装数据
**css：使用属性值和属性设置样式
**dom：操作html文档（标记型文档）
**javascript：专门指的是js的语法语句（ECMAScript）
document对象：
*表示整个文档
**常用方法
***write（）方法：
（1）向页面输出变量 （值）
（2）向页面输出html代码
document.write("abc");
document.write("<hr/>");
getElementById();
-通过id得到元素（标签）
-//使用getElementById得到input标签
var input1=document.getElementById("nameid");
//得到input里面的value值
alert(input1.value);
getElementsByName();
-通过标签的name的属性值得到input标签
-返回的是一个集合（数组）
-//使用getElementsByName得到input标签
代码演示
-getElementBytypeTagName("标签名称");
-通过标签名称得到元素
代码演示
***注意的地方：
****只有一个标签，这个标签只能使用name获取到，这个使用，使用getElementByName返回的是一个数组，但是现在只有一个元素，这个时候不需要遍历，而是可以直接通过数组的下标获取到值
//通过name得到input标签
var inputs2=document。getElementByName("name11")[0];
alert(inputs2.value);
案例：window弹窗案例
-实现过程
1，创建一个页面
**有俩个输入项和一个按钮
**按钮上面有一个事件：弹出一个新窗口
<body>
编号：<input type="text" id="numid">
姓名：<input type="text" id="nameid">
<input type="button" value="选择" onclick="open1()">
<script type="text/javascript">
function open1() {
window.open("user.html","","width=250px,height=300px")
}
</body>
2，创建弹出页面
**表格
**每一个有一个按钮和编号和名字
**按钮上有一个事件：把当前的编号和姓名，赋值到第一页面相应的位置
<body>
<table>
<tr>
<td><input type="button" value="选择" oncancel="s1('100','东方不败');"/></td>
<td>100</td>
<td>东方不败</td>
</tr>
<tr>
<td><input type="button" value="选择" oncancel="s1('101','岳不群');"/></td>
<td>101</td>
<td>岳不群</td>
</tr>
<tr>
<td><input type="button" value="选择" oncancel="s1('102','林平之');"/></td>
<td>102</td>
<td>林平之</td>
</tr>
</table>
<script type="text/javascript">
//实现s1的方法
function s1(num1,name1) {
//需要把num1和name1赋值到window页面
//跨页面操作 opener：得到创建这个窗口的窗口 得到window页面
var pwin=window.opener;
pwin.document.getElementById("numid").value=num1;
pwin.document.getElementById("nameid").value=name1;
//关闭窗口
window.close();
}
</script>
</body>
案例一：在末尾添加节点
实现思路
第一步：获取ul标签
第二步：创建li标签
document.createElement("标签方法")方法
第三步：创建文本
document.createTexNode("文本内容");
第四步：把文本添加到li下面
使用appendChild方法
第五步：把里添加到ul末尾
使用appendChild方法
代码演示
元素对象（element对象）
**要操作element对象，首先必须要获取到element，
-使用document里面相应的方法获取
**方法
***获取属性里面的值
getAttribute（"属性名称"）
-var input1=document.getElementById("inputid");
//alert(input1.value);
alert(input1.getAttribute("value"));
设置属性的值：setAttribute("属性名","属性值");
input.setAttribute("class","haha");
删除属性
input.removeAttribute("name");
不能删除value
想要获得标签下面的子标签
使用属性childNodes，但是这个属性兼容性很差
获得标签下面子标签的唯一有效办法，使用getElementByTagName方法
var ul11=document.getElementById("ulid1");
//获取标签下面的子标签
var lis=ul11.getElementByTagName("li");
alert(lis.length);
node对象属性一
*nodeName
*nodeType
*nodeValue
代码演示
*标签节点对应的值
nodeType: 1
nodeName: 大写标签名称 比如 SPAN
nodeValue: null
*属性节点对应的值
nodeType: 2
nodeName: 属性名称
nodeValue: 属性的值
*文本节点对应的值
nodeType: 3
nodeName: #text
nodeValue: 文本内容
Node对象的属性二
*父节点
parentNode
*子节点
childNodes：得到所有子节点，但是兼容性差
firstchild：获得第一个子节点
lastchild：获取最后一个子节点
*同辈节点
nextSibling：返回一个给固定节点的下一个兄弟节点。
previousSibling：返回一个给定节点的上一个兄弟节点。
操作dom树
appendChild方法：
--添加子节点到末尾
--特点：类似剪切黏贴的效果
insertBefore(newNode,oldNode)方法
-在某个节点之前插入一个新的节点
-俩个参数
*要插入的节点
*在谁之前插入
-插入一个节点，节点不存在，创建
1，创建标签
2，创建文本
3，把文本添加到标签的下面
代码思路：
1，获取到li13标签
2，创建li
3，创建文本
4，把文本添加到li下面
5，获取到ul
6，把li添加到ul下面
代码演示
removeChild(); :删除节点，通过父节点删除，不能自己删除自己
代码思路：
1、获取到li24标签
2、获取父节点ul标签
3、执行删除（通过父节点删除）
//获取li标签
var li24=document.getElementById("li24");
//获取父节点
//俩种方式 1、通过id获取； 2、通过属性parentNode获取
var ul31=document.getElementById("ulid31");
//删除（通过父节点）
ul31.removeChild(li24);
replaceChild(newNode,oldNode)方法：替换节点
-不能自己替换自己，通过父节点替换
-俩个参数
**第一个参数：新的节点（替换成的节点）
**第二个节点：旧的节点（被替换的节点）
代码思路：
1、获取到li34
2、创建标签li
3、创建文本
4、把文本添加到li下面
5、获取ul标签（父节点）
6、执行替换操作（replaceChild(newNode,oldNode)）
//获取li34
Var li34=document.getElementById("li34");
//创建li
varli35=document.createElement("li");
//创建文本
var text35=document.createTextNode("张无忌");
//把文本添加到li的下面
li35.appendChild(text35);
//获取ul
var ul41=document.getElementById("ulid41");
//替换节点
ul41.replaceChild(li35,li34);
clonNode(boolean):复制节点
-//把ul列表复制到另外一个div里面
代码思路：
1、获取到ul
2、执行复制方法 cloneNode方法复制True
3、把复制之后的内容放到div里面qu
**获取到div
**appendChild方法
//获取ul
var ul41=document.getElementById("ulid41");
//复制ul，放到类似剪切板里的东西
var ulcopy=ul41.coloneNode(ture)
//获取dic
var divv=document.getElementById("divv");
//把副本放到div里面去
divv.appendChild(ulcopy);
操作dom总结
innerHTML属性
这个属性不是dom的组成部分，但是大多数浏览器都支持的属性
第一个作用：可以获得文本内容
第二个作用：向标签里面设定一些内容（可以是html代码）
案例：动态显示时间
得到当前时间
var date = new Date();
var d1=datedate.toLocaleString();
*需要让页面每一秒获取时间
setInterval方法
*显示到页面上
每一秒向div里面写一次时间
* 使用innerHTML属性
<div id="times">
<script type="text/javascript">
function getD1() {
var date =new Date();
var d1 = date.toLocaleString();
var div1 = document.getElementById("times");
div1.innerHTML = d1;
}
setInterval("getD1();",1000);
</body>
案例：全选练习
*创建一个页面
**复选框和按钮
—四个复选框表示爱好
—还有一个复选框操作 全选和全不选
**三个按钮，分别由事件
—全选
—全不选
—反选
先构建选项按钮：
<input type="checkbox" id="boxid" onclick="selAllNo();">全选/全不选
<br/>
<input type="checkbox" name="love">篮球
<input type="checkbox" name="love">排球
<input type="checkbox" name="love">足球
<input type="checkbox" name="love">橄榄球
<br/>
<input type="button" value="全选" oncancel="selAll();">
<input type="button" value="全不选" oncancel="selNo();">
<input type="button" value="反选" oncancel="selOther();">
实现全选操作：
<script type="text/javascript">
function selAll() {
//获取要操作的复选框
var loves =document.getElementsByName("love");
//遍历数组，得到每一个复选框
for (var i=0;i
var love1=loves[i];//得到每一个复选框
//设置属性是true
love1.checked =true;
}
}
</script>
实现反选操作：
function selOther(){
//获取操作的复选框
var loves11=document.getElementsByName("love");
for(var a=0;a<loves11.length;a++){
var love11=loves11[a];
if(love11.checked==tyre){
love11.checked=false;
}else{
love11.check=true;
}
}
}
案例：下拉列表左右选择
*下拉选择框<select>
<option>111</option>
<option>111</option>
</select>
*创建一个页面
**俩个下拉选择框
-设置属性multiple属性
**四个按钮，有事件
*选中添加到右边
步骤
1、获取select里面的option
-getElementByTagName()返回是数组
-遍历数组，得到每一个option
2、判断option是否被选中
-属性 selected，判断是否被选中
**select=true：选中
**select=false：没有选中
3、如果是选中，把选择的添加到右边去
4、得到select2
5、添加选择的部分
网友评论