jQ选择器:
首先我们看 jQ里面最常用的 3中选择器。
[color=Red]1.基本选择器(3种):
$(“标签名”),如$(“p”)是选取了所有的p标签节点
$(“#id名”),如$(“#test”)是选取了id为test的标签节点
$(“.class名”),如$(“.test”)是选取了所有class为test的标签节点
上面的$(“标签名”)和$(“.class名”)返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt等等.
[color=Red]2.组选择器:
下面还是现做一个约定:把”标签名或#id名或.class名”记作mix,则mix表示一个标签名,或一个#id或一个.class.
$(“mix,mix,mix,…”),如:$(“div,#test1,p,.test2,#test3″)
[color=Red]3.后代选择器:
$(“mix mix”),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$(“mix mix mix …”)这种写法作用不大.例子:$(“div .test”):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test的标签)
如果看不懂概念的话,我们应该写几个例子测试下 。
demo1:
[color=Green]
[color=Red]代码烤到本地运行:
[html]
Contact us
Click here.
aaa
[/html]
demo下载:jQ学习第一季(beta1)
jQ-API下载:jQ-API
Visual-API下载:Visual-API
demo16-表格排序:
[color=Red]
只做了一个简单的例子:
| demo1 |
22 |
张三 |
| demo2 |
23 |
李四 |
| demo3 |
24 |
王五 |
| demo4 |
24 |
王五 |
| demo5 |
24 |
王五 |
demo下载:jQ学习第一季(beta1)
jQ-API下载:jQ-API
Visual-API下载:Visual-API
demo15:Animate的用法:
[color=Red]$(document).ready(function(){
$(“a”).toggle(function(){
$(“.stuff”).animate({ height: 'hide', opacity: 'hide' }, 'slow');
},function(){
$(“.stuff”).animate({ height: 'show', opacity: 'show' }, 'slow');
});
});
text
animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )
用于创建自定义动画的函数。
[color=Green]
用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象
。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。
[color=Green]toggle是轮换的意思
相当于hide or show
也就是说如果p是隐藏的就让它显示 如果是显示的就让它隐藏
当然这个显示与隐藏是相对height的属性的
是通过调整元素的height属性来显示和隐藏元素
demo下载:jQ学习第一季(beta1)
jQ-API下载:jQ-API
Visual-API下载:Visual-API
demo14-next的用法:
[color=Red]$(document).ready(function() {
$(“span”).click(function (){alert( $(“p”).next(“.selected”).html() ); } )
// $(“p”).next().html() 也可以
});
Hello
Hello cssrain.
点我测试
[color=Red]代码烤到本地运行:
[html]
Hello
Hello cssrain.
点我测试
[/html]
demo下载:jQ学习第一季
jQ-API下载:jQ-API
demo13-load()的简单用法:
[color=Red]$(function() {
// $(“#feeds”).load(“FAQ1.html”)
$(“#feeds”).load(“demo1-鼠标点击时的触发.html”,function() { alert(“load is done”);}
);
});
仔细的人会发现,我是这么定义 $(function() { 的,
[color=Green]$(document).ready(function(){
//
}); 的缩写法:
$(
function() {
//
}
);
[color=Red]代码烤到本地运行:
[html]
[/html]
demo下载:jQ学习第一季
jQ-API下载:jQ-API