jQuery能大大简化Javascript程序的编写

要使用jQuery,首先要在HTML代码最前面加上对jQuery库的引用,比如:

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

库文件既可以放在本地,也可以直接使用知名公司的CDN,好处是这些大公司的CDN比较流行,用户访问你网站之前很可能在访问别的网站时已经缓存在浏览器中了,所以能加快网站的打开速度。另外一个好处是显而易见的,节省了网站的流量带宽。

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

1 定位元素  JS  document.getElementById("abc") 
     jQuery  $("#abc") 通过id定位  $(".abc") 通过class定位  $("div") 通过标签定位 
     需要注意的是JS返回的结果是这个元素,jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 
2 改变元素的内容

JS  abc.innerHTML = "test";  jQuery  abc.html("test"); 
3 显示隐藏元素

JS  abc.style.display = "none";  abc.style.display = "block"; 
    jQuery  abc.hide();  abc.show();

abc.toggle();  //在显示和隐藏之间切换
4 获得焦点 
    JS和jQuery是一样的,都是abc.focus(); 
5 为表单赋值

JS  abc.value = "test";  jQuery  abc.val("test"); 
6 获得表单的值

JS  alert(abc.value);  jQuery  alert(abc.val()); 
7 设置元素不可用

JS  abc.disabled = true;  jQuery  abc.attr("disabled", true);

8 修改元素样式

JS abc.style.fontSize=size; jQuery abc.css('font-size', 20);

JS abc.className="test"; JQuery abc.removeClass();  abc.addClass("test");

9 Ajax

JS 自己创建对象,自己处理浏览器兼容等乱七八糟的问题,略去不表

jQuery $.get("abc.php?a=1&b=2", recall);

postvalue = "a=b&c=d&abc=123";

$.post("abc.php", postvalue, recall);

function recall(result) { alert(result); //如果返回的是json,则如下处理

//result = eval('(' + result + ')');

//alert(result); }

10 判断复选框是否选中

jQuery if(abc.attr("checked") == "checked")

注意:网上说的.attr("checked") == true实际上不能用,上面这个测试过能用

JQuery与js具体使用的区别(不全,初学)的更多相关文章

  1. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  2. JQUERY与JS的区别

    JQUERY与JS的区别 <style type="text/css"> #aa { width:200px; height:200px; } </style&g ...

  3. JQuery之append和appendTo的区别,还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

  4. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

  5. jquery.js和jquery.min.js的区别介绍

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  6. jQuery与js的区别,并有基本语法详解,

    通过过一下对比,我们能很清楚的发现jquery与js的区别,运用jquery能大量减少代码量,不过js里面关于时间的setinterval和settimeout只能用js <script src ...

  7. jQuery于js的区别和联系

    一.什么是jQuery jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,提高开发效率. js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里 ...

  8. jquery.js和jquery.min.js的区别和springboot整合echarts.min.js

    1.区别:jquery官网提供2种jQuery的下载,一种是jquery.js另一种是jquery.min.js文件名不一定完全相同,但通常情况下:jquery.js是完整的未压缩的jQuery库,文 ...

  9. jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法

    jquery的offset().top和js的offsetTop的区别,以及jquery的offset().top的实现方法 offset().top是JQ的方法,需要引入JQ才能使用,它获取的是你绑 ...

随机推荐

  1. 热爱H5

    我不去想是否能够功成名就既然选择了前端便只顾埋头于无声 我不去想能否赢得掌声既然钟情于IT就勇敢得踏步前行 我不去想前行的路上会不会日暮穷途既然目标是未来留给现在的只能是汗水 我不去想所谓的成功是不是 ...

  2. Intellij IDEA注册server

    版权声明:本文为博主原创文章,未经博主允许不得转载.转载请注明来源:http://blog.csdn.net/mingjie1212.欢迎交流学习!对于Intellij IDEA 2016.3.4   ...

  3. python——进程、线程、协程

    Python线程 Threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #!/usr/bin/env pytho ...

  4. 【Java SE】如何用Java实现冒泡排序

    摘要: 作为一名Java开发工程师,手头如果不会几个常见的排序算法,怎么可能经过笔试题这一关呢.据我所知,许多大型的公司的笔试题都有排序题,那我们先从最简单的排序:冒泡排序开始,以后几篇博客将继续更新 ...

  5. Linux学习之要点必备

    在本节课中我将会带领大家秒懂linux命令 要点一:常见基本命令格式 命令名称+选项+参数 例如:#mkdir -r /var/ruofeng/001/ 我们通过逐级创建目录方式解释这个例子,mkdi ...

  6. hdu1166树状数组

    C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任务就是要监视这些工兵营地的活动情况.由于 ...

  7. 使用 Laravel 实现微型博客系统

    参考链接:An Introduction to Laravel Authorization Gates 这个微型博客系统包含两个用户角色(作者 和 编辑),它们的权限如下: 作者能创建博客 作者能更新 ...

  8. Linux添加硬盘和挂载

    1.使用fdisk -l 查看硬盘的详细信息 分析: 2.分区初始化 fdisk /dev/sdb 分析:各个参数的解析                   1. 输入 m 显示所有命令列示. 2. ...

  9. 北漂面试经历(一(两)年工作经验)-- Java基础部分

    Java基础部分 常量和变量的区别:final 关键词修饰的变量是恒定不变的,如果还有static关键词修饰的话,常常称为编译期常量.变量,运行时可以修改其引用. Java基本类似有哪些 1 Byte ...

  10. Django models Fild详解

    本文参考自:django官方文档models/field 在model中添加字段的格式一般为:  field_name = field_type(**field_options) 一  field o ...