HTML+CSS补充

主站布局

1  2  3  4     
       5      6      7     16 17 18     
      
       19         
       
20         
       
21         
       
22         
       
23         
       
24     
      
25 26 27 

响应式布局

1  2  3  4     
       5      6      7  8     22 23 24     
      
       25         
       
        26             
        用户名：27             
        28         
       
29         
       
        30             
        用户名：31             
        32         
       
33         
       
        34             
        用户名：35             
        36         
       
37         
       
        38             
        用户名：39             
        40         
       
41         
       
        42             
        用户名：43             
        44         
       
45         
       
        46             
        用户名：47             
        48         
       
49         
       
        50             
        用户名：51             
        52         
       
53     
      
54 55 

 DOM事件

绑定事件

1  2  3  4     
      5      6      7  8  9 10     揍你11     16 17 

1  2  3  4     
       5      6      7  8  9     
      
       10         
       11         
       12         
       13     
      
14     34 35 

THIS事件

1  2  3  4     
       5      6      7  8  9 10 11     
      12     
      
       战争
      
13     23 24 25 

获取焦点

1  2  3  4     
       5      6      7  8  9 10     11     12     33 34 

一个标签绑定多个相同事件

1  2  3     
     
      鸡建明
     
 4     12 

事件冒泡

1  2  3  4     
       5      6      7  8  9 10 11     
      
       鸡建明
      
12     20 21 

全局事件

1  2      3  4     13 

 jQuery

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

选择器

找到某个或者某类标签

根据ID查找  # ‘’ 都是必须的

$('#i1')    -> 找id=i1的标签 $('.i1')    -> 找class=i1的标签 $('div')    -> 找所有div标签 $('a')  找所有a标签 $('#i1 .c1 div') -> 先找到id=i1标签，在其子子孙孙中找class=c1标签，在上述基础上再进行找div标签 $('#i1>a') $('a,.c2,#i10')  -->拿到所有a  c2 #10的标签， and组合

层级

$('#i10  a')   在id=10的标签的子子孙孙里面找a标签

$('#i10>a') 儿子

:first    $('#i10 a:first')  第一个

:last

:eq()

属性：

$('[alex]') 具有alex属性的所有标签

$('[alex="123"]') alex属性等于123的标签

表单：

<input type='text'/>

<input type='text'/>

<input type='file'/>

<input type='password'/>

$("input[type='text']")简写成$(':text')

$(':disabled')  在表单里面找 disabled属性的标签

$('#tb:checkbox').prop('checked');获取值

$('#tb:checkbox').prop('checked'，true);  设置值

prop方法专门对checked和selected做操作

jQuery方法内置循环： $('#tb:checkbox').xxxx

$('#tb:checkbox').each(function(k){

// k当前索引

// this，DOM，当前循环的元素 $(this)

})

添加样式 移除样式

$('#i1').addClass('hide')

$('#i1').removeClass('hide')

筛选器

  $(this)  当前标签

$('#i1').parent()  父标签 $('#i1').children(':text')  获取所有孩子标签 $('#i1').next()   当前标签的下一个标签

$('#i1').nextAll()   当前标签的下面所有标签

$('#i1').prev()   当前标签的上一个标签 $('#i1').prevAll() $('#i1').siblings()  获取所有兄弟标签 $('#i1').find('.c1')   子子孙孙找查找

1   2   3   4     
        5       6       7      71  72  73     
      
 74     
      
        75         
       
         76             
        
          77                 
         
          菜单1
         
 78                 
         
           79                     
          小彩蛋 80                     
          小彩蛋 81                     
          小彩蛋 82                     
          小彩蛋 83                     
          小彩蛋 84                 
         
 85             
        
 86             
        
          87                 
         
          菜单2
         
 88                 
         
           89                     
          小彩蛋 90                     
          小彩蛋 91                     
          小彩蛋 92                     
          小彩蛋 93                     
          小彩蛋 94                 
         
 95             
        
 96             
        
          97                 
         
          菜单3
         
 98                 
         
           99                     
          小彩蛋100                     
          小彩蛋101                     
          小彩蛋102                     
          小彩蛋103                     
          小彩蛋104                 
         
105             
        
106             
        
         107                 
         
          菜单4
         
108                 
         
          109                     
          小彩蛋110                     
          小彩蛋111                     
          小彩蛋112                     
          小彩蛋113                     
          小彩蛋114                 
         
115             
        
116 117         
       
118         
       
        119             
        120             
        
         121                 
           122                     
123                     
124                     
125                     
126                     
127 128                 
129                 
           130                     
131                     
132                     
133                     
134                     
135 136                 
137                 
           138                     
139                     
140                     
141                     
142                     
143 144                 
145                 
           146                     
