锋利的 jQuery 学习笔记

一、选择器：

:eq() - 选取带有指定 index 值的元素，从0开始计数

var $li = $( ‘ul li : eq(1)’ ); //获取当前 ul 节点里第2个 li 节点
var li_txt = $li.text(); //获取文本内容
alert( li_txt ); // 打印文本内容

高级选择器：
get()	方法获取由选择器指定的 DOM 元素。$().get(2)
find()	jq提供的一个等价的后代选择器。（子选择器+孙选择器集合）
chidren()	等价子选择器。（子选择器） 同 #div > p 的形式，从右往左匹配执行
prev()	同一个同级的上一个节点元素，同next()相反是后一个。
siblings()	上下同级的所有元素，prev() 和 nextAll() 的简化，
	选择器如果不传参，则就相当于传递了 * 号（全局），会造成性能浪费，所以最好带参数。

$(“div”).find(".p").addClass(“wang”)

查找 div中的子元素，且子元素的class有p,给这个子元素添加wang的class

$('#box').find('p') - #box下的所有p标签

执行的速度是最快 的，会使用getElementById() - 对应 #box、ByName、ByTagName - 对应 p 和 querySelectorAll() - 执行css样式；

如果一开始对`$(’#box’)进行赋值，那么jq 就对其变量进行缓存，速度会更快：
var box = $(’#box’);
var p = box.find(‘p’);

//get() 返回原生的 document节点
$(function() {
//if() 的话返回值就是 true 或者 false
    if($('#box').get(0)) {  //如果$('#box').get(0) / （第一个box）值存在，就执行下面的代码
        $('#box').css('color','red');
    }
})

$(’ #box .pull-left ') - 选择器越复杂，字符串解析就越慢

#box > p 高级选择器在ie6上是不支持。

---

二、jQuery 过滤选择器 === css伪类选择符（器），可以做到兼容 ie6~8 ：

选择器的例子：地址

jquery提供的常用选择器的专用四个方法：

方法：
$('li)').eq(-2) —— 倒数第二个li，负数没有0，从1开始。	$('li)').last()'
$('li)').first()	$('li)').not('.red')

$(‘li:nth-child(3n)’) - 每隔3倍显示，3、6、9 。3n+1 - 3倍的第四个显示，4、7、10，这里的3n也就是中间少两个

/*
匿名函数中的 $(this) 就等于 执行中的 $('.red') 本身，因为扩展性会更好。
*/

alert($('.red').is(function() {
     return $(this)
}))

/*
用for来打印对象数组
*/
var box = $('div').css(['color','width','height']);
for (var i in box) {
    alert(i[0]); // 返回color
}

/*
$each() 可以遍历原生态的javascript对象数组，代替for
也可以遍历 jquery 对象数组
*/
var box = $('div').css(['color','width','height']);
$each(box,function(attr,value) {
    alert(attr + ':' value)                // attr 拿到数组的属性名，value 拿到具体的属性值
})
//遍历jq数组：
$('div').$each(function(index,element) {
    alert(index + ':' element)            //index 为索引，element为dom
})

---

三、添加calss类：

利用toggleClass 添加 / 删除 class

$('div').click(function() {
    $(this).toggleClass(function() {
        // 局部变量
        if ($(this).hasClass('red')) {
             $(this).removeClass('red');
             return 'green';
        } else {
             $(this).removeClass('green');
             return 'red';
        }
    })
})

jq绑定事件：

bind(type,[data],fn): 可以传递三个参数，type - 事件名称,data-可选，传递额外数据，fn - 处理函数

// 通过对象键值对 绑定多个参数
$('input').bind({
// mouseout - 键，冒号逗号分隔
   'mouseout': function() {
       alert('移出');
   },
   'mouseover': function() {
       alert('移入');
   }
})

//删除事件
$('input').bind('click',fn1);  //绑定函数
$('input').bind('click',fn2);
function fn1() {
   alert('fn1')
}
function fn2() {
   alert('fn2')
}

$('input').unbind('click',fn2); // 删除绑定了click事件的fn2

//over 会触发子节点，而enter则不会触发
$('div').mouseover(function() {
    $('strong').html(function(index,value) {    //index为索引值
        return value + '1'
    })
})

---

2、查找属性节点

atrr()方法 - 设置或返回被选元素的属性值
var $para = $(’ p ‘); // 获取到 p节点
var p_txt = $para.atrr(’ title ‘); // 获取到 p节点属性title
alert(’ p_txt '); // 打印title值

if()方法 - is(’:visible’) 如果内容显示

补充：
$(this).addClass(‘active’); 为.head 添加类名
$content.addClass{(}^{\prime }activ{e}^{\prime });为变量为$content添加类名；removeClass() 删除类名

---

3、在javascript代码中，通常使用window.onload 方法，而在jQuery中，$(document).ready()方法使用最常见；

执行机制：
1、window.onload 是在网页中所有的元素完全加载到浏览器后才执行，即js此时才可以访问网页中的任何元素；
2、$(document).ready()则完全可以在DOM完全就绪时即被调用；3、$(windowt).load() 方法会在所有内容加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发；

---

4、事件绑定：bind()方法可以对匹配元素进行特定事件的绑定；

适用单个切换：

$(function(){
  $('.head').bind('click', function() {
    var $content = $('.pp'); //找到要隐藏的元素并给它定义一个局部变量$content
    if($content.is(':visible')) {
      $content.hide();
    }else {
      $content.show();
    }
  })
})

<p class="head">如果你点我，pp就会消失。</p>
<p class="pp">继续点我!</p>