很多人对JS和JQuery很容易搞混淆，今天我们就相比学习下：

加载区别：
    var myfunction(){};
JS：1.window.onload=function(){}
    2.<body onload="myfunction()">
JQuery:1.$（function(){myfunction();}）;      myfunction>>加载完成后需要执行函数
       2.$(document).ready(function () {  initfunction});
       3.window.onload = function (){ initfunction }

声明变量：（js是弱类型语言，用var关键字，如果在方法内声明变量没有用var关键字，该变量为全局变量。生命周期页面关闭结束）

声明函数：
JS：1.function name(){}
    2.var name=function(){}
JQuery：跟js一样

创建对象：
JS：1.person=new Object();  添加属性 person.name='' person.age=''
    2.person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
    3.function person(name,age){this.name=name;this.age=age}(对象构造器)  var father=person（‘’，‘’）；  var mother=person（‘’，‘’）；
JQuery：跟js一样

获取DOM元素：
JS：（window.documnt.getElementById() 这么写也行，因为所有的浏览器跟支持dom对象）
    http://blog.csdn.net/stalwartwill/article/details/26498603（链接，有详细样例）
    1.document.getElementById();           通过document，通过ID选取元素
    2.document.getElementsByName（）       通过document，通过名称name选取元素
    3.document.getElementsByTagName（）    通过document，通过标签名选取元素
    4.document.getElementsByClassName（）  通过document，通过CSS类选取元素
    5.document.querySelectorAll（）        通过document，通过CSS选择器选取元素
JQuery：（如果$符号出现冲突时，$.noConflict();可以释放$绑定 jQuery（"#id"）或者var jq=$.noConflict(); jq（"#id"））
    （以下四种为JQuery操作页面元素的四种方法）
    1.$(selector).text()     设置或返回所选元素的文本内容
    2.$(selector).html()     设置或返回所选元素的内容（包括 HTML 标记）
    3.$(selector).val()      设置或返回表单字段的值
    4.$(selector).attr()     方法用于获取属性值，（一个参数为获取，两个参数为设置）

操作DOM元素：
JS：    1.innerHTML 设置或取值（document.getElementById(“one”).innerHTML（“张三”））
        2.style.color=‘’；设置元素的样式
        3.src=''；          设置元素的资源路径
        4.href=‘’；       设置连接值
JQuery：1.$(selector).text()     设置或返回所选元素的文本内容
        2.$(selector).html()     设置或返回所选元素的内容（包括 HTML 标记）
        3.$(selector).val()      设置或返回表单字段的值
        4.$(selector).attr()     方法用于获取属性值，（一个参数为获取，两个参数为设置）

最常见的鼠标点击：
JS：onclick
JQuery：click

循环：
共有部分：if..else  do...whlie 等
JS： for...in...  可以遍历对象和数组中的每一个元素    for (x in mycars)｛｝
Jquery:foreach...    $("li").each(function(){alert($(this).text()) });
遍历每一个li元素 但是用foreach函数 得到的对象为DOM对象，所以需要强转为JQuery对象才能操作，以上为例。

JQ对象和DOM对象之间的转型：
DOM转JQuery  $(DOM)
JQuery转DOM  1.jQuery 对象是一个数据对象，可以通过 [index] 的方法，来得到相应的 DOM 对象。
                var $v = $("#v"); //jQuery 对象
                var v = $v[0]; //DOM 对象
             2.jQuery 本身提供，通过.get(index) 方法得到相应的 DOM 对象
                var $v = $("#v"); //jQuery 对象
                var v = $v.get(0); //DOM对象 ( $v.get()[0] 也可以 )
http://www.jb51.net/article/53391.htm（链接有样例）

正则表达式：
JS：var patt1=new RegExp("e");  创建正则表达式   三种最常见的方法 test()，exec( ，（g|i|m）)，compile()   g i m 为全部、第一、区间段
JQuery：var str=/^ [u4E00-u9FA5]$/  str.test();返回值为true或false   以"^"开始 以"$"结束。

