jQuery学习(一)

PS:个人学习笔记，仅供参考

ready（）函数

如果你需要一些函数需要在DOM加载就绪以后才能执行,当然window.onload()能实现同样的功能，但当window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的.

$(document).ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。 简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数.

$(document).ready意思就是说，获取文档对象就绪的时候。

$(document).ready(function() {

// do stuff when DOM is ready//当文档载入后从此处开始执行代码

});

 

$号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。

 

第一个测试，点击所有的超链接中的其中一个显示hello world；

<SCRIPT LANGUAGE="JavaScript">

<!--

$(document).ready(function() {

// do stuff when DOM is ready//当文档载入后从此处开始执行代码
       $(“a”).click(funciont(){

       alert(“HELLO WORLD”);

});

});

//-->

</SCRIPT>

 

 

css的操作

addClass( String class )：为每个匹配的元素添加指定的类名。

removeClass( String class )：为每个匹配的元素移除指定的类名。

注：该class在CSS已存在

css(key, value)：在所有匹配的元素中，设置一个样式属性的值。

eg：$(this).css("color","red");

css(name)：访问第一个匹配元素的样式属性。使用这个方法可以很容易地取得第一个匹配元素的样式属性的值

eg：alert($(this).css("color "));

css(properties)： 把一个“名/值对”对象设置为所有匹配元素的样式属性。 一种在所有匹配的元素上设置大量样式属性的最佳方式

eg: $(this).css({ color: "red", background: "blue" });

height(val)：为每个匹配的元素设置CSS高度(height)属性的值。如果没有明确指定单位（如：em或%）默认使用px

height()：取得第一个匹配元素当前计算的高度值（px）。

width(val) 和width()：同height(val)和height()

 

 

效果函数

Fade:渐变

fadeIn( String|Number speed, Function callback )：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

eg：$("#fadeIn").fadeOut("slow",function(){alert("层出现")});

fadeOut( String|Number speed, Function callback )：通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

fadeTo( String|Number speed, Number opacity, Function callback )：把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

Slide：滑动

slideDown( String|Number speed, Function callback )：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来

eg：$("#slideDown").slideDown("slow",function(){alert("层滑动显示了！")});

slideToggle( String|Number speed, Function callback )：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

slideUp( String|Number speed, Function callback )：与slideDown相反

       注：speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000)

              Opacity：透明度，0.5表示将不透明度设置成50%

 

选择器(selectors 的xpath语法应用)

l         第一种根据属性选择E[@attr]

$("[@title]").click()：即选择所有元素内 属性带有title的元素

$("div[@title]").click()：选择所有div标签下的所有带title的元素

l         第二种根据属性值选择E[@attr=val]

$("div[@title=ttt]").click()：选择div下所有title属性等于ttt的元素

$("[@title=ttt]").click()：所有元素下属性title等于ttt的元素

l         第三种根据属性值开始字母选择E[@attr^=val]

$("div[@title^=t]").click()：所有div元素下所有属性title值是以t为开头的元素

l         第四种根据属性值结尾字母选择E[@attr$=val]

$("div[@title$=t]").click()：所有div元素下所有属性title值是以t为结尾的元素

l         第五种根据属性值包含字母选择E[@attr*=val]

$("div[@title*=t]").click():所有div元素下所有属性title值是包含t的所有元素

l         第六种根据多个属性选择E[@attr=val][@attr=val]

$("div[@title=ttt][@class=aaaa]").click()：所有div元素下所有属性title值是等于ttt并且属性class等于aaaa的元素