对比JavaScript与jQuery的编程语法

jQuery就对javascript的一个扩展, 封装, 就是让javascript更好用, 更简单。

人家怎么说的来着, jQuery就是要用更少的代码, 漂亮的完成更多的功能。

javascript与jQuery常用方法比较

1 加载DOM区别

javascript： window.onload

实例

function first(){alert('first');}function second(){alert('second');}window.onload = first;window.onload = second;//只会执行第二个window.onload；不过可以通过以下方法来进行改进：window.onload = function(){first();second();}

jQuery： $(document).ready() 简化为$(function(){ //... })

实例1:

$(document).ready(){function first(){alert('first');}function second(){alert('second');}}

实例2:

$(document).ready(function(){first();} )$(document).ready(function(){second();} ) //两条均会执行

可以简化为:

$(function(){first();});$(function(){second();});

jQuery加载与普通加载区别

方法 window.onload $(document).ready()

执行时机 必须等待网页中的所有内容加载完毕后 网页中的所有DOM结构绘制完毕后就执行,

(包括图片才能执行) 可能DOM元素关联的东西并没有加载完

编写个数 不能同时编写多个(后者会"覆盖"前者) 能同时编写多个

简化写法 无 $()

2 获取ID

javascript： document.getElementById('idName')

jQuery： $('#idName')

3 获取name和class

javascript：
document.getElementsByName('name') name属性

jQuery： $('.className') class属性

4 获取TagName

javascript： document.getElementsByTagName('tagName')

jQuery： $('tagName')

js中元素不存在使用它会报错

var div = document.getElementsByTagName("div")[0];

div.onclick = function(){

console.log("javascript");

}

jQuery不会报错

var $div = $("div");

$div.click(function(){

console.log("jQuery");

})

5 创建对象并加入文档中

javascript：

var para=document.createElement("p");var node=document.createTextNode("这是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);//将p元素追加为Id为div1的lastchild子节点，如果想将新创建的p元素插入到已存在的某个元素之前，可以使用insertBefore()方法

jQuery：

jQuery提供了4种将新元素插入到已有元素（内部）之前或者之后的方法：

append()、appendTo(目标)、prepend()、prependTo(目标)。 (prepend()、prependTo(目标)插在子元素之前)

格式：$(html);

HTML代码：

<p>World!</p>

jQuery代码:

$('p').append('<b>Hello!</b>'); //输出：<p>World!<b>Hello!</b></p>$('<b>Hello!</b>').appendTo('p'); //输出：同上$('p').prepend('<b>Hello!</b>'); //输出：<p><b>Hello!</b>World! </p>$('<b>Hello!</b>').prependTo('p'); //输出：同上

6 插入新元素

javascript：

insertBefore() 语法格式：

parentElement.insertBefore(newElement,targetElement)

将一个img元素插入一个段落之前。

HTML代码：

<img src="image.jpg" id="imgs" />

<p>这是一段文字</p>

javascript代码：

var imgs = document.getElementById('imgs');var para = document.getElementsByTag('p');para.parenetNode.insertBefore(imgs,para);

jQuery：

jQuery提供了4种将新元素插入到已有元素（外部）之前或者之后的方法：before()、insertBefore(目标)、after()、insertAfter(目标)。

格式：$('html');

HTML代码：

<p>World!</p>

jQuery代码

$('p').after('<b>Hello!</b>'); //输出：<p>World! </p><b>Hello!</b>$('<b>Hello!</b>').insertAfter ('p'); //输出：同上$('p').before('<b>Hello!</b>'); //输出：<b>Hello!</b><p>World! </p>$('<b>Hello!</b>').insertBefore('p'); //输出：同上

7 复制节点

javascript：

reference = node.cloneNode(bool)

这个方法只有一个布尔型的参数, 它的可取值只能是true或者false。该参数决定是否把被复制节点的子节点也一同复制到新建节点里去。

jQuery：

clone() //复制节点后，被复制的新元素并不具有任何行为 ,默认值false,也复制子节点

clone(true) //复制节点内容及其绑定的事件

备注：该方法通常与appendTo()、prependTo()等方法结合使用。

8 删除节点

javascript：

reference = element.removeChild(node)

removeChild()方法将一个给定元素里删除一个子节点

jQuery：

remove();

remove()方法作用就是从DOM中删除所有匹配的元素，remove()方法还可以与其他的过滤选择器结合使用，非常方便。

将ul li下的title不是"Hello"的li移除：

$('ul li').remove(li[title!='Hello']);

empty(); 删除匹配的元素集合中所有的子节点。

从DOM中把所有段落删除

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

把所有段落的子元素(包括文本节点)删除

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();结果:

<p></p>

9 包裹节点

javascript： javascript暂无

jQuery：

wrap() //将匹配元素用其他元素的结构化标记单独包裹起来

wrapAll() //将所有匹配的元素用一个元素包裹起来

wrapInner() //将匹配元素的子内容用其他结构化的标记包裹起来

把所有的段落用一个新创建的div包裹起来

jQuery 代码:

$("p").wrap("<div class='wrap'></div>");

用一个生成的div将所有段落包裹起来

jQuery 代码:

$("p").wrapAll("<div></div>");

把所有段落内的每个子内容加粗

jQuery 代码:

$("p").wrapInner("<b></b>");

10 属性操作：设置属性节点、查找属性节点

javascript：

document.getElementsByTagName('tagName').titledocument.getElementsByTagName('tagName').title="My title";document.getElementsByTagName('tagName')['title']="My title";document.getElementsByTagName('tagName').getAttribute('My title');document.getElementsByTagName('tagName').setAttribute('title','My title');document.getElementsByTagName('tagName').removeAttribute('title','My title');

jQuery：

jQuery中设置和查找属性节点都是：attr() 。

$('p').attr('title'); //获取p元素的title属性$('p').attr('title','My title'); //设置p元素的title属性$('p').removeAttr('title') //删除p元素的title属性$('p').attr('title':'My title','class':'myClass'); //当需要添加多个属性时, 可以用"属性":"值"对的形式, 中间用逗号隔开。

11 替换节点

javascript：

var reference = element.replaceChild(newChild,oldChild)

该方法是将一个给定父元素里的一个子节点替换为另外一个节点。

jQuery：

replaceWith()、replaceAll()

replaceWith() 与 replaceAll() 作用相同。差异在于语法：内容和选择器的位置, 以及 replaceAll() 无法使用函数进行替换。

$(selector).replaceWith(content) 用指定的HTML内容或元素替换被选元素

$(content).replaceAll(selector) 用指定的HTML内容或元素替换被选元素。

<p>hello</p> 想替换为： <h2>Hi</h2>

jQuery代码：

$('p') .replaceWith('<h2>Hi</h2>');

或者可以写成：

$('<h2>Hi</h2>').replaceAll('p');

12 删除节点

javascript：removeChild()

var list=document.getElementById("myList");

list.removeChild(list.childNodes[0]);

jQuery:

$("p").remove();

13 CSS操作

javascript：

格式：element.style.property

CSS-DOM能够读取和设置style对象的属性, 其不足之处是无法通过它来提取外部CSS设置的样式信息, 而jQuery的css()方法是可以的。

document.body.style.backgroundColor="red";

jQuery：

格式：$(selector).css()

css()方法获取元素的样式属性

此外, jQuery还提供了height()和width()分别用来获取元素的高度和宽度(均不带单位), 而css(height)、css(width)返回高宽, 且带单位。

$("p").css({color: "#ff0011", background: "blue", "font-size":"16px" });

$("p").css({color: "#ff0011", background: "blue", fontSize:"16px" }); jQuery也支持

注意点：CSS中的如"font-size"这样有"-"的属性, 要使用首字母小写的驼峰式表示, 如fontSize。

jQuery中的css()的带横线的属性可以原样输出, 但需带引号, 也可以使用首字母小写的驮峰式表示。

javascript:

className属性

DOM对象.className = "className";

DOM对象.className += " claaaName";

DOM对象.className = "";

jQuery：

addClass(class|fn)

removeClass(class|fn)

toggleClass(class|fn)

14 表单value值的操作

javascipt：

formNode.value

formNode.attr('value');

formNode.attr('value',信息值);

jQuery：

val([val|fn|arr])

$().val(); //获得value属性值

$().val(value值); //设置value属性的值(文本框)

$().val([,,]); //设置value属性的值(单选框、复选框、下拉式列表)

该val()方法在复选框、单选按钮、下拉列表的使用有凸出表现。

15 事件的属性

相同之处

altKey Alt键是否被按下. 按下返回true

ctrlKey ctrl键是否被按下, 按下返回true

shiftKey Shift键是否被按下, 按下返回true

screenX/Y 对于鼠标事件, 获取事件相对于屏幕原点的水平/垂直坐标

type 事件的名称,如click、mouseover等

以上为javascript和jQuery相同的属性

不同之处

javascript:

clientX/Y 鼠标指针在客户端区域的坐标, 不包括工具栏、滚动条

jQuery:

pageX/Y 鼠标指针在客户端区域的坐标, 不包括工具栏，滚动条;

16 事件的兼容性

事件目标:

javascript:

IE:srcElement 标准DOM:targe

jQuery:

target 引起事件的元素/对象

keyCode和CharCode:

javascript:

charcode keycode(keypress) keycode(keydown、keyup)

IE 无 按键的Unicode值 按键的数字代码

标准DOM 按键的Unicode值 按键的数字代码 按键的数字代码

jQuery:

keyCode 对于keyup和keydown事件返回被按下的键。不区分大小写, a和A都返回65;

鼠标事件,值对应按下的鼠标键

javascript:

button IE中的按键 Firefox中的按键

0 未按下案件 左键

1 左键 中键(滑轮)

2 右键 右键

3 同时按下左、右键 不支持组合键，未按下任何键时button值为undefined

4 中键(滑轮)

5 同时按下左、中键

6 同时按下右、中键

7 同时按下左、中、右键

jQuery:

which 对于键盘事件, 返回触发事件的键的数字编码。对于鼠标事件, 返回鼠标按键号(1左,2中,3右);

15 事件设置

DOM1级事件设置

<input type="text" onclick="过程性代码" value=’tom’ />

<input type="text" onclick="函数()" />

node.onclick = function(){}

node.onclick = 函数;

DOM2级事件设置

node.addEventListener(类型，处理，事件流);

node.removeEventListener(类型，处理，事件流);

node.attachEvent();

node.detachEvent();

jquery事件设置

$().事件类型(事件处理函数fn); //设置事件

$().事件类型(); //触发事件执行

$().bind('事件类型',fn); //绑定事件

$().one('事件类型',fn); //绑定事件(一次)

$().live('事件类型',fn); //绑定事件(委派)

16 处理页面中的元素

javascript:

使用javascript脚本获取页面内容的方式主要有两种, 第一种是通过表单获取表单元素的value值。格式为：

表单名称.元素名.value;

该方式只能获取表单中的元素值，对于其他标签元素则无能为力。

第二种方式通过id名来获取页面中任意标签的内容。格式为：

document.getElementById('id'). value;

document.getElementById ('id').innerText;

使用第二种方式时要注意, 标签的id名必须存在且唯一, 否则就会出现错误。

为标签内容赋值时, 则使用如下格式：

id.innerHTML ='要显示的内容';

jQuery:

html([val|fn]) 返回值:String

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用html()方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素, 那么只有第一个匹配元素的 HTML 内容会被获取。

val String

function(index, html) Function

此函数返回一个HTML字符串。接受两个参数, index为元素在集合中的索引位置, html为原先的HTML值。

text()

text([val|fn]) 返回值:String

val String 用于设定HTML内容的值

function(index, html) Function 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

17 事件对象

javascript:

node.onclick = function(oEvent){if(window.event) oEvent = window.event; //兼容性写法}

在IE浏览器中事件对象是window对象的一个属性window.event；

在标准的DOM中规定event对象必须作为唯一的参数传给事件处理函数。

因此, javascript要处理好各浏览器的事件对象的兼容性。

jQuery:

$().bind('click',function(evt){ window.event });$().click(function(evt){});$().bind('mouseover',f1);function f1(evt){}

事件对象：就直接使用的evt即可, 在jQuery框架内部对各浏览器的事件对象作出了兼容处理。

18 阻止浏览器默认动作、阻止事件冒泡

javascript:

DOM2级浏览器默认动作阻止：

事件对象.preventDefault(); 主流浏览器

事件对象.returnValue = false; IE(6,7,8)浏览器

DOM2级事件冒泡阻止：

事件对象.stopPropagation(); 主流浏览器

事件对象.cancelBubule = true; IE(6,7,8)浏览器

jQuery：

$().bind('click',function(evt){evt.preventDefault();evt.stopPropagation();});

preventDefault()方法是jQuery的方法, 名字与javascript底层代码的名字一致, 并且对各浏览器作出了兼容处理。

stopPropagation()方法是jQuery的方法, 名字与javascript底层代码的名字一致, 并且对各浏览器作出了兼容处理。

return false 与event.preventDefault()区别

1. return false 实际上执行了三种操作

event.preventDefault()

event.stopPropation()

终止函数执行并立即执行

2 .为了避免对程序执行过多的隐式操作造成的Bug，建议

只需要阻止事件默认行为时，应该使用event.preventDefault()

只需要阻止事件冒泡时，应该使用event.stopPropagation()

只有当同时阻止事件冒泡和阻止事件默认行为时,才使用return false

19 页面滚动

javascript：

scrollBy() 按照指定的像素值来滚动内容。

scrollTo() 把内容滚动到指定的坐标。

<script>function scrollWindow(){window.scrollTo(100,500);}</script><input type="button" onclick="scrollWindow()" value="滚动条" />

jQuery:

offset([coordinates]) 获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性: top 和 left, 以像素计。此方法只对可见元素有效。

$("p:last").offset({ top: 10, left: 30 });

<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">$(document).ready(function(){$("button").click(function(){x=$("p").offset();$("#span1").text(x.left);$("#span2").text(x.top);});});</script></head><body><p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p><button>获得 offset</button></body></html>

输出结果: 本段落的偏移是 8 left 和 8 top。

scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。

scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。

$(".btn1").click(function(){$("div").scrollLeft(100);});