jQuery笔记
文章平均质量分 56
jQuery是一个JavaScript库,这里还包含了Zepto库。
萌宅鹿同学
目前在百度工作
展开
-
jQuery 笔记目录
jQuery笔记目录part1part2part3part4part101-jQuery简介&集成02-jQuery代码风格part2part3part4原创 2021-02-20 14:57:52 · 429 阅读 · 0 评论 -
【jQuery笔记Part1】01-jQuery简介&集成
01-jQuery简介&集成JS的问题?jQuery 概念jQuery 特点jQuery 功能jQuery 继承方式本地集成远程集成JS的问题?onload事件,只能绑定一个函数,会产生事件覆盖。问题1: 容错性差, 如果一行代码报错, 则会影响到后续代码的执行问题2:api比较繁杂 , 同样的是选择DOM节点, 但是需要根据tagName, 或者ID, 或者className, ...原创 2019-08-23 01:07:05 · 290 阅读 · 0 评论 -
【jQuery笔记Part1】02-jQuery代码风格
jQuery代码风格1. 代码风格2. 基本语法格式示例1. 代码风格在 jQuery 程序中,不管是页面元素的选择、内置的功能函数的调用,都是美元符号 $ 来起始的。而这个 $ 就是 jQuery 当中最重要且独有的 jQuery 函数。2. 基本语法格式$(selector).action()美元符号 $ 定义 jQuery,选择符(selector)查询 HTML...原创 2019-08-23 01:35:53 · 276 阅读 · 0 评论 -
【jQuery笔记Part1】03-jQuery加载模式对比JS
03-jQuery加载模式对比javaScript 中的加载方式jQuery 中的加载方式javaScript 中的加载方式window.onload = function() {};执行时机:所有的DOM节点加载完毕之后调用,包括资源加载,比如图片执行次数:此处是 = 赋值, 所以后面的会覆盖前面的函数内容, 调用多次, 只会执行最后一次简写方案:无<!DOCTYPE ht...原创 2019-08-23 02:00:33 · 200 阅读 · 0 评论 -
【jQuery笔记Part3】01-jQuery-each遍历
each遍历静态方法:jQuery.each(object, [callback])对象方法:$().each(callback)遍历数组javaScript 中的遍历数组静态方法遍历数组对象方法遍历数组遍历对象静态方法遍历对象对象方法无法遍历对象遍历伪数组伪数组静态方法遍历伪数组对象方法遍历伪数组遍历节点静态页面静态方法遍历节点对象方法遍历节点遍历终止return false;return tr...原创 2019-08-26 19:26:15 · 327 阅读 · 0 评论 -
【jQuery笔记Part3】02-jQuery抖动效果
jQuery抖动效果静态页面展示图片抖动效果静态页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { paddin...原创 2019-08-26 21:33:39 · 423 阅读 · 0 评论 -
【jQuery笔记Part3】03-jQuery项目:随机抽奖
jQuery随机抽奖静态页面页面展示按钮点击静态页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>抽奖效果-界面搭建</title> <style> * {padding: 0;...原创 2019-08-27 08:41:03 · 344 阅读 · 0 评论 -
【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点
节点操作添加节点静态页面内部添加(父子关系)append(): 添加节点->追加到最后 (父子关系)appendTo(): 把创建的节点添加到指定节点之后(父子关系)prepend() 添加结点->追加到最前面 (父子关系)prependTo() 把创建的结点添加到指定结点之前(父子关系)外部添加(兄弟关系)after() 把指定结点添加到指定元素之后(属于兄弟关系)insertAft...原创 2019-08-27 13:41:16 · 455 阅读 · 0 评论 -
【jQuery笔记Part4】02-jQuery微博案例
jQuery微博案例jQuery.trim(str) 去掉字符串起始和结尾的空格焦点focus() 设置焦点blur() 失去焦点微博案例静态页面监听发布按钮点击添加删除事件(存在问题)存在问题解决方法一:创建节点时添加异步事件解决方法二:事件委托原理场景jQuery.trim(str) 去掉字符串起始和结尾的空格$.trim(" hello, how are you? ");运行结果...原创 2019-08-27 20:55:28 · 248 阅读 · 0 评论 -
【jQuery笔记Part4】03-事件详解
事件详解常用事件事件常用属性事件监听方法示例页面:on() 绑定事件绑定单个事件绑定多个事件->同一回调函数绑定多个事件->多个回调函数off() 解绑事件常用事件blur() 当失去焦点时触发。包括鼠标点击离开和TAB键离开。change() 当元素获取焦点后,值改变失去焦点事触发。click() 当鼠标单击时触发。dblclick() 当鼠标双击时触发。error()...原创 2019-08-28 00:12:40 · 271 阅读 · 0 评论 -
【jQuery笔记Part4】04-jQuery案例-轮播图
jQuery案例-大屏焦点图-节点操作案例简介静态页面添加事件案例简介轮播图;点击浏览器左侧,则,展示左边一个图片,点击浏览器右侧,则,展示右边一个图片,越界循环 1左->4,4右->1静态页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2019-08-28 09:21:46 · 223 阅读 · 0 评论 -
【Zepto笔记】Zepto.js
Zepto.jsZepto 简介jQuery 与 Zepto 的区别关于浏览器兼容既然有了JQuery,为什么要Zepto呢Zepto 设计模块Zepto 案例选择器案例动画案例动画案例2验证Zepto特效基于CSS3Zepto 针对移动端的模块tap() 和 click() 的区别swipe()Zepto 简介随着移动端的愈加火爆,目前很多 HTML5 的框架都在支持移动方向,比如:Vue....原创 2019-08-28 14:03:54 · 1268 阅读 · 0 评论 -
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画简介jQuery 提供了几种简单常用的固定动画方面我们使用。但有些时候,这些简单动画无法满足我们更加复杂的需求。这个时候,jQuery 提供了一个 .animate() 方法来创建我们的自定义动画,满足更多复杂多变的要求。animate() 使用...原创 2019-08-26 00:07:03 · 207 阅读 · 0 评论 -
【jQuery笔记Part2】04-jQuery淡入淡出动画&右下角广告案例
jQuery淡入淡出动画-右下角广告CSS display 属性淡入淡出动画案例CSS display 属性display 属性规定元素应该生成的框的类型。值描述none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。inline默认。此元素会被显示为内联元素,元素前后没有换行符。·········CSS dis...原创 2019-08-25 17:52:40 · 283 阅读 · 0 评论 -
【jQuery笔记Part1】05-jQuery解决冲突
05-jQuery解决冲突冲突产生场景当 jQuery 内部的 $ 被其他函数库覆盖解决方案一:将所有 $ 替换为 jQuery解决方案二:借助匿名函数包裹执行当其他函数库的 $ 被 jQuery 覆盖解决方案:解除 jQuery 对 $ 的引用冲突产生场景在做工程时,我们使用的库不仅仅是 jQuery,可能会用到其他函数库,此时可能会产生冲突。当 jQuery 内部的 $ 被其他函数库覆盖...原创 2019-08-23 20:02:42 · 204 阅读 · 0 评论 -
【jQuery笔记Part1】06-jQuery对象与js对象转换
06-jQuery对象与js对象转换概念为什么要转换转化方法JS对象 -> jQuery对象jQuery对象 -> JS对象原理图概念jQuery 对象是通过 jQuery 包装 DOM 对象后产生的对象。js 对象就是 DOM 对象。为什么要转换jQuery 库提供的方法,只能 jQuery 对象来调用,而 JS 对象的一些方法,只能是 JS 对象调用。两者不可以互相调用对...原创 2019-08-24 17:15:47 · 262 阅读 · 1 评论 -
【jQuery笔记Part1】07-jQuery操作css-添加&删除&切换类、开关灯泡案例
07-jQuery操作css-添加&删除&切换类addClass() - 向被选元素添加一个或多个类removeClass() - 从被选元素删除一个或多个类toggleClass() - 对被选元素进行添加/删除类的切换操作开关灯案例jQuery 可以操作 css 样式,常见的有以下三种方法:addClass() - 向被选元素添加一个或多个类$('#on').click(...原创 2019-08-24 17:50:10 · 274 阅读 · 0 评论 -
【jQuery笔记Part1】08-jQuery操作css-&获取&设置样式
08-jQuery操作css-css通过 css() 方法获取样式通过css() 方法设置样式方法一方法二方法三完整案例通过 css() 方法获取样式$('#get_style').click(function () { var w = $box.css('width'); var h = $box.css('height'); var bgc = $box.css('...原创 2019-08-24 18:21:23 · 206 阅读 · 0 评论 -
【jQuery笔记Part1】09-jQuery操作css-尺寸
09-jQuery操作css-尺寸width()height()innerWidth()innerHeight()outerWidth()outerHeight()outerWidth(true)outerHeight(true)案例演示width()设置或返回元素的宽度(不包括内边距、边框或外边距)height()设置或返回元素的高度(不包括内边距、边框或外边距)innerWidth(...原创 2019-08-24 18:48:18 · 194 阅读 · 0 评论 -
【jQuery笔记Part1】10-jQuery操作html-获取&设置
10-jQuery操作html-获取&设置获取内容text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)val() - 设置或返回表单字段的值设置内容text(参数) - 设置或返回所选元素的文本内容html(参数) - 设置或返回所选元素的内容(包括 HTML 标记)val(参数) - 设置或返回表单字段的值回调函数获取属性att...原创 2019-08-24 21:03:19 · 246 阅读 · 0 评论 -
【jQuery笔记Part1】11-jQuery选择器
10-jQuery选择器基本选择器层级选择器属性选择器筛选选择器siblings 案例基本选择器初始 html 页面:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head...原创 2019-08-24 23:36:03 · 231 阅读 · 0 评论 -
【jQuery笔记Part1】12-jQuery元素的角标
14-jQuery元素的角标常见的鼠标事件mouseenter 鼠标指针穿过被选元素或其子元素时mouseleave 鼠标移出被选元素内部时mouseover 鼠标指针穿过被选元素或其子元素时mouseout 鼠标指针离开被选元素或其子元素时获取当前元素的角标示例index() 获取指定元素的角标常见的鼠标事件mouseenter 鼠标指针穿过被选元素或其子元素时mouseleave 鼠...原创 2019-08-24 23:58:58 · 675 阅读 · 0 评论 -
【jQuery笔记Part2】01-jQuery显示&隐藏&切换动画&侧边广告案例
01-jQuery动画jQuery动画动画分类HTML DOM position 属性定义和用法显示 show(毫秒, 完成回调函数)隐藏 hide(毫秒, 完成回调函数)切换 toggle(毫秒, 完成回调函数)案例:两侧浮动广告显示或者隐藏控制jQuery动画通过 jQuery 动画方法,能够很轻松地为网页添加非常精彩的视觉效果 给用户一种全新体验。动画分类显示、隐藏滑动、卷动淡...原创 2019-08-25 08:17:06 · 414 阅读 · 0 评论 -
【jQuery笔记Part2】02-jQuery展开&收起动画&帷幔效果案例&下拉菜单案例&显示隐藏更多案例&折叠菜单案例
02-jQuery展开&收起动画-帷幔效果HTML DOM overflow 属性定义和用法展开 slideDown(毫秒, 完成回调函数)收起 slideUp(毫秒, 完成回调函数)切换 slideToggle(毫秒, 完成回调函数)案例:滑动帷幕HTML DOM overflow 属性定义和用法overflow 属性规定如何处理如何处理不符合元素框的内容。Object.styl...原创 2019-08-25 09:04:00 · 689 阅读 · 0 评论 -
【jQuery笔记Part2】03-jQuery-addBack()与end()的区别-children()与find()的区别
前几章的方法对比与总结初始页面:3层divcss():指定元素修改属性parrent():返回父节点(被包装成jQuery对象)addBack():额外添加调用链上一级end():选择调用链上一级children():返回儿子节点(被包装成jQuery对象)find():从后代节点进行查找(被包装成jQuery对象)初始页面:3层div<!DOCTYPE html><htm...原创 2019-08-25 11:56:04 · 301 阅读 · 0 评论 -
【jQuery笔记Part1】04-webstorm定义活动模板
04-webstorm定义活动模板在 webstorm 中可以定义活动模板,通过使用快捷键,快速产生模板代码。定义方法如下:Settings——Editor——Live Templates,在 JavaScript 中新建一个模板,填入模板代码即可。活动模板使用方法:根据定义的缩写(Abbreviation) 与 快捷键,实现快速产生代码。如上图定义则输入 jqt 加 TAB 键盘,即可...原创 2019-08-23 16:29:42 · 242 阅读 · 0 评论