JQuery对节点的各种操作
jQuery就是对javaScript的封装，方便使用。
简单的id、class选择器什么的就不写了。
选择器
层级选择器
//包含选择器
$("#div1 span").css("backgroundColor","red");
//子父选择器 div1下面的直系子节点
$("#div1>span").css("backgroundColor","red");
//后面紧跟的下一个元素
$("#span1 + span").css("backgroundColor","red");
//获得指定元素后面所有的span标签
$("#span1 ~ span").css("backgroundColor","red");
位置选择器
//获得指定标签的第一个元素对象
$("ul li").first().css("background-color","red");
$("ul li:first").css("background-color","red");
//获得指定标签的最后一个元素对象
$("ul li").last().css("background-color","green");
$("ul li：last").css("background-color","green");
//所有下标为偶数的对象，下标从0开始。
$("ul li:even").css("background-color","green");
//获得指定下标索引对象
$("li").eq(3).css("background-color","green");
$("li:eq(3)").css("background-color","gold");
//匹配所有大于给定索引值的对象
$("li:gt(3)").css("background-color","green");
//匹配所有小于给定索引值的对象
$("li:lt(3)").css("background-color","gold");
属性选择器
//获得input标签中 type = text 的标签内容
$("input[type=text]").css("border","1px solid red");
//获得input标签中 name属性值以z开头的对象
$("input[name^=z]").css("border","1px solid red");
//获得input标签中 name属性值以d结尾的对象
$("input[name$=d]").css("border","1px solid gold");
//name属性不等于指定内容的元素
$("input[name!=z_pwd]").css("border","1px solid gold");
//name属性值包含z的元素
$("input[name*=z]").css("border","1px solid gold");
子元素选择器
//索引从1开始。
$("ul li:nth-child(1)").css("background-color","gold");
$("ul li:nth-child(odd)").css("background-color","gold");//奇数
//获得n前面数值的倍数索引值的对象
$("ul li:nth-child(3n)").css("background-color","gold");
//匹配第一个子元素
$("ul li:first-child").css("background-color","gold");
//匹配最后一个子元素
$("ul li:last-child").css("background-color","gold");
//匹配ul中只有一个li的节点
$("ul li:only-child").css("background-color","gold");
表单选择器
//获得input标签中type=text的对象
$(":text").css("background-color","green");
//整个表单无论是否是input标签全选
$(":input").css("background-color","green");
//获得被选中的复选框和单选框
$("input:checkbox");
$("input:selected");
操作节点
操作节点的属性
//获得元素的对象
var inp=$("#zh");
//JQ获得属性 inp.attr("value")：获得的默认的值，并且不随输入改变
console.log(inp.attr("type")+"----"+inp.attr("name")+"----"+inp.attr("value"));
console.log(inp[0].type);
//js方式获得对象
var inp2=document.getElementById("but");
//获得对象实时输入的值
console.log(inp.val());
//操作元素对象属性
inp.attr("type","button");
inp.attr("value","点击");
//综合的方式 {key1:value1,key2:value2 }--json数据格式
inp.attr({
"type":"button","value":"点击"});
//checked
alert($("#man").attr("checked"));
//true 一般作用到checked、disabled、selected
alert($("#man").prop("checked"));
操作css样式
有两种方法，一种是调用css函数直接对样式进行修改，另一种是提前写好样式类，为目标元素增加class。第一种方法与javaScript不同的是，当元素的样式不是行内式的话，javaScript是无法获取到css样式的，而JQuery可以获取到，足以证明其强大之处。
操作文本值
//获得纯文本
//innerText
var t = $("#div1").text();
//innerHTML
var h = $("#div1").html();
console.log(t);
console.log(h);
//操作文本内容
// $("#div1").text("<u>zouzou</u>");
$("#div1").html($("#div1").html()+"<u>qqfamor</u>");
操作元素节点对象
//创建一个节点对象
var p = $("<p>List Item2</p>");
//向div内部添加
//向div1中追加元素，追加到现有元素之后
// $("#div1").append(p);
//将p追加到div中
// p.appendTo($("#div1"));
//往div1中追加元素，追加到现有元素之前
// $("#div1").prepend(p);
//向div外部添加
//添加在div之后
// $("#div1").after(p);
//添加在div之前
// $("#div1").before(p);
//移除指定节点对象
// $("#div1").remove();
//清空对象
$("#div1").empty();
JQuery中的事件机制
JQuery中事件函数的关键字与javaScript相差不大，其中需要注意的是one、trigger和unbind。
one事件：页面不刷新，该事件仅仅加载一次。
trigger事件：对元素的某个事件进行再一次的操作，但是无法获取有效的返回值。
unbind事件：解除某个元素的某个绑定的事件
$("#bu1").click(function(){
alert("单击事件");
})
$("#bu1").dblclick(function(){
alert("双击事件");
})
//绑定多个事件
$("#bu2").bind({
click:function(){
},
dblclick:function(){
}
})
//One事件 只生效一次
$("#bu3").one("click",function(){
alert("one事件只执行一次");
})
//trigger
$("#bu4").click(function(){
$("#bu1").trigger("click");
})
//unbind 解除绑定
$("#bu5").click(function(){
//解绑指定事件
$("#bu1").unbind("click");
//解绑全部事件
$("#bu1").unbind();
})
JQ简易动画
//JQ动画标签
$("#div1").hide(1000);//隐藏
$("#div1").show(1000);//出现
$("#div1").slideUp(1000);
$("#div1").slideDown(1000);
//淡出淡入
$("#div1").fadeOut(1000);
$("#div1").fadeIn(1000);
//显示的元素隐藏，隐藏的元素显示
$("div").toggle(1000);