JQuery学习笔记(1)
认识JQuery
简介
JQuery是一个JavaScript库，语法简洁，有跨平台的兼容性，简化了开发人员遍历html文档、操作dom、处理事件、执行动画和开发Ajax的操作。理念是：写得少，做得多。
优点
1.轻量级。UglifyJS压缩后大小保持在30KB 2.选择器强大。 3.DOM操作封装。 4.可靠地事件处理机制。 5.完善的Ajax。
库类型
jquery.js（开发版） 约229kb,用于学习和开发。 jquery.min.js（生产版） 约31kb，用于产品和项目。
简单使用
1.页面引入：<scrpit src="../js/jquery.js" type="text/javascript"></script> 2.编写简易代码：$为JQuery的简写形式
$(document).ready(function(){
alert("Hello World!");
});
3.链式操作：
//当点击level下的a时，添加current class，a后的元素显示，它父辈的同辈元素下的子元素a移除current class，其后元素隐藏
$(".level1 > a").click(function(){
$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();
return false;
}
4.DOM对象和jQuery对象 DOM(Documnet Object Model 文档对象模型)，每一份DOM可以表示为一棵树。可以通过JavaScript的getElementsByTagName或者getElementsById来获取元素节点。 jQuery对象:通过jQuery包装DOM对象后产生的对象。jQuery对象可以使用jQuery方法但是无法使用DOM对象的任何方法。 二者变量声明：
var $variable = jQuery对象;
var variable = DOM对象;
选择器
css选择器
css选择器分为标签选择器(td)，ID选择器(#td)，类选择器(.td)，群组选择器（td,p,div.a），后代选择器(#links a) 通配选择器（*）。
jQuery选择器
1.基本选择器
jQuery选择器继承了css风格。jQuery行为规则都必须在获取元素后才能生效。
//通过id选择元素示例
$("#td").css("color","red");
2.层次选择器
通过DOM元素之间的层次关系获取特定元素
//层次选择器示例
//div下的所有span后代元素(后代元素可以是多级，子元素，子子元素等)
$("div span").css("background","$bbffaa");
//div下的所有span子元素
$("div>span").css("background","$bbffaa");
//class为one的next<div>元素
$(".one+div") 等价于$(".one").next("div");
//id为two的的元素后的所有<div>同辈元素
$("#two~div") 等价于$("#two").nextAll("div");
3.过滤选择器
通过特定的过滤规则来筛选出所需的DOM元素。过滤规则与CSS中的伪类选择器语法相同。即一个选择器可以以冒号(:)开头。
//取第一个
$("div:first")
//取索引值为3
$("div:eq(3)")
//当前获取焦点的元素 (blur为失去焦点
$(":focus").css("background",#bbffaa);
4.内容选择器
//含有文本'我'的<div>元素
$("div:contains('我')")
//含有class为mini元素的<div>元素
$("div:has('.mini')")
$("div:has(p)")
5.属性过滤选择器
//title值等于test的<div>
$("div[title=test]")
//title以st结尾的<div>
$("div[title$=st]")
jQuery中的DOM操作
1.查找元素节点：用选择器完成
//<ul>里第二个<li>
var $li = $("ul li:eq(1)");
var li_txt= $li.text();
alert(li_txt);
2.查找属性节点：用选择器获取元素后，可以用 attr() 方法 获取和设置 它的各种属性值。用 removeAttr() 可删除属性值。
用 text() 方法可以 获取和设置 元素的text值；用 val() 方法可以 获取和设置 元素的值
var $para = $("p");
var p_txt=$para.attr("title");
$para.attr("title","test");
//如果是添加设置class属性的话需要用addClass()方法，移除同理用removeClass()方法
$para.addClass("newclass");
//设置文本可以用text()
$("p").text("text");
//获取
$("p").text();
3.创建元素节点：创建新元素可使用jQuery的工厂函数 $() 来完成，用法为 $( html代码 )
//以添加<li>元素节点为例
var $li_1 = $("<li title='test'>test</li>");
//用append加入到<ul>中
$("ul").append($li_1);
tips:无论 $(html)中的html代码多复杂，都可以使用同样的方式创建。
4.插入节点：
append() 方法外，还有prepend() ，after() ，before()等
5.删除节点:
通过选择器选择元素后，可以通过 .remove() 方法，将节点删除。
detach()方法，它删除后重新追加元素会保留绑定的事件。
empty()方法，清空节点中的所有后代节点。
6.切换样式：
toggle() 方法，可以让元素在两个样式间切换
$("p").togglelClass("another");
点击<p>后，如果another已经在<p>的class里了，就删除它；否则就添加它。