147                     
148                     
149                     
150                     
151 152                 
153             
         
          
           
1
           
c1.com
           
80
           
 编辑| 删除
           
查看更多
          
          
           
2
           
c2.com
           
80
           
 编辑| 删除
           
查看更多
          
          
           
3
           
c3.com
           
80
           
 编辑| 删除
           
查看更多
          
          
           
4
           
c4.com
           
80
           
 编辑| 删除
           
查看更多
          
         
        
154 155 156         
       
157     
      
158     $('.edit').click(function(){159 160     })161     $('td').delegate('.edit','click',function(){162 163     })164 165     
      
166     
      
       167         
       
序号：
168         
       
主机名：
169         
       
端口：
170         
       
171             确定 取消172         
173 174     
      
175     
      
176 177     178     226 227 

1  2  3  4     
       5      6      7     26 27 28     
      
       29         
       
        30             
        菜单131             
        菜单232             
        菜单333         
       
34         
       
        35             
        
         内容一
        
36             
        
         内容二
        
37             
        
         内容上
        
38         
       
39     
      
40     41     51 52 53 

 

链式编程

$('#i1').next().prev().find('.c1').parent() $('#i1').prevAll().each(function(){
      // this，当前循环的每一个标签 DOM对象     // $(this) })

操作

- addClass('x') - removeClass('x') - val()     - $('#i1').val()     # 获取值  针对表单类，input可以获取  select、textarea也可以     - $('#i1').val('ff') # 设置     PS:textarea,select - text()     - $('#i1').text()     # 获取值     - $('#i1').text('ff') # 设置 - html()     - $('#i1').html()     # 获取值     - $('#i1').html('ff') # 设置 - attr()     - $('#i1').attr('属性名') # 获取值     - $('#i1').attr('属性名','new') # 对属性设置值 - prop()     专门对于checkbox和radio提供的内容     $(':checkbox').attr('checked','checked');     $(':checkbox').prop('checked',true)     $(':checkbox').prop('checked',false) - css - scrollTop // $('#u1').append(tag); // $('#u1').after(tag); // $('#u1').prepend(tag); // $(tag).appendTo($('#u1')); // $(tag).empty()  #清空标签里面内容 不删除标签 // $(tag).remove()  #删掉标签 toggleClass('hide') #有了去掉 没有加上

$(..).text() # 获取文本内容

$(..).text(“<a>1</a>”) # 设置文本内容，整体传过去不解析

$(..).val()  获取值  针对input系列和selected标签

$(..).html()

$(..).html("<a>1</a>")

$('t1').css('样式名称'，‘样式值’)

var fontsize = 15;

$(tag).css('fontSize',fontSize + "px");

位置： $(window).scrollTop() 获取 $(window).scrollTop(0) 设置 offset().left 获取指定标签在html中的坐标 jquery转DOM对象：

var $v=$("#v"); //jQuery对象 var v=$v.get(0); //DOM对象 alert(v.checked) //检测这个checkbox是否被选中 DOM转jquery：

var v=document.getElementById("v"); //DOM对象 28 var $v=$(v); //jQuery对象

1  2  3  4     
       5      6      7     12 13 14 15     开关灯16     
      
       17         asdfasdfasdfasdf18     
      
19 20 21     全选22     取消23     取消24     
      
       25                 
         26                     
27                     
28                     
29                     
30                     
31                     
32 33                 
34                 
         35                     
36                     
37                     
38                     
39                     
40                     
41 42                 
43                 
         44                     
45                     
46                     
47                     
48                     
49                     
50 51                 
52                 
         53                     
54                     
55                     
56                     
57                     
58                     
59 60                 
61             
       
        
         
         
1
         
c1.com
         
80
         
 编辑| 删除
         
查看更多
        
        
         
         
2
         
c2.com
         
80
         
 编辑| 删除
         
查看更多
        
        
         
         
3
         
c3.com
         
80
         
 编辑| 删除
         
查看更多
        
        
         
         
4
         
c4.com
         
80
         
 编辑| 删除
         
查看更多
        
       
      
62     63     83 84 

1  2  3  4     
       5      6  7  8  9 10     11     12         三倍13         失败14         阿斯蒂芬15     16     17         三倍18         失败19         阿斯蒂芬20     21     22 23 

综合练习

1  2  3  4     
       5      6  7     20 21 22     
      
       23         
       
        24             
        赞25         
       
26     
      
27     
      
       28         
       
        29             
        赞30             
        +131         
       
32     
      
      
       33         
       
        34             
        赞35         
       
36     
      
      
       37         
       
        38             
        赞39         
       
40     
      
41 42     43     71 72 

1  2  3  4     
       5      6  7  8     
      
        9         
       
10         
       
11     
      
12 13 45 46