JQuery-------------模块、类库

集成了DOM/BOM/JS的类库

一、查找元素

　　DOM 10左右

　　JQuery:

　　　　选择器：

　　　　筛选：

　　ps:版本：

　　1.x:兼容性最好。1.12推荐

　　2.x

　　3.x

二、操作元素

三、参考的文档和手册：http://jquery.cuishifeng.cn/

先下载jsquery-1.12.4.js文件，复制到项目中，如图：

下载地址-》》、

 在<script></script>中，用jQuery或$加.进行调用：

       
               
      
                 
     
      123
     
      
            

 

 

 

 

转换：

jQuery内部调用的DOM对象，因此可以通过$('#i1')[0]来转换为DOM对象。　　

DOM对象转换为jQuery对象，用$()直接转换。

二、选择器：

直接找到某个或者某类标签：

1.id选择器：

     
      James
     
$('#id')

2.class 

     
      James
     
$('.c1')

3.标签选择器

找到所有a标签，$('a')

查找所有的a标签： 
     
      James
     
     
    
      f
     
     
    
      f    
      f
     
$('a')

*表示所有

$('*')

多查询(selector1,selector2,seletorN)

     
      James
     
     
    
      f
     
     
    
      f    
      f
     
$('#id,.c1,a')

4.组合：$('a,.c2,#i10')

5.层级选择器：

① ancestor descendant(查找包含的所有-子子孙孙)

     
    
      
        
       a    
      
    
      b    
      c
     
> $('#i1 a')< [​a​​, ​b​​, ​c​​]所有包含

② parent > child(只查找下一级所有-儿子)

     
    
      
        
       a    
      
    
      b    
      c
     
> $('#i1 > a')< [​b​​, ​c​​]下一级包含

③ prev + next(查找同级相邻的一个)

     
    
      
        
               
       a    
      
    
      b    
          
      c    
      d
     
> $('input + a')< [​a​​, ​c​​]同级向下匹配一个

④ prev ~ siblings(查找同级下面所有)

     
    
      
        
               
       a    
      
    
      b    
          
      c    
      d
     
> $('input ~ a')< [​a​​, ​c​​, ​d​​]同级向下匹配所有

 

6.基本筛选器：

操作html文件：

     
    
      
list item 1
    
      
list item 2
    
      
list item 3
    
      
list item 4
    
      
list item 5
     
ul.html

$('#i10 a:eq(1)')  索引的方式

