jQuery 能大大简化 Javascript 程序的编写,我最近花时间了解了一下 jQuery,把我上手过程中的笔记和大家分享出来,希望对大家有所帮助。
要使用 jQuery,首先要在 HTML 代码最前面加上对 jQuery 库的引用,比如:

  1. <script language="javascript" src="/js/jquery.min.js"></script>

库文件既可以放在本地,也可以直接使用知名公司的 CDN,好处是这些大公司的 CDN 比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。
Google 提供的
http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
jQuery 官方的
http://code.jquery.com/jquery-1.6.min.js

jQuery 代码具体的写法和原生的 Javascript 写法在执行常见操作时的区别如下:

1 定位元素

  1. // JS
  2. document.getElementById("abc")
  3. // jQuery
  4. $("#abc") //通过id定位
  5. $(".abc") //通过class定位
  6. $("div") //通过标签定位

2 改变元素的内容

  1. // JS
  2. abc.innerHTML = "test";
  3. // jQuery
  4. abc.html("test");

3 显示隐藏元素

  1. // JS
  2. abc.style.display = "none";
  3. abc.style.display = "block";
  4. // jQuery
  5. abc.hide();
  6. abc.show();
  7. abc.toggle(); //在显示和隐藏之间切换

4 获得焦点

  1. // JS和jQuery是一样的
  2. abc.focus();

5 为表单赋值

  1. // JS
  2. abc.value = "test";
  3. // jQuery
  4. abc.val("test");

6 获得表单的值

  1. // JS
  2. alert(abc.value);
  3. // jQuery
  4. alert(abc.val());

7 设置元素不可用

  1. // JS
  2. abc.disabled = true;
  3. // jQuery
  4. abc.attr("disabled", true);

8 修改元素样式

  1. // JS
  2. abc.style.fontSize=size;
  3. // jQuery
  4. abc.css('font-size', 20);
  5. // JS
  6. abc.className="test";
  7. // JQuery
  8. abc.removeClass();
  9. abc.addClass("test");

9 Ajax

  1. // JS
  2. 自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表
  3. // jQuery
  4. $.get("abc.php?a=1&b=2", recall);
  5. postvalue = "a=b&c=d&abc=123";
  6. $.post("abc.php", postvalue, recall);
  7. function recall(result) {
  8. alert(result);
  9. //如果返回的是json,则如下处理
  10. //result = eval('(' + result + ')');
  11. //alert(result);
  12. }

10 判断复选框是否选中

  1. // jQuery
  2. if(abc.attr("checked") == "checked")
 来源:http://www.ferecord.com/different-between-javascript-and-jquery.html

javascript 和 jquery 语法上的一些区别的更多相关文章

  1. Javascript和Jquery语法对比总结

    目的 相信大家都知道jq是js的一个类库,是为了方便我们开发前端,但是笔者在刚开始学习js和jq时经常将两者的语法记混和混用,所以整理下两者实现相同功能之前的语法区别. 声明变量 javascript ...

  2. JavaScript、Jquery选择题

    尚学堂Java EE软件工程师认证考试 试题库-选择题     一.    选择题(包括单选和双选) 1.B 在JavaScript中,以下变量命名非法的是(   )(选择一项) A. numb_1 ...

  3. 使用javaScript和JQuery制作经典面试题:光棒效果

    使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { v ...

  4. JavaScript和JQuery的区别

    一.本质上的区别 1.JavaScript 是通过<script></script>标签插入到HTML页面,可由所有的现代浏览器执行的一种轻量级的编程语言. 2.JQuery是 ...

  5. 前端笔记之jQuery(上)加载函数的区别&对象&操作HTML/CSS&动画&选择器

    一.jQuery简介 1.0 JavaScript编程比较恶心的地方 恶心1:选择元素麻烦,全线兼容的方法只有getElementById()和getElementsByTagName()两个.其他的 ...

  6. Web前端学习笔记之JavaScript、jQuery、AJAX、JSON的区别

    官网的英文解释: javascript和jQuery有点关系,js是一种脚本语言,主要用于客户端,现在主要用于实现一些网页效果. jquery是js的一个库,你可以认为是对js的补充,提供了很多方便易 ...

  7. Python和JavaScript在使用上有什么区别?

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 原文出处:https://www.freecodecamp.org/news/python-vs-javas ...

  8. Jquery 复习练习(02)Javascript 与jquery 互转 onclick 与click区别

    Javascript 与jquery 互转 jquery 为<script src="jquery-1.8.3.js"></script> 以checkbo ...

  9. JQuery语法 JQuery对象与原生对象互转 文档就绪函数与window.onload的区别

    [JQuery语法] 1.jQuery("选择器").action();通过选择器调用事件函数,但是jquery中,jquery可以用$(“选择器”).action();   ① ...

随机推荐

  1. Android开源项目发现---ListView篇(持续更新)

    资料转载地址:https://github.com/Trinea/android-open-project 1. android-pulltorefresh 一个强大的拉动刷新开源项目,支持各种控件下 ...

  2. Phpwind v9.0 存储型xss跨站漏洞

    漏洞版本: Phpwind v9.0 漏洞描述: Phpwind专注于中小网站应用的整合和价值的发掘,我们认为,以社区为网站的基础,可以提供丰富的应用,满足人们获取信息.交流.娱乐.消费等生活需求.获 ...

  3. 微软Sharepoint的一些缺点

    转:http://bbs.tianya.cn/post-144-566491-1.shtml 微软Sharepoint的一些缺点(一) 微软Sharepoint的一些缺点 关于SharePoint,它 ...

  4. 安装scrapy

  5. 曾经记录——asp.net中的点滴

    “<%#....%>”这是数据绑定,里面可以调用C#的方法,比如在数据控件里执行绑定某个字段<%# Eval("Name")%>这样帮顶一个Name的字段. ...

  6. ASP.NET 路由

    URL 模式可以包含文本值和变量占位符(也称为“URL 参数”).  文本和占位符位于由斜杠 (/) 字符分隔的 URL 段中. 当生成请求时,URL 分析为段和占位符,变量值提供给请求处理程序.  ...

  7. Bzoj 3450: Tyvj1952 Easy 期望/概率,动态规划

    3450: Tyvj1952 Easy Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 431  Solved: 325[Submit][Status] ...

  8. Bzoj 1579: [Usaco2009 Feb]Revamping Trails 道路升级 dijkstra,堆,分层图

    1579: [Usaco2009 Feb]Revamping Trails 道路升级 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 1573  Solv ...

  9. sqlmap win32下命令集合

    http://testphp.vulnweb.com/artists.php?artist=1    #库 注意:--前面有一个空格 C:\Python27\sqlmap>sqlmap.py - ...

  10. 51单片机产生1Hz-5kHz可调占空比方波

    学校的课程设计,总结一下. 注意 1.高低电平的改变不适合在主函数的while循环中,因为要有数码管动态显示的延时和其它逻辑处理,时间太长会不能及时改变高低电平值. 2.中断的执行时间一定是不能超过定 ...