当前位置: 秋叶网络博客 前端编程 ◊ Jquery和Javascript的区别与用法

Jquery和Javascript的区别与用法

作者:秋了秋 发表时间:2015年04月09日

在网站功能开发的时候,如果不清楚Jquery和Javascript的区别,就很容易出现张冠李戴的现象,因为这两种语言是同性质的,但如果你把js当作Jquery语法来用就会经常出现“xxx is not defined”报错现象。

简单来说,JQuery是一种JavaScript框架,Javascript是一种脚本语言;JQuery是把JS里面的常用函数及自定义函数打包到一个文件,是对Javascript的一种封装,方便大家用更少的代码,漂亮的完成更多的功能。相比大家做网站时都会专门有一个js文件,存放这个网站所调用的JS函数,那这个JQuery只是做的更专业,更强大,更方便而已,你原来可能要几行代码来实现的功能,用JQuery可能只用一行就搞定了。Jquery和Javascript的对比就好比电脑的操作系统与软件关系,但又有所不同,jQuery基于JavaScript开发而来,JavaScript是原生态的。

好介绍到此为止,我们来看看它们的用法区别:

Javascript与jquery用法对比
Javascript用法 Jquery用法
查找元素:1.document.getElementById("abc");2.document.getElementsByClassName("abc");3.document.getElementsByTagName("div"); 查找元素:1.$("#abc") 查找id定位2.$(".abc") 查找class定位3.$("div") 查找标签定位
插入内容:abc.innerHTML = "test"; 插入内容:abc.html("test");
显示隐藏:abc.style.display = "none";abc.style.display = "block";修改样式:1.abc.style.fontSize=size;2.abc.className="test"; 显示隐藏:abc.hide();abc.show();修改样式:1.abc.css('font-size', 20);2.abc.removeClass(); abc.addClass("test");
获得焦点:abc.focus(); 获得焦点:abc.focus();
表单赋值:abc.value = "test"; 表单赋值:abc.val("test");
表单赋值:abc.value = "test";获取表单值:abc.value 表单赋值:abc.val("test");获取表单值:abc.val()
设置元素不可用:abc.disabled = true; 设置元素不可用:abc.attr("disabled", true);
点击事件:function test(){ //处理… } document.getElementById("but1").onclick=test; 点击事件:$(“button”).click(function(){//处理…});
绑定事件:document.getElementById("but1").attachEvent("onclick",test);事件解除:document.getElementById("but1").detachEvent("onclick",test); 绑定事件:$(document).ready(function(){ $("button").bind("click",function(){//处理… }); });事件解除:$(document).ready(function(){$("button").unbind("click",function(){//处理… });$("button").unbind("click"); });
创建元素:document.createElement("span") 创建元素:$("<span/>") 或 $("<span></span>")

这只是列出了其中一部分,如需了解更多,自行查阅资料。

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/319.html
目录: 前端编程 | 标签: | 7264次阅读