①:first(获取匹配的第一个元素）

> $('ul li:first')< [
​list item 1​
​]

② :last（获取匹配的最后一个元素）

 

1 2	> $('ul li:last') < [< li >​list item 5​</ li >​]

③ :eq（匹配一个给定索引值的元素）

 

1 2	> $('ul li:eq(1)') < [< li >​list item 2​</ li >​]

④ :gt（匹配所有大于给定索引值的元素）

 

1 2	> $('ul li:gt(2)') < [< li >​list item 4​</ li >​, < li >​list item 5​</ li >​]

⑤ :lt （匹配所有小于给定索引值的元素）

 

1 2	> $('ul li:lt(2)') < [< li >​list item 1​</ li >​, < li >​list item 2​</ li >​]

⑥ 其他

 

:not(selector)    去除所有与给定选择器匹配的元素:even                 匹配所有索引值为偶数的元素，从 0 开始计:odd                   匹配所有索引值为奇数的元素，从 0 开始计数:lang(language)  选择指定语言的所有元素:header              匹配如 h1, h2, h3之类的标题元素:animated           匹配所有正在执行动画效果的元素:focus                  匹配当前获取焦点的元素:root                    选择该文档的根元素:targe                  选择由文档URI的格式化识别码表示的目标元素更多...

　　

7.属性选择器：

① [ ]（匹配包含给定属性的元素）

     
    
      
       123
      
    
      
       456
      
     
> $('div[James]')< [
     
      ​123​
     
​, 
     
      ​456​
     
​]匹配自定义属性

② [a="b"]（匹配给定的属性是某个特定值的元素）

     
    
      
       123
      
    
      
       456
      
     
> $('div[James="456"]')< [
     
      ​456​
     
​]匹配自定义属性以及值

③ 其他

[attribute!=value]    匹配所有不含有指定的属性，或者属性不等于特定值的元素[attribute^=value]    匹配给定的属性是以某些值开始的元素[attribute$=value]    匹配给定的属性是以某些值结尾的元素[attribute*=value]    匹配给定的属性是以包含某些值的元素[selector1][selector2][selectorN]    复合属性选择器，需要同时满足多个条件时使用

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

$('[alex="123"]')

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

实例一：多选、反选、全选：

    
                         
     
              
                   
        
选项
                    
IP
                    
端口
               
      
              
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
              
         
        

8.表单选择器

操作html文件：

     
  
        
        
        
        
        
        
        
        
        
        
        
      
     
form.html

① :input（匹配所有 input, textarea, select 和 button 元素）

1 2 3 4

> $(':input') < [< input  type=​"text">​, < input  type=​"checkbox">​, < input  type=​"radio">​, < input  type=​"image">​, < input  type=​"file">​, < input  type=​ "submit">​, < input  type=​"reset">​, < input  type=​"password">​, < input  type=​"button">​, < select >​…​</ select >​, < textarea >​</ textarea >​, < button >​</ button >​]

② :text（匹配所有的单行文本框）

1 2	> $(':text') < [< input  type=​"text">​]

③ :password（匹配所有密码框）

1 2	> $(':password') < [< input  type=​"password">​]

④ :radio（匹配所有单选按钮）

1 2	> $(':radio') < [< input  type=​"radio">​]

⑤ :checkbox（匹配所有复选框）

1 2	> $(':checkbox') < [< input  type=​"checkbox">​]

⑥ :submit（匹配所有提交按钮）

1 2	> (':submit') < [< input  type=​"submit">​, < button >​</ button >​]

⑦ :image（匹配所有图像域）

1 2	> $(':image') < [< input  type=​"image">​]

⑧ :reset（匹配所有重置按钮）

1 2	> $(':reset') < [< input  type=​"reset">​]

⑨ :button（匹配所有按钮）

1 2	(':button') [< input  type=​"button">​, < button >​</ button >​]

⑩ :file（匹配所有文件域）

1 2	> $(':file') < [< input  type=​"file">​]

六、表单对象属性

① :enabled（匹配所有可编辑元素）

     
  
        
      
     
> $("input:enabled")< []匹配可编辑元素

② :disabled（匹配所有不可编辑元素）

     
  
        
      
     
> $("input:disabled")< []匹配不可编辑元素

③ :checked（匹配所有选中的被选中元素）

     
  
        
        
      
     
> $("input:checked")< [, ]匹配选中的input框

④ :selected（匹配所有选中的option元素）

  Flowers  Gardens  Trees> $("select option:selected")< [Gardens]匹配选中的select下拉框

jQuery筛选器

一、查找

① next（紧邻的同级下一个元素）

Hello
Hello Again
     
    
      And Again
     
> $("p").next()< [​Hello Again​​]同级下一个

② prev（紧邻的同级上一个元素）

Hello
Hello Again
     
    
      And Again
     
> $("div").prev()< [​Hello Again​​]同级上一个

③ parent（匹配元素的唯一父元素）

     
    
      
Hello
    
      
Hello
     
> $("p").parent()< [
     
      ​
      
​Hello​
​
      
​Hello​
​
     
​]上一级父元素

④ children（匹配元素所有子元素的元素集合）

     
    
      
Hello
    
               
Hello
    
     
> $("div").children()< [
​Hello​
​, ​
​Hello​
​​]所有子元素集合

⑤ siblings（匹配元素所有同级元素的元素集合）

     
    
      
Hello
    
      Hello Again    
      
Hello
     
> $("span").siblings()< [
​Hello​
​, 
​Hello​
​]同级所有

⑥ find（搜索所有与指定表达式匹配的元素）

     
    
      
Hello
    
      Hello Again    
      
Hello
     
> ("div").find('span')< [​Hello Again​​]集合中检索指定元素

⑦ 其他

closest    从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 nextnextAll    查找当前元素之后所有的同辈元素nextUntil    查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止offsetParent    返回第一个匹配元素用于定位的父节点parents    取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选parentsUntil    查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止prevAll    查找当前元素之前所有的同辈元素prevUntil    查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止siblings    取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选更多...

查找实例:

    
                 
     
        
      
            
       
        标题一
       
            
       
        内容
       
        
      
        
      
            
       
        标题二
       
            
       
        内容
       
        
      
        
      
            
       
        标题三
       
            
       
        内容
       
        
      
    
     
        

二、过滤器：

① hasClass（检查当前的元素是否含有某个特定的类，如果有，则返回true）

# 给包含有某个类的元素进行一个动画
     
     
$("div").click(function(){  if ( $(this).hasClass("protected") )    $(this)      .animate({ left: -10 })      .animate({ left: 10 })      .animate({ left: -10 })      .animate({ left: 10 })      .animate({ left: 0 });})判断是否有特定的类

② 其他

eq        获取当前链式操作中第N个jQuery对象，返回jQuery对象first        获取第一个元素last        获取最后个元素filter        筛选出与指定表达式匹配的元素集合is        根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回truemap        将一组元素转换成其他数组（不论是否是元素数组）has        保留包含特定后代的元素，去掉那些不含有指定后代的元素not        从匹配元素的集合中删除与指定表达式匹配的元素slice        选取一个匹配的子集更多...

jQuery属性

一、HTML代码/文本/值

① html（获取和设置匹配元素的内容）

     
    
      
Hello
    
      Hello Again    
      
Hello
     
# 获取数据> $('span').html()< "Hello Again"# 更改数据> $('span').html('
James
')< [​
​James​
​​]html获取和设置内容

