zoukankan html css js c++ java

D17——C语言基础学PYTHON

C语言基础学习PYTHON——基础学习D17

20181014内容纲要：

　　1、jQuery介绍

　　2、jQuery功能介绍

　　　　（1）jQuery的引入方式

　　　　（2）选择器

　　　　（3）筛选

　　　　（4）文本操作

　　　　（5）样式操作

　　　　（6）属性操作

　　　　（7）文本处理

　　　　（8）css处理

　　　　（9）位置

　　　　（10）事件

　　　　（11）jQuery扩展

　　3、实例展示

　　4、小结

　　5、推荐

1 jQuery介绍

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。

jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。

官方网站列出了下列支持jQuery的浏览器：

　　FirefoX 2．0+

　　Internet Explorer 6+

　　Safari 3+

　　Opera 10．6+

　　Chrome 8+

2 jQuery功能介绍

（1）jQuery的引入方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--css的两种引入方式-->
 7     <link rel="stylesheet" href="csswenjian">
 8     <style>
 9 
10     </style>
11 
12 </head>
13 <body>
14     <div id="i1">123</div>
15 
16        <!--jQuery的两种引入方式-->
17     <script src="jquery-1.12.4.js"></script>
18     <script>
19         $("#i1")
20     </script>
21 </body>
22 </html>

js的两种引入方式

（2）选择器

1. id
                $('#id')
            2. class
                <div class='c1'></div>
                $(".c1")
            3. 标签
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                
                $('a')
                
            4. 组合a
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                
                $('a')
                $('.c2')
                
                $('a,.c2,#i10')
                
            5. 层级
                $('#i10 a') 子子孙孙
                $('#i10>a') 儿子
                
            6. 基本
                :first
                :last
                :eq()
            7. 属性
                $('[alex]')       具有alex属性的所有标签
                $('[alex="123"]') alex属性等于123的标签
                
            
                <input type='text'/>
                <input type='text'/>
                <input type='file'/>
                <input type='password'/>
                
                $("input[type='text']")
                $(':text')

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <input type="button" value="全选" onclick="checkAll();">
10     <input type="button" value="反选" onclick="reverseAll();">
11     <input type="button" value="取消" onclick="cancelAll();">
12     <table border="1">
13         <thead>
14             <tr>
15                 <th>选项</th>
16                 <th>IP</th>
17                 <th>端口</th>
18             </tr>
19         </thead>
20         <tbody class="tb">
21             <tr>
22                 <td><input type="checkbox" /></td>
23                 <td>1.1.1.1</td>
24                 <td>80</td>
25 
26             </tr>
27             <tr>
28                 <td><input type="checkbox" /></td>
29                 <td>1.1.1.1</td>
30                 <td>80</td>
31 
32             </tr>
33             <tr>
34                 <td><input type="checkbox" /></td>
35                 <td>1.1.1.1</td>
36                 <td>80</td>
37 
38             </tr>
39             <tr>
40                 <td><input type="checkbox" /></td>
41                 <td>1.1.1.1</td>
42                 <td>80</td>
43 
44             </tr>
45             <tr>
46                 <td><input type="checkbox" /></td>
47                 <td>1.1.1.1</td>
48                 <td>80</td>
49             </tr>
50         </tbody>
51     </table>
52 
53     <script src="jquery-1.11.3.js"></script>
54     <script>
55         function checkAll() {
56             $(":checkbox").prop('checked',true);
57         }
58         function cancelAll() {
59             $(':checkbox').prop('checked',false);
60         }
61         function reverseAll() {
62             $(":checkbox").each(function (k) {
63                 //this 代指当前循环的每一个元素
64                 //console.log(k,this)
65                 //这是通过Dom实现的反选
66                 /*if(this.checked){
67                     this.checked = false;
68                 }
69                 else{
70                     this.checked = true;
71                 }*/
72                 //这是jquery实现的反选
73                 /*if($(this).prop('checked')){
74                     $(this).prop('checked',false);
75                 }else {
76                     $(this).prop('checked',true);
77                 }*/
78                 //三元运算
79                 var v = $(this).prop("checked")?false:true;
80                 $(this).prop("checked",v)
81             })
82         }
83     </script>
84 </body>
85 </html>

