html_day5 jq运用

1.jquery它是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

• Jquery它是一个库(框架)，必须先引入。
• jquery-1.8.3.js：一般用于学习阶段。
  jquery-1.8.3.min.js：用于项目使用阶段（去掉格式更小）

$(function(){
    Jquery代码
});

    
        
        
        
        
        
    
    
        ss
        
    

2.获取元素

JS:document.getElementById();
JQ:$(“#id”);

3.Jquery对象与DOM对象转换

    
        
        
        
        
    
    
        
        


        sssss
    

4.Jquery的效果

图片.png

5.弹出广告

6.Toggle的使用

    
        
        
        
        
    
    
        

        ![](../img/registImg.jpg)
    

7.jquery的选择器

• query的选择器id选择器：$(“#id名称”);
  元素选择器：$(“元素名称”);
  类选择器：$(“.类
  名”);
  通配符：*
  多个选择器共用(并集)

    
        
        
        
        
               
    
    
        
        
        
        
        
        

        

            

                111
            
        
        
        

            

                222
            
            

                333
            
        
        
        

            

                444
            
            

                555
            
            

                666
            
        
        
        
            
        
    

• 层级选择器

图片.png

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(所有类目下)
parent > child : 在给定的父元素下匹配所有的子元素(一层)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的同级的一个)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(所有同级)

    
        
        
        
        
        
        
        
    
    
        
        
        
        
        
        

        

            

                111
            
        
        
        

            

                222
            
            

                333
            
        
        
        

            

                444
            
            

                555
            
            

                666
            
        
        
        
            
        
    

• 基本过滤选择器
  $('li').first() 等价于：$(“li:first”)

图片.png

    
        
        
        
        
        
        
    
    
        
        
        
        
        
        

        

            

                111
            
        
        
        

            

                222
            
            

                333
            
        
        
        

            

                444
            
            

                555
            
            

                666
            
        
        
        
            
        
    

• 属性选择器

图片.png

    
        
        
        
        
        
    
    
        
        
        
        

        

            

                111
            
        
        
        

            

                222
            
            

                333
            
        
        
        

            

                444
            
            

                555
            
            

                666
            
        
        
        
            
        
    

• 表单选择器

图片.png

8.jq隔行换色

9.JQ完成全选和全不选

jquery的属性操作方法 prop()


attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)