早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大。决定开始自己的学习Jquery之旅。在这里不是为大家讲解Jquery(深知水平有限),只是将自己的学习成果分享给大家,共同学习和交流。

jQuery简介

我所理解的jQuery就是一个强大的Javascript类库,里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。过多的jQquery在这里就不多介绍了,想必很多人都已经看过了更详细的文档,我就不多啰嗦了。

Selectors (选择器)

jQuery中使用 $ ,可以通过元素的id, css class或 tag name很容易的获取到相应的元素。

(1)简单的获取元素

Example:

$("p") //获取所有的P元素
$("#pid") //通过 ID 
$(".p") //通过css class name

(2)当然,他的功能不仅限于如此,还可以钻取层次结构

Example:

$("table > tbody > tr") //获取Table的所有行
$("#t1 > tbody > tr") //获取t1 中所有行
$(".table > tbody > tr") // 获取css类名为.table的所有行

(3)Jquery为了让开发人员更准确方便的选择到相应的元素,还给我们提供了强大的筛选器的功能:

Example:

$(“p:first”)  //first  
$(“p:last”)  //last  
$(“table > tbody > tr:even”)  //even rows   
$(“table > tbody > tr:odd”) //odd rows   
$(“p:eq(1)”) //索引为1
$(“p:gt(2)”) //2以上的元素
$("p:lt(10)”) // 0-9   
$(“p:empty”) //没有子孩子的p  
$(“p:parent”) //为父的p

(4)访问文本,并可以控制其中的值:

Example:

$("input[type='text']").css("color", "red"); 

关于selectors的作用还有很多,大家可以参看:http://docs.jquery.com/Selectors

访问内容

Examlple:

$("#span").html();   
$(:input).val();   
$("#name").text();

上面的几个方法用来获取指定元素的基本结果集,在我们使用的时候应当注意:val()方法查找有一个属性和他相关联的元素。html()查找的是指定元素中HTML中的内容。text()方法获取的是指定元素的text。

操作HTML标记,还有其他的一些方法,比较常用的还有css()和attr()。

css()方法有两个参数,一个是css的元素名,另一个是其所对应的值,通过css()可以很容易的修改一个或多个元素的css样式。

attr()方法可以读取或修改元素的属性。并且他可以同时设置多个元素的属性.

Examlple:

$("p").css("background-color", "blue");   
$("p").css({ "background-color" : "navy", "color", "white" });   
$("button").attr("disabled", "disabled"); 

事件

jQuery能够监听元素的事件。最引人注目并且频繁使用的事件就是ready 事件。这个事件在浏览器加载完之后触发。

$(document).ready(function() { .. });

处理一个按钮事件:

$("#buttonid").click(function() { alert("BUTTON CLICK"); }

jQuery中常用的函数方法总结

jQuery中为我们提供了很多有用的方法和属性,自己总结的一些常用的函数,方法。个人认为在开发中会比较常用的,仅供大家学习和参考。

事件处理

ready(fn)

代码
$(document).ready(function(){
  // Your code here...
});

作用:它可以极大地提高web应用程序的响应速度。通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行。

bind(type,[data],fn)

代码
$("p").bind("click", function(){
  alert( $(this).text() );
});

作用:为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数。起到事件监听的作用。

toggle(fn,fn)
代码:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

作用:每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。挺有趣的一个函数,在动态实现某些功能的时候可能会用到。

(像click(),focus(),keydown()这样的事件这里就不提了,那些都是开发中比较常用到的。)

外观效果

addClass(class)和removeClass(class)

代码
$(".stripe tr").mouseover(function(){  
               $(this).addClass("over");}).mouseout(function(){ 
               $(this).removeClass("over");})
});
也可以写成:
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

作用:为指定的元素添加或移除样式,从而实现动态的样式效果,上面的实例中实现鼠标移动双色表格的代码。

css(name,value)

代码:
$("p").css("color","red");

作用:很简单,就是在匹配的元素中,设置一个样式属性的值。这个个人感觉和上面的addClass(class)有点类似。

slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()

代码

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

作用:jQuery中提供的比较常用的几个动态效果的函数。还可以添加参数:show(speed,[callback])以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

animate(params[,duration[,easing[,callback]]])

作用:制作动画效果用到的函数,功能非常的强大,可以连续使用此函数。

