【前端】jquery视频笔记

已于 2023-01-31 20:29:59 修改
阅读量169 收藏 1
点赞数
分类专栏： 前端 文章标签： jquery
于 2021-06-05 22:42:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jruo911/article/details/117606643
版权

教程：https://www.bilibili.com/video/BV1a4411w7Gx
csdn https://blog.csdn.net/wuyxinu/article/details/103669718
csdn配套视频 https://www.bilibili.com/video/BV1pt411H7D6?p=2
jq详细教程：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201603083198.html
js详细教程：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/javascript-tutorial-list.html
头条文章 https://www.toutiao.com/i6748592114885460492/


在这里插入图片描述

入口函数

jQuery入口函数与js入口函数的对比：

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。



在这里插入图片描述

jQuery对象与DOM对象

在这里插入图片描述
常用 length 方法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pX5QKffs-1622902002987)(image-20210114165633968.png)]

对象转换


在这里插入图片描述
在这里插入图片描述

选择器

基础选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RUESwjTH-1622902002997)(image-20210114172656307.png)]

层级选择器

在这里插入图片描述

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BVYcG9zt-1622902003003)(image-20210228180820492.png)]
在这里插入图片描述

隐式迭代（重要）

在这里插入图片描述
在这里插入图片描述

筛选选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2m8i56C-1622902003015)(image-20210114173843694.png)]

parents() //所有父级
parents('.class') //所有父级中类名为class的

在这里插入图片描述

this

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3oA0332X-1622902003023)(image-20210114174256408.png)]

排他思想

在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7NipSd4k-1622902003026)(image-20210114174546807.png)]

链式编程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1IqbjVQG-1622902003028)(image-20210114174805071.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PEHXVFKT-1622902003031)(image-20210114174906337.png)]

样式操作

css

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XdSd7WRI-1622902003032)(image-20210114175112703.png)]
在这里插入图片描述
在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FvRL9nMv-1622902003037)(image-20210114175538717.png)]

动画效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LoHDYGse-1622902003038)(image-20210114175608972.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zh7zt5y2-1622902003040)(image-20210114175758877.png)]
在这里插入图片描述
在这里插入图片描述

hover

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T6fUXYqL-1622902003049)(image-20210114175954352.png)]
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

animate

只有元素才有动画
在这里插入图片描述

属性操作

prop

$('checkbox:checked') 也可以获取CheckBox是否被选中 选中返回true 否则为false

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IPv9scM4-1622902003059)(image-20210114180635352.png)]

attr

二者区别

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

文本操作（常用）

在这里插入图片描述
在这里插入图片描述

输入框改变触发change()事件

元素操作

each

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

添加元素


在这里插入图片描述
在这里插入图片描述

尺寸、位置操作


在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

事件（重要）

在这里插入图片描述

on

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

off

在这里插入图片描述

trigger

在这里插入图片描述

事件对象

在这里插入图片描述

对象拷贝

在这里插入图片描述

多库共存

在这里插入图片描述

插件

