jQuery

1 利用jQuery实现浮层弹出框作业

代码块



    
    
    
    



点我弹出
我是底层


    我是弹出浮层
    关闭

2 利用jquery切换元素样式的颜色($('#d1').toggleClass('c1');)

代码块



    
    
    
    

3 选择器筛选器练习

代码块

根据id查找，查找id 是i1的：$('#i1');

根据标签查找：$('h2');

查找input类型的：$('input');

查找class是c1的：$('.c1');

查找class为c1样式，或者标签为h2: $('.c1,h2');

查找class为c1样式，id为p3的：$('.c1,#p3');

查询form标签里面子子孙孙的所有input: $("form input")

查询label标签里面的儿子input:$('label>input');

查询和label标签同级紧跟的input:$('label+input');

查询id为p2的同级后面的li：$('#p2~li');

查询id为f1里面的第一个input:  $("#f1 input:first") 或者 $("#f1 input").first()

查询id为my-checkbox里面的最后一个input:    $("#my-checkbox input:last") 或者 $("#my-checkbox input").last()

查询id为my-checkbox中没有默认选定的：$("#my-checkbox input:not(':checked')")

4 左侧手风琴折叠菜单

代码块
HTML结构如下：



    
    
    
    




    

        
菜单一
        

            
内容1
            
内容2
            
内容3
        
    
    

        
菜单二
        

            
内容1
            
内容2
            
内容3
        
    
    

        
菜单三
        

            
内容1
            
内容2
            
内容3