jQuery
jQuery是 DOM/BOM/JavaScript的类库
导入jQuery方法
<script src="jQuery-3.4.0.js"></script>
jQuery对象与DOM对象的转换：
(jquery对象)[0] => (Dom对象)
(Dom对象) =>$ (Dom对象)
选择器：直接找到某个或者某类标签
1. id选择器
寻找所有id="i1"的标签
$('#i1')
2. class选择器
寻找所有class="c1"的标签
$(".c1")
3. 标签选择器
寻找所有div标签
$("div")
4. 组合选择器(逗号分隔)
寻找所有div标签或class="c1"或id="i1"的标签
$('div,.c1,#i1')
5. 层级选择器(空格或'>'分隔)
$('#i1 div') id="i1"的标签下所有的div标签
$('#i1>div') id="i1"的标签下一层的div标签
6. 基本筛选器
:first 匹配第一个元素
:last 匹配最后一个元素
:odd 匹配所有索引值为奇数的元素，从 0 开始计数
:even 匹配所有索引值为偶数的元素，从 0 开始计数
:eq(index) 匹配所有索引值为(index)的元素，从 0 开始计数
7. 属性选择器
$('[name]') 匹配具有name属性的所有标签
$('[name="123"]') 匹配name属性等于123的标签
$("input[type='text']") 等于 $(':text')
如果选择器中出现变量，需要拼接起来
var uid = 1;
$('[u_id = "' + uid + '"]')
示例：
<table id="i1" border="1">
<thead>
<tr>
<th>选项</th>
<th>表头1</th>
<th>表头2</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>选项1</td>
<td>选项2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>选项3</td>
<td>选项4</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>选项5</td>
<td>选项6</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>选项7</td>
<td>选项8</td>
</tr>
</tbody>
</table>
<div>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="反选" onclick="reverseAll()">
<input type="button" value="取消" onclick="cancelAll()">
</div>
<script src="jQuery-3.4.0.js"></script>
<script>
function checkAll() {
$('#i1 :checkbox').prop('checked', true);
}
function cancelAll() {
$('#i1 :checkbox').prop('checked', false);
}
function reverseAll() {
$('#i1 :checkbox').each(function(){
// var v = $(this).prop('checked')?false:true;
var v = !$(this).prop('checked');
$(this).prop('checked', v);
})
}
</script>
</body>
遍历方法
$('').next() 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
$('').nextAll() 查找当前元素之后所有的同辈元素
$('').nextUntil('.c1', 'div') 查找当前元素之后所有的同辈div元素，直到遇到class="c1"为止
$('').prev() 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
$('').prevAll() 查找当前元素之前所有的同辈元素
$('').prevUntil('c1', 'div') 查找当前元素之前所有的同辈div元素，直到遇到class="c1"为止
$('').parent() 取得一个包含着所有匹配元素的唯一父元素的元素集合
$('').parents() 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)
$('').parentsUntil('c1', 'div') 查找当前元素的所有的父辈div元素，直到遇到class="c1"为止
$('').children() 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
$('').siblings() 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
$('#i1').find('div') == $('#i1 div') 搜索所有匹配元素的子标签中与指定表达式匹配的元素
hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true
$('li').eq(1) 等于 $('li:eq(1)')
$().index() 获取元素的索引值
$('li').first 等于 $('li:first')
$('li').last 等于 $('li:last')
方法
文本操作：
$().text() 获取文本内容
$().text(“<a>1</a>”) 设置文本内容
$().html() 获取HTML
$().html("<a>1</a>") 设置HTML
$(':checkbox').val() 获取value属性
$(':text').val('文本框默认内容') 设置value属性
样式操作：
$().addClass() 为每个匹配的元素添加指定的类名，多个类名用空格分隔
$().removeClass() 从所有匹配的元素中删除全部或者指定的类，多个类名用空格分隔
$().toggleClass() (有：remove；无：add)
属性操作：
$().attr('n') 获取元素的属性值
$().attr('n','v') 设置元素的属性值
$().removeAttr('n') 移除元素的属性
专门用于chekbox,radio
$().prop('checked')
$().prop('checked', true)
文档处理：
内部插入(插入子标签)
$().append() 向每个匹配的元素内部最后追加内容
$().appendTo() 将前面的元素追加到后面的元素内部
$().prepend() 向每个匹配的元素内部开头追加内容
$().prependTo()
外部插入(插入兄弟标签)
$().after() 在每个匹配的元素之后插入内容
$().before() 在每个匹配的元素之前插入内容
$().remove() 删除匹配的元素集合(包括其中的所有内容)
$().empty() 清空匹配的元素集合中的所有内容(最外层标签还在)
$().clone(true) 克隆匹配的DOM元素并且选中这些克隆的副本，参数为false(默认)时不复制事件处理程序
css处理
$().css('color', 'red') 修改/增加匹配元素的样式属性
位置：
$(window).scrollTop() 获取匹配元素相对滚动条顶部的偏移
$(window).scrollTop(0) 设置匹配元素相对滚动条顶部的偏移
$(window).scrollLeft()
$().offset().left 获取匹配元素在当前视口的相对偏移
$().offset().top
$().position() 获取匹配元素相对(position: relative)父元素的偏移
点赞示例：
<body>
<div id="main" style="position: relative; margin: 50px;">
👍
</div>
<script src="jQuery-3.4.0.js"></script>
<script>
function like(self){
var fontSize = 15;
var left = 20;
var bottom = 10;
var opacity = 1;
var moveLike = document.createElement("span");
$(moveLike).text('+1');
$(moveLike).css('position', 'absolute');
$(moveLike).css('fontSize', fontSize + 'px');
$(moveLike).css('left', left + 'px');
$(moveLike).css('bottom', bottom + 'px');
$(moveLike).css('opacity', opacity);
$(self).append(moveLike);
var obj = setInterval(function(){
fontSize += 2;
left += 2;
bottom += 2;
opacity -= 0.05;
$(moveLike).css('fontSize', fontSize + 'px');
$(moveLike).css('left', left + 'px');
$(moveLike).css('bottom', bottom + 'px');
$(moveLike).css('opacity', opacity);
if(opacity < 0){
clearInterval(obj);
$(moveLike).remove();
}
}, 50);
}
$('#main').click(function(){
like(this);
})
</script>
</body>
尺寸：
$('').height() 获取/设置标签的高度 纯高度
$('').innerHeight()获取标签的高度 纯高度 padding
$('').outerHeight()获取标签的高度 纯高度 padding border
$('').outerHeight(true)获取标签的高度 纯高度 padding border margin
当返回了多个元素时：
jQuery方法内置循环，可以直接进行批量操作：
// 进行简单操作
$('').XXX
// 进行复杂操作
$('').each(function(i){
// i当前索引
// 当前循环的元素：DOM对象：this jQuery对象：$(this)
})
事件
$('').click() 触发每一个匹配元素的click事件
$('.c1').on('click',function(){}) 在选择元素上绑定一个或多个事件的事件处理函数
$('.c1').off('click',function(){}) 在选择元素上移除一个或多个事件的事件处理函数
bind/unbind作用等同于on/off
$('.c1').bind('click',function(){})
$('.c1').unbind('click',function(){})
委托，新添加的标签也可以绑定事件
点击前才绑定
$('').on('click', 'div', function(){})
$('').off('click', 'div', function(){})
推荐使用 .on() 和 .off() 在新版jQuery使用旧版本弃用的方法会报错！！！（如 .load()）
delegate/undelegate可以起到相同作用
$('').delegate('div', 'click', function(){})
$('').undelegate('div', 'click', function(){})
阻止事件发生
自定义的事件在默认事件之前执行(checkbox除外)，如果自定义事件return false，则不执行默认事件
循环中的return false只结束循环
DOM方式
jQuery方式:
示例：
<body>
<div id="main">
<div>
<form id="f1" action="menu.html">
<div class="c1">
<span class="tip">name:</span>
<input name="name" type="text">
</div>
<div class="c1">
<span class="tip">age:</span>
<input name="age" type="text">
</div>
<div class="c1">
<span class="tip">sex:</span>
<input name="sex" type="text">
</div>
<div class="c1">
<span class="tip">E-mail:</span>
<input name="e-mail" type="text">
</div>
<div class="c1">
<span class="tip">TAL:</span>
<input name="tal" type="text">
</div>
<div class="c1">
<span class="tip">password:</span>
<input name="password" type="password">
</div>
<div class="c1">
<span class="tip"></span>
<input value="submit" type="submit">
</div>
</form>
</div>
</div>
<script src="jQuery-3.4.0.js"></script>
<script>
$('#f1 :submit').click(function() {
$('#f1 .new').remove();
var flag = true;
$('#f1 :text, :password').each(function () {
if ($(this).val().length <= 0) {
flag = false;
var span = document.createElement("span");
$(span).text('*必填').css('color','red').addClass('new');
$(this).after(span);
// 如果在此return false，出现一个空就不再循环,只会有一个提示
}
});
return flag;
});
</script>
</body>
自执行函数
当页面框架加载完成之后，自动执行(如果不加，则要等待所有元素加载完成后才执行)，为了更早绑定，防止页面完全加载完成前函数不生效，需要将<script></script>标签中所有函数放在自执行函数中
$(function(){
})
jQuery扩展：
$.extend({
'func_name': function({
...
})
})
调用方式：$.方法
$.fn.extend({
'func_name': function({
...
})
})
调用方法：$(..).方法
防止不同js文件中全局变量冲突，需要将全局变量封装
(function(arg){
var status = 1;
arg.extend({
'func_name': function({
...
})
})(jQuery)
三元运算
var v = 条件 ? 真值 : 假值