② text（获取和设置匹配元素的内容）　　

     
    
      
Hello
    
      Hello Again    
      
Hello
     
# 获取数据> $('span').text()< "Hello Again"# 更改数据> $('span').text('
James
')< [​
James
​​]> $('span').text()< "
James
"#此时的p是个字符而不是标签text获取和设置内容

③ val（获取和设置input、select框中的内容）

# 获取input框中的内容> $('input').val()< "默认值"# 重设input框中的内容> $('input').val('新输入的值')< [​]> $('input').val()< "新输入的值"获取和设置input框中内容

模态框实例:

    
                 添加    
     
              
       
                    
1.1.1.11
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.12
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.13
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.14
                    
80
                    
                编辑 | 删除            
               
          
     
    
     
            
      
                
                       
                   
      
            
      
                
                   
      
    
     
    
     
        

　　

二、CSS

① addClass（为每个匹配的元素添加指定的类名）

     
    
      And Again
     
> $('span').addClass('James')< [​And Again​​]添加class

② removeClass（从所有匹配的元素中删除全部或者指定的类）　　

     
    
      And Again
     
> $('span').removeClass('James')< [​And Again​​]删除class

③ toggleClass（如果存在就删除、不存在就添加）　　

     
    
      And Again
     
> ('span').toggleClass('James')< [​And Again​​]> $('span').toggleClass('James')> [​And Again​​]自动切换

    
                     
     
      asdfadef
     
        

　　

三、属性操作　　

① attr（设置或返回自定义属性值）　　

# 获取值> $('#i1').attr('type')< "button"> $('#i1').attr('value')< "开关"> $('#i1').attr('id')< "i1"# 设置值> $('#i1').attr('name','James')< [​]针对自定义属性

② removeAttr（删除自定义属性）

> $('#i1')< [​]> $('#i1').removeAttr('name')< [​]删除属性

③ prop（专门用于checkbox，radio）

# 判断> ('input:checkbox').prop('checked')< true# 设置> $('input:checkbox').prop('checked',false)< [​]> $('input:checkbox').prop('checked')< false# 禁用> $('input:checkbox').prop('disabled')< false> $('input:checkbox').prop('disabled',true)< [​]判断、设置和禁用

④ removeProp（用来删除由.prop()方法设置的属性集）

> $('input:checkbox').prop('disabled',true)< [​]> $('input:checkbox').removeProp('disabled')< [​]删除prop设置的属性

模态框改进：不靠顺序获取内容

    
                 添加    
     
              
       
                    
1.1.1.11
                    
80
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.12
                    
80
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.13
                    
80
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.14
                    
80
                    
80
                    
                编辑 | 删除            
               
          
     
    
     
            
      
                
                       
                       
                   
      
            
      
                
                   
      
    
     
    
     
        

 切换菜单实例：

    
                 
     
        
     
            
      
       菜单一
      
            
      
       菜单二
      
            
      
       菜单三
      
        
     
        
     
            
      
       内容一
      
            
      
       内容二
      
            
      
       内容三
      
        
     
                

上述实例用索引的方式实现：

    
                 
     
        
     
            
      
       菜单一
      
            
      
       菜单二
      
            
      
       菜单三
      
        
     
        
     
            
      
       内容一
      
            
      
       内容二
      
            
      
       内容三
      
        
     
                

jQuery文档处理

一、内部添加

① append（向每个匹配的元素内部追加内容）

    
                     
     
        
      
1
        
      
2
    
     
        

② prepend（向每个匹配的元素内部前置内容）

     
    
      
第一行
     