查找筛选

map(callback)
HTML 代码:
<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/%22/>
</form> 
jQuery 代码:
$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") ); 
结果:
[ <p>John, password, http://ejohn.org/%3C/p> ]

作用:将一组元素转换成其他数组(不论是否是元素数组)你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

find(expr)

HTML 代码:

<p><span>Hello</span>, how are you?</p> 
jQuery 代码:

$("p").find("span") 
结果:

[ <span>Hello</span> ]

作用:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

文档处理

attr(key,value)
HTML 代码:
<img/><img/> 
jQuery 代码:
$("img").attr("src","test.jpg");

作用:取得或设置匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。在控制HTML标记上是必备的工具。

html()/html(val)
HTML 代码:
<div><p>Hello</p></div>
jQuery 代码:
$("div").html();
结果:
<p>Hello</p>

作用:取得或设置匹配元素的html内容,同类型的方法还有text()和val()。前者是取得所有匹配元素的内容。,后者是获得匹配元素的当前值。三者有相似的地方常用在内容的操作上。

wrap(html)
HTML 代码:
<p>Test Paragraph.</p> 
jQuery 代码:
$("p").wrap("<div class='wrap'></div>"); 
结果:
<div class="wrap"><p>Test Paragraph.</p></div>

作用:把所有匹配的元素用其他元素的结构化标记包裹起来。
这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。 可以灵活的修改我们的DOM。

empty()
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p> 
jQuery 代码:
$("p").empty(); 
结果:
<p></p>

作用:删除匹配的元素集合中所有的子节点。

Ajax处理

load(url,[data],[callback])
url (String) : 待装入 HTML 网页网址。
data (Map) : (可选) 发送至服务器的 key/value 数据。
callback (Callback) : (可选) 载入成功时回调函数。

代码:

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

作用:载入远程 HTML 文件代码并插入至 DOM 中。这也是Jquery操作Ajax最常用最有效的方法。

serialize()
HTML 代码:
<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" 
checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" 
checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form> 
jQuery 代码:
$("#results").append( "<tt>" + $("form").serialize() + "</tt>" );

作用:序列化表格内容为字符串。用于 Ajax 请求。

工具

jQuery.each(obj,callback)

代码
$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});//遍历数组
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );//遍历对象
});

作用:通用例遍方法,可用于例遍对象和数组。

jQuery.makeArray(obj)
HTML 代码:
<div>First</div><div>Second</div><div>Third</div><div>Fourth</div> 
jQuery 代码:
var arr = jQuery.makeArray(document.getElementsByTagName("div"));
结果:
Fourth
Third
Second
First

作用:将类数组对象转换为数组对象。使我们可以在数组和对象之间灵活的转换。

jQuery.trim(str)


作用
:这个大家应该很熟悉,就是去掉字符串起始和结尾的空格。

前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用。今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件。

做网站的都知道,网站的美工很重要,如果一个BS的软件美工做的不好,技术含量很高,算法再高深,也不会很受到用户的青睐。(其实CS的也是如此)

然而jQuery强大的插件,可以很容易的给我们的网站带来炫酷的效果,以及更人性化得用户体验。下面和大家分享一些开发中可能常用的jQuery插件。

Menu

效果:

实现起来非常简单:

Html代码:

Code

css和jQuery代码:

Code

其中的jquery-latest.pack.jsjquery.lavalamp.jsjquery.easing.js

当然,这是比较简单的Menu,但是比较实用,还有其他很酷的Menu,比如下拉式的Menu,大家可以到我最后给的网站上查找,这里就不多介绍了。

 Tabs

Tabs也是我们经常使用插件,它可以使我们的网站更佳的整洁和规范,是个很人性化的设计。

效果: 点击这里查看效果(这里可能有点问题,我不知道为什么css的@media应用不上,本地测试是没有问题的,写在博客园的html模板中就有了问题,看了半天无语了)

实现起来也不是很难,关键的地方就是对css的操作上

Html代码:

Code

css和jQuery代码:

Code

其中的ui.tabs.pack.js

Accordion

手风琴效果,大家应该很熟悉。

效果: 点击这里查看效果

Html代码

Code

css和jQuery代码

Code

其中的jquery.accordion.js当然,大家可以制作更炫酷漂亮的效果。

Round

