jQuery和Dom关系以及jQuery版本

http://jquery.cuishifeng.cn/index.html
jQuery学习参考网址

jQuery封装了Dom、Bom、JavaScript，可以快速的使用其相关功能和扩展

jQuery版本：

  • 版本1系列
  • 版本2系列
  • 版本3系列
    推荐使用版本1，对老版本(IE8以下)浏览器兼容性更好，且版本1的jQuery功能在高版本中也是适用的。 高版本的jQuery在老版本浏览器中不适用。
    版本1中最高的版本是1.12

http://code.jquery.com/jquery/
jQuery下载地址

上图：下载后的jQuery文件要放入目录中，然后引入




    
    Title




    
123

代码说明：

jQuery("#i1") 用来jQuery关联i1这个标签； $("#i1")是一样的，可以用$符号来代替jquery。

上图：
使用jQuery和document.getElementById都可以关联i1这个标签；
分别称为jQuery对象和document对象；
jQuery和document各自有相似的功能，也有不同的功能；
jQuery与document可以相互转换，转换后可以使用对方不同的功能。

上图：
jQuery关联使用$('#i1')[0]就转换成document对象了。

上图：
将document转成jQuery对象。

jQuery选择器

id选择器




    
    Title




    
123

class选择器




    
    Title




    
123

标签选择器




    
    Title




    

        a
        b
    

    

        c
        d

组合标签




    
    Title




    

        a
        b
    

    

        c
        d

上图：可以看到有4个a标签

上图：a标签和c2标签的组合

上图：三个组合选择

层级选择器

  • 多层选择



    
    Title




    
    

        c
        d

代码说明：

选择了#i10下的3个a标签

  • 子层选择



    
    Title




    
    

        c
        d

first

    
    
  • list item 1
    • 
    
  • list item 2
    • 
    
  • list item 3
    • 
    
  • list item 4
    • 
    
  • list item 5
    •

其他基本选择器

  • eq



    
    Title




    
    

        c
        d

属性选择器




    
    Title




    
    

        c
        d

表单对象属性




    
    Title




        

    
    

        c
        d

上图：因为disabled输入框是不可编辑的

多选反选取消

全选、取消




    
    Title



    
    
    

    
      
             
            

                选项
                IP
                PORT
            

        
         
            

                
                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

上2图：点击全选和取消都可以生效。

反选

  • dom与jQuery对象区分



    
    Title



    
    
    

    

        
            

                选项
                IP
                PORT
            

        
        
            

                
                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

上图：点击反选，会将每个元素（this）打印出来。




    
    Title



    
    
    

    

        
            

                选项
                IP
                PORT
            

        
        
            

                
                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

上图：将每个CheckBox的下标给打印出来




    
    Title



    
    
    

    

        
            

                选项
                IP
                PORT
            

        
        
            

                
                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

上图：成功转换后，可以看到jQuery对象都被[]给括起来的。

  • 使用dom方法



    
    Title



    
    
    

    

        
            

                选项
                IP
                PORT
            

        
        
            

                
                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

上2图：选中其中两个，然后点击反选，起到了反选效果。

  • 使用jQuery方法



    
    Title



    
    
    

    

        
            

                选项
                IP
                PORT
            

        
        
            

                
                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

代码说明：

如果是一个选项$(this).prop('checked')就表示对checked进行了选择，如果是$(this).prop('checked',false)就表示对checked进行赋值。

上2图：使用jQuery方法，做出反选效果。

  • jQuery三元运算



    
    Title



    
    
    

    

        
            

                选项
                IP
                PORT
            

        
        
            

                
                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

上2图：使用jQuery三元运算的方式做出反选效果。