Jquery小札记

获取 select 选中的option值

/* 获取select的选中的option值，需要用:selected过滤器 */
setStatue option:selected //IE全兼容;

 

链式操作，obj 根据条件切换多个预设的 class

// it's a function when <select></select> on change;
　　function onChange(){
　　　　var value = $("#capColor").val();  // get current select.selected.value;  value ==  1 || 2 || 3

　　　　// three toggleClass default is not execute, when <select/> onchange,get that value then into this.toggleClass execute boolean operation;
　　　　$("#cap")
　　　　.toggleClass("black-cap", value == 1)
　　　　.toggleClass("orange-cap", value == 2)
　　　　.toggleClass("blue-cap", value == 3);
　　　　
　　}

$.each()

译自官方手册:jQuery.each()

对数组或对对象内容进行循环处理

jQuery.each( collection, callback(indexInArray, valueOfElement) )

collection 遍历的对象或数组

callback(indexInArray, valueOfElement) 在每一个对象上调用的函数

 

说明:

一个通用的遍历函数 , 可以用来遍历对象和数组. 数组和含有一个length属性的伪数组对象 (伪数组对象如function的arguments对象)以数字索引进行遍历,从0到length-1, 其它的对象通过的属性进行遍历.

$.each()与$(selector).each()不同, 后者专用于jquery对象的遍历, 前者可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为一个对象—尽管是一个字符串或是一个数字),方法会返回被遍历对象的第一参数

 

 

jQuery使用on()绑定动态生成元素的事件无效的问题

jQuery的on()方法可以绑定动态生成元素的事件，但是在实际使用时发现无效。如下HTML：

<p>
    <a>123</a>
</p>

使用如下方式，对静态元素有效，但是绑定动态生成的a元素的事件时无效：

$('a').on('mouseenter', function(){
    ............
});

需要绑定a的父级元素（此元素必须为静态元素，不是后来动态生成的），然后设定on()方法的selector参数才行：

$('p').on('mouseenter', 'a', function(){
    ..............
});

 

匿名对象的调用

    console.log(
            {1: 'sam', age: '19'}[1], 
            {1: 'sam', age: '19'}['age'] 
    );
    // 'sam  19'  printed in console;

 

模拟真实的a标签点击

html:

    <a class="goToHref hide" href="#" target="_blank"></a>
    <!-- goToHref simulate a normal link when restaurant item was click -->

js:

    // bind restaurant item click event;
    $('.rest_item_group').on('click', '.rest_item', function (){
        var realHref = $(this).find('a:first').attr('href');
        $('.goToHref').attr('href', realHref);
        $('.goToHref')[0].click();
    });