且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事
您所在的位置：首页 > jquery教程1

jquery教程1

更新时间：2022-10-03 14:23:39

 jQuery教程（一）

  1. jQuery

  2. a)        是一个javascript函数库

  3. jQuery库包含特性

  4. a)        HTML元素读取

  5. b)        HTML元素操作

  6. c)        CSS操作

  7. d)        HTML事件函数

  8. e)        JavaScript特效和动画

  9. f)         HTML DOM遍历和修改

  10. g)        AJAX

  11. h)        Utilities

  12. 使用jQuery准备工作

  13. a)        第一种方式：下载jQuery

  14. b)        第二种方式：可以从 Google或 Microsoft 加载 CDN jQuery 核心文件。

i.             使用Google的cdn jQuery文件

  1. <scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

ii.             使用Microsoft的cdn jQuery文件

  1. <scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

  1. 使用jQuery hide() 函数，隐藏当前的 HTML 元素。

  2. a)        实例：

<head>

         <scripttype=”text/javascript” src=”jquery.js”>

         </script>

         <scripttype=”text/javascript”>

                   $(document).ready(function(){

                            $(“button”).click(function(){

                                     $(this).hide();

});

});

         </script>

</head>

<body>

         <buttontype=”button”>click me</button>

</body>

  1. 使用jQuery hide()函数，隐藏id=”test”的元素

  2. a)        <script type=”text/javascript”>

$(document).ready(function(){

         $(“button”).click(function(){

                   $(“#test”).hide();

})

});

</script>

  1. 使用jQuery hide()函数，隐藏所有<p>元素

  2. a)        实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“button”).click(function(){

                            $(“p”).hide();

});

});

</script>

  1. 使用jQuery hide()函数，隐藏所有class=”test”的元素

  2. a)        实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“button”).click(function(){

                            $(“.test”).hide();

});

});

</script>

  1. jQuery语法

  2. a)        基础语法：$(selector).action()

  3. b)        说明：

i.             美元符号定义jQuery

ii.             选择符（selector）“查询”和“查找”html元素

iii.             jQuery的action()执行对元素的操作

  1. 文档就绪函数

  2. a)        语法：

$(document).ready(function(){

        

});

  1. jQuery选择器

  2. a)        分类：

i.             元素选择器

  1. 实例：$(“p”),$(“p.first”),$(“p#demo”)

ii.             属性选择器

  1. 实例：$(“[href]”),$(“[href=’#’]”),$(“[href!=’#’]”),$(“[href$=’.jpg’]”)

iii.             Css选择器

  1. 实例：$(“p”).css(“background-color”,”green”);

  2. b)        更多选择器实例

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有的  <p> 元素

$(".intro")

所有的元素

$("#intro")

id="intro" 的第一个元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的属性值的  href 属性

$("div#intro .head")

id="intro" 的 <div> 元素中的所有的元素

 

  1. jQuery事件函数

  2. a)        jQuery事件处理方法是jQuery中的核心函数，事件处理程序指的是当html中发生某些事件时所调用的方法。

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

  1. jQuery名称冲突

  2. a)        jQuery使用$符号作为jQuery的简介方式，但其他javaScript库中也会使用$符号，就会出现名称冲突

  3. b)        解决方式：使用noConflict()的方法

  4. c)        实例：var jq =jQuery.noConflict();

  5. 使用jQuery的结论

  6. a)        把所有的jQuery代码置于事件处理函数中

  7. b)        把所有的事件处理函数置于文档就绪事件处理器中

  8. c)        把jQuery代码置于单独的.js文件中

  9. d)        如果存在名称冲突，则重命名jQuery库

  10. jQuery效果

  11. a)        层的大小改变效果

  12. b)        实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“#start”).click(function(){

                            $(“#box”).animate({height:300},”slow”);

                            $(“#box”).animate({width:300},”slow”);

                            $(“#box”).animate({height:100},”slow”);

                            $(“#box”).animate({width:100},”slow”);

});

});

</script>

  1. 淡出效果

  2. 实例：

<script type=”text/javascript>

         $(document).ready(function(){

                   $(“button”).click(function(){

                            $(“div”).fadeTo(“slow”,0.25);

});

});

</script>

  1. slide panel(滑动面版效果)

  2. 实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“.flip”).click(function(){

                            $(“.panel”).slideToggle(“slow”);

});

});

</script>

  1. 隐藏部分文本

  2. 实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                  

});

</script>

  1. jQuery隐藏和显示

  2. a)        隐藏：hide()

  3. b)        显示：show()

  4. c)        都可以设置两个参数：speed和callback

  5. d)        语法：

i.             $(selector).hide(speed,callback)

ii.             $(selector).show(speed,callback)

  1. 解释：speed参数规定显示或隐藏的速度，可以设置的值：“slow”,“fast”,“normal”或毫秒。Callback参数是在hide或show函数完成之后被执行的函数名称。

  2. 16.  jQuery切换

  3. 隐藏显示的内容和显示隐藏的内容语法：

i.             $(selector).toggle(speed,callback)

  1. 实例：

i.             $(“button”).click(function(){

$(“p”).toggle();

ii.             });

 jQuery教程（一）

  1. jQuery

  2. a)        是一个javascript函数库

  3. jQuery库包含特性

  4. a)        HTML元素读取

  5. b)        HTML元素操作

  6. c)        CSS操作

  7. d)        HTML事件函数

  8. e)        JavaScript特效和动画

  9. f)         HTML DOM遍历和修改

  10. g)        AJAX

  11. h)        Utilities

  12. 使用jQuery准备工作

  13. a)        第一种方式：下载jQuery

  14. b)        第二种方式：可以从 Google或 Microsoft 加载 CDN jQuery 核心文件。