myaijarvis
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端笔记关于JQuery
04-22
前端笔记关于JQuery
Jquery学习笔记分享
最新发布
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jQuery基础自学笔记（pink老师jQuery全内容）
04-12
《jQuery基础自学笔记》 jQuery 是一款非常流行的 JavaScript 库，由 John Resig 在2006年创建，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery 的设计理念是“Write Less, Do ...
jQuery相关笔记01
02-22
jQuery是一个广泛应用于前端开发的JavaScript库，它的出现极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。jQuery的核心理念是通过简洁的代码实现复杂的功能，这体现在其独特的链式语法和多功能...
jquery笔记
01-24
### jQuery核心知识点详解 ...以上内容涵盖了jQuery的基本概念、选择器使用方法及常见的操作方式，是前端开发中不可或缺的一部分。通过对这些知识点的掌握，开发者可以更加灵活高效地完成网页开发任务。
【前端】浏览器插件制作
myaijarvis notebook
03-18 3328
浏览器插件 【干货】Chrome插件(扩展)开发全攻略 参考：从零到一，前端程序员教你如何写一个chrome插件#知识青年# - 西瓜视频 参考：超详细带你从入门开始，开发一个超实用的浏览器插件 测试页面：掘金 也可以直接复制跳转以下页面 https://link.juejin.cn/?target=http%3A%2F%2Fcaniuse.com%2F 参考：【油猴脚本】忽视页面跳转拦截，自动继续访问页面JustJumpAhead（location；正则）_赖念安的博客-CSDN博客 开发调试踩坑
【前端】（浏览器）调试技巧
myaijarvis notebook
11-04 1420
定位hover显示出现的元素console。
【前端】JavaScript（包括ES6）学习笔记（重要）
myaijarvis notebook
04-11 1286
js之重点难点。
【前端】layui 笔记
myaijarvis notebook
06-08 1059
技巧 行内显示 layui-input-block 一个表单元素占一行 layui-inline 用于将标签设为内联块状元素 （父） layui-input-inline 可以放置多个表单元素 （子） <div class="layui-inline"> <div class="layui-input-inline" style="width: 100px;"> <input type="text" name="price_min" placeholder="￥"
【前端】CSS 学习笔记（重要）
myaijarvis notebook
04-11 1012
CSS 框模型 链接：https://www.w3school.com.cn/css/pro_css_boxmodel.asp 1em = 16px CSS 框模型概述 背景应用于由内容和内边距、边框组成的区域 外边距可以是负值，而且在很多情况下都要使用负值的外边距 内边距 可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的，这一点与外边距一样，而且上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高度 外边距合并 当两个垂直外边距相遇
【前端】JavaScript与jQuery的区别
myaijarvis notebook
02-17 727
区别一 1.定位元素 -JS (下面类似) document.getElementById("abc") -jQuery $("#abc") 通过id定位 $(".abc") 通过class定位 $("div") 通过标签定位 需要注意的是JS返回的结果是这个元素，jQuery返回的结果是一个JS的对象。以下例子中假设已经定位了元素abc。 2.改变元素的内容 abc.innerHTML = "test"; abc.html("test"); 3.显示隐藏元素 abc.style.disp
【前端】CSS 技巧
myaijarvis notebook
06-10 676
技巧（重要） 1.内部样式表<style></style>常写在head标签的最底部 css一般在头部引入，常用的基础js也在头部引入，其他js一般放在</body>与</html>之间引入 居中 2.图片居中（也适用于行内元素和行内块元素） 水平居中：给它的父亲盒子加居中属性 text-align:center; 垂直居中：给它的父亲盒子加居中属性 vertical-align: middle; ps：flex布局会使vertical-align失效=》解决
【前端】Vue学习笔记
myaijarvis notebook
05-14 516
基础 v-on绑定事件 缩写@ v-bind绑定属性 缩写: :src="imgURL" 会把字符串变成字符串变量 对象里面的函数 methods: { add: function () { console.log("add") this.counter++ }, // ES6 语法 sub() { console.
【前端】JavaScript 正则
myaijarvis notebook
12-29 478
基础 参考：JavaScript replace 方法 replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 stringObject.replace(regexp/substr,replacement) 参考：JavaScript的正则（RegExp）_小笼包不是包的博客-CSDN博客 参考：正则表达式_小笼包不是包的博客-CSDN博客 特殊字符 特殊字符就是正则表达式里面用到的关键字： 如果需要匹配特殊字符就要加一个\ 比如匹配? 需要 \? let
【前端】模块化
myaijarvis notebook
12-08 396
静态项目 未使用前端框架 参考： CDN 引入 axios 和 qs 及其使用方法 axios的封装、配置及使用 注意：必须要本地开启一个服务器进行访问，比如VSCode的Live Server插件,webstorm自带服务器端口访问，否则浏览器会报错 目录 工程名 - js - - http.js - - index.js - index.html 关键代码 index.html <!-- 先引入axios,qs 然后引入http.js 再引入该html对应的js文件 顺序不可颠倒 --
【前端】jQuery 学习笔记（重要）
myaijarvis notebook
04-16 393
选中select KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲region").find(`…{变量}]`).prop(“selected”,true);
CSS学习笔记——移动端
myaijarvis notebook
04-17 373
基础
【前端】js 视频笔记（DOM BOM）
myaijarvis notebook
06-06 339
教程地址：https://www.bilibili.com/video/BV1k4411w7sV 中文文档：https://developer.mozilla.org/zh-CN/docs/Web/API 素材源码：https://gitee.com/xiaoqiang001/jsapis_material/tree/master 一、DOM（文档对象模型） 1.选择器 ID选择器 getElementById() 标签选择器 getElementsByTagName() 类选择器 query
【前端】ElmentuUI / Axios / Webpack / npm
myaijarvis notebook
08-04 290
axios // vue-admin-manager import axios from 'axios' import qs from 'qs' import { MessageBox, Message } from 'element-ui' import store from '@/store' import { getToken } from '@/utils/auth' // create an axios instance const service = axios.create({ //
前端学习笔记：jQuery选择器详解
"这篇学习日志主要介绍了前端开发中常用的jQuery库，特别是其选择器功能。作者通过示例代码展示了jQuery的基本选择器、派生选择器的使用方法，包括标签选择器、类选择器、ID选择器、群组选择器，以及后代选择器、子...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值