JQuery学习笔记

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

lq3769

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

阅读量97

点赞数

分类专栏： JQuery 文章标签： jQuery JavaScript 浏览器 Safari Opera ViewUI

本文链接：https://blog.csdn.net/lq3769/article/details/83635922

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JQuery学习笔记

v 主要功能：

l 访问页面框架的局部

l 修改页面的表现

l 更改页面的内容

l 响应事件

l 为页面添加动画

l 与服务器异步交互

l 简化常用的JavaScript操作

v 隔行变色表格

JavaScript:

<script type="text/javascript">

window.οnlοad=function ()

{

var tab=document.getElementById("tab");

for(var i=0;i<tab.rows.length;i++)

{

if(i%2==0)

{

tab.rows[i].style.backgroundColor="green";

}

}

}

</script>

JQuery:

<script language="javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript">

$(function()

{

$("table tr:nth-child(odd)").style.backgroundColor="green";

});

</script>

v 显示隐藏

hide:隐藏

Show:显示

JQuery代码：

<script language="javascript" src="jquery-1.4.2.min.js"></script>



<script>

$(function ()

{

$("input:first").click(function()

{

$("p").hide();

});

$("input:last").click(function()

{

$("p").show();

});

});

</script>

  </head>

  

  <body>

    <input type="button" value="显示"/>

    <P>显示内容，，，，，</P>

    <input type="button" value="隐藏"/>

    <div>隐藏内容</div>

  </body>

</html>

带参数的显示隐藏：

语法：hide(speed, [callback])

show(speed, [callback])

Speed代表动画时长的毫秒数值；可选的

[callback]代表在动画完成时执行的函数，每个元素执行一次。可选的

$(function ()

{

$("input:first").click(function()

{

$("p").hide(3000);

});

$("input:last").click(function()

{

$("p").show(2000);

});

});

v 淡入淡出

语法：

fadeIn(speed, [callback])

fadeout(speed, [callback])

$(function ()

{

$("input:eq(0)").click(function()

{

$("img").fadeIn(3000);

});

$("input:eq(1)").click(function()

{

$("img").fadeout(2000);

});

});

v 滑动（幻灯片效果）

语法：slideUp(speed, [callback]) ：通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。 slideDown(speed, [callback]) ：通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。

$(function ()

{

$("input:eq(0)").click(function()

{

$("div").add("img").slideUp(3000);

});

$("input:eq(1)").click(function()

{

$("div").add("img").slideDown(1000);

});

});

v 浏览器的检测

$.browser对象

属性

说明

msie

如果是IE浏览器返回true,否则返回false

mozilla

如果是mozilla相关浏览器返回true,否则返回false，例如firefox,cimino

safari

如果是safari浏览器返回true,否则返回false

opera

如果是opera浏览器返回true,否则返回false

version

浏览器的版本号

语法：$.browser对象.属性

v 处理JavaScript对象

$.each()遍历：通用遍例方法，可用于遍例对象和数组。

语法：$.each(object,fn);第一个为对象的成员或数组的索引，第二个为对应变量或内容。如果需要退出 each 循环可使回调函数返回 false，其它返回值将被忽略。

<script language="javascript" src="jquery-1.4.2.min.js"></script>

<script>

var arrays=["喜","怒","哀","乐","悲"];

var list={喜:1,怒:2,哀:3,乐:4,悲:5};

$.each(arrays,function(iNum,value)

{

document.write("ID："+iNum+"值 ："+value+"<br/>");

});

$.each(list,function(property,value)