jquery的基础知识初学总结

jquery的基础知识初学总结

本文是转帖吆。。。。

1，$(document).ready
资料上说这个是在文档加载完毕的时候发生，document这里的意思是获取整个文档对象，使用方法如下
$(document).ready(function(){
alert('test');
});

2，鼠标点击事件，给某个元素加类似js里的onclick动作，代码如下

jquery code:
$(document).ready(function(){
$("div").click(function(){
alert('test');
})
});

html code
<div id='test1'>test1</div>
<div id='test2'>test2</div>

$("div")的意思是所有html的div标签都适用此规则

3，jquery对id的作用
$("#test1")访问的是id = 'test1'
例如
jquery code:
$("#test1").click(function(){
alert('test');
});

html code:
<div id = 'test1'>test1</div>

4，jquery对css的作用

addClass和removeClass部分

jquery code:
$(document).ready(function(){
$("div").addClass("css_test1");

$("div").click(function(){
$(this).removeClass("css_test1");
});

});

css code:
.css_test1{border:2px dashed #ff0000;margin-bottom:5px;}

html code:
<div id="test1">test1</div>
<div id="test2">test2</div>

$(this)，这里面的this是传进来的当前对象，不是所有对象

css部分

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

jquery code:
$("#test1").click(function(){
$(this).css("border","1px solid #FF0000")
});

html code:
<div id="test1">test1</div>

css(name)，资料上的解释：获取name的属性值

jquery code:
$("#test1").click(function(){
$(this).css("border","1px solid #FF0000");
alert($(this).css("border"));
});

html code:同上

css(properties)，直接改变这个id的css属性，类似style = properties的意思
$("#test1").click(function(){
$(this).css({color:"FF0000"});
});

height,width部分
$("#test1").height("200px");
$("#test1").width("200px");
里面如果是空值可用于输出，例
alert($("#test1").height())

5，jquery的渐变效果实现
fadeOut(speed,callback)，渐变浅，完成后回调callback，callback可选
fadeIn(speed,callback)，渐变深，完成后回调callback，callback可选，此方法可搭配和fadeOut用
fadeTo(speed,opacity,callback)，调整到opacity，opacity为0-1可选

speed(string|number),string可选为slow,normal,fast,number为毫秒数，例如1000

下面是例子
jquery code:
$(document).ready(function(){

$("#test1").click(function(){
$("#test2").fadeOut("slow",function(){alert("下面这个层慢慢消失了！")});
})

$("#test3").click(function(){
$("#test2").fadeIn("slow",function(){alert("下面这个层慢慢出来了了！")});
})

$("#test4").click(function(){
$("#test2").fadeTo("slow",1,function(){alert("是不是下面这个层慢慢变了！")});
})
});

html code:
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>

6，jquery的滑动效果实现
slideDown(speed,callback)，动态显示（资料），实际上是把通过id.slideDown这样的用法把id向下滑动打开
slideup(speed,callback)，动态隐藏（资料），这个和slideDown相对应，实际是把id.slideup的ip向上华东隐藏
slideToggle(speed,callback)，这个比较好用，同时具备了上面两个的功能

代码如下：
jquery code:
$(document).ready(function(){

$("#test1").click(function(){
$("#test2").slideDown("slow");
})

$("#test3").click(function(){
$("#test2").slideUp("slow");
})

$("#test4").click(function(){
$("#test2").slideToggle("slow");
})

});

html code:
<div id="test1">test1</div>
<div id="test2">test2</div>
<div id="test3">test3</div>
<div id="test4">test4</div>

7，jquery的选择器

$("[@title]")，所有含有title的元素
$("[@title=ttt]")，所有含有title=ttt的元素
$("[@title^=ttt]")，所有title开头为ttt的元素
$("[@title$=tt2]")，所有title结尾为tt2的元素
$("[@title*=tt]")，所有title包含tt的元素
$("[@title*=tt][@id=test1]")，根据多个属性判断

8，load方法及小技巧
$("#test1").click(function(){
$("#test2").load("./test1.html");
})
$("#test1").click(function(){
$("#test2").load("./test1.html #test3");
})
把test1.html或test1.html 的id=test3的部分载入到原网页的test2里面
load原型:load(url, params, callback)