i.             使用Google的cdn jQuery文件

  1. <scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

ii.             使用Microsoft的cdn jQuery文件

  1. <scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

  1. 使用jQuery hide() 函数，隐藏当前的 HTML 元素。

  2. a)        实例：

<head>

         <scripttype=”text/javascript” src=”jquery.js”>

         </script>

         <scripttype=”text/javascript”>

                   $(document).ready(function(){

                            $(“button”).click(function(){

                                     $(this).hide();

});

});

         </script>

</head>

<body>

         <buttontype=”button”>click me</button>

</body>

  1. 使用jQuery hide()函数，隐藏id=”test”的元素

  2. a)        <script type=”text/javascript”>

$(document).ready(function(){

         $(“button”).click(function(){

                   $(“#test”).hide();

})

});

</script>

  1. 使用jQuery hide()函数，隐藏所有<p>元素

  2. a)        实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“button”).click(function(){

                            $(“p”).hide();

});

});

</script>

  1. 使用jQuery hide()函数，隐藏所有class=”test”的元素

  2. a)        实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“button”).click(function(){

                            $(“.test”).hide();

});

});

</script>

  1. jQuery语法

  2. a)        基础语法：$(selector).action()

  3. b)        说明：

i.             美元符号定义jQuery

ii.             选择符（selector）“查询”和“查找”html元素

iii.             jQuery的action()执行对元素的操作

  1. 文档就绪函数

  2. a)        语法：

$(document).ready(function(){

        

});

  1. jQuery选择器

  2. a)        分类：

i.             元素选择器

  1. 实例：$(“p”),$(“p.first”),$(“p#demo”)

ii.             属性选择器

  1. 实例：$(“[href]”),$(“[href=’#’]”),$(“[href!=’#’]”),$(“[href$=’.jpg’]”)

iii.             Css选择器

  1. 实例：$(“p”).css(“background-color”,”green”);

  2. b)        更多选择器实例

语法

描述

$(this)

当前 HTML 元素

$("p")

所有 <p> 元素

$("p.intro")

所有的  <p> 元素

$(".intro")

所有的元素

$("#intro")

id="intro" 的第一个元素

$("ul li:first")

每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']")

所有带有以 ".jpg" 结尾的属性值的  href 属性

$("div#intro .head")

id="intro" 的 <div> 元素中的所有的元素

 

  1. jQuery事件函数

  2. a)        jQuery事件处理方法是jQuery中的核心函数，事件处理程序指的是当html中发生某些事件时所调用的方法。

Event 函数

绑定函数至

$(document).ready(function)

将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)

触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)

触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)

触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)

触发或将函数绑定到被选元素的鼠标悬停事件

  1. jQuery名称冲突

  2. a)        jQuery使用$符号作为jQuery的简介方式，但其他javaScript库中也会使用$符号，就会出现名称冲突

  3. b)        解决方式：使用noConflict()的方法

  4. c)        实例：var jq =jQuery.noConflict();

  5. 使用jQuery的结论

  6. a)        把所有的jQuery代码置于事件处理函数中

  7. b)        把所有的事件处理函数置于文档就绪事件处理器中

  8. c)        把jQuery代码置于单独的.js文件中

  9. d)        如果存在名称冲突，则重命名jQuery库

  10. jQuery效果

  11. a)        层的大小改变效果

  12. b)        实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“#start”).click(function(){

                            $(“#box”).animate({height:300},”slow”);

                            $(“#box”).animate({width:300},”slow”);

                            $(“#box”).animate({height:100},”slow”);

                            $(“#box”).animate({width:100},”slow”);

});

});

</script>

  1. 淡出效果

  2. 实例：

<script type=”text/javascript>

         $(document).ready(function(){

                   $(“button”).click(function(){

                            $(“div”).fadeTo(“slow”,0.25);

});

});

</script>

  1. slide panel(滑动面版效果)

  2. 实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                   $(“.flip”).click(function(){

                            $(“.panel”).slideToggle(“slow”);

});

});

</script>

  1. 隐藏部分文本

  2. 实例：

<script type=”text/javascript”>

         $(document).ready(function(){

                  

});

</script>

  1. jQuery隐藏和显示

  2. a)        隐藏：hide()

  3. b)        显示：show()

  4. c)        都可以设置两个参数：speed和callback

  5. d)        语法：

i.             $(selector).hide(speed,callback)

ii.             $(selector).show(speed,callback)

  1. 解释：speed参数规定显示或隐藏的速度，可以设置的值：“slow”,“fast”,“normal”或毫秒。Callback参数是在hide或show函数完成之后被执行的函数名称。

  2. 16.  jQuery切换

  3. 隐藏显示的内容和显示隐藏的内容语法：

i.             $(selector).toggle(speed,callback)

  1. 实例：

i.             $(“button”).click(function(){

$(“p”).toggle();

ii.             });

本文转自  素颜猪  51CTO博客，原文链接:http://blog.51cto.com/suyanzhu/1561414

上一篇 : ：项目经理修炼手册，泄露章节 ，项目经理需要注意的习惯下一篇 : Error:An internal error occurred,please contact your system administrator

相关阅读

推荐文章

网站首页网站地图Copyright © 2021-2022 且购网

免责声明：本站文章部分来源于互联网,如有侵权请联系站长,我们将在72小时内删除。