有的时候我们希望页面中的Div实现圆角的效果,Jquery可以很好的满足我们。

效果:点击这里查看效果

Html代码


<DIV id=main>
<DIV class=demo id="corner1">
<H1>Round</H1>
<P>Hello World!!</P></DIV> <DIV class=demo id="corner2">
<H1>Round</H1>
<P>Hello World!!</P></DIV>
</DIV>

css和jQuery代码

Code

其中的jquery.corner.js。这样就能够实现Div的圆角效果。

Dialog

简单的实现在网页中弹出对话框。

效果:点击这里查看效果

Html代码:

Code

css和jQuery代码:

Code

其中的jquery.simplemodal.js,在Dialog中我们能做很多事情,类似的场景很多:百度的登录....

ok,就先写到这。

小结:就先简单的介绍这些。jQuery的插件深受大家的喜爱和好评,的确给我们的开发带来了不少便捷和绚丽的效果,这里就不多介绍了,大家可以到下面的地址中去继续体验。

更多Jquery插件:

http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html

http://parandroid.com/more-than-50-powerful-plug-in-application-examples-jquery/

http://www.cnblogs.com/andylaufzf/archive/2009/03/26/1422255.html

学习jQuery之旅的更多相关文章

  1. 学习Jquery

    早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大.决定开始自己的学习Jquery之旅.在这里不是为大家讲解Jquery(深知水平有限),只是将自 ...

  2. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  3. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  4. 从零开始学习jQuery (一) 开天辟地入门篇

    一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuer ...

  5. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  6. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  7. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  8. 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式

    本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...

  9. 从零开始学习jQuery (三) 管理jQuery包装集

    本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...

随机推荐

  1. ckedit 文本编辑器

    Ckeditor是一个功能非常强大的富文本编辑器,博客园有使用此编辑器,其功能完全可以与MS的Word媲美. 用起来也非常方便.下面是本人总结的安装步骤: 第一步,从http://ckeditor.c ...

  2. vim 基础命令

    第一部份:一般指令模式可用的按鈕說明,游標移動.複製貼上.搜尋取代等 移動游標的方法 h 或 向左方向鍵(←)                           游標向左移動一個字元 j 或 向下方 ...

  3. WIN8 MTK驱动不能安装解决办法

    1.把鼠标移动到桌面最右下角的位置会出来一个侧边栏,按那个齿轮就是“设置”,会出来个菜单,选择最下边的“更多电脑设置” 注:也可以按快捷键“WIN+I” 2.选择“常规”→“高级启动”→”立即重启“ ...

  4. Daily Scrum 10.27

    今天是星期天,但大家都没有放松,还是抽出了一定的时间来完成任务.可以感觉出来在编译作业的压力下大家的热情不是很高涨,希望大家坚持下去. 下面是今天的Task统计: 下面是所有迭代的状态:

  5. Intent实现Activity组件之间的通信

    今天讲解的是使用Intent实现Activity组件之间的通信. 一.         使用Intent显式启动Activity,Activity1àActivity2 1.             ...

  6. Oracle索引简单介绍与示例

    索引的三大特性 1索引高度 在SQL检索数据(SELECT)的时候,索引的高度的不同对检索的效率有明显的差别,数据库访问索引需要读取的数据块通常是索引的高度+1个数据块数,也就是说索引的高度越高,访问 ...

  7. iOS CUICatalog: Invalid asset name supplied: (null)

    iOS开发出现CUICatalog: Invalid asset name supplied: (null), or invalid scale factor: 2.000000 原因: 你用了这个方 ...

  8. Mysql的时间和日期

    datetime    占8个字节    可以显示日期同时显示时间  yyyy-mm-dd hh:mm:ss 显示范围  1000-01-01 00:00:00----9999-12-31 23:59 ...

  9. 多个git账号的配置

    问题描述: 作为开发人员,普遍有多个git账号,例如,公司邮箱对应的公司仓储账号和私人邮箱对应的github账号.在一台电脑上使用两个账号基于ssh协议拉代码,如果不进行额外设置,往往只有一个账号可以 ...

  10. PHP文件操作系统----主要的文件操作函数

    一.文件操作系统概述 1.概述: php中的文件操作系统主要是对文件和目录的操作.文件在windows系统下分为3种不同:文件.目录.未知,在linux/unix系统下分为7种不同:block.cha ...