python16_day14【jQuery】

一、作用域

1.作用域例一

 1 <script>
 2
 3     var str = "global"; //AO1  AO1.str
 4     function t(age){
 5         console.log(str); // undefined
 6         var str = "locale";
 7 //        console.log(str); // locale
 8
 9     }
10     t();
11 // 预编译，形成AO对象：
12     /**
13      * 1.f分析函数的参数：
14      * 如果没有参数的话，AO对象上没有任何属性
15      *  Ao.age = undefined
16      * 2.分析函数的变量声明：
17      * AO.str = undefined
18      *
19      * 3.分析函数的函数声明表达式：
20      * 无
21      * AO.sum = functioon(){}
22      * **/
23 /**
24  * AO.str = "lcoale"
25  * **/
26 </script>

2.作用域例二

 1 <script>
 2     function t(age){
 3         console.log(age);   // 词法:5     执行结果:funcation age()
 4         var age = 99;
 5         console.log(age);   // 词法:5     执行结果:99
 6         function age() {    // 词法:fun   执行结果:99不能执行
 7         }
 8         //age();
 9         console.log(age)  //   词法:fun   执行结果:99
10     }
11     t(5)
12
13 /*
14 ********************变量的作用域是在声明时决定的而不是调用执行时决定******************
15 * 一.词法分析
16 *   1.有参数时
17 *       age = undenfined
18 *       age = 5
19 *   2.发现age已经在AO上面,什么也不做.不会复盖age=5
20 *   3.function age会复盖上面的age=5;(注意在词法分析的时候最后age=funcation age())
21 *
22 * 二.执行
23 *   1.第一个console.log打印function age(){},因为词法分析后,最后就是funcation age(){}
24 *   2.第二个console.log打印99,因为var age=99把function age(){}复盖.
25 *   3.第三个console.log打印99, function没有执行,如果执行的话,会报错.
26 *   4.至于function age()为什么没有复盖 age=99.那么先读(变量的作用域是在声明时决定的而不是调用执行时决定).
27 *       function age()在词法分析的时候生效了,在执行的时候早被第一部让参数复盖;
28 * */
29 </script>

二、jQuery事例

1.tab切换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7  <style>
 8         .item{
 9             height:38px;
10             line-height: 38px;
11             background-color: #204982;
12             width:300px;
13         }
14         .menu{
15             float: left;
16             border-right: 1px solid green;
17             padding:0 10px;
18             color:white;
19             cursor: pointer;
20         }
21
22         .hide{
23             display: none;
24         }
25
26         .active{
27             background-color: #2459a2;
28         }
29     </style>
30 <body>
31  <div style="width: 700px;margin: 0 auto;">
32         <div class="item">
33             <div class="menu active" a="1">菜单一</div>
34             <div class="menu" a="2">菜单二</div>
35             <div class="menu" a="3">菜单三</div>
36         </div>
37
38         <div class="content">
39             <div class="info" b="1">内容一</div>
40             <div class="info hide" b="2">内容二</div>
41             <div class="info hide" b="3">内容三</div>
42         </div>
43  </div>
44 </body>
45 <script src="jquery.js"></script>
46 <script>
47     $(".menu").click(function(){
48         $(this).addClass('active').siblings().removeClass('active');
49         var v = $(this).attr('a'); // 1, 2, 3
50         $(this).parent().siblings().children("[b='"+ v +"']").removeClass("hide").siblings().addClass("hide");
51     });
52 </script>
53 </html>

2.动画效果

 1 <body>
 2 <img src="ju.jpg" alt="" style="display: none">
 3 </body>
 4 <script src="jquery.js"></script>
 5 <script>
 6 //    $("img").show(1000);
 7 //    $("img").hide(1000);
 8 //    $("img").toggle("slow");
 9 //    $("img").fadeIn(1000);
10 //    $("img").fadeOut(1000);
11     function test(){
12         $("img").slideToggle(1000)
13     }
14     setInterval(test,3000);
15 </script>

3.左菜单选择

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <style>
 8     .info{
 9         width:400px;
10     }
11     .item{
12         /*height:34px;*/
13     }
14     .header{
15         /*line-height: 34px;*/
16         background-color: burlywood;
17         cursor: pointer;
18     }
19     .content{
20         display: none;
21     }
22 </style>
23 <body>
24     <div class="info">
25         <div class="item">
26             <div class="header">菜单一</div>
27             <div class="content">内容一</div>
28             <div class="content">内容一</div>
29             <div class="content1">内容一</div>
30         </div>
31         <div class="item">
32             <div class="header">菜单二</div>
33             <div class="content">内容二</div>
34             <div class="content">内容二</div>
35             <div class="content">内容二</div>
36         </div>
37         <div class="item">
38             <div class="header">菜单三</div>
39             <div class="content">内容三</div>
40             <div class="content">内容三</div>
41             <div class="content">内容三</div>
42         </div>
43     </div>
44 </body>
45 <script src="jquery.js"></script>
46 <script>
47     $(".header").click(function(){
48         $(this).nextAll().css("display","block");
49         $(this).parent('.item').siblings('.item').children('.content').css("display","none");
50     });
51 </script>
52 </html>

