锋利的 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 或者 falseif($('#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(′active′);为变量为content.addClass('active'); 为变量为content.addClass(′active′);为变量为content添加类名；removeClass() 删除类名

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

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

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

适用单个切换：

$(function(){$('.head').bind('click', function() {var $content = $('.pp'); //找到要隐藏的元素并给它定义一个局部变量$contentif($content.is(':visible')) {$content.hide();}else {$content.show();}})
})<p class="head">如果你点我，pp就会消失。</p>
<p class="pp">继续点我!</p>