1-3笔记

jQuery 的理念是：write less,do more。

jQuery 极大的简化了 javascript 开发人员遍历HTML文档、操作 DOM 、处理事件、执行动画和开发 Ajax 的操作。

1.jQuery优势
轻量级。压缩后可以保持在30kb左右。
强大的选择器。可以使用CSS1-CSS3几乎所有选择器。
出色的DOM操作的封装。
可靠的事件处理机制。
完善的Ajax。
不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。
2.使用jQuery
jQuery 库文件一般有生产版和开发版。区别在于生产版经过了压缩，只有30kb左右，我们下载使用开发版就可以了。


使用时，在页面引入 jquery.js 库文件就可以使用了。

<script type="text/javascript" src="js/jquery.js"></script>
简单编写jQuery:
$(document).ready(function(){
alert('Hello jQuery');
});

window.onload方法和$(document).ready(）方法的区别。

window.onload必须等待网页中所有内容加在完毕才能执行。
$(document).ready(）是网页中所有DOM结构绘制完成后就执行，可能DOM元素关联的东西并没有加载。
链式风格

//等待dom元素加载完毕.
$(document).ready(function(){
$(".level1 > a").click(function(){
$(this).addClass("current")   //给当前元素添加"current"样式
.next().show()                //下一个元素显示
.parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式
.next().hide();                //它们的下一个元素隐藏
return false;//事件处理阻止了默认的事件行为并停止了事件通过dom向上冒泡
});

});

1.基本选择器
选择器 描述
#id 根据给定的ID匹配一个元素
.class 根据给定的类名匹配元素
element 根据给定元素名匹配元素
* 匹配所有元素
selector1,selector2,selector3 将每一个选择器匹配到的元素合并返回
2.层次选择器
选择器 描述
$('a d') 选取a元素里所有的d后代元素
$('p>c') 选取p元素下的c子元素
$('prev+next') 选取紧邻在prev元素后的next元素
$('prev~siblings') 选取prev元素之后的所有siblings兄弟元素

1.查找元素节点
查找元素节点非常简单，用 jQuery 择器即可完成。
  var $li = $('ul li:eq(1)');
  var li_txt = $li.text();
  alert(li_txt);
2.查找属性节点
利用选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性值。
var $para = $('p');
var p_text = $para.attr('title');
alert(p_text);
2.创建节点
1.创建元素节点
使用 jQuery 的工厂函数$()来完成创建，然后使用append()方法插入文档中。
    var $li_1 = $('<li>1</li>');
var $li_2 = $('<li>2</li>');
$('ul').append($li_1);
$('ul').append($li_2);
2.创建属性节点
创建属性节点也是直接在创建元素时一起创建。
var $li_1 = $('<li title="香蕉">香蕉</li>');
var $li_2 = $('<li title="雪梨">雪梨</li>');
$('ul').append($li_1);
$('ul').append($li_2);

.删除节点
jQuery提供了三种方法删除节点：remove(),detach(),empty()。


1.remove()方法


remove()方法的返回值是被删除节点的引用。
var $li = $('ul li:eq(1)').remove();//删掉第二个
$li.append('ul');
remove()方法还可以通过传递参数来选择性的删除元素。
$('ul li').remove('li[title!=菠萝]');
2.detach()方法
同样是从DOM中去掉所有匹配的元素，但不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
$('ul li').click(function(){
alert($(this).html());
});
var $li = $('ul li:eq(1)').detach();
$li.appendTo('ul');//绑定事件还在
3.empty()方法
严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点。
var $li = $('ul').empty();