早就听说了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. 使用swf与swc引入资源的区别[as3]

    SWF用于运行时加载,而SWC在编译时用做外部库.使用SWC库,只有当类被引用,才编译入主程序中. getDefinition: 在使用swc库方式引入资源时,getDefinitionByName反 ...

  2. Hadoop.2.x_高级应用_二次排序及MapReduce端join

    一.对于二次排序案例部分理解 1. 分析需求(首先对第一个字段排序,然后在对第二个字段排序) 杂乱的原始数据 排序完成的数据 a,1 a,1 b,1 a,2 a,2 [排序] a,100 b,6 == ...

  3. JavaScript基础 DOM的操作

    1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 一.属性和方法: window对象——浏览器 ...

  4. super()和this()的区别

    1)调用super()必须写在子类构造方法的第一行,否则编译不通过.每个子类构造方法的第一条语句,都是隐含地调用super(),如果父类没有这种形式的构造函数,那么在编译的时候就会报错. 2)supe ...

  5. javascript对象的一点理解

    <script type="text/javascript"> /* js对象:对象的职责是调用属性和调用方法 */ //1.对象的创建的三种方式 var obj = ...

  6. 括号配对nyoj2(疑问)

    描述现在,有一行括号序列,请你检查这行括号是否配对.   输入 第一行输入一个数N(0<N<=100),表示有N组测试数据.后面的N行输入多组输入数据,每组输入数据都是一个字符串S(S的长 ...

  7. 20145337《Java程序设计》第八周学习总结

    20145337<Java程序设计>第八周学习总结 教材学习内容总结 15.1日志 15.1.1日志API简介 使用日志的起点是logger类,logger实例的创建有许多要处理的要素,必 ...

  8. 实现memcpy

    memcpy的原型: SYNOPSIS #include <string.h> void *memcpy(void *dest, const void *src, size_t n); D ...

  9. js判断字符是否包含字母汉字

    <script type="text/javascript"> function check(str) { if (escape(str).indexOf(" ...

  10. centos安装后iptables基本设置

    一.首先关闭防火墙#service iptables stop 二.查看状态,确认关闭#service iptables status 三.清除掉防火墙规则#iptables -F#iptables ...