jQuery能大大简化Javascript程序的编写,我近期花时间了解了一下jQuery。把我上手过程中的笔记和大家分享出来。希望对大家有所帮助。

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

<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

我自己弄了个子域名,实际上也是跳转到Google的CDN

http://cdn.akcms.com/js/jquery.js

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(); 
//在显示和隐藏之间切换(2012.4.21更新)

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实际上不能用。上面这个測试过能用

js与jQuery差别的更多相关文章

  1. 【JS】怎样用原生JS实现jQuery的ready方法

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...

  2. 【前端性能】必须要掌握的原生JS实现JQuery

    很多时候,我们经常听见有人说jquery有多快多快.在这个各种类库满天飞的时候,不得不说的是,能有原生JS快吗? 是的,明显原生JS要更快,因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

  3. 移动端用js与jquery实时监听输入框值的改动

    背景: 在一次移动端H5开发中,需要监听输入框值的实时变动. onchange事件肯定抛弃,因为只能失去焦点才触发. 而keyPress在Android可以触发,iOS不可以. 又不想用Android ...

  4. label用js,jquery取值赋值,以及怎么在后台取值

    label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值: 可以这样: JS: var label=document.getElementByIdx_x("id&qu ...

  5. JS与Jquery区别

    很多人对JS和JQuery很容易搞混淆,今天我们就相比学习下: 加载区别: var myfunction(){}; JS:1.window.onload=function(){} 2.<body ...

  6. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  7. JS和JQuery的总结

    JS部分 一,  词法结构 区分大小 注意://单行  /*多行注释*/ 字面量(直接量literal) 12 // 数字 5.8//小数 "hello" 'hello' true ...

  8. js和jquery获取当前对象的子元素

    开发中经常遇到需要获取ul下的il对象,个人总结了js和jquery的方法. HTML片断: <ul class="box"> <li>子元素1</l ...

  9. js+html+jquery 个人笔记

    js+html+jquery 笔记 1.获取HTML对象 var obj = document.getElementById(elementId) 对象的值: obj.value() 2.获取jQue ...

随机推荐

  1. 在MVC中实现和网站不同服务器的批量文件下载以及NPOI下载数据到Excel的简单学习

    嘿嘿,我来啦,最近忙啦几天,使用MVC把应该实现的一些功能实现了,说起来做项目,实属感觉蛮好的,即可以学习新的东西,又可以增加自己之前知道的知识的巩固,不得不说是双丰收啊,其实这周来就开始面对下载在挣 ...

  2. URL域名获取

    http://"是协议名 "www.test.com"是域名 "是端口号 "aaa"是站点名 "bbb.aspx"是页面 ...

  3. Python学习(24):Python面向对象(2)

    转自 http://www.cnblogs.com/BeginMan/p/3191037.html 一.类 类就是一个数据结构,封装了数据和操作. 类的声明与函数的声明十分类似: class newC ...

  4. Android 查看system/bin目录下支持哪些命令?

    C:\Users\yonghuming>adb shell "ls system/bin" >log acpiadbdamapp_processapp_process3 ...

  5. ARC下带CF前缀的类型与OC类型转换

    在对钥匙串操作时这个函数 OSStatus SecItemCopyMatching(CFDictionaryRef query, CFTypeRef * __nullable CF_RETURNS_R ...

  6. mysql 管理脚本

    1.环境文件 -bash-4.1$ more mysql_env.ini #!/bin/sh #set env MYSQL_USER=root MYSQL_PASS=123456' #check pa ...

  7. CentOS6.4挂载读写NTFS分区 (重要)

    如今很多的linux衍生版本已经支持自动连接NTFS分区了,之前在一次安装的过程中,遇到 linux不能识别NTFS分区,解决方法如下文: ============================== ...

  8. Android按钮事件的4种写法

    经过前两篇blog的铺垫,我们今天热身一下,做个简单的例子. 目录结构还是引用上篇blog的截图. 具体实现代码: public class MainActivity extends Activity ...

  9. 关于电信宽带wan口地址变成100.64网段的问题解决

    由于之前笔者一直在使用动态域名连接公司vpn.今天在连接vpn的时候总是失败,因动态域名及vpn配置都从未更改过. 于是首先排查动态域名,是否已更新为公司宽带对外的IP.这里笔者先通过nslookup ...

  10. Python2.7设置在shell脚本中自动补全功能的方法

    1.新建tab.py文件 #!/usr/bin/env python # python startup file import sys import readline import rlcomplet ...