> $("div").prepend("
第零行
");< [
     
      ​
      
​第零行​
​
      
​第一行​
​
     
​]内部最前插入

二、外部添加

① after（在每个匹配的元素之后插入内容）

     
    
      
第一行
     
> $("div").after("
     
      下面另起一行
     
");< [
     
      ​
      
​第一行​
​
     
​]> $("div")< [
     
      ​
      
​第一行​
​
     
​, 
     
      ​下面另起一行​
     
​]同级下面添加

② before（在每个匹配的元素之前插入内容）

     
    
      
第一行
     
> $("div").before("
     
      上面另起一行
     
");< [
     
      ​
      
​第一行​
​
     
​]> $("div")< [
     
      ​上面另起一行​
     
​, 
     
      ​
      
​第一行​
​
     
​]同级上面添加

三、删除

① empty（删除匹配的元素集合中内容不删除标签）

     
    
      
第一行
     
> $("p").empty();< [
​
​]> $("div")< [
     
      ​
      
​
​
     
​]清空内容不含标签

② remove（删除匹配的元素集合包括标签）

     
    
      
第一行
     
> $("p").remove();< [
​第一行​
​]> $("div")< [
     
      ​
     
​]清空内容含标签

四、复制

① clone（克隆匹配的DOM元素并且选中这些克隆的副本）

     
    
      第零行    
      
第一行
     
> $("b").clone().insertBefore("p");< [​第零行​​]> $("div")< [
     
      ​
      ​第零行​​
      ​第零行​​
      
​第一行​
​
     
​]克隆

实例一、

    
                             
     
        
      
1
        
      
2
    
     
        

jQuery CSS

一、css

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

    
                 
     
        
      
            
       赞        
      
    
     
    
     
        
      
            
       赞        
      
    
     
    
     
        
      
            
       赞        
      
    
     
    
     
        
      
            
       赞        
      
    
     
        

① css（获取和设置匹配元素的样式属性）

     
    
      And Again
     
# 获取样式值> $('span').css('color')< "rgb(0, 0, 0)"# 设置样式值> $('span').css('color','red')< [​And Again​​]> $('span').css({'color':'#dddddd','background':'blue'})< [​And Again​​]> $('span')< [​And Again​​]获取和设置样式属性

二、 位置

① offset（获取和设置匹配元素在整个html的相对坐标）

$(window)：获取当前窗口的对象

$(window).scrollTop()  ---获取当前窗口的滚轮位置

$(window).scrollTop(0)---设置---返回滚轮顶部

offset ----指定标签在整个html文档中的坐标

$('#i1').offset()>object {top:8,left:8}$('#i2').offset().top()

　　

     
    
     
        
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
        
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
        
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
    
     
     
     
# 获取偏移量> $('#i2').offset()< Object {top: 108, left: 8}> $('#i2').offset().top< 108> $('#i2').offset().left< 8> $('#i2').offset({top:100,left:300})< [
     
       ">​
     
​]< $('#i2').offset()> Object {top: 100, left: 300}获取和设置相对坐标

② position（获取匹配元素相对父元素的坐标）

     
      000
     
     
    
      
       123
      
    
      
       456
      
     
> $('#i1').position()< Object {top: 100, left: 0}> $('#i1').position().top< 100获取相对父元素的坐标

③ scrollTop（获取和设置滚动条到顶部的坐标）

     
    
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
    
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
    
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
     
     
# 获取滚动条坐标> $(window).scrollTop()< 0> $('div').scrollTop()< 424# 设置滚动条坐标> $(window).scrollTop(200)< [Window]> $(window).scrollTop()< 200滚动条到顶部的坐标

④ scrollLeft（获取和设置滚动条到左侧的坐标）

     
    
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
    
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
    
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
      
asdf
     
     
# 获取> $(window).scrollLeft()< 0# 设置> $(window).scrollLeft(300)< [Window]> $(window).scrollLeft()< 300滚动条到左侧的坐标

三、尺寸

1 2 3 4 5 6

height        取得匹配元素当前计算的高度值（px） innerHeight        获取第一个匹配元素内部区域高度（包括补白、不包括边框） outerHeight        获取第一个匹配元素外部高度（默认包括补白和边框） width        取得第一个匹配元素当前计算的宽度值（px） innerWidth        获取第一个匹配元素内部区域宽度（包括补白、不包括边框） outerWidth        获取第一个匹配元素外部宽度（默认包括补白和边框）

