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. IIS7部署ASP.NET MVC4程序报错解决

    今天安装了windows7 开发web项目需要安装IIS,当安装完以后,web程序已经映射到了本地IIS上,运行出现如下错误提示 处理程序“PageHandlerFactory-Integrated” ...

  2. Nginx 安装成 Windows 服务

    Nginx 安装成Windows 服务方法,具体方法如下 1. 下载nginx windows版本 http://www.nginx.org 2. 下载微软的2个工具: instsrv.exe.srv ...

  3. 【Android 开源】:最火的Android开源项目 第02期

    21. drag-sort-listview DragSortListView(DSLV)是Android ListView的一个扩展,支持拖拽排序和左右滑动删除功能.重写了TouchIntercep ...

  4. Grading

    100 >= A >= 93 > A- >= 90; 90 > B+ >= 87 > B >= 83 > B- >= 80; 80 > ...

  5. java List遍历的方法

    List可以用序号来遍历,但通常推荐使用iterator来遍历Iterator itr = list.iterator();while (itr.hasNext()) { Object nextObj ...

  6. windows下面配置jdk环境变量

    在环境变量中添加如下: Path D:\Program Files\Java\jdk1.6.0_26\binJAVA_HOME D:\Program Files\Java\jdk1.6.0_26CLA ...

  7. linux下jdk的卸载与安装

    JDK的卸载 1.检查jdk的是否安装,显示如下表示安装: [root@localhost ~]# rpm -aq|grep java tzdata-java-2010l-1.el6.noarch j ...

  8. CUDA编程-(2)其实写个矩阵相乘并不是那么难

    程序代码及图解析: #include <iostream> #include "book.h" __global__ void add( int a, int b, i ...

  9. 转载:monkeyrunner工具

    前言: 最近开始研究Android自动化测试方法,对其中的一些工具.方法和框架做了一些简单的整理,其中包括 android测试框架.CTS.Monkey.Monkeyrunner.benchmark. ...

  10. wall

    wall 是在linux中用于发送广播信息的命令,他可以让所有的在线用户都收到信息 wall hi 然后,按Ctrl + c 退出