实例（全选取消反选）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .header{
 8             background-color: black;
 9             color: wheat;
10         }
11         .content{
12             min-height: 50px;
13         }
14         .hide{
15             display: none;
16         }
17     </style>
18 </head>
19 <body>
20     <div style="height: 400px; 200px;border: 1px solid #dddddd">
21         <div class="item">
22             <div class="header">标题1</div>
23             <div class="content">内容1</div>
24         </div>
25         <div class="item">
26             <div class="header">标题2</div>
27             <div class="content hide">内容2</div>
28         </div>
29         <div class="item">
30             <div class="header">标题3</div>
31             <div class="content hide">内容3</div>
32         </div>
33     </div>
34     <script src="jquery-1.12.4.js"></script>
35     <script>
36         $(".header").click(function () {
37             //console.log(this);
38             //获取当前标签 $(this)
39             //获取某个标签的下一个标签
40             //获取某个标签的父标签
41             //获取所有的兄弟标签
42             //添加、移除样式
43 
44             //链式编程
45              //$(this).next().removeClass('hide');
46              //$(this).parent().siblings().find('.content').addClass('hide');
47             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
48         })
49     </script>
50 </body>
51 </html>

实例（展开折叠）

（3）筛选

筛选
                $('#i1').next()
                $('#i1').nextAll()
                $('#i1').nextUntil('#ii1')
                
                <div>
                    <a>asdf</a>
                    <a>asdf</a>
                    <a id='i1'>asdf</a>
                    <a>asdf</a>
                    <a id='ii1'>asdf</a>
                    <a>asdf</a>
                </div>
                
                $('#i1').prev()
                $('#i1').prevAll()
                $('#i1').prevUntil('#ii1')
                
                
                $('#i1').parent()
                $('#i1').parents()
                $('#i1').parentsUntil()
                
                $('#i1').children()
                $('#i1').siblings()
                $('#i1').find()
                $('li:eq(1)')
                $('li').eq(1)
                first()
                last()
                hasClass(class)

（4）文本操作

文本操作：
                $(..).text()           # 获取文本内容
                $(..).text(“<a>1</a>”) # 设置文本内容
                
                $(..).html()
                $(..).html("<a>1</a>")
                
                $(..).val()
                $(..).val(..)

（5）样式操作

样式操作：
                addClass
                removeClass
                toggleClass

（6）属性操作

属性操作：
                # 专门用于做自定义属性
                $(..).attr('n')
                $(..).attr('n','v')
                $(..).removeAttr('n')
                
                <input type='checkbox' id='i1'  />
                
                
                # 专门用于chekbox,radio
                $(..).prop('checked')
                $(..).prop('checked', true)
                
                PS: 
                    index 获取索引位置

（7）文本处理

文档处理：
                append
                prepend
                after
                before
                
                remove
                empty
                
                clone

（8）css处理

css处理
            
            $('t1').css('样式名称', '样式值')
            点赞：
                 - $('t1').append()
                 - $('t1').remove()
                 - setInterval
                 - 透明度 1 》 0
                 - position
                 - 字体大小，位置

（9）位置

位置：
            $(window).scrollTop()  获取
            $(window).scrollTop(0) 设置
            scrollLeft([val])
            
            offset().left                 指定标签在html中的坐标
            offset().top                  指定标签在html中的坐标
            
            position()                       指定标签相对父标签(relative)标签的坐标
            <div style='relative'>
                <div>
                    <div id='i1' style='position:absolute;height:80px;border:1px'></div>
                </div>
            </div>
            
            
            $('i1').height()           # 获取标签的高度 纯高度
            $('i1').innerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight()      # 获取边框 + 纯高度 + ？
            $('i1').outerHeight(true)  # 获取边框 + 纯高度 + ？
            
            # 纯高度，边框，外边距，内边距