jQuery事件

一、事件处理

① on（在选择元素上绑定一个或多个事件的事件处理函数）

1 2 3 4 5

# 点击p标签打印标签内容   $("p").on("click", function(){ alert( $(this).text() ); });

② off（off方法移除用on绑定的事件处理程序）

1 2 3

# 移出on绑定的事件   $("p").off()

③ bind&unbind（为每个匹配元素的特定事件绑定事件处理函数）

1 2 3 4 5

# 点击p标签打印标签内容   $("p").bind("click", function(){    alert( $(this).text() ); });

二、事件委派

① delegate（指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数）

1 2 3 4 5 6 7 8 9 10 11

#使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）--关键   # 当点击div的button标签时，隐藏或显示 p 元素 div style=" < p >这是一个段落。</ p > < button >请点击这里</ button > </ div >   $("div").delegate("button","click",function(){    $("p").slideToggle(); });

② undelegat（删除由 delegate() 方法添加的一个或多个事件处理程序）

1 2 3

# 从p元素删除由 delegate() 方法添加的所有事件处理器   $("p").undelegate();

三、事件

① click（给元素绑定事件，点击触发函数调用执行）

1 2 3

# 所有的p标签点击后隐藏   $("p").click( function () { $(this).hide(); });

dom中，不想让标签执行默认的事件，需要加上return并在自定义的function中，加上return false;，如果想继续执行默认事件，返回return true;，如：

    走你        

 使用jquery方式，实现上面效果：

    走你    走你2        

阻止事件发生：

当页面框架加载完成之后，自动执行

//表示当页面所有元素完全加载完毕后执行$().click(function){})//当页面框架加载完成之后执行$(function(){})

JQury扩展：

一、 $.extend({    'wangsen':function(){        return 'sb';    }})var v = $.wangsen(); //调用alter(v); 二、 $.fn.extend({
    　　"hangyang":function(){
    　　　　return 'db'; 　　} }) $('#i1').hangyang()  //调用

　　

　

 

jQuery练习

1、选择框 全选、取消以及反选（反选用到了三种方法）

    
             
     
                                      
                   
                        
选项
                        
IP
                        
端口
                   
              
              
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
                   
                        
                        
1.1.1.1
                        
80
                   
              
         
        选择框.html

2、两行代码搞定菜单栏（点击展开、其他关闭）

    
                 
     
        
      
            
       
        标题一
       
            
       
        内容
       
        
      
        
      
            
       
        标题二
       
            
       
        内容
       
        
      
        
      
            
       
        标题三
       
            
       
        内容
       
        
      
    
     
        菜单栏.html

3、模态对话框以及资产管理页面雏形

    
                     
     
              
       
                    
1.1.1.11
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.12
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.13
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.14
                    
80
                    
                编辑 | 删除            
               
          
     
    
     
        
      
            
                   
               
      
        
      
            
               
      
    
     
    
     
        资产管理页.html

4、点击开灯关灯效果

    
                     
     
      假装现在有效果了
     
        电源按钮.html

备注：利用toggleClass()

5、升级版菜单栏-购物商场点击不同的菜单显示不同的内容

① 菜单和内容设置对应的自定义属性

    
                 
     
        
      
            
       
        菜单一
       
            
       
        菜单二
       
            
       
        菜单三
       
        
      
        
      
            
       
        内容一
       
            
       
        内容二
       
            
       
        内容三
       
        
      
    
     
        升级版菜单栏.html

② 不设置对应的属性，直接用索引

    
                 
     
        
      
            
       
        菜单一
       
            
       
        菜单二
       
            
       
        菜单三
       
        
      
        
      
            
       
        内容一
       
            
       
        内容二
       
            
       
        内容三
       
        
      
    
     
        索引菜单栏.html

6、添加、删除、复制列表

    
                             
     
        
      
1
        
      
2
        
      
3
        
      
4
    
     
        增删复制.html

7、模态对话框完善删除和添加功能

    
                 添加    
     
              
       
                    
1.1.1.11
                    
80
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.12
                    
80
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.13
                    
80
                    
80
                    
                编辑 | 删除            
               
               
                    
1.1.1.14
                    
80
                    
80
                    
                编辑 | 删除            
               
          
     
    
     
        
      
            
                   
                   
               
      
        
      
            
                   
               
      
    
     
    
     
        完善版资产管理页.html

