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. [Git]07 如何在提交过程中忽略某些文件

     一般我们总会有些文件无需纳入 Git 的管理,也不希望它们总出现在未跟踪文件列表.通常都是些自动生成的文件,比如日志文件,或者编译过程中创建的临时文件等.我们可以创建一个名为 .gitignor ...

  2. myeclipse中文乱码

    解决myeclipse中乱码问题. 改变整个Eclipse工作空间的编码格式 window->preferences->General->workspace中 把text file ...

  3. js事件相关面试题

    说是面试题,其实也相当于是对js事件部分知识点的一个总结.简单内容一笔带过,了解详情我都给出了参考链接,都是之前写的一些相关文章.JavaScript本身没有事件模型,但是环境可以有. DOM:add ...

  4. 【山东省选2008】郁闷的小J 平衡树Treap

    小J是国家图书馆的一位图书管理员,他的工作是管理一个巨大的书架.虽然他很能吃苦耐劳,但是由于这个书架十分巨大,所以他的工作效率总是很低,以致他面临着被解雇的危险,这也正是他所郁闷的.具体说来,书架由N ...

  5. VopSdk一个高逼格微信公众号开发SDK

    一.我们的目标 分离基础参数和业务参数. 具有高重用和扩展性. 轻量级. 二.实现目标 (一)分离基础参数和业务参数 仔细分析所有接口,抽离出每个模块接口的公共参数. A.针对微信公众号所有接口分析( ...

  6. PHP三维数组拼装

    foreach ($records as $k => $v) { foreach ($records as $m => $n) { if ($v['days'] == $n['days'] ...

  7. 简单的3D图片轮播dome

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Centos程序最小化后,窗口标签都消失找不到窗口的问题

    我是用的centos版本是CentOs 7. 在“顶部面板”或者 “底部面板” 右击选择“添加组件”),如下图所示: 在搜索框里输入“窗口列表”(window list),选中“窗口列表”即可.如下图 ...

  9. Jdk1.6 JUC源码解析(7)-locks-ReentrantLock

    功能简介: Java代码层面提供的锁机制,可做为Synchronized(jvm内置)的替代物,和Synchronized一样都是可重入的. 与Synchronized相比较而言,ReentrantL ...

  10. Java Garbage Collectors

    Generational Collectors (分代收集器) GC algos optimised based on two hypotheses / observations: Most obje ...