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. 有了Auto Layout,为什么你还是害怕写UITabelView的自适应布局?

    本文转载至 http://www.cnblogs.com/ios122/p/4832859.html Apple 算是最重视应用开发体验的公司了.从Xib到StoryBoard,从Auto Layou ...

  2. WP8.1学习系列(第十七章)——交互UX之输入和反馈模式

    如果你将 Windows 应用商店应用设计为触摸交互,则可免费获取对触摸板.鼠标.笔和键盘交互的支持.你的用户可以从一种输入法切换到另一种,而不会丧失应用体验的感觉.将键盘插入平板电脑?没问题.你的应 ...

  3. springboot---->springboot中的校验器(一)

    这里面我们简单的学习一下springboot中关于数据格式化的使用.冬天花败,春暖花开,有人离去,有人归来. springboot中的校验器 我们的测试环境是springboot,对请求的person ...

  4. 剑指offer——49

    丑数 因子只含2,3,5的数称为丑数. 怎么求第K大的丑数呢.K可以为10^7 最简单的做法是,对每个数判断是否为丑数. 复杂度为O( n * log(n) ),理论上是不行的. uglys[i] 来 ...

  5. 【大数据系列】FileSystem Shell官方文档翻译

    appendToFile cat checksum chgrp chmod chown copyFromLocal copyToLocal count cp createSnapshot delete ...

  6. Android studio Unable to start the daemon process

    Unable to start the daemon process.This problem might be caused by incorrect configuration of the da ...

  7. excel多个sheet表拆分成独立的excel文件

    一.问题: 公司做一个项目,给的用户上报文是一个包含多个sheet页的excel文件, 但是在实际处理报文数据的时候需要拆分excel文件为多个独立的报文excel文件 二.解决: (1)一个一个的复 ...

  8. Elasticsearch学习之SearchRequestBuilder常用方法说明

    SearchRequestBuilder常用方法说明  (1) setIndices(String... indices):上文中描述过,参数可为一个或多个字符串,表示要进行检索的index: (2) ...

  9. 将Linux系统的字体全改成中文

    # 修改字符集,否则可能报 input/output error的问题,因为日志里打印了中文 $ localedef -c -f UTF-8 -i zh_CN zh_CN.UTF-8 $ export ...

  10. nose测试中修改nose_html_reporting插件,使生成的html报告加入显示截图功能

    使用nose框架在测试WEB UI自动化时,使用了第三方插件nose-html-reporting,来生成HTML报告,nose-html-reporting具体使用参见管网https://pypi. ...