jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

xiaofen3115

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量1.2k

点赞数

文章标签： jquery function class div callback input

本文链接：https://blog.csdn.net/xiaofen3115/article/details/2728571

版权

jQuery有一个用来作为DOM快速载入javascript的得心应手的小函数，那就是ready… 他在页面加载完成之前执行。（也许window.onload()能实现同样的功能，但当window.onload函数执行的时候，要说明所有东西已经载入，包括图像和横幅等等。要知道较大的图片下载速度会比较慢，因此用户必须等待大图片下载完毕才能看到window.onload()执行的代码效果，这样就花费了很长的等待时间，这不是我们想要的。）。

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

$(document).ready(function(){

// 你的代码

});

$(document)意思是说，获取整个网页文档对象（类似的于window.document），$(document).ready意思就是说，获取文档对象就绪的时候。

上面这段代码的意思是检查文档对象直到它能够允许被操作（译者注：这样做比window.onload()函数要快的多，因为只要文档对象载入完成就能够执行代码了，而不需要等待页面中的图片下载是否已经完成）---这是我们想要的。

1，demo1:

鼠标点击时的触发

首先，我们尝试鼠标点击超链接时触发某些行为。在ready函数里加入以下代码：

程序代码

$("p").click(function(){

alert("hello world");

});

2,demo2:

增加 CSS Class

另外一个事情就是，一个共同的任务：增加或移除元素的css class，例如:

程序代码

$("a").addClass("test");

$("a").removeClass("test");

("#cssrain").addClass("css_a");

//$("p").removeClass("test");

});

</script>

<style>

.css_a{

color:red;

}

</style>

</head>

<body>

<div id="cssrain">$(document)是获取整个网页文档对象,$("p")是获取所有的段落标签</div>

</body>

</html>

3　demo2-2:

修改样式:

$(document).ready(function(){$("#head").click(function(){$(".content").addClass("c_style");});})

1,首先把JQ导入.

2,然后开始写函数了。$(document).ready(function(){});

3,获取标签能直接 $("标签")。给标签注册onclick事件直接可以 click.

4,核心代码:

$("#head").click(function(){$(".content").addClass("c_style");});

5,功能:通过单击id为control的元素改变id为box元素的样式

知识点:addClass()添加样式

本篇文章来源于 cssrain.cn 原文链接：http://www.cssrain.cn/article.asp?id=214

4. demo3-show( )和html()的用法:

$(document).ready(function(){

$("a").addClass("test").show().html("cssrain");

//对比：$("a").addClass("test").html("cssrain");

});

5. demo4-特效(hide)的用法:

