Java 之 JQuery
1.JQuery
a.定义：jQuery 是一个 JavaScript 库
b.作用：极大地简化了 JavaScript 编程
c.引入：
<script src="jquery.js"></script>
2.文档就绪函数
a.完整写法
$(document).ready(function(){ });
b.简便写法
$(function(){ });
3.jq选择器
$("#userName") //ID选择器
$("p") //标签选择器
$(".pClass") //类选择器
$("[href]") //属性选择器
$("p.intro") //class为introde <p>标签
$("[href $='.jpg' ") //以.jpg结尾的href属性
4.隐藏
a.隐藏
$("#myDiv").hide(2000);
b.显示
$("#myDiv").show(4000,test);
c.隐藏/显示
$("#myDiv").toggle(2000);
5.淡入
a.淡出
$("#myDiv").fadeOut(1000,function(){});
b.淡入
$("#myDiv").fadeIn(2000);
c.淡出/淡入
$("#myDiv").fadeToggle(2000);
6.滑动
a.收起
$("#myDiv").slideUp(5000);
b.展开
$("#myDiv").slideDown(5000);
c.收起/展开
$("#myDiv").slideToggle();
7.动画
a.语法：
$("#myDiv").animate({left:'300px'},2000,function(){
$("#myDiv").animate({top:'200px','font-size':'24px'});
});
b.注意：
在动画中无法改变颜色相关样式
8.样式（css()）
a.获取：
$(".myDiv").css("width");
b.修改：
$(".myDiv").css("width","300px") //方法一
$(".myDiv").css({width:"300px", height:"200px"); //方法二
9.事件
a.事件的绑定方式
$("#myA").click(function(){ //方法一
});
$("#btn").bind("click",function(){ //方法二
});
b.解除事件绑定
$("#btn").unbind("mouseover");
10.DOM
a.获取元素值
$("#userName").val()
b.等同于innerHTML
$(this).html(); $(this).html("<span style='color:red'>test</span>");
c.等同于innerTest
$(this).text(); $(this).text("<a>hello</a>");
d.等同于 js中getAttribute("属性名")
$("#userName").attr("errorMsg")
$("#userName").attr("style","background-color:red");
e.添加
$("#myDiv").append("<a href='#'>test1</a>"); //append表示在元素内部的尾部进行添加
//支持html的添加
$("#myDiv").prepend("<a href='#'>test2</a>"); //prepend表示在元素内部的开始位置进行添加
$("#myDiv").after("<a href='#'>test3</a>"); //after示在元素后面添加（外部）
$("#myDiv").before("<a href='#'>test4</a>"); //after示在元素前面添加（外部）
f.删除
$("#myDiv").remove(); //全部删除
$("#myDiv").empty(); //删除内部
e.CSS类（对 class 的特殊操作）
$("#myDiv").addClass("divClass"); //添加class
$("#myDiv").addClass("divClass"); //删除class
$(this).toggleClass("divClass"); //没就加，有就删
11.节点
a.父级/祖先
$("#myTable").parent() //获取父级
$("#myTable").parents() //获取所有祖先
$("#myTable").parentsUntil(".test") //获取所有直到class为test的祖先
b.后代
$("#myTable").children() //获取子元素
$("#myTable").find("td") //获取所有<td>标签子元素
c.同胞
$("#myTable").siblings() //获取所有同胞元素
$("#myTable").prev() //获取前一个同胞元素
$("#myTable").prevAll() //获取前面所有同胞元素
$("#myTable").next() ///获取后一个同胞元素
$("#myTable").nextAll() //获取后面所有同胞元素
d.遍历
$(".fav").each(function(){
alert($(this).val());
}) //不传参
$(".fav").each(function(i){
alert($(".fav")[i].checked);
}) //传参i为下标
e.过滤
$(".fav").last().val() //最后一个元素
$(".fav").first().val() //第一个元素
$(".fav").eq(2).val() //下标为2的元素
$(".fav").filter("[type = 'radio']") //筛选指定的元素
$(".fav").not("[type = 'radio']") //排除指定的元素
