目录
筛选
过滤
first()：获取匹配的第一个元素 last()：获得匹配的最后一个元素 eq(N)：获取匹配的第N或-N个元素 filter(selector)：筛选出与指定表达式匹配的元素集合 has(selector)：筛选出包含特定特点的元素的集合 not(selector)：筛选出不包含特定特点的元素的集合 is():根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true hasClass(class):检查当前的元素是否含有某个特定的类，如果有，则返回true
查找
children()：子标签中找 find()：后代标签中找 parent()：父标签 prev():取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 prevAll()：前面所有的兄弟标签 next():取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。 nextAll()：后面所有的兄弟标签 siblings()：前后所有的兄弟标签 closest(expr,[con]|obj|ele):从元素本身开始，逐级向上级元素匹配，并返回最先匹配的元素 offsetParent():返回第一个匹配元素用于定位的父节点。
串联
add(expr|ele|html|obj[,con])：把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集 andSelf():加入先前所选的加入当前元素中 contents():查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个iframe，则查找文档内容
文档处理
增
内部插入
append()：将内容添加到指定的元素后面
appendTo()：把所有匹配的元素追加到另一个指定的元素元素集合中
prepend()：将内容添加到指定元素前面
prependTo():把所有匹配的元素前置到另一个、指定的元素元素集合中
外部插入
after()：在匹配元素之后插入内容
before()：在匹配元素之前插入内容
insertAfter(content):把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore(content):把所有匹配的元素插入到另一个、指定的元素元素集合的前面
复制
clone（）：克隆匹配的DOM元素并且选中这些克隆的副本。
删
empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）
detach(*[expr]*):从DOM中删除所有匹配的元素。
改
replaceWith()：将所有匹配的元素替换成指定的内容
replaceAll()：用匹配的元素替换掉所有 selector匹配到的元素。
事件
加载Dom两种方式
window.onload方式
执行时间：整个网页中所有内容(包括图片)加载完成后，才会执行
编写个数：1个
jQuery方式
执行时间：网页结构绘制完成后，执行
编写个数：多个
两个都有的情况下执行顺序
jQuery3.0：window.onload比jQuery先执行
jQuery1.0和2.0：jQuery比window.onload先执行
绑定事件两种方式
- ①元素.on("事件名",function(){})
- ②元素.事件名(function(){}) hover()：鼠标悬停合成事件 toggle()：鼠标点击合成事件
事件传播（事件冒泡）
- ①传播：小-->中-->大
- ②阻止传播：事件后面加上 return false
事件坐标
- ①offsetX：当前元素左上角
- ②clientX：窗口左上角
- ③pageX：网页左上角
移除事件： 元素.unbind("事件名")
- 注意：一般情况下，不会使用unbind，推荐使用变量控制事件
- 注意：如果某个元素只允许使用一次事件，则可以使用one()
动画效果
基本 显示：show(Time) 隐藏:hide(Time) 切换：toggle（Time）
滑动
- slideUp(Time)：动画收缩(向上滑动)-->隐藏
- slideDown(Time)：动画展开(向下滑动)-->显示
- slideToggle(Time)：动画切换 淡入淡出(透明度)
- fadeIn(Time)：淡入(透明度减少)
- fadeOut(Time)：淡出(透明度增大)
- fadeToggle(Time)：切换
自定义动画 元素.animate({属性：属性值},Time)
- 缩放 width height
- 移动 top left 移动(本元素)，距离 top= "+=" left= "-="
jQueryValidate规则（表单验证）
案例：手风琴
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴案例</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
img {
display: block;
}
ul {
list-style: none;
}
.king {
width: 852px;
margin: 100px auto;
background: url(images/bg.png) no-repeat;
overflow: hidden;
padding: 10px;
}
.king ul {
overflow: hidden;
}
.king li {
position: relative;
float: left;
width: 69px;
height: 69px;
margin-right: 10px;
}
.king li.current {
width: 224px;
}
.king li.current .big {
display: block;
}
.king li.current .small {
display: none;
}
.big {
width: 224px;
display: none;
}
.small {
position: absolute;
top: 0;
left: 0;
width: 69px;
height: 69px;
border-radius: 5px;
}
</style>
</head>
<body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
// 鼠标经过某个小li 有两步操作：
$(".king li").mouseenter(function() {
// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
</body>
</html>效果展示
案例：城市选择
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
width: 200px;
background-color: teal;
height: 200px;
font-size: 20px;
}
.btn-box {
width: 30px;
display: inline-block;
vertical-align: top;
}
</style>
<body>
<h1>城市选择：</h1>
<select id="src-city" name="src-city" multiple>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">深圳</option>
<option value="4">广州</option>
<option value="5">西红柿</option>
</select>
<div class="btn-box">
<!--实体字符-->
<button id="btn-sel-all"> >> </button>
<button id="btn-sel-none"> << </button>
<button id="btn-sel"> ></button>
<button id="btn-back"> < </button>
</div>
<select id="tar-city" name="tar-city" multiple>
</select>
</body>
</html>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(function () {
//1.全部到右边
$('#btn-sel-all').click(function () {
//找到左边select下拉菜单的所有option项,把这些option项都添加到右边的select下拉菜单中去.
$("#src-city>option").appendTo($("#tar-city"));
});
//2.全部到左边
$('#btn-sel-none').click(function () {
//找到右边select下拉菜单中的所有option项,把这些option项都添加到左边的select下拉菜单中去.
$("#tar-city>option").appendTo($("#src-city"));
});
//3.选中的到右边.
$('#btn-sel').click(function () {
//找到左边select下拉菜单中,被选中的option项, 把这些option项添加到右边的select下拉菜单中.
$("#src-city>option:selected").appendTo($("#tar-city"));
});
//4.选中的到左边.
$('#btn-back').click(function () {
//找到右边select下拉菜单中,被选中的option项,把这些option项添加到左边的select下拉菜单中.
$("#tar-city>option:selected").appendTo($("#src-city"));
});
});
</script>
效果展示
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
