jQuery和Javascript的基础知识与比较

一、BOM：浏览器对象模型（Browser Object Model）

​ BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；

BOM可实现功能：

​ 弹出新的浏览器窗口

​ 移动、关闭浏览器窗口以及调整窗口的大小

​ 页面的前进、后退

window对象的常用属性：

属性名称	说 明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

**语法：**window.属性名= “属性值”

示例：

window.location="https://www.baidu.com" ;       -----表示跳转到百度首页 

window对象的常用方法 ：

方法名称方法名称	说 明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
setInterval ( )	按照指定的周期（以毫秒计）来调用函数或表达式

1、confirm()方法 ：

**语法：**confirm(“对话框中显示的纯文本”)

示例：

<script type="text/javascript">
   var flag=confirm("确认要删除此条信息吗？");
    if(flag==true){
	      alert("删除成功！");
      }else{
	       alert("你取消了删除");
	       }
</script>

confirm()与alert ()、 prompt()区别：

• **alert( )：**一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变。

• **prompt( )：**两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息。

• **confirm( )：**一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用。

2、open()方法：

**语法：**window.open(“弹出窗口的URL”,“窗口名称”,"窗口特征”)

属性名称	说 明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes | no|1 | 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes|no|1|0	是否显示滚动条。黙认是yes
location=yes |no|1 |0	是否显示地址地段。黙认是yes
status=yes | no|1| 0	是否添加状态栏。黙认是yes
menubar=yes|no|1 |0	是否显示菜单栏。黙认是yes
resizable=yes|no|1| 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes | no |1| 0	是否显示标题栏。黙认是yes
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

history对象 ：

常用方法名称	说 明
back()	加载 history 对象列表中的前一个URL
forward()	加载 history 对象列表中的下一个URL
go()	加载 history 对象列表中的某个具体URL

history.back()  --------  history.go(-1)   后退
history.forward()  --------  history.go(1)  前进

location对象 ：

常用属性名称	说 明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

常用方法名称	说 明
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

示例：

<a href="javascript:location.href='flower.html'">查看鲜花详情</a>  
<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:history.back()">返回主页面</a>

Document对象 ：

常用属性名称	说 明
referrer	返回载入当前文档的URL
URL	返回当前文档的URL

语法：

document.referrer
document.URL

常用方法 名称	说 明
getElementById()	返回对拥有指定id的第一个对象的引用 （ 对象的id唯一 ）
getElementsByName()	返回带有指定名称的对象的集合 （ 相同name属性 ）
getElementsByTagName()	返回带有指定标签名的对象的集合 （ 相同的元素 ）
write()	向文档写文本、HTML表达式或JavaScript代码

示例：

1、动态改变层、标签中的内容:
	document.getElementById("book"). innerHTML="现象级全球畅销书";

2、访问相同name的元素
	var aInput=document.getElementsByName("season");
        var sStr="";
        for(var i=0;i<aInput.length;i++){
            sStr+=aInput[i].value+"&nbsp;&nbsp;";
        }
        document.getElementById("replace").innerHTML=sStr;

3、访问相同标签的元素
    var aInput=document.getElementsByTagName("input");
    var sStr="";
    for(var i=0;i<aInput.length;i++){
           sStr+=aInput[i].value+"&nbsp;&nbsp;";
    	}
    document.getElementById("replace").innerHTML=sStr；

补充提交表单的方法：

语法：document.表单名. submit()；

JavaScript内置对象 ：

• Array：用于在单独的变量名中存储一系列的值
• String：用于支持对字符串的处理
• Math：用于执行常用的数学任务，它包含了若干个数字常量和函数
• Date：用于操作日期和时间

Date对象：

语法： var 日期对象=new Date(参数)

    参数格式：MM  DD,YYYY,hh:mm:ss 

常用方法	说 明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

Math对象 ：

常用方法	说 明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5);返回25 Math.floor(-25.5);返回-26
round()	把数四舍五入为最接近的数	Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回0~1之间的随机数	Math.random();例如：0.6273608814137365 该值大于等于0.0且小于1.0，不包括1.0，即取值范围是[0.0,1.0)的左闭右开区间

定时函数 ：

1、setTimeout()：

**语法：**setTimeout(“调用的函数”,等待的毫秒数)

var  myTime＝setTimeout("disptime() ", 1000 ); 
                        ----（1秒(1000毫秒)之后执行函数disptime()一次）

2、setInterval() ：

**语法：**setInterval(“调用的函数”,间隔的毫秒数)

var  myTime＝setInterval("disptime() ", 1000 ); 
                         ----（每隔1秒(1000毫秒)执行函数disptime()一次）

3、clearTimeout()：

**语法：**clearTimeout(setTimeOut()返回的ID值)

