2019年1月18日 周五

一、jquery事件操作

1、事件的写法

$('div').click(function(){alert(123);});         //事件函数
    $('div').on('click',function(){alert(123);});  //事件绑定
    $('div').on('click mouseover',function(){alert(123);});  //绑定多个事件写法（做同一件事）
    $('div').on({'click' : function(){alert(123);},'mouseover' : function(){alert(456);}});  //绑定多个事件json写法（做不同事）
    $('div').one('click',function(){ alert(123);});  //只执行事件一次

2、解除事件绑定

 $('div').on('click mouseover',function(){
        alert(123);
        $('div').off('mouseover');
    }); //解除绑定事件写法

3、JQ的event

 $('div').click(function(ev){
        //ev : event对象
        //ev.pageX/Y(相对于文档的) : clientX(相对于可视区) 鼠标坐标
        //ev.which : keyCode  //键盘按键
        ev.preventDefault();  //阻止默认事件
        ev.stopPropagation(); //阻止冒泡的操作
        return false;   //阻止默认事件 + 阻止冒泡的操作
    });

4、JQ的键盘事件

 $(document).keydown(function(ev) { 
        switch(ev.which){
            case 37:alert("left"); break;
            case 38:alert("top"); break;
            case 39:alert("right"); break;
            case 40:alert("bottom"); break;
            case 13:alert("enter"); break;
        }
    }); 

5、jquery的工具方法

• JQ的方法（如：$().css()、$().html()、$().val()等）:只能给JQ对象用

• 而工具方法（如：$.xxx()、$.yyy()、$.zzz()等）不仅可以给JQ用，也可以给原生JS用

  $.trim(str);   //去掉字符串前后空格
  ​
  $.inArray('b',arr); //类似于 indexOf，如果第一个参数不存在返回-1
  ​
  $.proxy(); 改变this指向，例如：
  function show(){alert(this);}
  $.proxy(show , document)();
  ​
  $.noConflict(); //防止冲突的 （可以将$的操控权交给其他js库保证兼容性），例如：
  var $z= $.noConflict();  
  var $ = 10;
  $z(function(){
  $z('body').css('background','red');});

6、jquery的高级方法

（1）节点筛选方法

JQ对象.siblings(); //找所有的兄弟节点，参数是筛选功能
JQ对象.nextAll(); //下面所有兄弟节点，参数是筛选功能
JQ对象.prevAll(); //上面所有兄弟节点，参数是筛选功能
JQ对象.parentsUntil()/nextUntil()/prevUntil(); //截止第一次出现筛选条件之前，无参数时和上面一样
JQ对象.clone(); //复制元素，可以接收一个参数true ，作用可以复制之前的操作。
//注意：为了防止id重复，应该用class做clone，例如：
$('.box1').clone().appendTo('.box');

(2)元素的包装

JQ对象.wrap();  //包装
JQ对象.wrapAll();  //整体包装
JQ对象.wrapInner();  //内部包装
JQ对象.unwrap();  //删除包装 ( 删除父级 : 不包括body)，例如：
$('span').wrap('<div>');
$('span').wrapAll('<div>');
$('span').wrapInner('<div>');

(3)向元素中添加

JQ对象.add()  //一个或多个元素添加到匹配的元素集合
var elem = $('div');
var elem2 = elem.add('span');
elem.css('color','red');
elem2.css('background','yellow');

(4)集合的截取

JQ对象.slice(a,b)  //选中a到b（前）的元素
$('li').slice(1,4).css('background','red');

(5)delegate() 事件委托 undelegate() 终止事件委托 优点：1、不用循环（同时会提高性能）；2、js添加的元素也会获得事件

$('li').on('click',function(){
        this.style.background = 'red';
    });
    $('ul').delegate('li','click',function(){
        this.style.background = 'red';
        $('ul').undelegate();
    });

(6) trigger() 主动触发，适合自定义事件：

$('#div1').on('show',function(){alert(123);});
$('#div1').on('show',function(){alert(456);});
$('#div1').trigger('show');

二、算法题

输入一个递增排序的数组和一个数字S，在数组中查找两个数，使得他们的和正好是S，如果有多对数字的和等于S，输出两个数的乘积最小的。

public ArrayList<Integer> FindNumbersWithSum(int [] array,int sum) {
        ArrayList<Integer> list = new ArrayList<Integer>();
        if(array.length<2)
            return list;
        int low=0;
        int high=array.length-1;
        while (high>low&&array[low]+array[high]!=sum){
            if(array[low]+array[high]>sum){
                high--;
            }else{
                low++;
            }
        }
        if(low!=high&&array[low]+array[high]==sum){
            list.add(array[low]);
            list.add(array[high]);
        }
        return list;
    }