（10）事件

DOM： 三种绑定方式
                jQuery：
                    $('.c1').click()
                    $('.c1').....
                    
                    $('.c1').bind('click',function(){
                        
                    })
                    
                    $('.c1').unbind('click',function(){
                        
                    })
                    
                    *******************
                    $('.c').delegate('a', 'click', function(){
                    
                    })
                    $('.c').undelegate('a', 'click', function(){
                    
                    })
                    
                    $('.c1').on('click', function(){
                    
                    })
                    $('.c1').off('click', function(){
                    
                    })
                    
                阻止事件发生
                    return false
                    
                # 当页面框架加载完成之后，自动执行
                $(function(){
                    
                    $(...)
                    
                })

（11）jQuery扩展

jQuery扩展：
            - $.extend        $.方法
            - $.fn.extend     $(..).方法
            
            (function(){
                var status = 1;
                // 封装变量
            })(jQuery)

3 实例展示

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .model{
 11             position: fixed;
 12             top: 50%;
 13             left: 50%;
 14             width: 500px;
 15             height: 400px;
 16             margin-left: -250px;
 17             margin-top: -250px;
 18             background-color: #eeeeee;
 19             z-index: 10;
 20         }
 21         .shadow{
 22             position: fixed;
 23             top: 0;
 24             left: 0;
 25             right: 0;
 26             bottom: 0;
 27             opacity: 0.6;
 28             background-color: black;
 29             z-index: 9;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <a onclick="addElement();">添加</a>
 35     <table border="1" class="tb">
 36 
 37         <div class="model hide">
 38             <div>
 39                 <input name="hostname" type="text"/>
 40                 <input name="port" type="text"/>
 41             </div>
 42             <div>
 43                 <input type="button" value="取消" onclick="cancelModel();"/>
 44                 <input type="button" value="确定" onclick="confirmModel();"/>
 45             </div>
 46         </div>
 47         <div class="shadow hide"></div>
 48 
 49         <tr>
 50             <td>1.1.1.1</td>
 51             <td>80</td>
 52             <td>
 53                 <a class="edit">编辑</a> | <a class="del">删除</a>
 54             </td>
 55         </tr>
 56         <tr>
 57             <td>1.1.1.2</td>
 58             <td>80</td>
 59             <td>
 60                 <a class="edit">编辑</a> | <a class="del">删除</a>
 61             </td>
 62         </tr>
 63         <tr>
 64             <td>1.1.1.3</td>
 65             <td>80</td>
 66             <td>
 67                 <a class="edit">编辑</a> | <a class="del">删除</a>
 68             </td>
 69         </tr>
 70         <tr>
 71             <td>1.1.1.4</td>
 72             <td>80</td>
 73             <td>
 74                 <a class="edit">编辑</a> | <a class="del">删除</a>
 75             </td>
 76         </tr>
 77     </table>
 78     <script src="jquery-1.12.4.js"></script>
 79     <script>
 80         function addElement() {
 81 //            $(".model").removeClass('hide');
 82 //            $(".shadow").removeClass('hide');
 83             $(".model,.shadow").removeClass('hide');
 84         }
 85         function cancelModel() {
 86             $(".model,.shadow").addClass('hide');
 87             $('.model input[type="text"]').val('');
 88         }
 89         function confirmModel() {
 90             var trs = [];
 91             $('.nodel input[type="text"]').each(function () {
 92                 var td = document.createElement('td');
 93                 td.innerHTML = "用户输入的值"；
 94 
 95             })
 96         }
 97         $('.edit').click(function () {
 98              $(".model,.shadow").removeClass('hide');
 99              var tds = $(this).parent().prevAll();
100              //console.log(tds[0]);
101              //console.log(tds[1]);
102              var port = $(tds[0]).text();
103              var host = $(tds[1]).text();
104              $('.model input[name="hostname"]').val(host);
105              $('.model input[name="port"]').val(port);
106         })
107         $('.del').click(function () {
108             $(this).parent().parent().remove();
109         })
110     </script>
111 
112 </body>
113 </html>

模态框1

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .hide{
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13     <input id="i1" type="button" value="开关"/>
14     <div class="c1 hide">我爱学习</div>
15 
16     <script src="jquery-1.12.4.js"></script>
17     <script>
18         $('#i1').click(function () {
19 //            if($('.c1').hasClass('hide')){
20 //                $('.c1').removeClass('hide');
21 //            }else {
22 //                $('.c1').addClass('hide');
23 //            }
24             //jquery也提供了实现这样功能的函数
25             $('.c1').toggleClass('hide');
26         })
27     </script>
28 </body>
29 </html>

开关功能

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .hide{
  8             display: none;
  9         }
 10         .model{
 11             position: fixed;
 12             top: 50%;
 13             left: 50%;
 14             width: 500px;
 15             height: 400px;
 16             margin-left: -250px;
 17             margin-top: -250px;
 18             background-color: #eeeeee;
 19             z-index: 10;
 20         }
 21         .shadow{
 22             position: fixed;
 23             top: 0;
 24             left: 0;
 25             right: 0;
 26             bottom: 0;
 27             opacity: 0.6;
 28             background-color: black;
 29             z-index: 9;
 30         }
 31     </style>
 32 </head>
 33 <body>
 34     <a onclick="addElement();">添加</a>
 35     <table border="1">
 36 
 37         <div class="model hide">
 38             <div>
 39                 <input name="hostname" type="text"/>
 40                 <input name="port" type="text"/>
 41             </div>
 42             <div>
 43                 <input type="button" value="取消" onclick="cancelModel();"/>
 44             </div>
 45         </div>
 46         <div class="shadow hide"></div>
 47 
 48         <tr>
 49             <td target="hostname">1.1.1.1</td>
 50             <td target="port">80</td>
 51             <td>
 52                 <a class="edit">编辑</a> | <a>删除</a>
 53             </td>
 54         </tr>
 55         <tr>
 56             <td target="hostname">1.1.1.1</td>
 57             <td target="port">80</td>
 58             <td>
 59                 <a class="edit">编辑</a> | <a>删除</a>
 60             </td>
 61         </tr>
 62         <tr>
 63             <td target="hostname">1.1.1.1</td>
 64             <td target="port">80</td>
 65             <td>
 66                 <a class="edit">编辑</a> | <a>删除</a>
 67             </td>
 68         </tr>
 69         <tr>
 70             <td target="hostname">1.1.1.1</td>
 71             <td target="port">80</td>
 72             <td>
 73                 <a class="edit">编辑</a> | <a>删除</a>
 74             </td>
 75         </tr>
 76     </table>
 77     <script src="jquery-1.12.4.js"></script>
 78     <script>
 79         function addElement() {
 80 //            $(".model").removeClass('hide');
 81 //            $(".shadow").removeClass('hide');
 82             $(".model,.shadow").removeClass('hide');
 83         }
 84         function cancelModel() {
 85             $(".model,.shadow").addClass('hide');
 86             $('.model input[type="text"]').val('');
 87         }
 88         $('.edit').click(function () {
 89              $(".model,.shadow").removeClass('hide');
 90              var tds = $(this).parent().prevAll();
 91              tds.each(function () {
 92                //this   代指每个td
 93                  //获取td的属性值
 94                  var n = $(this).attr('target');
 95                  //获取td中的内容
 96                  var text = $(this).text();
 97                  var a1 = '.model input[name="';
 98                  var a2 = '"]';
 99                  var temp = a1 + n + a2;
100                 $(temp).val(text);
101              })
102              //console.log(tds[0]);
103              //console.log(tds[1]);
104 //             var port = $(tds[0]).text();
105 //             var host = $(tds[1]).text();
106 //             $('.model input[name="hostname"]').val(host);
107 //             $('.model input[name="port"]').val(port);
108         })
109     </script>
110 
111 </body>
112 </html>

模态框2

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

页面切换

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

页面切换2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input id="t1" type="text" />
 9     <input id="a1" type="button" value="添加"/>
10     <input id="a2" type="button" value="删除"/>
11     <input id="a3" type="button" value="复制"/>
12 
13     <ul id="u1">
14         <li>1</li>
15         <li>2</li>
16     </ul>
17     <script src="jquery-1.12.4.js"></script>
18     <script>
19         $('#a1').click(function () {
20             var v = $('#t1').val();
21             var temp = "<li>" + v + "</li>";
22             $('#u1').append(temp);        //在后面追加
23             //$('#u1').prepend(temp);        //在前面追加
24             //$('#u1').after(temp);        //在同级后面
25             //$('#u1').before(temp);        //在同级前面
26         });
27         $('#a2').click(function () {
28             var index = $('#t1').val();
29             $('#u1 li').eq(index).remove();
30             //$('#u1 li').eq(index).empty();
31         })
32         $('#a3').click(function () {
33             var index = $('#t1').val();
34             var v = $('#u1 li').eq(index).clone();
35             $('#u1').append(v);
36         })
37     </script>
38 </body>
39 </html>

添加

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container{
 8             padding: 80px;
 9             border: 1px solid #dddddd;
10         }
11         .item{
12             position: relative;
13             width: 40px;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="container">
19         <div class="item">
20             <span>赞</span>
21         </div>
22     </div>
23     <div class="container">
24         <div class="item">
25             <span>赞</span>
26         </div>
27     </div>
28     <div class="container">
29         <div class="item">
30             <span>赞</span>
31         </div>
32     </div>
33     <div class="container">
34         <div class="item">
35             <span>赞</span>
36         </div>
37     </div>
38      <div class="container">
39         <div class="item">
40             <span>赞</span>
41         </div>
42     </div>
43     <script src="jquery-1.12.4.js"></script>
44     <script>
45         $('.item').click(function () {
46             addElement(this);
47         });
48         function addElement(self) {
49             var fontSize = 15;
50             var top = 0;
51             var right = 0;
52             var opacity = 1;
53 
54             var tag = document.createElement('span');
55             $(tag).text('+1');
56             $(tag).css('color','green');
57             $(tag).css('position','absolute');
58             $(tag).css('fontSize',fontSize + "px");
59             $(tag).css('top',top + "px");
60             $(tag).css('right',right + "px");
61             $(tag).css('opacity',opacity);
62             $(self).append(tag);
63 
64             var obj = setInterval(function () {
65                 fontSize = fontSize + 5;
66                 top = top - 5;
67                 right = right - 5;
68                 opacity = opacity - 0.2;
69                 $(tag).css('fontSize',fontSize + "px");
70                 $(tag).css('top',top + "px");
71                 $(tag).css('right',right + "px");
72                 $(tag).css('opacity',opacity);
73 
74                 if(opacity<0){
75                     clearInterval(obj);
76                     $(tag).remove();
77                 }
78             },100);
79         }
80     </script>
81 </body>
82 </html>

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div style="height: 100px;  100px;overflow: auto">
 9         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>
10         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>
11         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>
12         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>
13         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>
14         <p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p><p>sdsds</p>
15     </div>
16     <div style="height: 1000px;"></div>
17     <script src="jquery-1.12.4.js"></script>
18 
19 </body>
20 </html>

返回顶部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input id="t1" type="text" />
 9     <input id="a1" type="button" value="添加"/>
10     <input id="a2" type="button" value="删除"/>
11     <input id="a3" type="button" value="复制"/>
12 
13     <ul id="u1">
14         <li>1</li>
15         <li>2</li>
16     </ul>
17     <script src="jquery-1.12.4.js"></script>
18     <script>
19         $('#a1').click(function () {
20             var v = $('#t1').val();
21             var temp = "<li>" + v + "</li>";
22             $('#u1').append(temp);        //在后面追加
23             //$('#u1').prepend(temp);        //在前面追加
24             //$('#u1').after(temp);        //在同级后面
25             //$('#u1').before(temp);        //在同级前面
26         });
27         $('#a2').click(function () {
28             var index = $('#t1').val();
29             $('#u1 li').eq(index).remove();
30             //$('#u1 li').eq(index).empty();
31         })
32         $('#a3').click(function () {
33             var index = $('#t1').val();
34             var v = $('#u1 li').eq(index).clone();
35             $('#u1').append(v);
36         })
37         $('ul').delegate('li','click',function () {
38             var v = $(this).text();
39             alert(v);
40         })
41     </script>
42 </body>
43 </html>

添加2

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--先执行自己绑定的事件，然后跳转-->
 9     <a onclick="Clickon" href="http://www.baidu.com">百度</a>
10     只执行绑定的事件，不跳转
11     <a onclick="return Clickon" href="http://www.baidu.com">百度</a>
12     <a id="i1" onclick="return Clickon" href="http://www.baidu.com">百度</a>
13 
14     <script src="jquery-1.12.4.js"></script>
15     <script>
16         function Clickon() {
17             alert(123);
18             return false;
19         }
20         $('#i1').click(function () {
21             alert(456);
22             return false;
23         })
24     </script>
25 </body>
26 </html>

事件提交顺序

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .error{
 8             color: red;
 9         }
10     </style>
11 </head>
12 <body>
13     <form id="f1" action="s5开关功能.html" method="POST">
14         <div><input name="n1" type="text" /></div>
15         <div><input name="n2" type="password" /></div>
16         <div><input name="n3" type="text" /></div>
17         <div><input name="n4" type="text" /></div>
18         <div><input name="n5" type="text" /></div>
19 
20         <input type="submit" value="提交" />
21     </form>
22     <script src="jquery-1.12.4.js"></script>
23     <script>
24         //当页面框架加载完成后自动执行
25         $(function () {});
26         //当页面所有元素完全加载完毕后执行
27         $(':submit').click(function () {
28             var flag = true;
29             $('.error').remove();
30             $('f1').find('input[type="text"],input[type="password"]').each(function () {
31                 var v = $(this).val();
32                 if(v.length <= 0){
33                     flag = false;
34                     var tag = document.createElement('span');
35                     tag.className = "error";
36                     tag.innerHTML = "必填";
37                     $(this).after(tag);
38                     //return false;
39                 }
40             })
41             /*这是对于表单中只含有一个input标签时
42             var v = $(this).prev().val();
43             if(v.length > 0){
44                 return true;
45             }else{
46                 alert("请输入内容");
47                 return false;
48             }*/
49         })
50 
51     </script>
52 </body>
53 </html>

表单验证

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script src="jquery-1.12.4.js"></script>
 9     <script>
10         //第一种扩展方式
11         $.extend({
12             'kanghui':function(){
13                 return 'shuaige';
14             }
15         });
16         var v = $.kanghui();
17         alert(v);
18         //第二种扩展方式
19         $.fn.extend({
20             'kanghui':function () {
21                 return 'shuaige'
22             }
23         });
24         var v = $('#i1').kanghui();
25         alert(v);
26     </script>
27 </body>
28 </html>

jQuery扩展

4 小结

一入前端深似海，不过确实挺好玩，也不算难。但是想和做事两码事。

很多事情不是想象的那么简单还是要做好计划，按部就班，有条不紊。

调节好自己吧~不能一蹶不振!

5 推荐

写博客其实并非易事！

我是尾巴~

本次推荐：http://jquery.cuishifeng.cn/index.html

详细请看这里！

虽不才，才要坚持~

查看全文

相关阅读:
AMBA总线介绍
 placeholder不显示的解决办法（支持ie8以上）
通过新浪微博API获取数据
 PHP时间运算
 PHP队列
 stream_context_create()
http_build_query()
shuffle()
session_id()
session_name()

原文地址：https://www.cnblogs.com/zhangkanghui/p/9784951.html