HTML基础（jQuery）

3、属性

例子说明：用经典的全选按钮来说明用法。

    
    


    

        
        
        
        
            
            
                
                    1
                
                
                    2
                
                
                    3
                
            
        
    

    
    
        function Select(){
            //$('#tb1') 找到id为tb1的元素
            //.find(':checkbox')    该元素下所有类型为checkbox的input元素
            //.prop('checked',true) 并添加属性checked=true
            $('#tb1').find(':checkbox').prop('checked',true);
        }

        function Reverse(){
            //反选函数的作用是：选中的变成不选中，不选中的变成选中
            $('#tb1').find(':checkbox').each(function(){    //找到id为tb1标签下所有的类型为checkbox的元素进行循环
                var content = $(this).next();   //查找被循环元素的下一个元素
                console.log($(content).text()); //获取该元素的文本内容
                if($(this).prop('checked')){    //判断是否已经选中：this代表的就是正在被循环的元素，获取其checked属性的值
                    $(this).prop('checked',false);          //为该元素添加属性
                    $(content).text('选中的变成不选中');    //修改该元素的文本内容
                }else{
                    $(this).prop('checked',true);
                    $(content).text('不选中的变成选中');
                }
            })
        }

        function Cancel(){
            $('#tb1').find(':checkbox').prop('checked',false);  //添加属性checked=false，也就是不选中
        }
    

4、CSS

例子说明：使用大多数网站都有用到的“回到顶部”按钮来举例。

    
    


    
这是顶部

    
    
这是底部


    
    
        /*
        scrollTop用法：
        读取：$("选择器").scrollTop()     //获取当前滚动条距离选择器顶部距离
        设置：$("选择器").scrollTop(1000) //设置滚动条距离选择器顶部距离为1000px；
        其他知识点：
        $(window).height();     //获取当前浏览器可视部分的高度，也就是说在浏览器窗口改变大小时，这个值也会改变;
        $(document).height();   //获取整个页面的高度(包含不可视部分)，这个值是固定的，不会随浏览器窗口大小而改变;
         */
         
        function GoTop(){
            $(document).scrollTop(0);     //设置滚动条距离当前页面顶部的距离为0，也就达到返回顶部的效果
            var bcolor = $('#d1').css('background-color');  //获取id为d1的元素的background-color样式属性的值
            console.log(bcolor);
            $('#d1').css('background-color','blue');       //设定id为d1的元素的background-color样式属性的值为green
        }

        function GoBottom(){
            var dpx = $(document).height();     //获取当前页面的高度
            var wpx = $(window).height();       //获取当前浏览器窗口的高度
            console.log(dpx);
            console.log(wpx);
            $(window).scrollTop(dpx);           //设置滚动条距离当前页面顶部的距离为当前页面的高度，也就达到返回底部的效果
            $('#d1').css('background-color','green');
        }