jQuery基础

jQuery选择器

按顺序找

获取第一个元素

$("p").first().text("5555");

获取匹配的最后个元素

$("p").last().text("5555");

获取匹配的元素：索引

$("p").eq(1).text("5555");

过滤与剔除

筛选出与指定表达式匹配的元素集合。

$("p").filter("#pid4").text("55");

从匹配元素的集合中删除与指定表达式匹配的元素

$("p").not("#pid4").text("55");

父子级别查找

选择所有子标签

$("#container").children().css({"color":"red","border":"2px solid red"});
$("#container").children("#pid4").css({"color":"red","border":"2px solid red"});

子级查找

$("#container").find("#pid4").css("color","red");
父级
$("#pid4").parent().css({"color":"red","border":"2px solid red"});

父级（多级别）

$("#pid4").parents().css({"color":"red","border":"2px solid red"});

父级直到（不包含）

$("#pid4").parentsUntil("#container").css({"color":"red","border":"2px solid red"});

下一个

$("#pid2").next().css({"color":"red","border":"2px solid red"});

下面多个

$("#pid2").nextAll().css({"color":"red","border":"2px solid red"});

下面多个直到（包含）

$("#pid2").nextUntil("#pid4").css({"color":"red","border":"2px solid red"});

上面

$("#pid3").prev().css({"color":"red","border":"2px solid red"});

上面多个

$("#pid3").prevAll().css({"color":"red","border":"2px solid red"});

上面多个直到

$("#pid3").prevUntil("#pid1").css({"color":"red","border":"2px solid red"});

同辈

$("#pid3").siblings().css({"color":"red","border":"2px solid red"});

文档处理

内容属性处理

获得内容 - text()、html() 以及 val()

$("p").text()
$("p").html()
$("p").val()

设置内容 - text()、html() 以及 val()

$("p").text("Hello world!");
$("p").html("Hello world!");
$("p").val("Hello world!");

获取属性 - attr(),prop()

$("p").attr("color")
$("p").prop("color")

设置属性 - attr(),prop()

$("p").css("color","yellow")

拥有回调方法的写法

$("p").attr("style",function(i,r){
console.log(i,r)
return "color:red";
})

类名属性处理

判断类名

$("p").hasClass("selected");

添加类名

$("p").addClass("selected");

移除类名

$("p").removeClass("selected");

添加或者移除类名

$("p").toggleClass("selected");

移除属性

$("img").removeAttr("src");

文档元素操作

append

$("p").append("<b>Hello</b>");

appendTo

$("p").appendTo("div");

prepend

$("#pid3").prepend("<b>55</b>")

prependTo

$("#pid3").prependTo("#pid2")

after

$("#pid3").after("<b>55</b>")

before

$("#pid3").before("<b>55</b>")

insertAfter

$("#pid2").insertAfter("#pid3")

insertBefore

$("#pid3").insertBefore("#pid2")

replaceWith

$("p").replaceWith("<b>555</b>");

replaceAll

$("<b>555</b>").replaceAll("p");

empty

$('.con').empty();

remove

$("p").remove();
$("p").remove(".hello"); 带有过滤移除

jQuery 事件

文档事件

ready() 规定当 DOM 完全加载时要执行的函数
resize() 添加/触发 resize 事件
scroll() 添加/触发 scroll 事件
on() 方法在被选元素及子元素上添加一个或多个事件处理程序

$("p").on("click",function(){
alert("段落被点击了。");
});

off()移除通过 on() 方法添加的事件处理程序

$("p").off("click");

once()向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次

$("p").one("click",function(){
alert("段落被点击了。");
});

鼠标事件
click、dbclick、mouseenter、mouseleave、mouseover、mousemove
键盘事件
keypress、keydown、keyup

event参数

event.currentTarget 当前 DOM 元素
event.target 哪个 DOM 元素触发事件
event.stopPropagation();阻止继续向父级执行

jQuery 效果 - 隐藏和显示

效果均可带事件参数：包括slow 、fast、 毫秒
均可执行回调方法

隐藏、显示

$("p").hide();
$("p").show();
$("p").toggle();

淡入、淡出

$("p").fadeIn();
$("p").fadeOut();
$("p").fadeToggle();

划入、划出

$("p").slideDown();
$("p").slideUp();
$("p").slideToggle();

自定义动画

提供easing参数swing开头结尾慢,中间快 （默认）linear （匀速）

$("div").animate({left:'250px'}，3000,"linear",callback);
$(“#pos”).animate({left:”+=20px”,height:”+=20px”},fast);

停止动画

$("p").stop();
$("p").stop(stopAll,goToEnd);

延迟动画

$("p").delay("slow").fadeIn();

jQueryUI

引入jQuery-ui样式

<link rel="stylesheet" href="css/jquery-ui.css">

引入jQuery.js

<script src="js/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>

引入jQueryUI.js

<script src="js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>

实现Demo

DIV 拖拽
折叠面板
自动补全
日期选择
标签页