var  myTime＝setTimeout("disptime() ", 1000 );
clearTimeout(myTime)；

4、clearInterval () :

**语法：**clearInterval(setInterval()返回的ID值)

var  myTime＝setInterval("disptime() ", 1000 );
clearInterval(myTime)；

---

二、DOM（Document Object Model（文档对象模型） ）

根据层次关系访问节点，使用getElement系列方法访问指定节点：

• getElementById()

• getElementsByName()

• getElementsByTagName()

1、节点属性：

属性名称	描述
parentNode	返回节点的父节点
childNodes	返回子节点集合，childNodes[i]
firstChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastChild	返回节点的最后一个子节点
nextSibling	下一个节点
previousSibling	上一个节点

查找每个 p 元素的所有类名为 “selected” 的所有同胞元素：

$("p").siblings(".selected")

2、element属性：

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个子节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点

示例：

oNext = oParent.nextElementSibling || oParent.nextSibling   
oPre = oParent.previousElementSibling || oParent.previousSibling  
oFirst = oParent. firstElementChild  ||  oParent.firstChild   
oLast = oParent.lastElementChild || oParent.lastChild 

3、节点信息：

节点类型（nodeType）	节点值（nodeType）
元素element	1
属性attr	2
文本text	3
注释comments	8
文档document	9

节点操作：

1、操作节点的属性：

1、获得属性值：getAttribute("属性名")
2、设置属性值：setAttribute("属性名","属性值")

2、创建和插入节点：

名称	描述
createElement( tagName)	创建一个标签名为tagName的新元素节点
A.appendChild( B )	把B节点追加至A节点的末尾
insertBefore( A , B )	把A节点插入到B节点之前
cloneNode(deep)	复制某个指定的节点(true表示复制父节点中的自己和子节点；false表示只复制父节点，不复制子节点)

3、删除和替换节点：

名称	描述
removeChild( node )	删除指定的节点
replaceChild( newNode ,oldNode )属性attr	用其他的节点替换指定的节点

示例：

var delNode=document.getElementById("first);
delNode.parentNode.removeChild(delNode);  ----  要通过父节点来删除子节点

var oldNode=document.getElementById("second");
var newNode=document.createElement("img");
newNode.setAttribute("src","images/f03.jpg");
oldNode.parentNode.replaceChild(newNode,oldNode);

4、操作节点样式：

名称	描述
onclick	当用户单击某个对象时调用事件
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下

4.1、style属性：

**语法：**HTML元素.style.样式属性＝"值"

示例：

document.getElementById("titles").style.color="#ff0000"; 
document.getElementById("titles").style.fontSize="25px ";

4.2、className属性 ：

**语法：**HTML元素.className=“样式名称” （多个值的话用空格 隔开）

示例：

function over(){
     document.getElementById("cart").className="cartOver";
     document.getElementById("cartList").className="cartListOver";
     }
function out(){
     document.getElementById("cart").className="cartOut";
     document.getElementById("cartList").className="cartListOut";
     }

4.3、获取元素的样式 ：

**语法：**HTML元素.style.样式属性;

示例：

alert(document.getElementById("cartList").display); 

**语法：**document.defaultView.getComputedStyle(元素,null).属性;

示例：

var cartList=document.getElementById("cartList");
alert(document.defaultView.getComputedStyle(cartList,null).display);

**语法：**HTML元素. currentStyle.样式属性;

alert(document.getElementById("cartList").currentStyle.display);(兼容IE浏览器)

style、currentStyle、getComputedStyle的区别：

• style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

• currentStyle可以弥补style的不足，但是只适用于IE。

• getComputedStyle同currentStyle作用相同，但是适用于FireFox、opera、safari、chrome。

• **.html()😗*读取和修改一个元素的HTML内容

• **.text()：**读取和修改一个元素的文本内容

• **.val()：**读取和修改一个表单元素的value字段值

5、获取元素的样式

HTML中元素属性应用：

属性	描述
offsetLeft	返回当前元素左边界到它上级元素的左边界的距离，只读属性
offsetTop	返回当前元素上边界到它上级元素的上边界的距离，只读属性
offsetHeight	返回元素的高度
offsetWidth	返回元素的宽度
offsetParent	返回元素的偏移容器，即对最近的动态定位的包含元素的引用
scrollTop	返回匹配元素的滚动条的垂直位置
scrollLeft	返回匹配元素的滚动条的水平位置
clientWidth	返回元素的可见宽度
clientHeight	返回元素的可见高度

元素属性应用：

语法：  document.documentElement.scrollTop;
        document.documentElement.scrollLeft;    ----标准浏览器（ IE ）
        或者
        document.body.scrollTop;
        document.body.scrollLeft;               ----Chrome或火狐

示例：