Day009 - js应用和jQuery（2018-11-13）

一、流氓广告

• 使用document.defaultView.getComputedStyle(div1)去读取div1元素的CSS属性
• 鼠标按下 - mousedown
  鼠标移动 - mousemove
  鼠标松开 - mouseup
  clientX / clientY - 鼠标的横纵坐标evt.clientX

    
        
        
        
    
    
        

            此广告位招租
            关闭
        
        
    

二、用jQuery重写表格

• jQuery: Write Less Do More
• 加载本地的jQuery文件适合开发和测试时使用:
  用cdn服务器来加载jQuery的速度更快，商业项目通过cdn服务器来加速获取jQurey的文件更好:
  
• 写在$里面的函数,是页面加载完成后自动执行的函数 $(function (){});
• $根据样式表选择器获取元素,获取到的不是原生的JS对象,而是经过jQuery封装过后的对象(有更多的方法方便操作),绑定事件是on,反绑定是off
• css()读取与修改,一个参数是读取,两个参数是修改$('#data').css('visibility', 'hidden');
• hide和fideOut是动画效果$('#data').hide(2000);
• text()修改纯文本,传''修改为空,传参就是给该文本赋值,不传参就是读取
  html()可以修改带标签/实体替换符的内容,传参就是给该文本赋值,不传参就是读取
  val()可以读取表单内容，传参修改，不传读取
• jQuery支持级联式编程
• 在js中使用{}代表一个对象,JavaScript Object Notation == JSON
• 可以使用传入对象的方法修改多个属性

    
        
        
        
    
    
        

            
数据统计表
            

                
姓名
                
年龄
                
性别
                
身高
                
体重
            
            

                
Item1
                
Item2
                
Item3
                
Item4
                
Item5
            
            

                
Item1
                
Item2
                
Item3
                
Item4
                
Item5
            
            

                
Item1
                
Item2
                
Item3
                
Item4
                
Item5
            
            

                
Item1
                
Item2
                
Item3
                
Item4
                
Item5
            
            

                
Item1
                
Item2
                
Item3
                
Item4
                
Item5
            
            

                
Item1
                
Item2
                
Item3
                
Item4
                
Item5
            
            
        
        

            隔行换色
            清除数据
            删单元格
            隐藏表格
        
        
        
        
        
        
    

三、jQuery实现动态列表

• $函数的第一种用法:$函数的参数是另一个函数
  传入的函数是页面加载完成之后要执行的回调函数
  $(document).ready(function(){});(老版本的写法)
• $函数的第二种用法:参数是一个选择器字符串
  获取元素并得到与之对应的jQuery对象(伪数组)
• $函数的第三种用法:参数是一个标签字符串
  创建新元素,并得到与之对应的jQuery对象
• $函数的第四种用法:参数是原生JavaScript对象
  将原生JS对象包装成对应的jQuery对象
• jQuery对象是一个伪数组,get(0)可以获得第一个原生JS对象
  对jQuery对象使用下标运算或调用get(index)方法会得到原生JS对象

    
        
        
        
    
    
        

            

                
                
苹果×
                
香蕉×
                
火龙果×
                
西瓜×
            
            
            
        
        
        
        
        
    

四、面向对象的方块拖拽

• 可以利用this给js或者jQuery对象动态添加属性，this所指的是当前对象
• each可以遍历,参数是回调函数,回调函数的参数是下标,元素
• z-index可以调元素的层数,数值越高越在上面