4.左右元素选择

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         select{
 8             width:150px;
 9             height:300px;
10         }
11     </style>
12 </head>
13 <body>
14 <select name="fruit" id="fruit" multiple></select>
15 <input type="button" value="<---" οnclick="toleft();">
16 <input type="button" value="<===" οnclick="totalleft();">
17 <input type="button" value="--->" οnclick="toright();">
18 <input type="button" value="===>" οnclick="totalright();">
19 <select name="fish" id="fish" multiple>
20     <option value="">大鱼</option>
21     <option value="">小鱼</option>
22     <option value="">虾米</option>
23     <option value="">甲鱼</option>
24     <option value="">咸鱼</option>
25     <option value="">苹果</option>
26     <option value="">香蕉</option>
27     <option value="">菠萝</option>
28     <option value="">西瓜</option>
29 </select>
30 </body>
31 <script src="jquery.js"></script>
32 <script>
33     function toleft(){
34 //        append()
35         $("#fish option:selected").appendTo("#fruit");
36     }
37
38     function totalleft(){
39         $("#fish option").appendTo("#fruit");
40     }
41
42     function toright(){
43         $("#fruit option:selected").appendTo("#fish");
44     }
45     function totalright(){
46          $("#fruit option").appendTo("#fish");
47     }
48 </script>
49 </html>

5.请输入关键字

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8  <!--placeholder="请输入关键字" 就可以代替这些,这个属于html5功能-->
 9 <input type="text" >
10 </body>
11 <script src="jquery.js"></script>
12 <script>
13     $("input[type='text']").focus(function(){
14         var v = $(this).val();
15         if(v == "请输入关键字"){
16             $(this).val("");
17         }
18     });
19     $("input[type='text']").blur(function(){
20         var v = $(this).val();
21         if(v == ""){
22             $(this).val("请输入关键字");
23         }
24     })
25 </script>
26 </html>

6.文档处理

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>艺术家们</li>
10     </ul>
11     <br>
12     <input type="button" οnclick="add();" value="向ul中添加一个li元素" />
13     <input type="button" οnclick="del();" value="删除元素的内容" />
14 </body>
15 <script src="jquery.js"></script>
16 <script>
17     function del(){
18 //        $("ul").empty();
19         $("ul").remove();
20     }
21     function add(){
22 //        var myli = $("<li>闫帅</li>");
23 //        $("ul").append(myli);
24 //        var myli = $("<li>苍老师</li>");
25 //        myli.appendTo($("ul"));
26
27 //        var myli = $("<li>alex</li>");
28 //        $("ul").prepend(myli);
29         var myspan = $("<span>感谢日本艺术家们 alex</span>");
30         $("ul").before(myspan);
31     }
32
33 </script>
34 </html>

7.样式处理--开关灯　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <style>
 8     .on{
 9         background-image: url('on.jpg');
10     }
11     .off{
12         background-image: url('off.jpg');
13     }
14     div{
15         width:108px;
16         height:144px;
17     }
18 </style>
19 <body>
20     <div id="myimg" class="on off" οnclick="bright();">
21
22     </div>
23 </body>
24 <script src="jquery.js"></script>
25 <script>
26     function bright(){
27
28 //       $("#myimg").removeClass("off");
29 //        $("#myimg").addClass("on");
30         /**
31          * 如果有off  去掉off  灯亮
32          * 如果没有off  加上off  灯灭
33          * **/
34         if($("#myimg").hasClass('off')){
35             $("#myimg").removeClass("off");
36         }else{
37             $("#myimg").addClass("off");
38         }
39
40     }
41 </script>
42 </html>