$(document).ready(function(){

$("a").click(function(){

$(this).hide("slow");

return false;

});

Effects Module(效果模块)

现在，只要你点击超链接，超链接就会慢慢的消失。

“return false"表示保留默认行为，因此页面不会跳转。

</a>

6. demo5-收缩展开功能:

slideToggle()的用法:

$(document).ready(function(){

$("#head").click(function(){

$("#content").slideToggle("slow",function(){ alert("Hello,cssrain.."); } );

});

<p id="head">单击这里测试(一个收缩展开功能)</p>

1,首先把JQ导入.

2,然后开始写函数了。$(document).ready(function(){});

3,前面说过了，获取标签能直接 $("标签")。给标签注册 onclick事件直接可以 click.

4,核心代码:

$("head").click(function(){$("content").slideToggle("slow");});

5,slideToggle(speed, callback)

通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

参数

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

callback (Function): (可选) 在动画完成时执行的函数

示例

jQuery 代码:

$("p").slideToggle("slow");

--------------------------------------------------------------------------------

jQuery 代码:

$("p").slideToggle("slow",function(){ alert("Animation Done."); });

</div>

7. demo6-appendTo的用法:

append和appendTo的区别：

$(document).ready(function(){

$("#head2").click(function(){

$("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>").appendTo("#ccc");

});

$("#head1").click(function(){

$("#rain").append("<input type='text' name='ddd' id='ddd' value='hello ,cssrain..' ><br>");

});

<div name="ccc" id="ccc" >看这里的变化</div><br>

<div name="rain" id="rain" >看这里的变化</div><br>

<!--这里我们必须知道一点：

就是 append和appendTo的区别：

append 单纯的内容

appendTo要把内容传给某个元素

8. demo7:table滑过变色,隔行变色.

$(document).ready(function(){ //这个就是传说的ready

$(".stripe tr").mouseover(function(){

//如果鼠标移到class为stripe的表格的tr上时，执行函数

$(this).addClass("over");}).mouseout(function(){

//给这行添加class值为over，并且当鼠标一出该行时执行函数

$(this).removeClass("over");}) //移除该行的class

$(".stripe tr:even").addClass("alt");

//给class为stripe的表格的偶数行添加class值为alt

});

在效果上,我又加了点击某行变色:

$(document).ready(function(){ //这个就是传说的ready

$(".stripe tr").mouseover(function(){

//如果鼠标移到class为stripe的表格的tr上时，执行函数

$(this).addClass("over");}).mouseout(function(){

//给这行添加class值为over，并且当鼠标一出该行时执行函数

$(this).removeClass("over");}).click(function(){ //移除该行的class

$(this).toggleClass("click").removeClass("alt")})//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt").

$(".stripe tr:even").addClass("alt");

//给class为stripe的表格的偶数行添加class值为alt

});

说到这里，不得不说一下 toggle与toggleClass区别：

$(document).ready(function(){ //这个就是传说的ready

$(".stripe tr").mouseover(function(){

//如果鼠标移到class为stripe的表格的tr上时，执行函数

$(this).addClass("over");}).mouseout(function(){

//给这行添加class值为over，并且当鼠标一出该行时执行函数

$(this).removeClass("over");}).toggle(function(){ $(this).addClass("click"); },function(){ $(this).removeClass("click");}).unbind("click")

$(".stripe tr:even").addClass("alt");

//给class为stripe的表格的偶数行添加class值为alt

});

可以发现：

toggleClass：可以发现超连接还是可以连接的，没有被 toggle和click占用

toggle：可以发现超连接已经不可以用了，所以说toggle不适合这种情况。不过可以把click解绑(unbind("click"))，代码量好象比click结合toggleClass多，所以我选择的是toggleClass

9. jQuery的链式操作:

这里有一个jQuery的技巧不得不提一下：jQuery的链式操作，什么是链式操作呢？我们来看看，本来应该写成这样子的：

$(".stripe tr").mouseover(function(){

$(this).addClass("over");})

$(".stripe tr").mouseout(function(){

$(this).removeClass("over"); })

但是我们写成了：

$(".stripe tr").mouseover(function(){

$(this).addClass("over");}).mouseout(function(){

$(this).removeClass("over");})

因为鼠标移入移除都是发生在同一个对象上的，所以我们可以将发生在同一个对象上的动作连起来写，这样子如果有很多对象并且在他们身上发生了很多动作那么就会节省很多代码。

10. demo8:toggle( )的用法:

$(document).ready(function(){

$("p").toggle()

});

<p style="display: none">这里本来是隐藏的</p>

<!--切换元素的可见状态。

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

-->

===========================

$(document).ready(function(){

$("input").click(function(){

$("p").toggle();

})

});

<p>这里本来是显示的。</p>

<p style="display: none">这里本来是隐藏的</p>

===========================

$(document).ready(function(){

$("a").toggle(function(){

$(".stuff").hide('slow');

},function(){

$(".stuff").show('fast');

});

testtesttesttesttesttesttesttest

toggle( Function even, Function odd )每次点击时切换要调用的函数每次点击时切换要调用的函数</div>

11. demo9-1-hover()的用法:

//$(document).ready(function() {

//$("#orderedlist > li").addClass("blue");

// $("#orderedlist li:last").addClass("blue"); 最后一个li

//});

$(document).ready(function() {

$("#orderedlist li").hover(function() {

// $("#orderedlist li:last").hover(function() {

$(this).addClass("blue");

}, function() {

$(this).removeClass("blue");

});

=====================================

$(document).ready(function() {

$("#orderedlist tbody tr").hover(function() {

// $("#orderedlist li:last").hover(function() {

$(this).addClass("blue");

}, function() {

$(this).removeClass("blue");

});

12. demo11-each--find的使用:

$(document).ready(function() {

// $("ul").find("li").each(function(i) {

$("#orderedlist").find("li").each(function(i) {

// 和$("#orderedlist li")一样效果

$(this).html( $(this).html() + " ---cssrain--- " + i );

});

13. demo12: parents()的用法:

$(document).ready(function() {

$("a").hover(function() {

$(this).parents("p").addClass("highlight");

}, function() {

$(this).parents("p").removeClass("highlight");

});

<!--hover(over, out)

一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。

当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

over (Function): 鼠标移到元素上要触发的函数

out (Function): 鼠标移出元素要触发的函数

示例

jQuery 代码:

$("p").hover(function(){ $(this).addClass("over"); },function(){ $(this).addClass("out"); });

parents( String expr )

取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。

-->

=======================================

$(document).ready(function() {

$("#btn1").click(function(){

alert($(this).parent().next().html());

//this.parent()是input前面的td

this.parent().parent()获取的是tr

//this.parent().parent().parent()获取的是table

this.parent().next()获取的是td相临的td

});

<table>

<tr>

</tr>

</table>

14. demo13-load()的简单用法:

$(function() {

// $("#feeds").load("FAQ1.html")

$("#feeds").load("demo1-鼠标点击时的触发.html",function() { alert("load is done");}

);

});

如:

$(document).ready(function(){

}); 的缩写法：

function() {

}

);

15. demo14-next的用法:

$(document).ready(function() {

$("span").click(function (){alert( $("p").next(".selected").html() ); } )

// $("p").next().html() 也可以

});

<p>Hello</p><p class="selected">Hello cssrain.</p><div><span>点我测试</span></div>

<!--取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素。

可以用一个可选的表达式进行筛选。

-->

16. demo15:Animate的用法：

$(document).ready(function(){

$("a").toggle(function(){

$(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');

},function(){

$(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');

});

text

</a>

animate( Hash params, String|NumberJavascript 字符串或数字值 speed, String easing , Function callback(可选) 在动画完成时执行的函数 )

用于创建自定义动画的函数。</div>

用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象

。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

toggle是轮换的意思

相当于hide or show

也就是说如果p是隐藏的就让它显示如果是显示的就让它隐藏

当然这个显示与隐藏是相对height的属性的

是通过调整元素的height属性来显示和隐藏元素

17demo16-表格排序:

$(document).ready(function(){

$("#large").tableSorter();

})

只做了一个简单的例子：

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

18.　demo17:加载一个远程页面：

<style>

.gone, .email {

display: none;

}

</style>

$(document).ready(function(){

$('.instructions a').click(function(){

$('p.instructions').html('测试demo.获取mailtoInfo.html里面的内容。');

$.post('mailtoInfo.html',{pass: "secret"},function(txt){

$('div.email').html(txt);

$('div.email').slideDown("slow");

});

return false;

});

</script><p class="instructions"><a href="">Click here</a>.</p>

<!--使用HTTP POST请求加载一个远程页面。

undefined$.post( 字符串加载页面的url, Hash属性和值以 "property/value" 对形式表示的 Javascript 对象 params将要传送给服务器的Key/Value对, FunctionJavascript 函数 callback当数据加载成功时被执行的方法 )