JS与Jquery区别的更多相关文章

  1. js javascript jquery区别和联系

    javascript:简称js ,是用于客户端Web开发的一种脚本语言,常用来给HTML网页添加动态功能. jquery:基于JS语言,封装JS的原生方法功能,提供了简便的函数接口,简化了JS的操作. ...

  2. js和JQuery区别

    this.class="btn-default btn-info"; $(this).toggleClass("btn-default btn-info"); ...

  3. offsetWidth、clientWidth、width、scrollWidth区别及js与jQuery获取的方式

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. onload事件与ready事件的区别，原生js与jquery的区别

    onload事件与ready事件分别是原生js与jquery的入口函数 原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document ...

  5. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  6. jQuery (js 和 jQuery 的区别)

    js 和 jQuery 的区别  主要体现在Dom操作 (jq代表我找到的元素对象)找元素:    js:document.get...    jquery: $(选择器)设定:jq 是jquery对 ...

  7. JS和jQuery用法区别

    目录 JS和jQuery用法区别 外观区别 查找元素 操作标签 操作内容 操作属性 操作位置 操作样式 事件 JS和jQuery用法区别 外观区别 jQuery与JS最直观的区别就是外观上jQuery ...

  8. 原生JS和JQuery的区别

    1.原生js和jQuery的入口函数加载模式不同 原生js等页面dom加载完成并且图片等资源也加载完成之后才会执行: jQuery则是等页面dom加载完成执行,不会等图片等资源也加载完成: (也就是说 ...

  9. 用原生js模仿jquery

    阅读声明:本文档仅供学习,由于个人能力有限,文档中有错漏的地方还请指出,大家共同学习. 目前在学习怎么样写jquery,模仿阶段,有兴趣的同学可以和我一起学习,共同交流,在学习的路上希望有你做伴. 在 ...

随机推荐

  1. 备忘录－－关于线程和IO知识

    因为自己还在出差中,没时间深入学习,最近工作里又有对一些技术的思考,所以这里记录下来,等回去有时间可以按照这个思路进行学习,这里主要起到备忘的作用. 1.线程难学难在我们没有理解操作系统里的线程设计机 ...

  2. Asp.net MVC5 路由Html后缀的问题

    环境:VS2013+MVC5+IIS EXPRESS 问题:如果从Asp.net Web迁移到MVC,可能会遇到需要使原来的链接(如http://localhost:12345/old/library ...

  3. Oozie 快速入门

    设想一下,当你的系统引入了spark或者hadoop以后,基于Spark和Hadoop已经做了一些任务,比如一连串的Map Reduce任务,但是他们之间彼此右前后依赖的顺序,因此你必须要等一个任务执 ...

  4. java中集合类中Collection接口中的Set接口的常用方法熟悉

    1:Set集合由Set接口和Set接口的实现类组成,Set接口继承了Collection接口,因为包含Collection接口的所有方法. 2:由于Set接口中不允许存在重复值,因此可以使用Set集合 ...

  5. DataBase异常状态：Recovery Pending，Suspect，估计Recovery的剩余时间

    一,RECOVERY PENDING状态 今天修改了SQL Server的Service Account的密码,然后重启SQL Server的Service,发现有db处于Recovery Pendi ...

  6. ASP.NET MVC5 网站开发实践(二) Member区域 - 咨询管理的架构

    咨询.留言.投诉等功能是网站应具备的基本功能,可以加强管理员与用户的交流,在上次完成文章部分后,这次开始做Member区域的咨询功能(留言.投诉都是咨询).咨询跟文章非常相似,而且内容更少.更简单. ...

  7. WebView 与PC机Chrome配合调试

    参考自http://www.cnblogs.com/terrylin/p/4606277.html 移动端WebView开发调试:Chrome远程调试 Chrome DevTools调试移动设备Bro ...

  8. 最大连续子序列乘积（DP）

    题目来源:小米手机2013年校园招聘笔试题 题目描述: 给定一个浮点数序列(可能有正数.0和负数),求出一个最大的连续子序列乘积. 输入: 输入可能包含多个测试样例.每个测试样例的第一行仅包含正整数 ...

  9. （转）J2EE的13种核心技术

    一.JDBC(Java Database Connectivity)  JDBC API为访问不同的数据库提供了一种统一的途径,象ODBC一样,JDBC对开发者屏蔽了一些细节问题,另外,JDBC对数据 ...

  10. npm上传自己的项目

    npm安装就不介绍了,自行度娘.本文介绍npm上传 先初始化:npm init 根据提示填完系统介绍信息(package.json): 再登录npmjs: npm login 效果如图: 输入注册的用 ...