很多人对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. Win8 Metro动态加载内容框架

    制作背景 为了参加ImagineCup 2013 世界公民类比赛,我们设计制作了一个可动态扩展的幼教类App.这个App需要能动态加载内容,内容包括带动画可交互的电子书,动画,视频,游戏. 技术支持 ...

  2. java stopwatch 功能

    C#中有一个stopwatch的功能,主要是用来监测程序执行时间的.java之前一直都在用如下方式完成: public static void main(String[] args) { long s ...

  3. iOS---数据本地化

    本篇随笔除了介绍 iOS 数据持久化知识之外,还贯穿了以下内容: (1)自定义 TableView,结合 block 从 ViewController 中分离出 View,轻 ViewControll ...

  4. java线程 公平锁 ReentrantLock(boolean fair)

    一.公平锁 1.为什么有公平锁 CPU在调度线程的时候是在等待队列里随机挑选一个线程,由于这种随机性所以是无法保证线程先到先得的(synchronized控制的锁就是这种非公平锁).但这样就会产生饥饿 ...

  5. SSIS Design2:增量更新

    一般来说,ETL实现增量更新的方式有两种,第一种:记录字段的最大值,如果数据源中存在持续增加的数据列,记录上次处理的数据集中,该列的最大值:第二种是,保存HashValue,快速检查所有数据,发现异动 ...

  6. WPF做验证码,小部分修改原作者内容

    原文地址:http://www.cnblogs.com/tianguook/p/4142346.html 首先感谢aparche大牛的帖子,因为过两天可能要做个登录的页面,因此,需要用到验证码,从而看 ...

  7. jQuery之on

    在jQuery1.9版本中,已经去掉了live和delegate方法,从而将on方法的地位进一步提升. jQuery如此推崇on方法,必有其牛逼的地方.那么我们就有必要了解这个on,并在代码中利用它, ...

  8. IOS开发之新浪围脖

    IOS开发和Web开发一样,网络请求方式包括Get和Post方式.Get和Post两者有和特点和区别,在本篇博客中不做过多的论述,本篇的重点在于如何GET数据和POST数据.下面还会提到如何在我们的项 ...

  9. 改变word的语言字典

    改变word的语言字典 上周末看论坛有人提出否有方法用代码改变word的语言字典,因为默认的语言会影响现用语言输入的拼写器和其他校对工具.我们的Spire.doc正好支持,正好闲来无事所以我用西班牙语 ...

  10. js 调用百度地图,并且定位用户地址,显示省市区街,经纬度

    网上的一些百度地图例子,基本上没有连套的 定位 例子.下面我分享一套我自己弄的,废话不多说,看代码,里面有注释! <!DOCTYPE html> <html> <head ...