欢迎大家来到IT世界,在知识的湖畔探索吧!
一、概览
jQuery官网:https://jquery.com/
jQuery是一个高效、轻量并且功能丰富的js库。
核心在于查询query。
jQuery是一个优秀的js函数库,是React/Vue/Angular框架之外中大型项目的首选。
jQuery的主旨是write less, do more。
1.1 jQuery的功能
- html元素的选取
- 操作html元素
- css操作
- html事件处理
- 实现js动画效果
- 能够链式调用
- 容易扩展插件
- 封装了ajax
1.2 引入jQuery库
引入jQuery的方式有2种,一种是项目中直接引入jQuery的min.js文件,一种是使用服务器端jQuery文件(使用cdn)脚本标签方式引入。
1.2.1 本地项目引入
在官网的:https://jquery.com/download/ 链接下可以下载到完整的代码,放到项目文件的js文件夹下。
<script src="static/js/jquery-3.7.1.min.js"></script>
欢迎大家来到IT世界,在知识的湖畔探索吧!
1.2.2 cdn方式引入
在网站:https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。
欢迎大家来到IT世界,在知识的湖畔探索吧!<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
1.2.3 版本兼容
- 1.x 版本兼容老版本的IE,文件比较大
- 2.x 版本文件比较小,支持IE8+
- 3.x 版本引入部分新API,提供多个分包的版本,支持IE9+
1.2.4 开发的正确姿势
开发过程中一般使用非min.js文件方便调试,生产环境部署上线时才使用min.js这种压缩文件。
二、jQuery源码浅析
2.1 匿名函数调用
从源码中可以看出,jQuery的整体逻辑可以用以下简单的结构进行描述:
( function( global, factory ) { // 判断有无window环境的一堆逻辑代码 })( typeof window !== "undefined" ? window : this, function( window, noGlobal ) { // 构造jQuery的一些逻辑代码 return jQuery });
2.2 jQuery是一个函数
从源码中可以看出,jQuery被定义为一个函数,函数中返回了一个实例对象(看new关键字)。
继续跟踪源码 new jQuery.fn.init( selector, context),这个函数中调用了makeArray,当然在其他if判断语句中也有返回伪数组对象(比如,定义了length字段,还有[0]的操作),这里拿makeArray作为演示。
查看makeArray函数:
所以这个返回实例对象,是一个伪数组。
欢迎大家来到IT世界,在知识的湖畔探索吧!$('#menu-trigger') instanceof Array // false $('#menu-trigger') instanceof Object // true
2.3 jQuery挂载在window上
从源码中可以看出,将jQuery函数和window.$ 以及window.jQuery绑定赋值,所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符,快捷简省。
2.4 jQuery验证
所以在引入jQuery的项目中:
console.log(typeof $); // function console.log($ === jQuery); // true console.log($() instanceof Object); // true
三、jQuery常见用法
3.1 函数形式调用
通常形式为:$(param)
- param为函数:dom加载完成后,执行该回调函数
- param为选择器字符串:查找与该选择器匹配的所有标签,并封装成jQuery对象
- param为dom对象:将该dom对象封装成jQuery对象
- param为标签字符串:创建标签对象并封装成jQuery对象
$(function() {
console.log("dom finished and execute this");
})
$('#btn').click(function () {
// 这里的this是id为#btn的dom元素
console.log(this.innerHTML)
console.log($(this).html())
})
$('<input type="number"></input>').appendTo('div')
3.2 点语法调用函数
let list = [1, 2, 3] $.each(list, function(i, ele) { console.log(i, ele) }) $.trim(' hello world ')
3.3 用法浅析
- jQuery函数返回的是一个伪数组(Object对象),可以使用length和下标。
// class中名为btn的dom元素有多少 $('.btn').length $('.btn')[0] $('.btn').get(0) $('.btn').index() // 设置名为btn的class对应的dom标签的文本内容 $('.btn').text('自定义文本内容')
通过$(param)传入的是selector、element、标签情况下,返回的是包含1个或者多个dom元素对象的伪数组。
3.4 获取一组dom元素的常见用法
// 基础标签和class // 选择了所有的div和span标签 $('div, span') // 选择所有具有某个class的标签 $('div.container') // 层次选择器 $('ul span') // ul标签下的所有span元素 $('ul>span') // ul标签下的所有子span元素 $('.container+li') // class为container的元素后的下一个li元素 $('ul .item~*') // class为item的元素后面所有兄弟元素 // 过滤选择器 $('div:first') // 选择第一个div $('div:last') // 最后一个div $('div:not(.container)') // class不为container的所有div $('div:lt(3):gt(0)') // 所有div元素中的大于0小于3的div元素,表示1和2索引处的dom元素 $('div:containers("hello world")') // 内容为hellow world的div元素 $('div:hidden') // style中display: none的div元素 $('div[data]') // 有data属性的div元素, example: <div data=""></div> $('div[data="123"]') // 有data属性且值为123的div元素, example: <div data="123"></div> // 示例,使table表格的奇数行背景样式设置 $('table>tbody>tr:odd') // form表单中 $(':text') // 所有单行输入框 $(':text:disabled') // 所有disabled的input输入框 $(':checkbox') // 所有checkbox $(':checkbox:checked') // 所有选中的checkbox $('select').val() // select标签选中的option的value值
3.5 修改css
直接修改css属性(如果其dom标签存在这个css属性)
$('#container').css('background', 'red'); $('#container').css({ 'background' : 'red', 'color': 'blue' }) // 一组属性
清空某标签下的所有dom:
$('.carousel-inner').empty();
给某标签下添加dom标签:
$('.carousel-inner').append(domStr);
移除、添加class:
$('.carousel-indicators li').removeClass('active'); $('.carousel-indicators li:first').addClass('active');
3.6 获取属性
获取dom标签上的属性:
$('.about-img-1>img').attr('src');
设置标签的属性:
$('.about-img-1>img').attr('src', (data && data['image']) ? data['image'] : '');
3.7 一些dom事件
点击:
$('.category-product-page-ul>li').click(function(e) { e.preventDefault(); console.log('this is:', this); // 打印对应的dom标签 });
hover:
$('#container').hover( function() { // 当鼠标进入元素时执行的函数 }, function() { // 当鼠标离开元素时执行的函数 } );
监听事件:
$('.bigImage').on("mousemove", function( e ) { // do something });
3.8 发起ajax请求
const json = '/static/js/data/xxx.json'; $.ajax({ url: json, dataType: 'json', success: function(data) { // do something }, error: function(jqXHR, textStatus, errorThrown) { console.error('Fail to read json:', textStatus, errorThrown, json); } });
post请求:
$.post("url", data, function (data, textStatus, jqXHR) { }, "dataType" );
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/80835.html