8.模态对话框

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title></title>
  6 </head>
  7 <style>
  8     .hide{
  9         display: none;
 10     }
 11     .show{
 12         display: block;
 13     }
 14     .shadow{
 15         position: fixed;
 16         top:0;
 17         right:0;
 18         left:0;
 19         bottom:0;
 20         opacity:0.6;
 21         background-color: #000;
 22         z-index: 10;
 23     }
 24     .modal{
 25         position: fixed;
 26         top:10%;
 27         left:20%;
 28         right:20%;
 29         bottom:30%;
 30         background-color: wheat;
 31         z-index: 11;
 32     }
 33
 34 </style>
 35 <body>
 36 <input type="button" οnclick="addEle();" value="添加"/>
 37 <table border="1" width="400px" id="info">
 38     <tr>
 39         <td target="ip">192.168.1.1</td>
 40         <td target="port">80</td>
 41         <td>
 42             <input type="button" value="编辑" class="edit"/>
 43         </td>
 44         <td>
 45             <input type="button" value="删除"/>
 46         </td>
 47     </tr>
 48     <tr>
 49         <td target="ip">192.168.1.2</td>
 50         <td target="port">81</td>
 51         <td>
 52             <input type="button" value="编辑" class="edit"/>
 53         </td>
 54         <td>
 55             <input type="button" value="删除"/>
 56         </td>
 57     </tr>
 58
 59     <tr>
 60         <td target="ip">192.168.1.3</td>
 61         <td target="port">82</td>
 62         <td>
 63             <input type="button" value="编辑" class="edit"/>
 64         </td>
 65         <td>
 66             <input type="button" value="删除"/>
 67         </td>
 68     </tr>
 69 </table>
 70 <div class="modal hide">
 71     主机IP：<input type="text" value="" name="ip"/><p>
 72     端口号：<input type="text" value="" name="port"/><p>
 73     <input type="button" value="确认">
 74     <input type="button" value="取消" οnclick="cancelModel()">
 75 </div>
 76 <div class="shadow hide"></div>
 77 </body>
 78 <script src="jquery.js"></script>
 79 <script>
 80     function addEle(){
 81         $(".hide").css("display","block");
 82     }
 83     function cancelModel(){
 84         $(".hide").css("display","none");
 85     }
 86
 87     $(".edit").click(function(){
 88         $(".hide").css("display","block");
 89         var tds = $(this).parent().siblings('td');
 90 //        console.log(tds);
 91         tds.each(function(){
 92             var k = $(this).attr('target');
 93             var v = $(this).text();
 94             console.log(k + '---' + v);
 95             var v1 = "input[name = '";
 96             var v2 = "']";
 97             var tmp = v1 + k + v2;
 98 //            console.log(tmp);
 99             $(tmp).val(v);
100         });
101
102
103
104         //获取ip和port值
105 //        var ip = $(tds[0]).text();
106 //        var port = $(tds[1]).text();
107 ////        console.log(ip + '----' + port);
108 //        // 设置ip和port到模态框内
109 //        $("input[name='ip']").val(ip);
110 //        $("input[name='port']").val(port);
111     })
112 </script>
113 </html>

9.表单提交

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <form action="http://www.baidu.com" id="info" method="get">
 9     用户名：<input type="text" desc="username"><br>
10     密码：<input type="password" desc="password"><br>
11     邮箱：<input type="text" desc="mail"><br>
12     地址：<input type="text" desc="addr"><br>
13     <input type="submit" value="提交" >
14 </form>
15 </body>
16 <script src="jquery.js"></script>
17 <script>
18     $(":submit").click(function(){
19         var flag = true;
20         $(".err").remove();
21         $("input[type='text'],input[type='password']").each(function(){
22             var v = $(this).val();
23             if(v.length == 0 ){
24                 flag = false;
25                 var desc = $(this).attr("desc");
26                 $(this).after($("<span class='err'>" + desc + "必填</span>"));
27                 return false;
28             }
29         });
30         return flag;
31     })
32 </script>
33 </html>

10.全选反选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <input type="button" value="全选" οnclick="SelectAll();">
 9 <input type="button" value="取消" οnclick="CancelAll();">
10 <input type="button" value="反选" οnclick="ReverseAll();">
11 <table border="1px" width="400px">
12     <tr>
13         <td>1</td>
14         <td>2</td>
15         <td>3</td>
16         <td><input type="checkbox" /></td>
17     </tr>
18     <tr>
19         <td>1</td>
20         <td>2</td>
21         <td>3</td>
22          <td><input type="checkbox" /></td>
23     </tr>
24     <tr>
25         <td>1</td>
26         <td>2</td>
27         <td>3</td>
28          <td><input type="checkbox" /></td>
29     </tr>
30 </table>
31 </body>
32 <script src="jquery.js"></script>
33 <script>
34     function SelectAll(){
35         $("input[type='checkbox']").prop("checked",true);
36     }
37     function CancelAll(){
38         $("input[type='checkbox']").prop("checked",false);
39     }
40     function ReverseAll(){
41         /**
42          * js的循环：
43          * for(var i=0;i<length;i++){
44          * }
45          *
46          * for(var i in dict_info){
47          * }
48          * **/
49         $("input[type='checkbox']").each(function () {
50 //            console.log(1);
51 //            console.log($(this));
52             var s = $(this).prop("checked");
53 //            console.log(s);
54             if(s){
55                 $(this).prop("checked",false);
56             }else{
57                 $(this).prop("checked",true);
58             }
59             /**
60              * s = 4 > 3 ? true : false
61              * **/
62             $(this).prop("checked") ? $(this).prop("checked",false) : $(this).prop("checked",true);
63         });
64     }
65 </script>
66 </html>

