jquery on方法原理_jQuery 学习小结

jQuery 学习小结

相较于原生 JS，jQuery 通过 API 接口写更少的代码，做更多的事情。虽然这个元老级别的技术库的使用率已经渐渐在减少了，不过了解其原理和用法还是很有用的。

jQuery 之选择元素

let div = document.querySelector('#div')
let $div = $('#div');
console.log('div:')
console.log(div)
console.log('$div:')
console.log($div)

假设页面有一个id='div'的元素，div是一个 DOM 对象，而$div是一个 jQuery 封装对象。

jQuery 返回的不是被选择 DOM 元素，而是返回一个 jQuery 对象，这个对象的原型中有许多封装好的函数（如on、has等），用户可以通过所提供的 API 接口调用。

jQuery 之过滤器

jQuery 提供的过滤器接口可以筛选出符合条件的 DOM 元素并对其进行封装。

<ul><li id="item1">list item 1</li><li id="item2">list item 2</li><ul><li>list item 2-a</li><li>list item 2-b</li></ul><li id="item3">list item 3</li><li id="item4">list item 4</li><li id="item5">list item 5</li><li id="item6">list item 6</li>
</ul>

假设有如上 html 片段

$("li").filter(":even"); // 选择索引为奇数的li元素
$("li").has("ul"); // 选择包含ul元素的li元素
$("li").first(); // 选择第一个li元素

jQuery 之元素增删改查

仍以上面 html 片段为例

$("#item1").after($("<span>span</span>")); // 插入
$("#item2").after($("#item3")); // 移动
$("#item4").remove(); // 删除
$("#item5").replaceWith("<div>div</div>"); // 修改
$("#item6").addClass("haha"); // 添加类
$("#item2").$("li").first().css("color", "red"); // 设置样式

得到的结果

<ul><li id="item1">list item 1</li><span>span</span><li id="item3">list item 3</li><li id="item2">list item 2</li><ul><li>list item 2-a</li><li>list item 2-b</li></ul><div>div</div><li id="item6" class="haha">list item 6</li>
</ul>

更多 API 查看文档

jQuery 之链式操作

调用 jQuery 对象方法后返回的又是一个 jQuery 对象从而可以继续对这个返回后的对象进行操作。如上例子$('#item2').$('li').first().css('color', 'red');

jQuery 之取值与赋值

jQuery 函数的参数可以决定操作或读或写。

$("#item1").html(); // 取值。list item 1
$("#item3".html("ayaya")); // 赋值。<li id="item3">ayaya</li>

jquery on方法原理_jQuery 学习小结相关推荐

深度学习原理学习小结 - Self-Attention/Transformer
文章目录深度学习原理学习小结 - Self-Attention/Transformer Self-Attention基本原理引入核心概念计算方法 Transformer基本原理知识补充编码 ...
创建 dict 的几种方法学习小结
创建 dict 的几种方法学习小结 dict(全称 dictionary,可以翻译为"字典"),其使用"键-值(key-value)"对儿的方式存储多项数据,是 ...
语言输出奇树有多少总方法_如何学习一门编程语言？这些方法告诉你，不要再说你不会学习...
前言很多人喜欢争论什么什么编程语言好,我认为这个话题如果不限定应用范围,就毫无意义. 每种编程语言必然有其优点和缺点,这也决定了它有适合的应用场景和不适合的应用场景.现代软件行业,想一门编程语言包打 ...
图片裁剪功能学习小结
图片裁剪功能学习小结近期有需要使用图片裁剪的功能,在使用插件和自己写裁剪组件之间犹豫了很久,后来根据需求经过反复的考虑,还是自己封装吧,毕竟自己动手,丰衣足食,对吧?嗯,??????是的!最后生成裁 ...
深度学习Spring5底层原理(黑马学习随笔)
学习随笔简介跟随着黑马满老师的<黑马程序员Spring视频教程,全面深度讲解spring5底层原理>学习,视频教程地址:黑马程序员Spring视频教程,全面深度讲解spring5底层原理 ...
YouDontKnowJS 小黄书学习小结
YouDontKnowJS 学习小结真正的理解闭包的原理与使用更加透彻this绑定的四种规则机制你不知道的JavaScript 人称小黄书,第一次看到这本书名就想到了一句话 "You ...
JavaSE学习小结二
JavaSE学习小结二记录学习----------JavaSE模块三&四其中大部分是一些工具类,会将常用方法及其功能描述整理成表格方便日后查阅文章目录 JavaSE学习小结二一.Obj ...
数据科学导论学习小结——其三
数据科学导论学习小结--其三这是笔者大学二年级必修科目<数据科学基础>个人向笔记整理的第三部分,包含第六.第七两个章节.本笔记内容基于清华大学出版社<数据科学导论-探索数据的奥秘& ...
无限风光：近来地形算法学习小结【转】
无限风光 : 近来地形算法学习小结原文链接目录 -写在前面 -本文话题整体观 -概念(Concepts): 入门须知 -高度图(HeightMap) -分形(Fractal ...