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. PHP命名空间理解

    这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! 这玩意就是路径! use 就是声明要用某个路径的文件(类) 再有namespace的情况下,就类似于已经在一个路径里了 这个时候 ...

  2. Linux svn服务的搭建

    一.yum安装svn yum -y install subversion   二.查看已安装的svn版本信息 svnserve --version   三.创建一个代码库 1.先创建一个目录 mkdi ...

  3. bzoj4819 [Sdoi2017]新生舞会

    Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学姐,负责为同学们安排舞伴.有n个男生和n个女生参加舞会买一个男生和一个女生一起跳舞,互为舞伴.Cathy收集了这些同学之间的 ...

  4. 【国家集训队2012】tree(伍一鸣)

    Description 一棵n个点的树,每个点的初始权值为1.对于这棵树有q个操作,每个操作为以下四种操作之一:  + u v c:将u到v的路径上的点的权值都加上自然数c:  - u1 v1 u2 ...

  5. 【算法系列学习】codeforces C. Mike and gcd problem

    C. Mike and gcd problem http://www.cnblogs.com/BBBob/p/6746721.html #include<iostream> #includ ...

  6. 最简单bat教程

    请移到此处查看 http://www.cnblogs.com/SunShineYPH/archive/2011/12/13/2285570.html

  7. phpcms笔记

    一.建立虚拟站点 1.先更改www目录下的站点名称,再找到apache, 打开"Apache2\conf\extra"下的"httpd-vhosts.conf" ...

  8. 编写高质量的JavaScript代码(一)

    欢迎大家关注腾讯云技术社区-博客园官方主页,我们将持续在博客园为大家推荐技术精品文章哦~ 2016年6月加入腾讯,目前在SNG社交网络质量部从事内部平台工具的研发.熟悉PHP.JS.CSS,喜欢弹吉他 ...

  9. 构建你人生里的第一个 Laravel 项目

    安装 Laravel 安装器 composer global require "laravel/installer" 创建项目 laravel new links 检查是否安装成功 ...

  10. jQuery图片上传前先在本地预览(不经过后端处理)

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...