一. jQuery基础知识
认识jQuery
- jQuery是一个轻量级的、兼容多浏览器的JavaScript库
- jQuery是用户能够更方便的处理HTML Document、Events、实现动画效果，并且方便地进行Ajax交互，能够极大的简化JavaScript编程。它的宗旨就是：“Write less,do more”
jquery的优势
一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。(加载速度快)
丰富的DOM选择器。jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。(选择器更多)
链式表达式。jQuery的链式操作可以把多个操作写在一行代码搞定，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了 Ajax操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应的插件，并且用jQuery插件做出来的效果很炫，并且可以更具自己需要去改写和封装插件，简单实用。
jQuery版本
1.x：兼容IE678，使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4(2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增，如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4(2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版本。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的花，一般会选择放弃对IE678的支持
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象就是jQuery独有的。
如果一个对象是jQuery对象，那么它就可以使用jQuery里面的方法
jQuery导入之后需要使用关键字才能够使用
默认的关键字就是jQuery但是不好输入可以使用$符号替换
jQuery封装了js代码，让编写更简单，但是有时候js代码更快(原因要下加载jQuery在加载js代码)
ex:$('#dl1').html(); //获取id值为dl1的元素的html代码，其中html()是jQuery里面的方法
上面一句话相当于：document.getElementById('dl1').innerHTML;
虽然jQuery对象是包装DOM对象产生的，但是jQuery对象无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法
一个约定，我们在申明一个jQuery对象变量的时候，都在变量名前面使用$符号
https://jquery.com/download/js与jQuery代码对比
let pEle = document.getElementsByTagName('p')[0]
undefined
pEle.style.color = 'red'
'red'
pEle.nextElementSibling.style.color = 'green'
$('p').first().css('color','yellow').next().css('color','blue')jQuery查找标签
选择器
基本选择器
$('#id值'); // id选择器 $('.class值'); // class选择器 $('标签名'); // 标签选择器组合选择器
$('span.c1'); // 查找span元素并且class类为c1的元素 $('div#di'); // 查找div元素并且id值为di的元素 $('div,span,p'); //查找div、span、p标签 $('span,#dl,.box'); //查找span标签、id值为dl的标签和类为box的所有标签 $('*'); //查找所有元素选择器层次选择器
$('div span'); // 查找div里面所有span后代(子子孙孙) $('div > span'); // 查找div里面的span标签(儿子) $('div + span'); // 查找紧挨着div同层级后面的span标签(相邻) $('div ~ span'); // 查找div同层级后面的所有span标签(兄弟)属性选择器
$('[name=gender]'); //找到name值为gender的标签 $('input[name=gender]'); //找到name属性值为gender的input标签 $('input[name!=gender]'); //找到name属性值不为gender的input标签筛选器
基本筛选器
:first // 第一个 :last // 最后一个 :eq(index) // 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从0开始计数 :odd // 匹配所有索引值为奇数的元素，从0开始计数 :gt(index) // 匹配所有大于给定索引值的元素 :lt(index) // 匹配所有小于给定索引值的元素 :not(元素选择器) // 移除所有满足not条件的标签 :has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找) $('li:first'); 优化 $('li').first()表单筛选器：
// 举例查找input标签 <input type='text'> <input type='password'> <input type='checkbox'> $('input[type="checkbox"]'); //取到checkbox类型的input标签 $("input[type!='text']"); //取到类型不是text的input标签 表单筛选器可以看成是属性选择器优化而来 :text //获取文本类型 :password // 获取密码类型 :file // 获取文件类型 :radio // 获取单选框类型 :checkbox // 获取复选框类型 :submit // 获取提交按钮类型 :reset // 获取重置按钮类型 :button // 获取普通按钮类型 :enabled // 获取可以使用的类型 :disabled // 获取被禁用的类型 :checked // 获取单选框默认被选中的类型 :selected // 获取下拉框默认被选中的类型筛选器方法：
查找下一个元素： $("#id").next() $("#id").nextAll() $("#id").nextUntil("#i2") 查找上一个元素： $("#id").prev() $("#id").prevAll() $("#id").prevUntil("#i2") 查找父元素： $("#id").parent() $("#id").parents() // 查找当前元素的所有的父辈元素 $("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。 查找儿子与兄弟元素： $("#id").children(); // 儿子们 $("#id").siblings(); // 兄弟们 '''链式操作的底层原理''' 对象调用方法之后还会返回一个对象 从而实现链式操作的效果 如果面向对象里面返回的对象也想继续再通过句点符的方式使用函数内添加一个 return self(具体看图2) .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素 .not() // 从匹配元素的集合中删除与指定表达式匹配的元素 .has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。 .eq() // 索引值等于指定值的元素
标签操作
创建标签
jQuery操作 js操作
$('<a>') document.createElement('a')
jQuery操作 js操作
addClass() classList.add() //添加指定的类名
removeClass() classList.remove() //移除指定的类名
hasClass() classList.contains() //判断当前类是否存在
toggleClass() classList.toggle() //判断当前类是否存在，存在则删除，不存在则添加
.css('样式名','样式值') style.样式名='样式值'
文本操作
jQuery操作 js操作
text() innerText() //获取text里所有的内容
html() innerHTML() //获取html里所有的内容
val() value() //取得匹配的内容值
[0].files files[0] //取得匹配的文件值
eg:
<input type="text" id="d1">
<input type="file" id="d2">
$('#d1').val() //获取input框内值
$('#d1').val('520快乐'); //设置input框内值
$('#d2').val() //获取文件对象
$('#d2')[0].files
$('#d2')[0].files[0] //正确拿到文件数据
位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
eg：
$(window).scrolltop()
$('p').position();
$('p').offset();
文档处理
添加到指定元素内部后面（追加内容）
$(A).append(B); //把B追加到A
$(A).appendTo(B); //把A追加到B
添加到指定元素内部的前面（放置到前标签前面）
$(A).prepend(B); // 把B放置到A
$(A).prependTo(B); //把A放置到B
添加到指定元素外部的前面
$(A).after(B); //把B放到A的后面
$(A).insertBefore(B); //把A放到B的前面
移除和清空元素
$('标签名').remove() //从DOM中删除所有匹配的元素
$('标签名 子标签名')empty() //删除匹配的元素集合中所有的子节点
prop() //获取属性值，可以动态变换(checked)
eg:
1.创建p标签
let $pEle = $('<p>')
2.p标签创建文本
$pEle.text('你好啊')
3.p标签设置属性id名为d1值
$pEle.attr('id','d1')
4.内部尾部追加
$('#d1').append($pEle)
将变量添加到标签内部
$pEle.appendTo($('#d1'))
事件
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
input监控
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})事件绑定
- .on( events [, selector ],function(){})
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
移除事件
- .off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
阻止事物后续产生
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>像click、keydown等DOM中定义的事件，我们都可以使用`.on()`方法来绑定事件，但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。
想使用事件委托的方式绑定hover事件处理函数，可以参照如下代码分两步绑定事件
$('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件
$(this).addClass('hover');
});
$('ul').on('mouseleave', 'li', function() {//绑定鼠标划出事件
$(this).removeClass('hover');
});
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>动画效果
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])点赞动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
2580
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
