JavaScript组件之JQuery(A~Z)教程(基于Asp.net运行环境)三

最新推荐文章于 2019-07-10 18:23:49 发布

thinker28754

最新推荐文章于 2019-07-10 18:23:49 发布

阅读量613

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery javascript asp.net function button server

本文链接：https://blog.youkuaiyun.com/thinker28754/article/details/3521557

jquery 专栏收录该内容

20 篇文章

订阅专栏

本文提供了一系列jQuery实用技巧示例，包括元素样式操作、事件绑定与触发、集合处理等，帮助开发者更高效地进行网页交互开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

9). Filter和no方法使用示例

1 <head runat="server">
2     <title>Filter and No方法使用</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4     <script language=jscript>
5         function ChangeBorder()
6         {
7             $("ul").not("[li]").css("border", "1px solid blue");
8         }
9     </script>
10 </head>
11 <body>
12     <form id="form1" runat="server">
13     <div>
14          <ul>
15                 <li>Hi King!</li>
16                 <li>Hi Rose!</li>
17         </ul>
18         <br />
19         <ul></ul>
20         <input type=button onclick = "ChangeBorder();" value="改变边框" />
21     </div>
22     </form>
23 </body>

10). 一个很有用的方法: Css方法使用示例

1 <head runat="server">
2     <title>使用Css方法, 比较有用的一个方法</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4         <script language=jscript>
5             function SetBorderStyle()
6             {
7                 $("ul").css("border", "1px solid blue");
8                 $("ul li").css("border", "1px solid red");
9             }
10         </script>
11 </head>
12 <body>
13     <form id="form1" runat="server">
14     <div>
15         <ul>
16             <li></li>
17             <li></li>
18             <li></li>
19         </ul>
20         <input type=button value="设置边框" onclick="SetBorderStyle();" />
21     </div>
22     </form>
23 </body>

11). 滑动显示/隐藏元素

1 <head runat="server">
2     <title>滑动显示隐藏元素</title>
3        <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4         <script language=jscript>
5                         $(document).ready(function() {
6                 $('#faq').find('.pic').hide().end().find('.display').click(function() {
7                      var answer = $(this).next();
8                      if (answer.is(':visible')) {
9                          answer.slideUp();
10                      } else {
11                          answer.slideDown();
12                      }
13                  });
14             });
15         </script>
16 </head>
17 <body>
18     <form id="form1" runat="server">
19     <div id="faq">
20         <input class="display" type=button value="Slide显示/隐藏" />
21         <input class="pic" type=image src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px" />
22     </div>
23     </form>
24 </body>

12). 操作父元素

1 <head runat="server">
2     <title>操作父元素</title>
3     <link rel="stylesheet" type="text/css" href="Resources/CSS/StyleSheet1.css" title="blue" />
4     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
5         <script language=jscript>
6             $(document).ready(function() {
7                 $("a").hover(function() {
8                     $(this).parents("p").addClass("BackColor");
9                 }, function() {
10                     $(this).parents("p").removeClass("BackColor");
11                 });
12             });
13         </script>
14 </head>
15 <body>
16     <form id="form1" runat="server">
17     <div>
18         <p>
19             Hi! Rose.<br />
20             <a href="#">你好</a>
21         </p>
22     </div>
23     </form>
24 </body>

13). Toggle方法使用示例

1 <head runat="server">
2     <title>Toggle方法使用</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4         <script language=jscript>
5                $(document).ready(function() {
6                 $("#btn").toggle(function() {
7                     $(".pic").show('slow');
8                 }, function() {
9                     $(".pic").hide('fast');
10                 });
11             });
12     </script>
13 </head>
14 <body>
15     <form id="form1" runat="server">
16     <div>
17         <input id="btn" type=button value="toggle事件测试" />
18         <input class="pic" type=image src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px; display:none;" />
19     </div>
20     </form>
21 </body>

14). Animate方法使用示例

1 <head runat="server">
2     <title>Animate方法示例</title>
3     <script src=Resources/js/jquery-1.2.1.js type="text/javascript"></script>
4         <script language=jscript>
5                       $(document).ready(function() {
6                 $("#btn").toggle(function() {
7                     $(".pic").animate({
8                         height: 'show',
9                         opacity: 'show'
10                     }, 'slow');
11                 }, function() {
12                     $(".pic").animate({
13                         height: 'hide',
14                         opacity: 'hide'
15                     }, 'slow');
16                 });
17             });
18     </script>
19 </head>
20 <body>
21     <form id="form1" runat="server">
22     <div>
23         <input id="btn" type=button value="Animate事件测试" />
24         <input class="pic" type=image src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/chengking/160914/t_GIRL.GIF" style="width: 227px; height: 174px; display:none;" />
25     </div>
26     </form>
27 </body>