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. BZOJ_1002_[FJOI2007]_轮状病毒_(递推+高精)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1002 )*&*(^&*^&*^**()*) 1002: [FJOI20 ...

  2. BZOJ_3670_[NOI2014]_动物园_(kmp)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=3670 对于一个字符串,求出num数组,其中num[i]表示前i个字符构成的字串中不相重合的相同 ...

  3. SQL Server 字段状态判断语句

    selct newName=case when  条件 then '否' else '是' end from tableName

  4. PHP重构之函数上移

    参考<重构> <?php abstract class Customer { public function addBill($date, $amount) { echo " ...

  5. 动态规划(区间DP):HDU 5115 Dire Wolf

    Dire wolves, also known as Dark wolves, are extraordinarily large and powerful wolves. Many, if not ...

  6. PowerDesigner 的常用小技巧 转

    中小 订阅 修改外键命名规则 选择Database—>Edit Current DBMS选择Scripts->Objects->Reference->ConstName可以发现 ...

  7. Qualcomm Android display架构分析

    Android display架构分析(一) http://blog.csdn.net/BonderWu/archive/2010/08/12/5805961.aspx http://hi.baidu ...

  8. HW4.26

    public class Solution { public static void main(String[] args) { double sum; double item; for(int i ...

  9. Mina学习之IoFilter

    IoFilter 是MINA中的一个核心结构,扮演了非常重要的角色.IoFilter在IoService和IoHandler过滤了所有的I/O 事件和请求.如果你有做个web项目的经验,则很类似于we ...

  10. servlet中避免405错误的产生

    父类Parent(相当于HttpServlet):service方法,用于处理任务分发,doGet.doPost方法用于报错  关注的是子类Son(servlet)     目的:杜绝错误的产生 方式 ...