11.阻止事件发生

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <a href="http://www.baidu.com" onclick = "return dianji();">走一波</a>
 9 </body>
10 <script src="jquery.js"></script>
11 <script>
12     function dianji(){
13         alert('dsadsad');
14         return false;
15     }
16 </script>
17 </html>

12.隔行换色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <table border="1" width="400px">
 9     <tr>
10         <td>1</td>
11         <td>2</td>
12         <td>3</td>
13     </tr>
14     <tr>
15         <td>1</td>
16         <td>2</td>
17         <td>3</td>
18     </tr>
19     <tr>
20         <td>1</td>
21         <td>2</td>
22         <td>3</td>
23     </tr>
24 </table>
25 </body>
26 <script src="jquery.js"></script>
27 <script>
28     $("tr").mouseover(function(){
29         $(this).css("background-color","red");
30     });
31     $("tr").mouseout(function(){
32         $(this).css("background-color","white");
33     })
34 </script>
35 </html>

13.页面加载(将js写在页面头部,也不影响加载2个方法)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script src="jquery.js"></script>
 7     <script>
 8         //方法一
 9         $(function(){
10            $("div").click(function(){
11                 console.log("dsadsadsa");
12             })
13         });
14         //方法二
15         $(document).ready(function(){
16            $("div").click(function(){
17                 console.log("dsadsadsa");
18             })
19         });
20
21     </script>
22 </head>
23 <body>
24 <div>
25     dsjandksandksank
26 </div>
27 </body>
28 </html>

转载于:https://www.cnblogs.com/weibiao/p/6773617.html

python16_day14【jQuery】相关推荐

【jQuery】复选框的全选、反选，推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
【jQuery】smartMenu右键自定义上下文菜单插件(似web QQ)
DEMO: http://sources.ikeepstudying.com/menu-mail-qq/ 一.这是什么样的一个插件我们都知道,默认状态下,我们右键web页面,会出现一个上下文菜单,例 ...
【jQuery】jQuery对本地json的读取和遍历
2019独角兽企业重金招聘Python工程师标准>>> 有时候,我们想写写一个跨平台的单机小程序.小软件,自然就会想到HTML5,但我们又不想运用服务器或者数据库这么重型的东西,自然 ...
【jQuery】学习一下JS库——jQuery
[jQuery]学习一下JS库--jQuery jQuery 一.jQuery对象 01. 基本概念,区分DOM对象和jQuery对象 02. 两个对象之间的转换二.jQuery的使用方法关于隐式 ...
【jQuery】简单的网页文本格式编辑器ckeditor
在<[jQuery]网页文本格式编辑器xheditor>(点击打开链接)中介绍了功能相当齐全的网页文本格式编辑器xheditor,但这款实用的xheditor,可能会有人觉得它的按钮什么的 ...
【JQuery】熟能生巧JQuery（一）——目录
一.前言小编以前也接触过JQuery,但是都只是蜻蜓点水,对JQuery这个强大的js库没有很系统的学习,只是通过一些demo来了解了一下其中的方法,但是通过几次的面试,小编发现她很重要,拓展了Ja ...
【JQuery】可直接编辑的表格
[JQuery实战视频教程] 功能:创建一个表格,用户单击某个单元格后,可以直接修改单元格文本. 在编辑状态下,用户可按回车键确认修改,按ESC键撤销修改. 效果: 思路: 当用户点击某个单元格后,立 ...
【jQuery】网页文本格式编辑器xheditor
网页文本格式编辑器xheditor是一款优秀的.开源.兼容IE6的JQuery插件.现在很多网站都涉及到用户的交互,很难想象一个没有输入框的网站是怎么样的,你总不能一个给一个空白的文本框给别人吧?如果 ...
【jQuery】兼容IE6的图表插件Highcharts
在网页中有时候需要画出统计图,尤其是一些OA系统中,这样能够给各位看官一个直观的数据显示.图表用很多东西都能画出来,比如JSP可以利用JAVA本身就有的绘图函数,php有jpgraph插件,具体请看& ...
【jQuery】判断浏览器类型和版本
注意:看文章要去我精华,去我糟粕,自己多加调试这与<[HTML]根据不同的浏览器类型写不同的HTML代码>(点击打开链接)一文是姊妹篇,IE注释能够帮你在网页的HTML根据不同的版本,渲 ...

python16_day14【jQuery】

python16_day14【jQuery】相关推荐

最新文章

热门文章