初学JQuery

1.jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

2.如何添加JQuery库： 可添加 <head> <script type = "text/javascript" src = "jquery.js"><script> </head> 但是在HTML5中，默认的script是javascript，所以不需要type="text/javascript"了。 jquery.js可以到http://jquery.com/download/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DDownloading_jQuery%26redirect%3Dno下载，下载是请根据需要选择不同版本的js，要考虑兼容性。 如果不想在本地保留jquery.js文件，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
使用 Google 的 CDN <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head> 可以将1.4.0替换为1.4则是得到1.4版本中最新的，同理替换为1时得到的是1系列中最新的版本。
使用 Microsoft 的 CDN <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
用这两家公司的JQuery有一个好处就是：会从用户缓存中提取，从而大大减少了加载时间。


3.基本语法：

$(selector).action()

美元符号定义JQuery ．

选择符（select）“查询”和查找HTML元素 ．执行对元素的操作

例：

$(this).hide() - 隐藏当前元素

$("#test").hide() - 隐藏id = test的元素

$(".test").hide()  - 隐藏class = test的元素

$("p").hide() - 隐藏所有段落

　　$("p.test").hide()  - 隐藏class = test的段落元素


4.文档就绪函数

$(document).ready(function(){

---JQuery functions go here---

});

为了防止在文档完全加载就绪之前运行JQuery代码。


5.选择器

．元素选择器

    使用与CSS相同的class或id一样的形式来选取HTML元素如上举例

．属性选择器

    $("[href]") - 选取所有带有href属性的元素

    $("[href = '#']") - 选取所有href值等于“#”的元素

    $("[href != '#']") - 选取所有href值不等于“#”的元素

    $("[href $= '.jpg']") - 选取所有href值等于以.jpg结尾的元素

．CSS选择器 

       $("p").css("background-color","red");


6.JQuery事件函数 JQuery是为事件处理（触发）特别设计的，事件处理方法是JQuery中的核心函数。

可以将自己写的JQuery函数放到单独的文件中。

7.JQuery名称冲突

使用var jq = JQuery.noConflict（）,帮助使用自己的（如：jq）来代替$符号。

8.

jQuery 事件例子
Event 函数 绑定函数至
$(document).ready(function)  
将函数绑定到文档的就绪事件（当文档完成加载时）
  $(selector).click(function)              触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)
触发或将函数绑定到被选元素的鼠标悬停事件
9.显示/隐藏元素
JQuery hide()和show()
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed表示显示或隐藏的速度，可取值：“slow”，“fast”，毫秒数。（特别注意引号）callback是隐藏或显示之后要执行的函数的名称。
或者使用toggle(speed,callback)函数来实现显示和隐藏之间的切换。
 
10.元素淡入淡出
  • fadeIn()

　　用于淡入已隐藏的元素

　　语法：$(select).fadeIn(speed,callback);

  • fadeOut()

　　用于淡出要隐藏的元素

　　语法：$(select).fadeOut(speed,callback);

  • fadeToggle()

　　用于在fadeIn(),fadeOut()之间进行切换

　　语法：$(select).fadeToggle(speed,callback);

  • fadeTo()

　　用于渐变为给定的不透明度（值介于0~1）

　　语法：$(select).fadeTo(speed,opacity,callback);

11.滑动效果

  • slideDown()

用于淡向下滑动元素

　　语法：$(select).slideDown(speed,callback);

  • slideUp()

用于淡向上滑动元素

　　语法：$(select).slideUp(speed,callback);

  • slideToggle()

用于在slideDown（）和slideUp（）之间进行切换。

　　语法：$(select).slideToggle(speed,callback);

 

12.动画
　　animate()
　　用于创建自定义动画。
　　用法：$(selector).animate({params},speed,callback);
　　必须的param参数定义形成动画的CSS属性；默认情况下，所有HTML元素的位置都是静态的，并且无法移动。如需对位置进行操作，
　　记得首先把元素的CSS position属性设置为relative,fixed或absolute。
　　几乎可以用animate来操作所有的CSS属性，但是必须使用Camel命名法书写所有属性名。marginLeft代替CSS中的margin-left。
可以多个动画一起使用，会从上到下依次执行。
fontSize：'3em' 将字体变换成父字体的三倍。
 
13.停止动画
用于在动画完成前停止动画效果。
语法：$(select).stop(stopAll,goToEnd);
　   可选参数stopAll　规定是否清除动画队列，默认是false，允许任何排入队列的动画向后执行。
可选的参数goToEnd  规定是否完成当前动画，默认是false。
 
14.callBack函数在当前动画执行100%后执行
如果不这样做，可能会因为前者动画时间过长，还没执行完毕时就已调用下边的函数。
 
15.JQuery Chaining
Chaining允许我们在一条语句中用多个JQuery方法（在相同的元素上）。浏览器就不必多次查找相同的元素。
例子：$("p").css("color","red")
　　　　　　.slideUp(2000)
　　　　　　.slideDown(2000);
段落P首先变成红色，再淡出然后淡入。
 
 
 
 
 

 

posted @ 2013-04-20 11:24  Java_Code  阅读(491)  评论(0)  编辑  收藏  举报