JQuery实例

前面学习了原生的DOM，现在看看如何使用JQuery。JQuery建议使用1.12的版本，这样对旧版本的IE兼容性比较好。

例1.添加，删除class

知识要点：

1. 通过

点击hide按钮切换隐藏效果

例2. 全选和反选

这个例子在前面的Dom里面出现过，现在看看JQuery如何实现

知识点：

1. 选择器可以组合使用 比如 $('#tb :checkbox') 表示id=tb下面所有的checkbox元素

2. 对于checkbox的属性，通过prop()来实现，如果是自定义的其他的属性，通过attr()实现

3. each()可以实现循环，循环里面如果输出this,可以看见他是一个dom的格式，如果把他转换成jquery对象的格式（数组格式），可以通过$(this)实现，如果想把jquery转为dom的格式，那么直接取第一个数组的值就行了，例子里面实现了3种方式，dom，jquery以及三元运算符的格式

                        
        
            
                
选项
                
IP
                
PORT
            
        
        
            
                
                
1.1.1.1
                
80
            
            
                
                
1.1.1.1
                
80
            
            
                
                
1.1.1.1
                
80
            
        
    
        

例3 隐藏菜单

知识点：

1. click的事件可以直接选择到标签之后执行，这个比在html里面使用onclick事件要好很多。

2. Jquery支持链式的编程，因此如下所示可以一行实现很多功能

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

例4. 复制，删除文本框

clone（）克隆标签

find（）查找标签

attr（）添加一个事件

            
        
             +                     
    
        

效果：点击+自动复制一行，点击-删除自己所在

例5. 绑定事件-例2的升级版

例2里面我们需要给每个标签都手动的添加onclick事件，如果可以统一绑定事件，会省事很多。有两种方式，如下所示;

$(function){

....

}里面执行的...会在文档树加载之后自动执行，不会等待所有的图片内容的加载

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

例6 事件的延迟绑定

比如通过javascript创建的新标签，如何让他自动绑定事件？可以通过delegate实现

                
        
123
        
456
        
789
    
        

例7　模态对话框　（高级版）

之前用DOM实现过模态对话框，现在用JQuery实现同样的功能。

知识要点：

1.模态对话框的HTML和CSS布局，3层，最上层居中，中间一个阴影层，最下面是主界面，上面两层默认隐藏，通过z-index区分上下顺序

2. 可以通过attr()方法来获取和设置自定义的属性；如果是checkbox或者radio，那么通过prop()方法来获取和设定属性

3.通过属性来定位元素，比如 $("[editable='false']")则可以获取editable属性为false的那个标签元素

4. 文本编辑，对于InnerText的值是通过text()实现，对于input的表单内容则是通过val()实现

5. 添加class，删除class通过addClass()和removeClass()实现

6. delegate 延迟绑定的实现，一般用于未来的新的标签，比如通过脚本创建的标签

7. 动态的创建标签，可以直接插入html字符串或者通过CreateElement()实现

                添加    
        
            
1.1.1.11
            
80
            
80
            
                编辑 | 删除            
        
        
            
1.1.1.12
            
80
            
80
            
                编辑 | 删除            
        
        
            
1.1.1.13
            
80
            
80
            
                编辑 | 删除            
        
        
            
1.1.1.14
            
80
            
80
            
                编辑 | 删除            
        
    
    
        
            
                主机名                            
            
                端口                            
            
                IP地址                            
        
        
                                            
    
    
        

例8 TAB效果

知识点：

1.AddClass和RemoveClass的使用

2.小技巧，通过自定义的属性值进行匹配，定位标签的时候因为格式为[attr='value']的格式，因此做了一个字符串的拼接

3.注释掉的代码是另外一种方法，可以通过索引来进行匹配

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

例9 点赞

知识点：

1. Jquery里面通过css()来改变一个标签的style

2. 思路和Dom一样的，动态创建一个span标签，通过定时器改变大小和位置，当透明度低于一定程度，结束定时器

                
        
            赞        
    
    
        
            赞        
    
    
        
            赞        
    
    
        
            赞        
    
        

例10 鼠标移动窗口

下面这个例子可以通过鼠标拖曳窗口

知识点：

1. offset()显示的是当前标签在整个html里面的坐标，还有一个position()显示的是在absolute在relative标签里面的位置

2. event=e || windows.event 是为了兼容旧版的IE来获取当前的事件， _event.clientX和_event.clientY这里获取的是鼠标的坐标

3. 绑定事件有几种方式，比如直接通过标签执行 $(''#title).mousover(function(){}); 或者通过on绑定，off接触绑定，例如$(''#title).on('mousemove',function(){}), $(''#title).off('mousemove'); 或者可以通bind和unbind绑定和接触绑定，比如例5；最后还可以通过delegate()来延迟绑定，比如例6

例11 阻止事件的发生

有的时候，我们会希望根据一定的条件阻止某个事件的发生，比如表单验证，如果不符合格式或者内容，则无法提交。

知识点：

默认情况下，当我们执行了自定义的Click事件后，他会自动跳转到href指定的地址。但是如果我们把自定义的事件返回值为false，那么他就不会执行后面的操作

            走你1    走你2        

例12 JQuery的扩展事件

如果希望自己定义一个事件，然后让JQuery来调用的，可以通过extend

知识点：

1. extend的使用有两种方式：$. extend('name':function(){})定义，然后$.name来调用； 或者是$.fn.extend()定义，然后通过$('#id').name的方式来调用

2. 可以把这些扩展方法都写入一个专门的js文件，注意在plugin文件里面，我们是把他放在了一个自执行的方法里面，这个是为了避免和其他js文件里面变量名的冲突。这里我可以直接把JQuery作为参数传进去，这样arg.extend 就相当于$.extend了

plugin1.js

(function (arg) {    var status = 1;    arg.extend({       'Hellow': function () {           return 'HOHOH';       }    });})(jQuery);

test.html