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']")    //排除指定的元素