1.js的String对象
****创建String对象 var str=“abc”;
**方法和属性(文档)
**方法
(1)与html相关的方法:
—bold():加粗 -fontcolor():设置字符串的颜色
-fontsize():设置字体大小
-link():将字符串显示成超链接 *** str4.link(“hello。html”)
-sub() sup():下标和上标:
(2)与java类似的方法·:
-concat():连接字符串 **//concat方法
var str1="abc";
var str2="dfg";
document.write(str1.concat(str2));
-charAt():返回指定位置的字符串
***var str3="stray";
document.write(str4.indeOf("s")); //字符串不存在,返回空
—split():切分字符串,成数组
***var str5="a-b-c-d";
var arr1=str5.split("-");
document.write("length:"+arr1.length);
-replace():替换字符 ,传递俩个参数:第一个参数是原始字符,第二个是要替换的字符
-substr()和substring()
-document.write(str7.substr(5,5); //从第五位开始,向后截取5位字符字符
***从第几位开始截取几位
-document.write(str7.substring(3,5)); **从第几位开始,到第几位结束
2.js的Array对象
***创建数组 var arr2=new Array(3);
***concat方法:数组的连接
-join():根据指定的字符分割数组
-push():向数组末尾添加元素,返回数组的长度
-pop():表示删除最后面一个元素,返回删除的那个元素
-reverse():颠倒数组中的元素的顺序
3.js里面的Date对象
****在Java里面获取当前时间
Date date=new Date();
//格式化 //toLocaleString()
***js 里面获取当前时间
var date=new date();
//获取当前时间
var date=new Date();
document.write(date); //
//转换为习惯的格式
document.write("<hr/>);
document.write(date.toLocaleString());
//获取当前的年方法
getFullYear():获取当前年
******document.write("year:"+date.getFullYear());
//获取当前的月方法
getMonth():获取当前的月
***var date1=date.getMonth()+1;
document.write("month:"+date1());
***h获取当前星期: getDay():星期,返回的是(0-6)
星期一到星期六返回的是1-6
****document.write("week:"+date.getDay());
*****获取当前日: getDate():的阿斗当前的天1-31
****document.write("day:"+date.getDate());
**获取当前小时: getHours():分钟
当前秒:getSeconds();秒
获取毫秒数:getTime()
4.js的Math对象
***数学的运算 里面都是静态方法,直接使用Math.方法()进行使用
***ceil(x):向上舍入 floor(x): 向下舍入 roud(x): 四舍五入
**rendom():得到随机数(伪随机数):
得到0-9的随机数: Math.random()*10 Math.floor(Math.random(10)*10)
5.js的全局函数
****由于不属于任何一个对象,直接写名称使用
**eval() : 执行js代码(如果字符串是一个js代码,使用方法直接执行)
var str="alert('123');";
//alert(str);
eval(str);
**encodeURI():对字符串进行编码
%E4%B8%AD%E6%96%8745131
**decodeURI() :对字符进行解码
encodeURIComponent() 和 decodeURIComponent()
**isNaN() :判断当前字符串是否是数字
--var str2 = "aaaa";
alert(isNaN(str2));
***如果是数字,返回false;
***如果不是数字,返回true;
***parseInt():类型转换
6.函数的重载
js是否存在重载:
***1.js里面不存在重载
2.但是可以通过其他的方式模拟重载的效果,(通过aruguments)数组来实现!
7.js的bom对象
**bom: browser object model:浏览器对象模型
*** navigator:获取客户机的信息(浏览器的信息)
-navigator.appName
document.write(navigator.appName);
***screen:获取屏幕的信息
document.write("<hr/>");
document.write(screen.width);
document.write("<hr/>");
document.write(screen.height);
***location:请求url地址
-href属性 ***获取到请求的url地址 document.write(location.href);
**设置url地址
—页面上安置一个按钮,按钮上绑定一个事件,当点击这个按钮,页面可以跳转到另外一个页面
-location.href="hello.html";
****<input type="button" value="tiaozhuan" onclick="href();"/>
-鼠标点击事件,onclick-"js方法"
***history:请求的url的历史记录
返回上一个页面:history.back(); history.go(-1);
返回下一个页面:history.forward(); history.go(1);
***.window(****)
**窗口对象 **顶层对象(所用的bom对象都是在window里面操作的)
***方法 -window.alert():页面弹出一个框,显示内容 ***简写alert()
-confirm():确认框 -var flag=window .confirm("显示的内容");
- prompt():输入对话框
-window.prompt("please input:","0");
-window .promt("在显示的内容",”输入框里面的默认值“);
-open():打开一个新的窗口
**open("打开新窗口的地址url",“”,"窗口的特征");
-创建一个按钮,点击这个按钮,打开一个新窗口,
-window.open("d.html","","width=100 height=100");
-close():关闭窗口(浏览器兼容性太差)
-window.close();
-做定时器:
-setInterval("js代码",毫秒数); 1秒等于1000毫秒
-表示每3秒,执行一次alert方法
window.setInterval("alert('123');",3000);
**setTimeout("js代码",毫秒数)
-表示在毫秒数之后执行,但只会执行一次
-表示在三秒之后执行js代码,只会执行一次
var id2 = setTimeout("alert('ily ge');",3000);
**clearInterval(): 消除setInterval设置的定时器
var id1= setInterval("alert('jia ge');",3000);
clearInterval(id1);
**clearTimeout(): 消除setTimeout设置的定时器
var id2 = setTimeout("alert('ily ge');",3000);
clearTimeout(id2);
8.js的dom对象 *
*dom: document object model:文档对象模型
**文档
超文本文档(超文本标记文档) html xml
**对象:
提供了属性和方法
**使用属性和方法操作超文本标记型文档
***可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作
***想要对标记型文档进行操作,首先需要对标记型文档里面的所有内容封装对象
--需要把html里面的标签和属性,文本内容都封装成对象
***要想对标记型文档进行操作,解析标记型文档
***解析过程
根据html的层级结构,在内存中分配一个树形结构,需要把html中的每部分封装成对象
-document对象: 整个文档
-element对象: 标签对象
-属性对象
-文本对象
--Node节点对象:这个对象是这些对象的父类
***如果在对象里面找不到想要的方法,这个时候到Node对象里面去找
DHTML:是很多技术的简称
**html:封装数据
**css:使用属性和属性值设置样式
**dom: 操作html文档
**javascript:专门指的就是js的语法语句(ECMAscript)
9.document对象:
*表示整个的文档
**常用方法
****write方法:
(1)向页面输出变量
(2)向页面输出html代码
****getElementById():
-通过id得到元素(标签)
-//使用getElementById得到input标签
var input1 = document.getElementById("nameid");
//得到input里面的value值
alert(input1.name); //标签对象.属性名称
//向input里面设置一个值value
input1.value="bbbbbb";
****getElementsByName():
-通过标签的name属性值得到标签
-返回的是一个集合(数组)
-//使用getElementById得到input标签
var inputs=document.getElementsByName("name"); //传递的参数是 标签里面的name的值
alert(inputs.length);
//遍历数组
for(var i=0;i<inputs.length;i++){ //通过遍历数组,得到每个标签里面的具体的值
var input1=inputs[i];//每次循环得到input对象,赋值到inputs里面
alert(input1.value);//得到每个input标签里面的value值
}
****getElementsByTagName("标签名称")
-通过标签名称得到元素
//getElementsByTagName
var inputss=document.getElementsByTagName("input");//传递的参数是标签名称
alert(inputss.length);
//通过遍历数组,得到每个input标签
for(var mm=0;mm<inputss.length;mm++){
var inputr =inputss[mm];
//得到name值
alert(inputr.name);
}
****注意地方
****只有一个标签,这个标签只能使用name获取到,这个使用getElementsByname返回的是一个数组
但现在只有一个元素,这个时候不需要
//通过name得到input标签
var inputs2 = document.getElementsByName("names")[0];
alert(inputv.value);
var inputss=document.getElementsByTagName("input")[0];
alert(inputss.value);
10.窗口的案例:
-实现过程
1.创建一个页面
**有两个输入项和一个按钮
***按钮上面有一个事件:弹出一个新的窗口 open
2.创建一个弹出页面
**表格 **每一行有一个按钮和编号和姓名
按钮上有一个事件,把当前的编号和姓名,赋值到第一个页面相应的位置
//实现s7方法
function s7(num1,name1)
{
//需要把num1和name1赋值到window页面上
//跨页面的操作 opener:得到创建这个窗口的窗口 得到window页面
var pwin=window.opener;//得到window页面
pwin.document.getElementById("numid").value=num1;
pwin.document.getElementById("nameid").value=name1;
window.close();
}
opener:属性,获取创建当前窗口的窗口!
———————————————————————————————————————————————————————————————————————————————————----------------------------------
11.window.onlaod事件中存在事件的覆盖问题!只能存在一个事件!
console.log(); 在jQuery中的打印出来函数!
12.事件处理程序:
事件源: js处理方式: document.getElementById("id")
jQuery: $("#id")
事件: js: document.getElementById("id").onclick
jQuery: $("#id").click
区别:jQuery的事件不带 on
事件处理程序:
Js 书写方式:
document.getElementById(“id”).onclick = function(){
// 语句
}
jQuery 书写方式:
$(“#id”).click(function(){
// 语句
});
13.jquery详细介绍;
jQUery的两个变量:$ 和 jQuery
jQuery占用了我们两个变量:$ 和 jQuery
14 js入口函数跟jquery入口函数的区别:
1.js的window.onload事件是等到所有的内容,以及我们的外部图片之类的文件加载完之后
,才回去执行
2.jQuery的入口函数是在htnl所有标签都加载之后,就回去执行!
15.js创建对象:
3种方式:1.var obj={}; 2.var obj1=new Object();
3.var obj2=Object.create();
1跟2的区别:
推荐使用第一个方式
第二种方式存在效率问题,因为要new对象,会涉及到原型查找的问题。
jQuery基本选择器;
CSS选择器回顾
符号
说明
用法
#id
Id选择器
#id{ color:red; }
.class
类选择器
.class{ //}
Element 标签选择器 P { //}
*
通配符选择器 配合其他选择器来使用
,
并集选择器
div,p{}
空格
后代选择器
div span{} 选择div下面所有后代的span
>
子代选择器 div > span{}
+
紧邻选择器
div+p 选择div紧挨着的下一个p元素
jQuery基本选择器:
基本选择器
符号
说明
用法
$(“#demo”)
选择id为demo的第一个元素
$(“#demo”).css(“background”,”red”)
$(“.liItem”) 选择所有类名(样式名)为liItem的元素
$(“.liItem”).css(“background”,”red”);
$(“div”)
选择所有标签名字为div的元素
$(“div”).css(“background”,”red”);
$(“*”)
选择所有元素少用或配合其他选择器来使用
$(“*”).css(“background”,”red”)
$(“.liItem,div”) 选择多个指定的元素,这个地方是选择出了 .liItem元素和div元素
$(“.liItem,div”).css(“background”,”red”)
jQuery与js的区别:
Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发。
jQuery层级选择器:
符号
说明
用法
空格
后代选择器选择所有的后代元素
$(“div span”). css(“background”,”red”);
>
子代选择器选择所有的子代元素
$(“div > span”). css(“background”,”red”)
+
紧邻选择器选择紧挨着的下一个元素
$(“div + p”). css(“background”,”red”)
~
兄弟选择器选择后面的所有的兄弟元素
$(“div ~ p”). css(“background”,”red”)
jQuery过滤选择器:
基本过滤选择器
符号
说明
用法
:eq(index)
index是从0开始的一个数字,选择序号为index的元素。选择第一个匹配的元素。
$(“li:eq(1)”). css(“background”,”red”)
:gt(index)
Index 是从0开始的一个数字,选择序号大于index的元素
$(“li:gt(2)”). css(“background”,”red”)
:lt(index)
Index是从0开始的一个数字,选择小于index 的元素
$(“li:lt(2)”). css(“background”,”red”)
:odd
选择所有序号为奇数行的元素
$(“li:odd”). css(“background”,”red”)
:even
选择所有序号为偶数的元素
$(“li:even”). css(“background”,”red”)
:first
选择匹配第一个元素
$(“li:first”). css(“background”,”red”)
:last
选择匹配的最后一个元素
$(“li:last”). css(“background”,”red”)
属性选择器:
符号
说明
用法
$(“a[href]”)
选择所有包含href属性的元素
$(“a[href]”).css(“background”,”red”)
$(“a[href=’itcast’]”) 选择href属性值为itcast的所有a标签
$(“a[href=’itcast’]”).css(“background”,”red”)
$(“a[href!=’baidu’]”) 选择所有href属性不等baidu的所有元素,包括没有href的元素
$(“a[href!=’baidu’]”).css(“background”,”red”)
$(“a[href^=’web’]”)
选择所有以web开头的元素
$(“a[href^=’web’]”). css(“background”,”red”)
$(“a[href$=’cn’]”)
选择所有以cn结尾的元素
$(“a[href$=’cn’]”). css(“background”,”red”)
$(“a[href*=’i’]”)
选择所有包含i这个字符的元素,可以是中英文
$(“a[href*=’i’]”).css(“background”,”red”)
$(“a[href][title=’我’]”) 选择所有符合指定属性规则的元素,都符合才会被选中。
$(“a[href][title=’我’]”).css(“background”,”red”)
1.9 mouseover事件跟 mouseenter事件的区别:
mouseover/mouseout事件,鼠标经过的时候会触发多次,每当一个子元素就会触发一次
mouseenter/mouseleve事件,鼠标经过的时候只会触发一次!
1.10DOM对象跟jQuery对象相互转换
jQuery对象转换成DOM对象:
方式一:$(“#btn”)[0]
方式二:$(“#btn”).get(0)
DOM对象转换成jQuery对象:
$(document)
-> 把DOM对象转成了jQuery对象
var btn = document.getElementById(“bt n”);
btn -> $(btn);
1.11上午提到的两个面试题:
1.js对象创建的有几种方式(三种)
a)1.var obj = {};
b)2. var obj = new Object();
c)3. ECMAScript5里面提供的一个方法:Object.create(参数);