jQuery

jQuery学习

一、jQuery基础

1.引入jquery.js 文件

<script type="text/javascript" src="jquery.js"></script>
<!-- 当然也可以直接引入链接地址 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
    //这是从谷歌引入
</script>

2.选择元素

//引入jQuery.js后可以 用 $ 来快速定位需操作的元素
// 元素选择器 | 属性选择器
//属性是通过特定属性查找元素
    $("选择器|[属性]");
//css选择器
    $("选择器|[属性]").css("要获取的css属性");
    $("选择器|[属性]").css("待修改css属性","属性值");

3.获取或修改内容

text()  //设置或返回所选元素的文本内容
html() // 设置或返回所选元素的内容（包括 HTML 标记）
val() //设置或返回所选元素的值
//无参数时返回内容 有参数时效果为设置内容

4.attr()函数及回调

$("button").click(function(){
    $("#cai").attr({
        "href" : "http://www.baidu.com",
        "title" : "attr"
    });
});
//回调函数通过实现方法获取要修改的值
$("button").click(function(){
  $("#cai").attr("href", function(i,tran){//i 为被选中元素的当前下标
    return tran + "/jquery"; 
  });
});

5.添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

6.删除元素内容

remove不能删除带有过滤器的子元素

remove(参数)；参数为过滤器，满足则删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

7.CSS类

前三个方法中加入参数（class样式即 css表中的样式表）用来修改某元素的css样式

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

8.盒子尺寸方法

width() 内容区的宽
height() 内容区的高
innerWidth() 内边距、内容区和的宽
innerHeight() 内边距、内容区和的高
outerWidth() 默认为false 边框、内边距、内容区和的宽
outerHeight(true) 设置为true 外边距、边框、内边距、内容区和的宽

二、jQuery效果

1.隐藏|显示

hide() 隐藏所选元素（实际上是 display : none）
show() 显示所选元素（实际上是 display :默认）
toggle() 对所选元素进行（隐藏|显示）切换

以上方法都有两个可选参数

第一个参数控制时间类似于速度吧

第二个参数控制动作函数如linear

也可以加上自己的回调函数

$("#p").click(function(){
  $("p").hide();
});
 
$("#p").click(function(){
  $("p").show();
});

$("#p").click(function(){
  $("p").toggle();
});

2.淡入|淡出

fadeIn() 用于淡入已隐藏的元素
fadeOut() 用于淡出可见的元素
fadeToggle() 对所选元素进行（淡入|淡出）切换
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

以上方法都有两个可选参数
第一个参数控制时间类似于速度吧
第二个参数控制动作函数如linear
也可以加上自己的回调函数

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn(1000);
});
 
$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("linear");
});

$("button").click(function(){
  $("#div1").fadeToggle();
});

$("button").click(function(){
  $("#div1").fadeTo("linear",0.15);
  $("#div2").fadeTo("linear",0.4);
  $("#div3").fadeTo("linear",0.7);
});

3.滑动方法

slideDown() 用于向下滑动元素
slideUp() 用于向上滑动元素。
slideToggle() 对所选元素进行（上滑|下滑）切换

$("#but").click(function(){
  $("#div").slideDown();
});
 
$("#but").click(function(){
  $("#div").slideUp();
});

$("#but").click(function(){
  $("#div").slideToggle();
});

4.动画

animate() 用于创建自定义动画。

//语法
$(selector).animate({params},speed,callback);

$("button").click(function(){
  $("div").animate({left:'250px'});
});
//必需的 params 参数定义形成动画的 CSS 属性。可以为多个
        //在这里属性名不在为 padding-left一类 而应该是 paddingLeft
        //可以把属性的动画值设置为 "show"、"hide" 或 "toggle"
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。

$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
//可以在点击事件里写多个动画事件组成队列

三、jQuery遍历

1.jQuery元素祖先

parent() 返回被选元素的直接父元素
parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() 返回介于两个给定元素之间的所有祖先元素（给定元素）

$(document).ready(function(){
    $("span").parent();
    $("span").parents();
    $("span").parentsUntil("div");
});

2.jQuery后代

children() 返回被选元素的所有直接子元素
find() 返回被选元素的后代元素，一路向下直到最后一个后代

$(document).ready(function(){
    $("div").children();
    $("div").find("span");
});

3.jQuery同胞

siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 返回被选元素的所有跟随的同胞元素。
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
prev() 同next 只不过是上一个同胞元素
prevAll()
prevUntil()

$(document).ready(function(){
    $("h2").siblings();
    $("h2").siblings("p");
    $("h2").next();
    $("h2").nextAll();
    $("h2").nextUntil("h6");
});
//不在罗列取上一个同胞的方法

4.jQuery去元素过滤

first() 返回被选元素的首个元素
last() 返回被选元素的最后一个元素。
eq() 返回被选元素中带有指定索引号的元素。
filter() 允许您规定一个标准。不匹配会被从集合中删除，匹配的元素会被返回。
not() 返回不匹配标准的所有元素。

$(document).ready(function(){
    $("div p").first();
    $("div p").last();
    $("p").eq(1);
    $("p").filter(".url");
    $("p").not(".url");
});