8、抽屉网点赞动态效果

    
                 
     
        
      
            
       赞        
      
    
     
    
     
        
      
            
       赞        
      
    
     
    
     
        
      
            
       赞        
      
    
     
    
     
        
      
            
       赞        
      
    
     
        点赞.html

备注：利用CSS和定时器

9、做个可以随鼠标移动的条框

    
             
     
        
      
        
      
    
     
拖拽框.html

10、事件委派delegate练习

    
         
     
    
      
1
    
      
2
     
    delegate绑定未来元素.html

11、多事件绑定执行顺序

    
             走你1    走你2        click绑定多个事件.html

12、登录表单验证

    
                 
     
        
      
       
      
        
      
       
      
        
      
       
      
        
      
       
      
        
      
       
      
        
          
     
        表单验证.html

13、后台管理编辑框 (重要)

$(function(){    BindSingleCheck('#edit_mode', '#tb1');});function BindSingleCheck(mode, tb){    $(tb).find(':checkbox').bind('click', function(){        var $tr = $(this).parent().parent();        if($(mode).hasClass('editing')){            if($(this).prop('checked')){                RowIntoEdit($tr);            }else{                RowOutEdit($tr);            }        }    });}function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){    var sel= document.createElement('select');    $.each(attrs,function(k,v){        $(sel).attr(k,v);    });    $.each(csses,function(k,v){        $(sel).css(k,v);    });    $.each(option_dict,function(k,v){        var opt1=document.createElement('option');        var sel_text = v[item_value];        var sel_value = v[item_key];        if(sel_value==current_val){            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));        }else{            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));        }    });    return sel;}STATUS = [    {'id': 1, 'value': "在线"},    {'id': 2, 'value': "下线"}];BUSINESS = [    {'id': 1, 'value': "车上会"},    {'id': 2, 'value': "二手车"}];function RowIntoEdit($tr){    $tr.children().each(function(){        if($(this).attr('edit') == "true"){            if($(this).attr('edit-type') == "select"){                var select_val = $(this).attr('sel-val');                var global_key = $(this).attr('global-key');                var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);                $(this).html(selelct_tag);            }else{                var orgin_value = $(this).text();                var temp = "";                $(this).html(temp);            }        }    });}function RowOutEdit($tr){    $tr.children().each(function(){        if($(this).attr('edit') == "true"){            if($(this).attr('edit-type') == "select"){                var new_val = $(this).children(':first').val();                var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();                $(this).attr('sel-val', new_val);                $(this).text(new_text);            }else{                var orgin_value = $(this).children().first().val();                $(this).text(orgin_value);            }        }    });}function CheckAll(mode, tb){    if($(mode).hasClass('editing')){        $(tb).children().each(function(){            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');            if(check_box.prop('checked')){            }else{                check_box.prop('checked',true);                RowIntoEdit(tr);            }        });    }else{        $(tb).find(':checkbox').prop('checked', true);    }}function CheckReverse(mode, tb){    if($(mode).hasClass('editing')){        $(tb).children().each(function(){            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');            if(check_box.prop('checked')){                check_box.prop('checked',false);                RowOutEdit(tr);            }else{                check_box.prop('checked',true);                RowIntoEdit(tr);            }        });    }else{        //        $(tb).children().each(function(){            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');            if(check_box.prop('checked')){                check_box.prop('checked',false);            }else{                check_box.prop('checked',true);            }        });    }}function CheckCancel(mode, tb){    if($(mode).hasClass('editing')){        $(tb).children().each(function(){            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');            if(check_box.prop('checked')){                check_box.prop('checked',false);                RowOutEdit(tr);            }else{            }        });    }else{        $(tb).find(':checkbox').prop('checked', false);    }}function EditMode(ths, tb){    if($(ths).hasClass('editing')){        $(ths).removeClass('editing');        $(tb).children().each(function(){            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');            if(check_box.prop('checked')){                RowOutEdit(tr);            }else{            }        });    }else{        $(ths).addClass('editing');        $(tb).children().each(function(){            var tr = $(this);            var check_box = tr.children().first().find(':checkbox');            if(check_box.prop('checked')){                RowIntoEdit(tr);            }else{            }        });    }}edit_row.js

    
                 
     
        
              
              
              
      进入编辑模式    
     
    
     
              
               
                    
选择
                    
主机名
                    
端口
                    
状态
               
              
              
                   
                        
                        
v1
                        
v11
                        
在线
                   
                   
                        
                        
v1
                        
v11
                        
下线
                   
                   
                        
                        
v1
                        
v11
                        
在线
                   
              
         
            edit_row.html