• python之路-jQuery

    http://jquery.cuishifeng.cn

    jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
     
    jQuery使用的主流系列：1.x（兼容性更好）、2.x、3.x（功能更齐全）
    引入jQuery：<script src="jquery-1.12.4.js"></script> ，一般放在body的尾部。
    调用jQuert方法：1.jQuery.  2.$.

    一、查找元素

    因为标签具有自定义属性，这样的话DOM就无法满足了。

    DOM大约有10种左右。

    转换：jQuery对象[0]  ------>Dom对象

    　　　Dom对象 ---------> $(Dom对象)

    选择器：

    1.直接找到某个或某些元素

    1. id 

    $('#i1')

    2.class

    $('.i1')

    3.标签

    $('a')

    4.* 表示所有

    5.组合

    $('a,.c2,#i3') 同时查找多个标签

    层级选择器：

    $(#i10 a)

    先找到id为i10的标签，然后再到它的子子孙孙中找到所有的a标签。

    $(#i10>a)

    只找儿子

    6. 基本

    $(#i10>a：first)
        :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')  简写

    实例：全选、反选、取消
        - 选择权
        -
         $('#tb:checkbox').prop('checked');        获取值
         $('#tb:checkbox').prop('checked', true);  设置值
        -
         jQuery方法内置循环： $('#tb:checkbox').xxxx
         
        　　- $('#tb:checkbox').each(function(k){
          // k当前索引
          // this，DOM，当前循环的元素 $(this)
      

     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="cancleAll();"/>
12 
13     <table border="1">
14         <thead>
15             <tr>
16                 <th>选项</th>
17                 <th>IP</th>
18                 <th>PORT</th>
19             </tr>
20         </thead>
21         <tbody id="tb">
22 
23             <tr>
24                 <td><input type="checkbox" /></td>
25                 <td>1.1.1.1</td>
26                 <td>80</td>
27             </tr>
28             <tr>
29                 <td><input type="checkbox" /></td>
30                 <td>1.1.1.1</td>
31                 <td>80</td>
32             </tr>
33             <tr>
34                 <td><input type="checkbox" /></td>
35                 <td>1.1.1.1</td>
36                 <td>80</td>
37             </tr>
38         </tbody>
39     </table>
40 
41     <script src="jquery-1.12.4.js"></script>
42     <script>
43         function checkAll() {
44             $('#tb :checkbox').prop('checked',true);
45         }
46         function cancleAll() {
47             $('#tb :checkbox').prop('checked',false);
48         }
49         function reverseAll() {
50             $(':checkbox').each(function(k){                   //each循环每个元素，function中也可以加参数，是元素的下标
51                 // this,代指当前循环的每一个元素
52                 // Dom实现
53                 /*
54                 if(this.checked){
55                     this.checked = false;
56                 }else{
57                     this.checked = true;
58                 }
59                 */
60                 /*
61                 jQuery方法
62                 if($(this).prop('checked')){
63                     $(this).prop('checked', false);      传两个参数，表示去修改值，传一个表示获取值
64                 }else{
65                     $(this).prop('checked', true);
66                 }
67                 */
68               // 三元运算var v = 条件? 值1：值2     如果条件是真的，值1就会赋值给v，否则值2就会赋值给v
69                 var v = $(this).prop('checked')?false:true;
70                 $(this).prop('checked',v);
71             })
72         }
73     </script>
74 </body>
75 </html>
    View Code

       

    筛选器：

    $(this).prev()   上一个

    $(this).next()   下一个

    $(this).siblings()  兄弟

    $(this).parent() 父

    $(this).children 孩子

    $(this).find()子子孙孙中查找

    $(this).addClass() 添加

    $(this).removeClass 删除

    $('#i1').prev()
    $('#i1').prevAll()
    $('#i1').prevUntil('#ii1')


    $('#i1').parent()
    $('#i1').parents()
    $('#i1').parentsUntil()   加until表示找到哪里为止

    $('#i1').children()
    $('#i1').siblings()
    $('#i1').find()
    $('li:eq(1)')
    $('li').eq(1)
    first()
    last()
    hasClass(class)

    jQuery支持链式编程（jQuery可以一直筛选下去）。

    实例：菜单的伸缩（没有绑定事件，每个div都有一个触发事件）

      1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>Title</title>
  6         <script src="jquery-1.12.4.js"></script>
  7      <style>
  8         .pg-header{
  9             height: 48px;
 10             background-color: black;
 11         }
 12         .pg-body .menu{
 13             width: 20%;
 14             float: left;
 15             background-color: #d3d3d3;
 16             height: 800px;
 17         }
 18         .pg-body .test{
 19             width: 80%;
 20             float: left;
 21         }
 22         .menu .item .title{
 23             background-color: #297EA8;
 24             color: white;
 25             height: 40px;
 26         }
 27         .menu .item{
 28             display: block;
 29         }
 30         .menu .item .content{
 31             background-color: white;
 32         }
 33         .menu .item .content a{
 34             display: block;
 35             padding: 10px;
 36         }
 37         .hide{
 38             display: none;
 39         }
 40     </style>
 41 
 42 
 43 
 44     </head>
 45     <body>
 46           <div id="i1" class="pg-header"></div>
 47     <div class="pg-body">
 48         <div class="menu">
 49             <div class="item">
 50                 <div class="title" onclick="changeMenu(this);" >菜单1</div>
 51                 <div class="content">
 52                     <a>小彩蛋</a>
 53                     <a>小彩蛋</a>
 54                     <a>小彩蛋</a>
 55                     <a>小彩蛋</a>
 56                     <a>小彩蛋</a>
 57                 </div>
 58             </div>
 59             <div class="item">
 60                 <div class="title" onclick="changeMenu(this);">菜单2</div>
 61                 <div class="content hide">
 62                     <a>小彩蛋</a>
 63                     <a>小彩蛋</a>
 64                     <a>小彩蛋</a>
 65                     <a>小彩蛋</a>
 66                     <a>小彩蛋</a>
 67                 </div>
 68             </div>
 69             <div class="item">
 70                 <div class="title" onclick="changeMenu(this);">菜单3</div>
 71                 <div class="content hide">
 72                     <a>小彩蛋</a>
 73                     <a>小彩蛋</a>
 74                     <a>小彩蛋</a>
 75                     <a>小彩蛋</a>
 76                     <a>小彩蛋</a>
 77                 </div>
 78             </div>
 79             <div class="item">
 80                 <div class="title" onclick="changeMenu(this);">菜单4</div>
 81                 <div class="content hide">
 82                     <a>小彩蛋</a>
 83                     <a>小彩蛋</a>
 84                     <a>小彩蛋</a>
 85                     <a>小彩蛋</a>
 86                     <a>小彩蛋</a>
 87                 </div>
 88             </div>
 89 
 90         </div>
 91         <div class="test">
 92             <input type="button" value="添加" onclick="addAsset();">
 93             <table border="1">
 94                 <tr>
 95                     <td target="#id">1</td>
 96                     <td target="#host">c1.com</td>
 97                     <td target="#port">80</td>
 98                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
 99                     <td>查看更多</td>
100 
101                 </tr>
102                 <tr>
103                     <td target="#id">2</td>
104                     <td target="#host">c2.com</td>
105                     <td target="#port">80</td>
106                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
107                     <td>查看更多</td>
108 
109                 </tr>
110                 <tr>
111                     <td target="#id">3</td>
112                     <td target="#host">c3.com</td>
113                     <td target="#port">80</td>
114                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
115                     <td>查看更多</td>
116 
117                 </tr>
118                 <tr>
119                     <td target="#id">4</td>
120                     <td target="#host">c4.com</td>
121                     <td target="#port">80</td>
122                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
123                     <td>查看更多</td>
124 
125                 </tr>
126             </table>
127 
128 
129         </div>
130     </div>
131 
132 
133     <div class="shade hide"></div>
134     <div class="model hide">
135         <p>序号：<input id="id" type="text" /></p>
136         <p>主机名：<input id="host" type="text" /></p>
137         <p>端口：<input id="port" type="text" /></p>
138         <p>
139             <a onclick="confirmAsset();">确定</a> <a onclick="cancleAsset();">取消</a>
140         </p>
141 
142     </div>
143     <div class="loading hide"></div>
144           <script>
145            function changeMenu(ths) {
146                 // console.log(ths);
147                 // ths--> DOM的对象 代指当前点击的菜单标签(内部封装仅仅只有DOM的方法)
148                 // DOM对象转换成jquery对象： $(ths)
149                 // jQuery对象转换成DOM对象： $('#i1')[0]
150                 // 找到当前ths的下一个标签，去掉hide样式
151                 // 找到当前ths的父标签，再找所有的兄弟标签，内存再找class=content，加上hide
152                 $(ths).next().removeClass('hide');
153                 $(ths).parent().siblings().find('.content').addClass('hide');
154 
155             }
156         </script>
157 
158     </body>
159 </html>
    View Code

    绑定事件：通过绑定，给所有的div绑定一个事件，通过绑定事件可以实现内部循环，这样可以给同一类的标签进行操作。

     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">标题一</div>
23             <div id="i1" class="content hide">内容</div>
24         </div>
25         <div class="item">
26             <div class="header">标题二</div>
27             <div class="content hide">内容</div>
28         </div>
29 
30         <div class="item">
31             <div class="header">标题三</div>
32             <div class="content hide">内容</div>
33         </div>
34     </div>
35     <script src="jquery-1.12.4.js"></script>
36     <script>
37         $('.header').click(function(){
38             // 当前点击的标签 $(this)
39             // 获取某个标签的下一个标签
40             // 获取某个标签的父标签
41             // 获取所有的兄弟标签
42             // 添加样式和移除样式
43             // $('.i1').addClass('hide')
44             // $('#i1').removeClass('hide')
45             // var v = $("this + div");
46             // $("label + input")
47             // console.log(v);
48             //
49             // $("afsldkfja;skjdf;aksdjf")
50 
51             // 筛选器
52             /*
53             $(this).next()      下一个
54             $(this).prev()      上一个
55             $(this).parent()    父
56             $(this).children()  孩子
57             $('#i1').siblings() 兄弟
58             $('#i1').find('#i1') 子子孙孙中查找
59             // . . .
60             //
61             $('#i1').addClass(..)
62             $('#i1').removeClass(..)
63             */
64 
65             // 链式编程
66             // $(...).click(function(){
67             //     this..
68             // })
69 
70 
71 //            $(this).next().removeClass('hide');
72 //            $(this).parent().siblings().find('.content').addClass('hide')
73 
74             $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
75 
76         })
77     </script>
78 </body>
79 </html>
    View Code

    文本操作：

    $().text()  text中不写内容，获取值，写内容，修改值。

    $().html()

    $().val 不写内容，获取值，写内容，设置值。（input）

    实例：对表格进行编辑，点编辑，本行内容出现在文本框中，点取消、或者确定时，清除脏数据。

    通过查找修改

      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         .modal{
 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 
 36     <table border="1" id="tb">
 37         <tr>
 38             <td target="hostname">1.1.1.11</td>
 39             <td target="port">80</td>
 40             <td target="ip">80</td>
 41             <td>
 42                 <a class="edit">编辑</a> | <a class="del">删除</a>
 43             </td>
 44         </tr>
 45         <tr>
 46             <td target="hostname">1.1.1.12</td>
 47             <td target="port">80</td>
 48             <td target="ip">80</td>
 49             <td>
 50                 <a class="edit">编辑</a> | <a class="del">删除</a>
 51             </td>
 52         </tr>
 53         <tr>
 54             <td target="hostname">1.1.1.13</td>
 55             <td target="port">80</td>
 56             <td target="ip">80</td>
 57             <td>
 58                 <a class="edit">编辑</a> | <a class="del">删除</a>
 59             </td>
 60         </tr>
 61         <tr>
 62             <td target="hostname">1.1.1.14</td>
 63             <td target="port">80</td>
 64             <td target="ip">80</td>
 65             <td>
 66                 <a class="edit">编辑</a> | <a class="del">删除</a>
 67             </td>
 68 
 69         </tr>
 70     </table>
 71 
 72     <div class="modal hide">
 73         <div>
 74             <input name="hostname" type="text"  />
 75             <input name="port" type="text" />
 76             <input name="ip" type="text" />
 77         </div>
 78 
 79         <div>
 80             <input type="button" value="取消" onclick="cancelModal();" />
 81             <input type="button" value="确定" onclick="confirmModal();" />
 82         </div>
 83     </div>
 84 
 85     <div class="shadow hide"></div>
 86 
 87     <script src="jquery-1.12.4.js"></script>
 88     <script>
 89 
 90         $('.del').click(function () {
 91             $(this).parent().parent().remove();
 92         });
 93         
 94         function  confirmModal() {
 95 
 96             var tr = document.createElement('tr');
 97             var td1 = document.createElement('td');
 98             td1.innerHTML = "11.11.11.11";
 99             var td2 = document.createElement('td');
100             td2.innerHTML = "8001";
101 
102             $(tr).append(td1);
103             $(tr).append(td2);
104 
105             $('#tb').append(tr);
106 
107             $(".modal,.shadow").addClass('hide');
108 //            $('.modal input[type="text"]').each(function () {
109 //                // var temp = "<td>..."
110 //
111 //
112 //
113 //            })
114         }
115 
116         function  addElement() {
117             $(".modal,.shadow").removeClass('hide');
118         }
119         function cancelModal() {
120             $(".modal,.shadow").addClass('hide');
121             $('.modal input[type="text"]').val("");
122         }
123 
124         $('.edit').click(function(){
125             $(".modal,.shadow").removeClass('hide');
126             // this
127             var tds = $(this).parent().prevAll();
128             tds.each(function () {
129                 // 获取td的target属性值
130                 var n = $(this).attr('target');
131                 // 获取td中的内容
132                 var text = $(this).text();
133                 var a1 = '.modal input[name="';
134                 var a2 = '"]';
135                 var temp = a1 + n + a2;
136                 $(temp).val(text);
137             });
138 
139 
140 //            var port = $(tds[0]).text();
141 //            var host = $(tds[1]).text();
142 //
143 //            $('.modal input[name="hostname"]').val(host);
144 //            $('.modal input[name="port"]').val(port);
145             // 循环获取tds中内容
146             // 获取 <td>内容</td> 获取中间的内容
147             // 赋值给input标签中的value
148 
149         });
150     </script>
151 </body>
152 </html>
    View Code
      1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>Title</title>
  6          <script src="jquery-1.12.4.js"></script>
  7    <style>
  8         .pg-header{
  9             height: 48px;
 10             background-color: black;
 11         }
 12         .pg-body .menu{
 13             width: 20%;
 14             float: left;
 15             background-color: #d3d3d3;
 16             height: 800px;
 17         }
 18         .pg-body .test{
 19             width: 80%;
 20             float: left;
 21         }
 22         .menu .item .title{
 23             background-color: #297EA8;
 24             color: white;
 25             height: 40px;
 26         }
 27         .menu .item{
 28             display: block;
 29         }
 30         .menu .item .content{
 31             background-color: white;
 32         }
 33         .menu .item .content a{
 34             display: block;
 35             padding: 10px;
 36         }
 37         .hide{
 38             display: none;
 39         }
 40         .shade{
 41             position: fixed;
 42             top:0;
 43             left: 0;
 44             right: 0;
 45             bottom: 0;
 46             background-color: black;
 47             opacity: 0.6;
 48             z-index: 100;
 49         }
 50         .loading{
 51             position: fixed;
 52             top:30%;
 53             left: 50%;
 54             width: 32px;
 55             height: 32px;
 56             background: url(loader.gif);
 57             z-index: 101;
 58         }
 59         .model{
 60             position: fixed;
 61             top:50%;
 62             left: 50%;
 63             width: 400px;
 64             height: 400px;
 65             z-index: 101;
 66             background-color: white;
 67             margin-left: -200px;
 68             margin-top: -200px;
 69         }
 70     </style>
 71 
 72     </head>
 73     <body>
 74             <div id="i1" class="pg-header"></div>
 75     <div class="pg-body">
 76         <div class="menu">
 77             <div class="item">
 78                 <div class="title" onclick="changeMenu(this);" >菜单1</div>
 79                 <div class="content">
 80                     <a>小彩蛋</a>
 81                     <a>小彩蛋</a>
 82                     <a>小彩蛋</a>
 83                     <a>小彩蛋</a>
 84                     <a>小彩蛋</a>
 85                 </div>
 86             </div>
 87             <div class="item">
 88                 <div class="title" onclick="changeMenu(this);">菜单2</div>
 89                 <div class="content hide">
 90                     <a>小彩蛋</a>
 91                     <a>小彩蛋</a>
 92                     <a>小彩蛋</a>
 93                     <a>小彩蛋</a>
 94                     <a>小彩蛋</a>
 95                 </div>
 96             </div>
 97             <div class="item">
 98                 <div class="title" onclick="changeMenu(this);">菜单3</div>
 99                 <div class="content hide">
100                     <a>小彩蛋</a>
101                     <a>小彩蛋</a>
102                     <a>小彩蛋</a>
103                     <a>小彩蛋</a>
104                     <a>小彩蛋</a>
105                 </div>
106             </div>
107             <div class="item">
108                 <div class="title" onclick="changeMenu(this);">菜单4</div>
109                 <div class="content hide">
110                     <a>小彩蛋</a>
111                     <a>小彩蛋</a>
112                     <a>小彩蛋</a>
113                     <a>小彩蛋</a>
114                     <a>小彩蛋</a>
115                 </div>
116             </div>
117 
118         </div>
119         <div class="test">
120             <input type="button" value="添加" onclick="addAsset();">
121             <table border="1">
122                 <tr>
123                     <td target="#id">1</td>
124                     <td target="#host">c1.com</td>
125                     <td target="#port">80</td>
126                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
127                     <td>查看更多</td>
128 
129                 </tr>
130                 <tr>
131                     <td target="#id">2</td>
132                     <td target="#host">c2.com</td>
133                     <td target="#port">80</td>
134                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
135                     <td>查看更多</td>
136 
137                 </tr>
138                 <tr>
139                     <td target="#id">3</td>
140                     <td target="#host">c3.com</td>
141                     <td target="#port">80</td>
142                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
143                     <td>查看更多</td>
144 
145                 </tr>
146                 <tr>
147                     <td target="#id">4</td>
148                     <td target="#host">c4.com</td>
149                     <td target="#port">80</td>
150                     <td> <a onclick="editAsset(this);">编辑</a>| <a>删除</a></td>
151                     <td>查看更多</td>
152 
153                 </tr>
154             </table>
155 
156 
157         </div>
158     </div>
159 
160 
161     <div class="shade hide"></div>
162     <div class="model hide">
163         <p>序号：<input id="id" type="text" /></p>
164         <p>主机名：<input id="host" type="text" /></p>
165         <p>端口：<input id="port" type="text" /></p>
166         <p>
167             <a onclick="confirmAsset();">确定</a> <a onclick="cancleAsset();">取消</a>
168         </p>
169 
170     </div>
171     <div class="loading hide"></div>
172             <script>
173                     function changeMenu(ths) {
174                 // console.log(ths);
175                 // ths--> DOM的对象 代指当前点击的菜单标签(内部封装仅仅只有DOM的方法)
176                 // DOM对象转换成jquery对象： $(ths)
177                 // jQuery对象转换成DOM对象： $('#i1')[0]
178                 // 找到当前ths的下一个标签，去掉hide样式
179                 // 找到当前ths的父标签，再找所有的兄弟标签，内存再找class=content，加上hide
180                 $(ths).next().removeClass('hide');
181                 $(ths).parent().siblings().find('.content').addClass('hide');
182 
183             }
184 
185                 function addAsset() {
186                     $('.shade,.model').removeClass('hide');
187 
188                 }
189                 function cancleAsset() {
190                     $('.shade,.model').addClass('hide');
191                     $('.model [type="text"]').val('');
192                 }
193                 function confirmAsset() {
194                     $('.shade,.model').addClass('hide');
195                     $('.shade,.loading').removeClass('hide');
196                 }
197                 function editAsset(ths) {
198                     $('.shade,.model').removeClass('hide');
199                     //获取上面的td
200                     var $td_list = $(ths).parent().prevAll();
201                     //循环所有的td
202                     $td_list.each(function () {
203                         //this，当前循环的td（DOM） $(this)
204                         var $td = $(this);
205                         //获取标签内部的文本信息，相当于innerText
206                         var text = $td.text();
207                         //获取标签自定义属性的值
208                         var v = $td.attr('target');//#port #id #host
209                        //$(v)获取对应的input标签
210                         //$(v).val('df') 对input系列进行赋值
211                         $(v).val(text);
212                     })
213                 }
214             </script>
215 
216 
217     </body>
218 </html>
    View Code

     上面一个方法是通过属性修改值。

    样式操作

    addClass、removeClass、toggleClass。通过前两个可实现内容的隐藏、出现。toggleClass可以将这两个功能实现。

     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 type='checkbox' id='i2'  />
14 
15     <input id="i1" type="button" value="开关" />
16     <div class="c1 hide">asdfasdf</div>
17 
18     <script src="jquery-1.12.4.js"></script>
19     <script>
20         $('#i1').click(function(){
21 //            if($('.c1').hasClass('hide')){
22 //                $('.c1').removeClass('hide');
23 //            }else{
24 //                $('.c1').addClass('hide');
25 //            }
26             $('.c1').toggleClass('hide');
27         })
28     </script>
29 </body>
30 </html>
    View Code

    属性操作

    专门用来做自定义属性

    $().attr()   $().removeAttr()     括号中有一个参数时，获取值，有两个值是修改

    $().prop()  用于为checkbox、radio做操作

    # 专门用于chekbox,radio
        $(..).prop('checked')
        $(..).prop('checked', true)
        
        PS:
         index 获取索引位置

    上面的查找方法中有此实例。

    实例：菜单切换、内容也跟着切换（通过属性实现）

     1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>Title</title>
 6         <script src="jquery-1.12.4.js"></script>
 7          <style>
 8         .menus{
 9             height: 48px;
10             background-color: #d3d3d3;
11             line-height: 48px;
12             cursor: pointer;      //放到菜单选项是变成小手样式
13         }
14         .menus a{
15             display: inline-block;
16             border-right: 1px solid #b2b2b5;
17             padding: 0 10px;
18             margin-top: -3px;
19         }
20         .menus a.active{
21             border-top: 3px solid cadetblue;
22         }
23         .hide{
24             display: none;
25         }
26     </style>
27 
28     </head>
29     <body>
30         <div style=" 500px;border: 1px solid #b2b2b5;min-height: 300px;">
31         <div class="menus">
32             <a class="active" target="i1">菜单1</a>
33             <a target="i2">菜单2</a>
34             <a  target="i3">菜单3</a>
35         </div>
36         <div class="contents">
37             <div nid="i1" class="content">内容一</div>
38             <div nid="i2" class="content hide">内容二</div>
39             <div nid="i3" class="content hide">内容三</div>
40         </div>
41     </div>
42         <script>
43             $('.menus a').click(function () {
44                 //this代指当前触发时间的标签，DOM对象
45                 $(this).addClass('active').siblings().removeClass('active');
46                 var v = $(this).attr('target'); //i1,i2,i3
47                 var t = 'div[nid="' + v + '"]'; //div[nid='i1']
48                 $('.contents').find(t).removeClass('hide').siblings().addClass('hide')
49             })
50         </script>
51 
52 
53     </body>
54 </html>
    View Code

    通过索引实现

     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 .menu-item{
19             float: left;
20             border-right: 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 
32     <div style=" 700px;margin:0 auto">
33 
34         <div class="menu">
35             <div  class="menu-item active" >菜单一</div>
36             <div  class="menu-item" >菜单二</div>
37             <div  class="menu-item" >菜单三</div>
38         </div>
39         <div class="content">
40             <div >内容一</div>
41             <div class="hide" >内容二</div>
42             <div class="hide">内容三</div>
43 
44         </div>
45 
46     </div>
47     <script src="jquery-1.12.4.js"></script>
48     <script>
49         $('.menu-item').click(function(){
50             $(this).addClass('active').siblings().removeClass('active');
51             $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
52 
53         });
54     </script>
55 </body>
56 </html>
    View Code

    文档处理

    以ul为例，

    append    添加最最下面

    prepend    添加到最上面

    after     添加到ul下

    before       添加到ul上

    remove    移除内容

    empty     移除内容，但是原有的位置还在

    clone    复制

    实例：

     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 
15         <li>1</li>
16         <li>2</li>
17 
18     </ul>
19     <script src="jquery-1.12.4.js"></script>
20     <script>
21         $('#a1').click(function () {
22             var v = $('#t1').val();
23 
24             var temp = "<li>" + v + "</li>";
25             // $('#u1').append(temp);
26             $('#u1').prepend(temp);
27             // $('#u1').after(temp)
28             // $('#u1').before(temp)
29         });
30 
31         $('#a2').click(function () {
32             var index = $('#t1').val();
33             //$('#u1 li').eq(index).remove();
34             //$('#u1 li').eq(index).empty();
35         });
36         $('#a3').click(function () {
37             var index = $('#t1').val();
38             var v = $('#u1 li').eq(index).clone();
39             $('#u1').append(v);
40 
41 
42             //$('#u1 li').eq(index).remove();
43             //$('#u1 li').eq(index).empty();
44         })
45     </script>
46 </body>
47 </html>
    View Code

    实例：添加表格内容

      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         .modal{
 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 
 36     <table border="1" id="tb">
 37         <tr>
 38             <td target="hostname">1.1.1.11</td>
 39             <td target="port">80</td>
 40             <td target="ip">80</td>
 41             <td>
 42                 <a class="edit">编辑</a> | <a class="del">删除</a>
 43             </td>
 44         </tr>
 45         <tr>
 46             <td target="hostname">1.1.1.12</td>
 47             <td target="port">80</td>
 48             <td target="ip">80</td>
 49             <td>
 50                 <a class="edit">编辑</a> | <a class="del">删除</a>
 51             </td>
 52         </tr>
 53         <tr>
 54             <td target="hostname">1.1.1.13</td>
 55             <td target="port">80</td>
 56             <td target="ip">80</td>
 57             <td>
 58                 <a class="edit">编辑</a> | <a class="del">删除</a>
 59             </td>
 60         </tr>
 61         <tr>
 62             <td target="hostname">1.1.1.14</td>
 63             <td target="port">80</td>
 64             <td target="ip">80</td>
 65             <td>
 66                 <a class="edit">编辑</a> | <a class="del">删除</a>
 67             </td>
 68 
 69         </tr>
 70     </table>
 71 
 72     <div class="modal hide">
 73         <div>
 74             <input name="hostname" type="text"  />
 75             <input name="port" type="text" />
 76             <input name="ip" type="text" />
 77         </div>
 78 
 79         <div>
 80             <input type="button" value="取消" onclick="cancelModal();" />
 81             <input type="button" value="确定" onclick="confirmModal();" />
 82         </div>
 83     </div>
 84 
 85     <div class="shadow hide"></div>
 86 
 87     <script src="jquery-1.12.4.js"></script>
 88     <script>
 89 
 90         $('.del').click(function () {
 91             $(this).parent().parent().remove();
 92         });
 93         
 94         function  confirmModal() {
 95 
 96             var tr = document.createElement('tr');
 97             var td1 = document.createElement('td');
 98             td1.innerHTML = "11.11.11.11";
 99             var td2 = document.createElement('td');
100             td2.innerHTML = "8001";
101 
102             $(tr).append(td1);
103             $(tr).append(td2);
104 
105             $('#tb').append(tr);
106 
107             $(".modal,.shadow").addClass('hide');
108 //            $('.modal input[type="text"]').each(function () {
109 //                // var temp = "<td>..."
110 //
111 //
112 //
113 //            })
114         }
115 
116         function  addElement() {
117             $(".modal,.shadow").removeClass('hide');
118         }
119         function cancelModal() {
120             $(".modal,.shadow").addClass('hide');
121             $('.modal input[type="text"]').val("");
122         }
123 
124         $('.edit').click(function(){
125             $(".modal,.shadow").removeClass('hide');
126             // this
127             var tds = $(this).parent().prevAll();
128             tds.each(function () {
129                 // 获取td的target属性值
130                 var n = $(this).attr('target');
131                 // 获取td中的内容
132                 var text = $(this).text();
133                 var a1 = '.modal input[name="';
134                 var a2 = '"]';
135                 var temp = a1 + n + a2;
136                 $(temp).val(text);
137             });
138 
139 
140 //            var port = $(tds[0]).text();
141 //            var host = $(tds[1]).text();
142 //
143 //            $('.modal input[name="hostname"]').val(host);
144 //            $('.modal input[name="port"]').val(port);
145             // 循环获取tds中内容
146             // 获取 <td>内容</td> 获取中间的内容
147             // 赋值给input标签中的value
148 
149         });
150     </script>
151 </body>
152 </html>
    View Code

    CSS处理

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

    案例：点赞

     1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .container{
 8             padding: 50px;
 9             border: 1px solid #dddddd;
10         }
11         .item{
12             position: relative;
13             width: 30px;
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 
39     <script src="jquery-1.12.4.js"></script>
40     <script>
41         $('.item').click(function () {
42             AddFavor(this);
43         });
44 
45         function AddFavor(self) {
46             // DOM对象
47             var fontSize = 15;
48             var top = 0;
49             var right = 0;
50             var opacity = 1;
51 
52             var tag = document.createElement('span');
53             $(tag).text('+1');
54             $(tag).css('color','green');
55             $(tag).css('position','absolute');
56             $(tag).css('fontSize',fontSize + "px");
57             $(tag).css('right',right + "px");
58             $(tag).css('top',top + 'px');
59             $(tag).css('opacity',opacity);
60             $(self).append(tag);
61 
62             var obj = setInterval(function () {
63                 fontSize = fontSize + 10;
64                 top = top - 10;
65                 right = right - 10;
66                 opacity = opacity - 0.1;
67 
68                 $(tag).css('fontSize',fontSize + "px");
69                 $(tag).css('right',right + "px");
70                 $(tag).css('top',top + 'px');
71                 $(tag).css('opacity',opacity);
72                 if(opacity < 0){
73                     clearInterval(obj);
74                     $(tag).remove();
75                 }
76             }, 40);
77 
78         }
79     </script>
80 
81 </body>
82 </html>
    View Code

    位置

      $(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)  # 获取边框 + 纯高度 + ？
       
       # 纯高度，边框，外边距，内边距

    二、操作元素

     
  • 相关阅读:
    hdu1593（find a way to escape）
    每日学习小记 11/02
    将博客搬至CSDN
    浏览器渲染机制
    适配器模式 The Adapter Pattern
    工厂方法模式 The Factory Method Pattern
    观察者模式 The Observer Pattern
    模板方法模式 The Template Method Pattern
    命令模式 The Command Pattern
    迭代器模式 The Iterator Pattern
  • 原文地址：https://www.cnblogs.com/l-w-q/p/6474492.html
Copyright © 2020-2023  润新知