jQuery
文章目录
一、什么是jQuery
jQuery内部封装了原生jS, jQuery类似于python里面的模块, 在前端jQuery是一个提供了额外功能的框架又或者说类库.
jQuery设计的宗旨是“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的内容
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点)
下载链接:jQuery官网
中文文档:jQuery AP中文文档
四、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端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
五、jQuery的两种导入方式
jQuery在使用的时候也需要导入, 但是它的文件非常的小(几十KB) 基本不影响网络速度. 压缩过的大概80KB左右, 未压缩的大概240KB左右
# 1. 将文件下载到本地直接导入(压缩: jquery-3.5.1.min . 未压缩: jquery-3.5.1)
好处: 没有网也可以正常使用
坏处: 需要重复书写,文件路径还要固定
pycharm自定义代码模块功能 自动添加固定的代码: settings->editor->file and code template
# 2. CDN服务
CDN的概念: 内容分发网络
参考网站: bootcdn. 前端相关的应用程序都有免费的cdn服务(提示: CDN有免费的也有收费的)
好处: 无需下载对应的文件,直接走网络请求使用
坏处: 必须要有网络
引入: <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
bootcdn网址: 你最好看
六、jQuery语法
提示: jQuery在使用之前 一定要确保已经导入了
jQuery(selector).action()
秉持着jQuery的宗旨 jQuery简写成 $
简写: $(selector).action()
# jQuery与js代码对比
// 例子: 将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
七. jQuery对象与标签对象之间的转换
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。
$("#i1").html()
的意思是:获取id值为 i1
的元素的html代码。其中 html()
是jQuery里的方法。
相当于: document.getElementById("i1").innerHTML;
虽然 jQuery对象
是包装 DOM对象
后产生的,但是 jQuery对象
无法使用 DOM对象
的任何方法,同理 DOM对象
也没不能使用 jQuery
里的方法
$('div')[0] jq对象转标签对象
$(divEle) 标签对象转jq对象
总结
# jq功能: jQuery内部封装了原生的js代码(还额外添加了很多的功能), 能够让你通过书写更少的代码 完成js操作. 类jQuery似于python里面的模块 在前端模块不叫模块 叫 “类库”
# jq宗旨: write less do more
# jq版本: 1xx, 2xx, 3xx 其中2xx,3xx不兼容IE678, 这里我们使用jQuery的时候就不需要考虑浏览器兼容问题. 因为IE678基本上被淘汰了.
# jq2种导入模式:
1. 将jq文件下载本地
2. 直接引用提供jq的CDN服务. 例如: 免费的bootcdn
补充: 借助pycharm提供的js文件模板实现每次创建文件默认帮我们导入jq.
# jq基本语法:
jQuery(选择器).action()
简写: $(选择器).action()
# jq对象与标签对象之间的转换:
$('div')[0] jq对象转标签对象
$(divEle) 标签对象转jq对象
九、查找标签
1、基本选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="d1">div
<span>div>span</span>
<p>div>p
<span>div>p>span</span>
</p>
</div>
<p class="c1">p</p>
<span>span</span>
<script>
/*一. 基本选择器: id选择器, 类选择器, 元素(标签)选择器, 通配符选择器*/
console.log($('#d1')); // id选择器
console.log($('.c1')); // 类选择器
console.log($('span')); // 元素(标签)选择器
console.log($('*')); // 通配符选择器
/*二. jQuery对象与标签对象之见的转化*/
// 注意!!: 虽然它们类型都是对象类型, 但是DOM操作出来的对象由DOM类生成, 由jQuery操作出来的对象由jQuery类生成. 两者之间是由不同的类创建, 所以不同的对象调用的方法只能是实例化自己类里面的.
let divELe = document.getElementById('d1');
console.log(typeof divELe); // object
console.log(typeof $('#d1')); // object
console.log($('#d1')[0]); // jQuery对象变成标签对象
console.log($(divELe)); // 标签对象转jQuery对象
// 总结
/*
jQuery基本选择器:
id选择器: $('#d1');
类选择器: $('.d1');
元素(标签)选择器: $('span');
jQuery对象与标签对象之间的转换:
jQuery对象变成标签对象: 索引取值
$('#d1')[0];
标签对象转jQuery对象: 使用jQuery类包含
$(divEle);
*/
</script>
</body>
</html>
2、组合选择器/分组嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<span>span</span>
<span>span</span>
<div id="d1">div
<span>div>span</span>
<p id="d2">div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
</div>
<div class="c1">div</div>
<span>span</span>
<span>span</span>
<script>
/*一. 组合选择器: 后代选择器, 子代选择器, 毗邻选择器, 弟弟选择器*/
console.log($('div span')); // 后代选择器
/*
S.fn.init(3) [span, span, span, prevObject: S.fn.init(1)]
0: span
1: span
2: span
length: 3
prevObject: S.fn.init [document]
__proto__: Object(0)
*/
console.log($('div>span')); // 子代选择器
/*
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
0: span
1: span
length: 2
prevObject: S.fn.init [document]
__proto__: Object(0)
*/
console.log($('div+span')); // 毗邻选择器
/*
S.fn.init [span, prevObject: S.fn.init(1)]
0: span
length: 1
prevObject: S.fn.init [document]
__proto__: Object(0)
*/
console.log($('div~span')); // 弟弟选择器
/*
S.fn.init(2) [span, span, prevObject: S.fn.init(1)]
0: span
1: span
length: 2
prevObject: S.fn.init [document]
__proto__: Object(0)
*/
/*二. 分组与嵌套*/
console.log($('div,p')); // 分组
/*
S.fn.init(3) [div#d1, p#d2, div.c1, prevObject: S.fn.init(1)]
0: div#d1
1: p#d2
2: div.c1
length: 3
prevObject: S.fn.init [document]
__proto__: Object(0)
*/
console.log($('#d1,p')); // 嵌套
/*
S.fn.init(2) [div#d1, p#d2, prevObject: S.fn.init(1)]
0: div#d1
1: p#d2
length: 2
prevObject: S.fn.init [document]
__proto__: Object(0)
*/
// 总结
/*
组合选择器:
后代选择器: $('div span');
子代选择器: $('div>span');
毗邻选择器: $('div+span');
弟弟选择器: $('div~span');
分组与嵌套:
分组: $('div,span');
嵌套: $('#d1,span');
*/
</script>
</body>
</html>
3、基本筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li class="c1">107</li>
<li>108</li>
<li id="d1">109</li>
<li>110</li>
</ul>
<div>div
<p>div>p</p>
<span>div>span</span>
</div>
<div>div
<a href="">div>a</a>
</div>
<script>
console.log($('ul li'));
console.log($('ul li:first')); // 大儿子
console.log($('ul li:last')); // 小儿子
console.log($('ul li:even')); // 偶数索引 0包含在内
console.log($('ul li:odd')); // 奇数索引
console.log($('ul li:eq(1)')); // 等于索引(放索引)
console.log($('ul li:gt(2)')); // 大于索引
console.log($('ul li:lt(2)')); // 小于索引
console.log($('ul li:not("#d1")')); // 排除满足条件的标签,要剩下来的所有
console.log($('div:has("p")')); // 选取出包含一个或多个标签在内的标签
// 总结
/*
注意: 都是冒号:起手
:first :last
:even :odd
:eq(index) :gt(index) :lt(index)
:not("") :has("")
*/
</script>
</div>
</body>
</html>
4、属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" username="jason">
<input type="text" username="egon">
<p username="egon"></p>
<script>
console.log($('[username]'));
console.log($('[username="egon"]'));
console.log($('p[username="egon"]'));
</script>
</body>
</html>
5、表单筛选器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form action="">
<p>username:<input type="text"></p>
<p>password:<input type="password"></p>
<input type="checkbox" value="111">111
<input type="checkbox" value="111" checked>222
<input type="checkbox" value="111">333
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="" selected>333</option>
</select>
<input type="button" value="按钮">
<input type="text" readonly>
</form>
<script>
console.log($('[type="text"]'));
console.log($(':text')); // 与上面等价
console.log($(':password'));
/*特殊情况*/
// :checked: 它会将checked和selected都拿到
// :selected: 它不会 只拿selected
console.log($(':checked'));
console.log($(':selected'));
console.log($('input:checked'));