目录：
- 摘要：
- 第一节：简介以及使用
- 第二节：核心函数
- 第三节：核心对象
- 3.0：属性
- 属性
- 样式
- 尺寸
- width() => 获取内容元素width的值
- height() => 获取内容元素height的值
- innerWidth() => 获取内容元素width+padding的值
- innerHeight() => 获取内容元素height+padding的值
- outerWidth() => outerWidth(false/true)，获取内容元素width+padding+border的值，如果是true再加上margin的值
- outerHeight() => outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值
- 位置
- 3.1：操作
- 3.2：遍历
- 3.3：事件
- 3.4：动画
- 第五节：
摘要：
不管学习什么，基础都是很重要的！js要熟悉每一个api的作用！jq也是一样的！要熟悉每一个语法的使用！这里只是统一总结一下，方便以后容易查找！因为使用jq开发项目已经三年了！说熟悉还是半桶水！因为英语很菜，哈哈哈哈！只是知道这东西，但是不会写的！
第一节：简介以及使用
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（ 或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<script>
$(function() {
console.log("Hello,jQuery!")
});
</script>
</body>
</html>
此时 $ 就是一个工具对象。
第二节：核心函数
2.0：选择器
基本选择器：
标签选择器 => 选中标签改变dom背景
<body>
<div>1</div>
<div>2</div>
<div>3</div>
</body>
<script>
$(function() {
$('div').css('background', 'red');
});
</script>
id选择器 => 选中id改变dom背景
<body>
<div>1</div>
<div id='bgId'>2</div>
<div>3</div>
</body>
<script>
$(function() {
$('#bgId').css('background', 'red');
});
</script>
class选择器 => 选中class改变dom背景
<body>
<div class='itemRed'>1</div>
<div>2</div>
<div class='itemRed'>3</div>
</body>
<script>
$(function() {
$('.itemRed').css('background', 'red');
});
</script>
通配符选择器 => 选中class下的所有元素改变dom背景
<body>
<div class='allRed'>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
<script>
$(function() {
$('.allRed').css('background', 'red');
});
</script>
并集选择器 => 一次性选中多个元素改变dom背景
<body>
<div>1</div>
<div class="clRed">2</div>
<p>3</p>
<span>4</span>
</body>
<script>
$(function() {
$('.clRed,p,span').css('background', 'red');
});
</script>
交集选择器 => 选中某个标签下具有相同类的元素改变dom背景
<body>
<p class="bgRed">1</p>
<p class="bgRed">2</p>
<div class="bgRed">4</div>
<div class="bgRed">5</div>
</body>
<script>
$(function() {
$('p.bgRed').css('background', 'red');
});
</script>
层级选择器：
子代选择器 => 选中某个标签下一级元素改变dom背景
<body>
<ul>
<span>1</span>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<span>5</span>
</ul>
</body>
<script>
$(function() {
$('ul>span').css('background', 'red');
});
</script>
后代选择器 => 选中某个标签下所有元素改变dom背景
<body>
<ul>
<span>1</span>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<span>5</span>
</ul>
</body>
<script>
$(function() {
$('ul span').css('background', 'red');
});
</script>
兄弟选择器 => 选中某个id下的一个兄弟一级后面的兄弟元素改变dom背景
<body>
<ul>
<span>1</span>
<li><span>2</span></li>
<li id="bgRed"><span>3</span></li>
<li><span>4</span></li>
<span>5</span>
</ul>
</body>
<script>
$(function() {
$('#bgRed+li').css('background', 'red');
});
</script>
<body>
<ul>
<span>1</span>
<li><span>2</span></li>
<li id="bgRed"><span>3</span></li>
<li><span>4</span></li>
<li><span>4-1</span></li>
<span>5</span>
</ul>
</body>
<script>
$(function() {
$('#bgRed~li').css('background', 'red');
});
</script>
过滤筛选器：
基本筛选器 => 指定条件元素改变dom背景
表格奇行改变背景：
<body>
<table cellspacing="0px" cellpadding="10px" border="1px">
<tr><td>阿猫</td><td>男</td><td>15</td></tr>
<tr><td>阿狗</td><td>女</td><td>18</td></tr>
<tr><td>阿猪</td><td>男</td><td>20</td></tr>
<tr><td>阿鸡</td><td>女</td><td>22</td></tr>
</table>
</body>
<script>
$(function() {
$('tr:even').css('background', 'red');
});
</script>
表格偶行改变背景：
$('tr:odd').css('background', 'red');
表格第一行行改变背景：
$('tr:first').css('background', 'red');
表格最后一行行改变背景：
$('tr:last').css('background', 'red');
表格指定到的下标改变背景：
$('tr:lt(2)').css('background', 'red');
表格指定下标后面行改变背景：
$('tr:gt(1)').css('background', 'red');
表格指定特定行改变背景：
$('tr:eq(1)').css('background', 'red');
表格除去指定特定行，其他改变背景：
$('tr:not(tr:eq(1))').css('background', 'red');
内容筛选器 => 指定属性条件选中元素内容改变dom背景
表格中‘女’改变背景：
<body>
<table cellspacing="0px" cellpadding="10px" border="1px">
<tr><td>阿猫</td><td>男</td><td>15</td></tr>
<tr><td>阿狗</td><td>女</td><td>18</td></tr>
<tr><td>阿猪</td><td>男</td><td>20</td></tr>
<tr><td>阿鸡</td><td>女</td><td>22</td></tr>
</table>
</body>
<script>
$(function() {
$('td:contains("女")').css('background', 'red');
});
</script>
表格中‘span’标签改变背景：
<body>
<table cellspacing="0px" cellpadding="10px" border="1px">
<tr><td>阿猫</td><td>男</td><td>15</td></tr>
<tr><td>阿狗</td><td><span>女</span></td><td>18</td></tr>
<tr><td>阿猪</td><td>男</td><td>20</td></tr>
<tr><td>阿鸡</td><td>女</td><td>22</td></tr>
</table>
</body>
<script>
$(function() {
$('td:has(span)').css('background', 'red');
});
</script>
表格中内容为空的改变背景：
<body>
<table cellspacing="0px" cellpadding="10px" border="1px">
<tr><td>阿猫</td><td></td><td>15</td></tr>
<tr><td>阿狗</td><td>女</td><td></td></tr>
<tr><td>阿猪</td><td></td><td>20</td></tr>
<tr><td>阿鸡</td><td>女</td><td>22</td></tr>
</table>
</body>
<script>
$(function() {
$('td:empty').css('background', 'red');
});
</script>
表格中内容不为空的改变背景：
$('td:parent').css('background', 'red');
属性筛选器 => 指定属性条件选中元素内容改变dom背景
查找具有对应input元素的标签改变背景：
<body>
<input type="text" maxlength="10" placeholder="最多输入10个字符"></br></br>
<input type="text" placeholder="最多输入10个字符"></br></br>
<input type="text" maxlength="10" placeholder="最多输入10个字符">
</body>
<script>
$(function() {
$('input[maxlength]').css('background', 'red');
});
</script>
查找具有对应input元素maxlength=20的标签改变背景：
<body>
<input type="text" maxlength="10" placeholder="最多输入10个字符"></br></br>
<input type="text" placeholder="最多输入10个字符"></br></br>
<input type="text" maxlength="20" placeholder="最多输入10个字符">
</body>
<script>
$(function() {
$('input[maxlength="20"]').css('background', 'red');
});
</script>
查找具有对应input元素maxlength！=20的标签改变背景：
$('input[maxlength != "20"]').css('background', 'red');
查找具有对应input元素name的值为en或者以en开头的改变背景：
<body>
<input type="text" name="en" maxlength="10" placeholder="最多输入10个字符"></br></br>
<input type="text" name="en-U" placeholder="最多输入10个字符"></br></br>
<input type="text" name="ch-K" maxlength="20" placeholder="最多输入10个字符">
</body>
<script>
$(function() {
// $('input[name |= "en"]').css('background', 'red');
$('input[name ^= "en"]').css('background', 'red');
});
</script>
查找具有对应input元素name的值为U结尾的改变背景：
$('input[name *= "U"]').css('background', 'red');
查找具有对应input元素name的用空格分隔,值为U结尾的改变背景：
<body>
<input type="text" name="en" maxlength="10" placeholder="最多输入10个字符"></br></br>
<input type="text" name="en U" placeholder="最多输入10个字符"></br></br>
<input type="text" name="ch K" maxlength="20" placeholder="最多输入10个字符">
</body>
<script>
$(function() {
$('input[name ~= "U"]').css('background', 'red');
});
</script>
选择input中name属性为ch-K，maxlength属性为20的，设置其背景为红色
<body>
<input type="text" name="en" maxlength="10" placeholder="最多输入10个字符"></br></br>
<input type="text" name="en-U" placeholder="最多输入10个字符"></br></br>
<input type="text" name="ch-K" maxlength="20" placeholder="最多输入10个字符">
</body>
<script>
$(function() {
$('input[name = "ch-K"][maxlength = "20"]').css('background', 'red');
});
</script>
可见性筛选器 => 根据标签或者id显示隐藏dom
让隐藏的dom显示
<body>
<div id="blockDiv" style="display: block;">显示的div</div>
<div id="noneDiv" style="display: none;">隐藏的div</div>
</body>
<script>
$(function() {
// $('div:hidden').css('display', 'block');
//$('#noneDiv:hidden').css('display', 'block');
$('#noneDiv').show();
});
</script>
让显示的dom隐藏
<body>
<div id="blockDiv" style="display: block;">显示的div</div>
<div id="noneDiv" style="display: none;">隐藏的div</div>
</body>
<script>
$(function() {
// $('div:visible').css('display', 'none');
// $('#blockDiv:visible').css('display', 'none');
$('#blockDiv').hide();
});
</script>
子元素筛选器 => 选中对应父级下对应的dom
选择所有父级元素ul下的第一个子元素li，设置其背景为红色
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
$(function() {
$('ul li:first-child').css('background', 'red');
});
</script>
选择所有父级元素ul下的最后一个子元素li，设置其背景为红色
$('ul li:last-child').css('background', 'red');
选择所有父级元素ul下的第一个子元素li，设置其背景为红色
$('ul li:nth-child(1)').css('background', 'red');
表单选择器：
选中表单中的文本框更改背景
<body>
<form>
<input type="submit" value="提交按钮"><br>
</form>
</body>
<script>
$(function() {
$('input:submit').css('background', 'red');
});
</script>
2.1：工具
$.each方法 => 迭代数组与对象
var arr = [10, 20, 30, 40, 50, 60];
$.each(arr, function (index, element) {
console.log(index, element);
});
var obj = {
name: '阿狗',
age: 28,
speak: function () {}
};
$.each(obj, function (key, value) {
console.log(key, value);
});
$.trim方法 => 去掉字符串起始和结尾的空格
var str = ' 阿毛 ';
console.log($.trim(str));
$.type方法 => 判断类型
var str = [];
console.log($.type(str));
$.isArray方法 => 测试指定对象是否为一个数组
var arr = [10, 20, 30, 40, 50, 60];
console.log($.isArray(arr));
$.isFunction方法 => 测试指定对象是否为一个函数
var fun = function () {};
console.log($.isFunction(fun));
2.2：AJAX
$.ajax方法
一般开发中都是对请求方法尽心对应的封装的！
$.ajax({
url: options.url,
type: options.type,
data: parmasData,
dataType: options.dataType,
success: function (res) {
if (res.code === 0) {
options.success(res);
} else if (res.code == -1) {
Http.error(res.msg);
} else if (res.code === -1000) {
Http.loginOut(res);
} else {
Http.error(res.msg + ",错误编码" + res.code);
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
Http.error('请求服务器失败，请稍候重试');
}
});
$.get方法
$.ajax({
url: Const.COMMON_URL,
type: "get",
async: false,
data: {
method: "xxxxx",
data: JSON.stringify({})
},
dataType: "json",
success: function (res) {
if (res.code == 0) {
} else {
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('请求失败');
}
});
$.post方法
$.ajax({
url: Const.COMMON_URL,
type: "post",
data: {
method: "xxxx",
data: JSON.stringify({}),
page: 1,
limit: 10
},
dataType: "json",
success: function (res) {
if (res.code == 0) {
} else {
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('请求失败');
}
});
第三节：核心对象
3.0：属性
属性
attr() => 操作标签非布尔值属性的值
改变属性的对应值
<body>
<input id="inputConId" type="submit" value="改变前按钮">
</body>
<script>
$(function() {
$('#inputConId').attr('value', '改变后按钮');
});
</script>
读取p标签的title属性并输出
<body>
<input id="inputConId" type="submit" value="改变前按钮">
</body>
<script>
$(function() {
var inputValue= $('#inputConId').attr('value')
console.log(inputValue)
});
</script>
prop() => 操作标签属性为布尔值的值
设置复选框的状态为选中状态
<body>
<input type="checkbox">复选框
</body>
<script>
$(function() {
$(':checkbox').prop('checked', 'true');
});
</script>
读取复选框的选中状态并输出
<body>
<input checked type="checkbox">复选框
</body>
<script>
$(function() {
var checkType = $(':checkbox').prop('checked')
console.log(checkType);
});
</script>
val() => 获取表单元素的值和设置表单元素的值
初始化input的值为123456
<body>
<input type="text">
</body>
<script>
$(function() {
$(':text').val('123456');
});
</script>
读取input的值
<body>
<input type="text" value="123456">
</body>
<script>
$(function() {
var inputValue = $(':text').val();
console.log(inputValue)
});
</script>
样式
css() => 获取匹配元素集合中的第一个元素的样式属性的计算值或设置每个匹配元素的一个或多个CSS属性
根据id设置div的背景颜色为红色，字体颜色为白色
<body>
<div id='bgRed'>我是div</div>
</body>
<script>
$(function() {
$('#bgRed').css({
'background': 'red',
'color': 'white'
});
});
</script>
addClass() => 为每个匹配的元素添加指定的样式类名
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
<script>
$(function() {
$('li').addClass('addClass');
});
</script>
<style>
.addClass {
font-weight: bold;
font-size: 18px;
color: coral;
}
</style>
removeClass() => 移除集合中每个匹配元素上一个，多个或全部样式
<body>
<ul>
<li class="addClass">1</li>
<li class="addClass">2</li>
<li class="addClass">3</li>
<li class="addClass">4</li>
</ul>
</body>
<script>
$(function() {
$('li').removeClass('addClass');
});
</script>
<style>
.addClass {
font-weight: bold;
font-size: 18px;
color: coral;
}
</style>
hasClass() => 确定任何一个匹配元素是否有被分配给定的样式类
<body>
<div class="hasClass">是否包含该元素</div>
</body>
<script>
$(function() {
var hasClass = $('.hasClass').hasClass('hasClass')
console.log(hasClass);
});
</script>
<style>
.hasClass {
font-weight: bold;
font-size: 18px;
color: coral;
}
</style>
toggleClass() => 匹配的元素集合中的每个元素上添加或删除一个或多个样式类，取决于这个样式类是否存在
点击切换dom的显示与隐藏
<body>
<button id="butDiv">按钮</button>
<div id="domDiv">我是div</div>
</body>
<script>
$(function() {
$('#butDiv').click(function () {
$('#domDiv').toggleClass('hide');
});
});
</script>
<style>
.hide {
width: 100px;
height: 100px;
display: none;
}
</style>
尺寸
width() => 获取内容元素width的值
height() => 获取内容元素height的值
innerWidth() => 获取内容元素width+padding的值
innerHeight() => 获取内容元素height+padding的值
outerWidth() => outerWidth(false/true)，获取内容元素width+padding+border的值，如果是true再加上margin的值
outerHeight() => outerHeight(false/true)，获取内容元素height+padding+border的值，如果是true再加上margin的值
<body>
<div class="box">盒子</div>
</body>
<script>
$(function() {
var $box = $('.box');
console.log($box.width(), $box.height());// 100 100
console.log($box.innerWidth(), $box.innerHeight());// 140 140
console.log($box.outerWidth(), $box.outerHeight());// 160 160
console.log($box.outerWidth(true), $box.outerHeight(true));// 220 220
});
</script>
<style>
.box {
margin: 30px;
padding: 20px;
border: 10px;
width: 100px;
height: 100px;
background: coral;
}
</style>
位置
offset() => 获取div相对页面左上角的坐标
这的margin和padding没有清零，所以有边距的！
<body>
<div class="box">盒子</div>
</body>
<script>
$(function() {
var offset = $('.box').offset();
console.log(offset);
console.log(offset.left, offset.top);
});
</script>
<style>
.box {
width: 100px;
height: 100px;
background: coral;
}
</style>
position() => 获取dom相对于父元素左上角的坐标
<body>
<div class="box-container">
<div class="box"></div>
</div>
</body>
<script>
$(function() {
var offset = $('.box').position();
console.log(position);
console.log(position.left, position.top);
});
</script>
<style>
.box-container {
width: 300px;
height: 300px;
background: pink;
position: absolute;
left: 20px;
top: 20px;
}
.box {
width: 100px;
height: 100px;
background: coral;
position: absolute;
left: 20px;
top: 20px;
}
</style>
scrollLeft() => 读取/设置滚动条的X坐标
读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollLeft = $(document.body).scrollLeft()+$(document.documentElement).scrollLeft();
读取页面滚动条的Y坐标(兼容chrome和IE)
$('body,html').scrollLeft(60);
设置页面的宽度为2000px，设置滚动条的X轴坐标为300px，要求兼容各种浏览器
$('body').css('width', '2000px');
$('html,body').scrollLeft(300);
scrollTop() => 读取/设置滚动条的Y坐标
读取页面滚动条的Y坐标(兼容chrome和IE)
var scrollTop = $(document.body).scrollTop()+$(document.documentElement).scrollTop();
设置页面滚动条滚动到指定位置(兼容chrome和IE)
$('body,html').scrollTop(60);
设置页面的高度为2000px，设置滚动条的Y轴坐标为300px，要求兼容各种浏览器
$('body').css('height', '2000px');
$('html,body').scrollTop(300);
3.1：操作
DOM内部插入
text() => 设置/获取元素的文本内容
<body>
<div id="setVlaue"></div>
</body>
<script>
$(function() {
$('#setVlaue').text('添加的值');
// 获取dom的值
var getValue = $('#setVlaue').text()
console.log(getValue);
});
html() => 插入/获取元素的html内容
<body>
<div id="setHtml"></div>
</body>
<script>
$(function() {
var addSpan = '<span>我是插入的html</span>'
$('#setHtml').html(addSpan);
// 获取插入的dom
var getHtml = $('#setHtml').html()
console.log(getHtml);
});
</script>
append() => 向当前匹配的所有元素内部的最后面插入指定内容
<body>
<div id="setHtml">
<div>1</div>
<div>2</div>
</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是拼接插入的html</div>'
$('#setHtml').append(addSpan);
});
</script>
appendTo() => 将指定的内容追加到当前匹配的所有元素的最后面
<body>
<div id="setHtml">
<div>1</div>
<div>2</div>
</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是追加插入的html</div>'
$(addSpan).appendTo('#setHtml');
});
</script>
prepend() => 向当前匹配的所有元素内部的最前面插入指定内容
<body>
<div id="setHtml">
<div>1</div>
<div>2</div>
</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是追加插入的html</div>'
$('#setHtml').prepend(addSpan);
});
</script>
prependTo() => 将指定的内容追加到当前匹配的所有元素的最前面
<body>
<div id="setHtml">
<div>1</div>
<div>2</div>
</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是追加插入的html</div>'
$(addSpan).prependTo('#setHtml');
});
</script>
DOM外部插入
after() => 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点
<body>
<div id="setHtml">原来的dom</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是追加插入的html</div>'
$('#setHtml').after(addSpan);
});
</script>
before() => 在匹配元素集合中的每个元素前边插入参数所指定的内容，作为其兄弟节点
<body>
<div id="setHtml">原来的dom</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是追加插入的html</div>'
$('#setHtml').before(addSpan);
});
</script>
insertAfter() => 与after()实现同样的功能
.after()和.insertAfter() 实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。 对于.after()，选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter()，刚好相反，内容在方法前面，它将被放在参数里元素的后面。
<body>
<div id="setHtml">原来的dom</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是追加插入的html</div>'
$(addSpan).insertAfter('#setHtml');
});
</script>
insertBefore() => 与before()实现同样的功能
before()和.insertBefore()实现同样的功能。主要的不同是语法，特别是插入内容和目标的位置。 对于.before()，选择表达式在函数前面，参数是将要插入的内容。对于.insertBefore()，刚好相反，内容在方法前面，它将被放在参数里元素的前面
<body>
<div id="setHtml">原来的dom</div>
</body>
<script>
$(function() {
var addSpan = '<div>我是追加插入的html</div>'
$(addSpan).insertBefore('#setHtml');
});
</script>
DOM移除
empty() => 删除所有匹配元素的子元素
<body>
<div id="divContent">
<span>1</span>
<ul>
<li>2</li>
<li>3/li>
</ul>
<p>4</p>
</div>
</body>
<script>
$(function() {
$('#divContent').empty();
});
</script>
remove() => 删除所有匹配的元素,同时移除元素上的事件及 jQuery 数据
<body>
<div id="divContent">
<span>1</span>
<ul>
<li>2</li>
<li>3/li>
</ul>
<p>4</p>
</div>
</body>
<script>
$(function() {
$('#divContent > ul').remove();
});
</script>
DOM替换
replaceWith() => 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
<body>
<div id="divContent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<script>
$(function() {
$('#divContent>span').replaceWith('<p>替换的内容</p>');
});
</script>
replaceAll() => .replaceAll()和.replaceWith()功能类似，但是目标和源相反
<body>
<div id="divContent">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
<script>
$(function() {
$('<p>替换的内容</p>').replaceAll($('#divContent>span'));
});
</script>
DOM拷贝
clone()
创建一个匹配的元素集合的深度拷贝副本。如果传入一个true，则表示是否会复制元素上的事件处理函数，从jQuery 1.4开始，元素数据也会被复制。
<body>
<div id="fatherDiv">
<div id="divContent">拷贝的元素</div>
</div>
</body>
<script>
$(function() {
var copyDiv = $('#divContent').clone();
$('#fatherDiv').append(copyDiv);
});
</script>
DOM遍历
parent() => 根据id获得集合中与其匹配元素的父元素
<body>
<div class="fatherDiv">
<p>1</p>
<p>2</p>
<div id="sonDiv">3</div>
</div>
</body>
<script>
$(function() {
var fatherDiv = $('#sonDiv').parent()[0];
console.log($('#sonDiv'));
console.log(fatherDiv);
});
</script>
children() => 根据id获得集合中与其匹配元素的子元素
<body>
<div class="fatherDiv">
<p>1</p>
<p>2</p>
<div id="sonDiv">3</div>
</div>
</body>
<script>
$(function() {
var sonDiv = $('.fatherDiv').children();
console.log(sonDiv);
for (var i = 0; i < sonDiv.length; i++) {
console.log(sonDiv[i]);
}
});
</script>
prev() => 根据id获得集合中与其匹配元素紧邻的前一个兄弟元素
<body>
<div class="fatherDiv">
<span>1</span><br />
<p>2</p>
<div id="fbrotherDiv">3</div>
</div>
</body>
<script>
$(function() {
var brotherDiv = $('#fbrotherDiv').prev()[0];
console.log($('#fbrotherDiv'));
console.log(brotherDiv);
});
</script>
prevAll() => 根据id获得集合中与其匹配元素的所有前面的兄弟元素
<body>
<div class="fatherDiv">
<span>1</span><br />
<p>2</p>
<div id="sonDiv">3</div>
</div>
</body>
<script>
$(function() {
var brothersDiv = $('#sonDiv').prevAll();
console.log(brothersDiv);
for (var i = 0; i < brothersDiv.length; i++) {
console.log(brothersDiv[i]);
}
});
</script>
next() => 根据id获得集合中与其匹配元素紧邻的后一个兄弟元素
<body>
<div class="fatherDiv">
<span>1</span><br />
<div id="sonDiv">3</div>
<p>2</p>
</div>
</body>
<script>
$(function() {
var nextBrotherDiv = $('#sonDiv').next()[0];
console.log(nextBrotherDiv);
});
</script>
nextAll() => 根据id获得集合中与其匹配元素的所有后面的兄弟元素
<body>
<div class="fatherDiv">
<span>1</span><br />
<div id="sonDiv">3</div>
<p>2</p>
<div>2222</div>
<div>3333</div>
</div>
</body>
<script>
$(function() {
var nextsBrotherDiv = $('#sonDiv').nextAll();
for (var i = 0; i < nextsBrotherDiv.length; i++) {
console.log(nextsBrotherDiv[i]);
}
});
</script>
siblings() => 根据id获得集合中所有兄弟元素
<body>
<div class="fatherDiv">
<span>1</span><br />
<div id="sonDiv">3</div>
<p>2</p>
<div>2222</div>
<div>3333</div>
</div>
</body>
<script>
$(function() {
var commonsBrotherDiv = $('#sonDiv').siblings();
for (var i = 0; i < commonsBrotherDiv.length; i++) {
console.log(commonsBrotherDiv[i]);
}
});
</script>
3.2：遍历
遍历
each() => 遍历dom查找对应的dom
<body>
<ul>
<p>1</p>
<li>2</li>
<li>3</li>
<li id="threelI">4</li>
<p>5</p>
</ul>
</body>
<script>
$(function() {
$('li').each(function (index, element) {
console.log(index, element);
});
});
</script>
筛选
first() => 获取匹配元素集合中第一个元素
<body>
<ul>
<p>1</p>
<li>2</li>
<li>3</li>
<li id="threelI">4</li>
<p>5</p>
</ul>
</body>
<script>
$(function() {
$('ul>li').first().css('background', 'red');
});
</script>
last() => 获取匹配元素集合中最后一个元素
<body>
<ul>
<p>1</p>
<li>2</li>
<li>3</li>
<li id="threelI">4</li>
<p>5</p>
</ul>
</body>
<script>
$(function() {
$('ul>li').last().css('background', 'red');
});
</script>
eq() => 获取匹配元素集合中指定位置索引的一个元素
<body>
<ul>
<p>1</p>
<li>2</li>
<li>3</li>
<li id="threelI">4</li>
<p>5</p>
</ul>
</body>
<script>
$(function() {
$('ul>li').eq(1).css('background', 'red');
});
</script>
not() => 从匹配的元素集合中移除指定的元素
<body>
<ul>
<p>1</p>
<li>2</li>
<li>3</li>
<li id="threelI">4</li>
<p>5</p>
</ul>
</body>
<script>
$(function() {
var threelI = $('ul>li').eq(2);
$('ul>li').not(threelI).css('background', 'red');
});
</script>
filter() => 筛选元素集合中匹配表达式或通过传递函数测试的元素集合
<body>
<ul>
<p>1</p>
<li>2</li>
<li>3</li>
<li id="threelI">4</li>
<p>5</p>
</ul>
</body>
<script>
$(function() {
$('ul>li').filter('[id=threelI]').css('background', 'red');
});
</script>
3.3：事件
浏览器事件
resize() => 监控浏览器变化，适配分辨率使用比较多
<script>
$(function() {
$(window).resize(function () {
console.log('浏览器当前窗口可视区域宽度：', $(window).width());
console.log('浏览器当前窗口可视区域高度：', $(window).height());
console.log('浏览器当前窗口文档的宽度：', $(document).width());
console.log('浏览器当前窗口文档的高度：', $(document).height());
console.log('浏览器当前窗口文档body的宽度：', $(document.body).width());
console.log('浏览器当前窗口文档body的高度：', $(document.body).height());
console.log('浏览器当前窗口文档body的总宽度包括border padding margin：', $(document.body).outerWidth(true));
console.log('浏览器当前窗口文档body的总高度包括border padding margin：', $(document.body).outerHeight(true));
});
});
</script>
scroll() => 监控盒子的滚动，分页加载使用比较多
<body>
<div id="scollDiv">
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
<p>滚动的盒子</p>
</div>
</body>
<script>
$(function() {
$('#scollDiv').scroll(function () {
console.log('浏览器滚动条改变了');
});
});
</script>
<style>
#scollDiv {
width: 300px;
height: 300px;
background: pink;
overflow: scroll;
}
</style>
事件绑定
on() => 在选定的元素上绑定一个或多个事件处理函数
<body>
<div id="clickDiv">点击触发事件</div>
</body>
<script>
$(function() {
$('#clickDiv').on('click',function () {
console.log('按钮被单击了');
});
});
</script>
off() => 移除一个事件处理函数
<body>
<div id="clickDiv">点击触发事件再解绑事件</div>
</body>
<script>
$(function() {
$('#clickDiv').on('click',function () {
console.log('点击触发事件再解绑事件');
});
$('#clickDiv').off('click');
});
</script>
事件委托
delegate() => 事件一直向下委托，同类下点击
<body>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
</body>
<script>
$(function() {
$('ul').delegate('li', 'click', function () {
this.style.background = 'red';
});
});
</script>
undelegate() => 移除事件委托
// 设置事件委托
$('ul').delegate('li', 'click', function () {
this.style.background = 'red';
});
// 移除事件委托
$('ul').undelegate('click');
事件对象
表单事件
focus()/blur() => 获取焦点或者失去焦点
<body>
<input type="text" placeholder="请输入文本">
</body>
<script>
$(function() {
$(':text').focus(function () {
$(this).css('background', 'red');
});
$(':text').blur(function () {
$(this).css('background', 'green');
});
});
</script>
change() => 当内容改变时触发所绑定的函数,搜索防抖和下拉选择比较好
<body>
<input type="text" placeholder="请输入文本">
</body>
<script>
$(function() {
$(':text').change(function () {
console.log($(this).val());
});
});
</script>
<body>
<select>
<option>河北</option>
<option>河南</option>
<option>上海</option>
<option>北京</option>
<option>广东</option>
</select>
</body>
<script>
$('select').change(function () {
console.log($(this).val());
});
</script>
select() => 当内容选择时触发所绑定的函数
<body>
<input type="text" value="8888888">
</body>
<script>
$('input').select(function () {
console.log($(this).val());
});
</script>
submit() => 当表单提交时触发所绑定的函数
<body>
<form action="#">
<input type="submit">
</form>
</body>
<script>
$(function() {
$('form').submit(function () {
console.log('表单提交了')
});
});
</script>
鼠标事件
click() => 根据id点击触发事件
$('#clickDiv').click(function () {
console.log('按钮被单击了');
});
dblclick() => 鼠标双击时调用所绑定的函数
$('#clickDiv').dblclick(function () {
console.log('按钮被双击了');
});
mousedown() => 鼠标左键按下的时候调用所绑定的函数
$('#clickDiv').mousedown(function () {
console.log('按钮被按下左键了');
});
mouseleave() => 当鼠标左键松开的时候调用所绑定的函数
$('#clickDiv').mouseleave(function () {
console.log('按钮被松开左键了');
});
mouseenter() => 当鼠标进入目标元素的时候调用所绑定的函数
$('#clickDiv').mouseenter(function () {
console.log('鼠标进入目标元素了');
});
mouseleave() => 当鼠标离开目标元素的时候调用所绑定的函数
$('#clickDiv').mouseleave(function () {
console.log('鼠标离开目标元素了');
});
mouseover() => 当鼠标进入目标元素的时候调用所绑定的函数
注意：mouseenter事件和mouseover的不同之处是事件的冒泡的方式。mouseenter 事件只会在绑定它的元素上被调用，而不会在后代节点上被触发。
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
<script>
$(function() {
$('.outer').mouseover(function () {
console.log('mouse over');
});
});
</script>
<style>
.outer {
width: 200px;
height: 200px;
background: coral;
}
.inner {
width: 100px;
height: 100px;
background: pink;
}
</style>
mousemove() => 当鼠标离开目标元素的时候调用所绑定的函数
$('.outer').mouseleave(function () {
console.log('mouse leave');
});
hover() => 同时绑定 mouseenter和 mouseleave事件
$('.outer').hover(function () {
$(this).css('background', 'red');
}, function () {
$(this).css('background', 'green');
});
键盘事件
keydown() => 当键盘按键按下的时候调用绑定的函数
<body>
<input type="text">
</body>
<script>
$(function() {
$(':text').keydown(function (event) {
console.log(event.key);
});
});
</script>
keyup() => 当键盘按键松开的时候调用绑定的函数
<body>
<input type="text">
</body>
<script>
$(function() {
$(':text').keyup(function (event) {
console.log(event.key);
});
});
</script>
keypress() =>与keydown类似，当键盘按键按下的时候调用绑定的函数,手机端搜索绑定防抖
<body>
<input type="text">
</body>
<script>
$(function() {
$(':text').keypress(function (event) {
console.log(event.key);
});
});
</script>
3.4：动画
基础
hide() => 隐藏/显示元素
$('.box').hide();
$('.box').show();
toggle() => 切换隐藏/显示元素
$('button').click(function () {
$('.box').toggle();
});
渐变
fadeIn()/fadeOut() => 淡入动画显示/隐藏元素
$('button').click(function () {
$('.box').fadeIn('slow');
$('.box').fadeOut('slow');
});
fadeToggle() => 切换淡入动画显示/隐藏元素
$('button').click(function () {
$('.box').fadeToggle('slow');
});
滑动
slideDown()/slideUp() => 滑动动画显示/隐藏一个匹配元素
$('button').click(function () {
$('.box').slideDown();
$('.box').slideUp();
});
slideToggle() => 切换滑动动画显示/隐藏一个匹配元素
$('button').click(function () {
$('.box').slideToggle();
});
自定义
animate() => 根据一组 CSS 属性，执行自定义动画，并且支持链式调用
<body>
<button>自定义动画</button>
<div class="box"></div>
</body>
<script>
$(function() {
$('.box')
.animate({
width: '200'
})
.animate({
height: '200',
});
});
</script>
<style>
.box {
width: 100px;
height: 100px;
background: black;
}
</style>
##
第四节：jQuery插件介绍
扩展jQuery工具
min(a, b) : 返回较小的值
max(c, d) : 返回较大的值
leftTrim() : 去掉字符串左边的空格
rightTrim() : 去掉字符串右边的空格
// 扩展jQuery工具的方法
$.extend({
min: function (a, b) {
return a < b ? a : b
},
max: function (a, b) {
return a > b ? a : b
},
leftTrim: function (str) {
return str.replace(/^\s+/, '')
},
rightTrim: function (str) {
return str.replace(/\s+$/, '')
}
});
// 测试扩展jQuery工具的方法
console.log($.min(3, 5));
console.log($.max(3, 5));
console.log('-----' + $.leftTrim(' hello ') + '-----');
console.log('-----' + $.rightTrim(' hello ') + '-----');
扩展jQuery对象
checkAll() : 全选
unCheckAll() : 全不选
reverseCheck() : 全反选
// 扩展jQuery对象的方法
$.fn.extend({
checkAll: function () {
this.prop('checked', true);
},
unCheckAll: function () {
this.prop('checked', false);
},
reverseCheck: function () {
this.each(function () {
this.checked = !this.checked;
});
}
});
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="全反选"/>
// 测试扩展jQuery对象的方法
var $items = $(':checkbox[name=items]');
$('#checkedAllBtn').click(function () {
$items.checkAll();
});
$('#checkedNoBtn').click(function () {
$items.unCheckAll();
});
$('#reverseCheckedBtn').click(function () {
$items.reverseCheck();
});
第五节：
项目实战
基础学的差不多了，我之前都是在菜鸟教程下载的项目或者网上找的例子实战，看着就很简单的，但是你做的时候千奇百怪的问题都会有的！所以还是要多多实战使用语法！做到熟能生巧才是正道的！
jq小部件
和vue或者uniapp一样，有时候直接使用一些组件框架开发效率更加高的！
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器，jQuery UI 都是一个完美的选择。
jQuery UI 包含了许多维持状态的小部件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 小部件（Widget）使用相同的模式，所以，只要您学会使用其中一个，您就知道如何使用其他的小部件（Widget）
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。
jQuery EasyUI 框架提供了创建网页所需的一切，帮助您轻松建立站点。本教程将告诉您如何使用 jQuery EasyUI 框架创建应用
。。。。
333
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
