「已注销」-优快云博客

原创 jQuery自定义事件

自定义事件自定义事件, 必须满足以下两个条件事件必须是通过on绑定的事件必须通过trigger来触发$(".son").on("myClick", function () { alert("son");});$(".son").triggerHandler("myClick");

2021-01-20 01:17:29 344 1

事件trigger: 如果利用trigger自动触发事件,会触发事件冒泡triggerHandler: 如果利用triggerHandler自动触发事件, 不会触发事件冒泡$(".son").click(function (event) { alert("son");});$(".father").click(function () { alert("father");});$(".son").trigger("click"); // 触发事件冒泡$(".son").

2021-01-20 01:15:35 213

原创 jQuery阻止事件冒泡和默认行为

阻止事件冒泡return false；event.stopPropagation()；两种方式都可阻止事件冒泡$(".son").click(function (event) { alert("son"); // return false; event.stopPropagation();});$(".father").click(function () { alert("father");});阻止默认行为return false；event.

2021-01-20 01:10:10 254

原创 jQuery事件移除

off（）off方法如果不传递参数, 会移除所有的事件$("div").mouseleave(function () { alert("mouseleave");});$("div").mouseenter(function () { alert("mouseenter");// 移除div身上的所有事件$("div").off();off方法如果传递一个参数, 会移除所有指定类型的事件$("div").mouseleave(function () { a

2021-01-20 01:06:03 319

原创 jQuery事件绑定

jQuery中有两种绑定事件方式eventName(fn);编码效率略高/ 部分事件jQuery没有实现,所以不能添加可以添加多个相同或者不同类型的事件,不会覆盖$("div").click(function () { alert("hello");});on(eventName, fn);编码效率略低/ 所有js事件都可以添加可以添加多个相同或者不同类型的事件,不会覆盖$("div").on("click", function () { alert(

2021-01-20 00:58:01 101

原创 jQuery的scrollTop方法

scrollTop获取滚动的偏移位获取网页滚动的偏移位注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法$("body").scrollTop()+$("html").scrollTop()；设置网页滚动偏移位为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法 $("html,body").scrollTop(300)；...

2021-01-20 00:53:28 252

原创 jQuery操作CSS样式的方法

逐个设置$("div").css("width", "100px");$("div").css("height", "100px");$("div").css("background", "red");链式设置$("div").css("width", "100px").css("height", "100px").css("background", "blue");批量设置$(...

2019-10-23 22:48:58 156

原创 jQuery文本值相关的方法

html()和原生JS中的innerHTML一模一样text([)和原生JS中的innerText一模一样val()获取value值

2019-10-23 10:01:57 113

原创 jQuery操作类相关的方法

addClass()作用: 添加一个类如果要添加多个, 多个类名之间用空格隔开即可removeClass()作用: 删除一个类如果想删除多个, 多个类名之间用空格隔开即可toggleClass()作用: 切换类有就删除, 没有就添加...

2019-10-22 23:07:45 199

原创 reset.css

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-...

2019-10-22 23:04:48 208

原创 jQuery的prop方法

prop方法特点和attr方法一致prop方法不仅能够操作属性, 他还能操作属性节点官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()removeProp方法特点和removeAttr方法一致...

2019-10-22 23:00:27 599

原创 jQuery的attr方法

attr()作用: 获取或者设置属性节点的值可以传递一个参数, 也可以传递两个参数如果传递一个参数, 代表获取属性节点的值如果传递两个参数, 代表设置属性节点的值注意:如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值如果是设置:找到多少个元素就会设置多少个元素如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增removeAttr()会删除...

2019-10-22 22:57:11 167

原创 jQuery - 静态方法map方法

原生JS的map方法第一个参数: 当前遍历到的元素第二个参数: 当前遍历到的索引第三个参数: 当前被遍历的数组和原生的forEach一样,不能遍历的伪数组arr.map(function (value, index, array) { console.log(index, value, array);});obj.map(function (value, index, arr...

2019-10-22 11:40:12 188

原创 jQuery - 静态方法each方法

原生forEach()第一个参数: 遍历到的元素第二个参数: 当前遍历到的索引原生的forEach方法只能遍历数组, 不能遍历伪数组arr.forEach(function (value, index) { console.log(index, value); // 返回索引和值});obj.forEach(function (value, index) { cons...

2019-10-22 11:29:10 173 1

原创 jQuery - 筛选

过滤方法作用eq(N)获取第N个元素first()获取匹配到的第一个元素last()获取匹配到的最后一个元素hasClass(class)检查当前的元素是否含有某个特定的类，如果有，则返回truenot()删除与指定表达式匹配的元素查找方法作用children()取得一个包含匹配的元素集合中每一个元素的所有子元...

2019-10-22 11:23:32 146

原创 jQuery核心函数

$();/jQuery原理();就代表调用jQuery的核心函数$(function () { alert("hello lnj"); // 1.接收一个字符串 // 1.1接收一个字符串选择器 // 返回一个jQuery对象, 对象中保存了找到的DOM元素 var $box1 = $(".box1"); var $box2 = $("#box2"...

2019-10-22 10:58:42 104

原创 jQuery- 释放$的使用权

释放$的使用权释放操作必须在编写其它jQuery代码之前编写释放之后就不能再使用$,改为使用jQueryjQuery.noConflict();自定义一个访问符号var xx = jQuery.noConflict();xx(function () { alert("hello");});...

2019-10-22 10:54:50 455

原创 jQuery - jQuery 和JS入口函数的区别

<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">原生JS和jQuery入口函数的加载模式不同原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行window.onload =...

2019-10-22 10:43:36 182

原创 jQuery - 入口函数写法

第一种写法$(document).ready(function () { // alert("hello lnj");});第二种写法jQuery(document).ready(function () { // alert("hello lnj");});第三种写法(推荐)$(function () { // alert("hello lnj");})...

2019-10-22 10:34:15 215

原创 vscode插件

AlignmentAuto Close TagAuto Complete TagAuto ImportAuto Import - ES6, TS, JSX, TSXAuto Rename TagAutoprefixerBootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets...

2019-10-12 12:38:56 270

原创 CSS-文字超出隐藏

overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段落中的文本不进行换行 */

2019-10-10 16:23:56 173

原创 Less-条件判断

less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合的代码when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进条件判断(),()相当于JS中的||/* 当下边 div 中 .size 传入的第一个参数是100px或者第二个参数是100px才会执行*/.size(@width,@height) w...

2019-10-06 17:42:41 9760

原创 Less-继承

less中的继承和less中混合的区别使用时的语法格式不同 (选择器:extend(混合))转换之后的结果不同(混合是直接拷贝, 继承是并集选择器).center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}.father:extend(.center){ ...

2019-10-06 17:37:47 750

原创 Less-层级结构

如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器例如以下代码: .box1 .son&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可.box1 { width: 400px; height: 300px; position: relative; background-color: p...

2019-10-06 17:35:50 1808

原创 Less-less导入其他less文件

@import "triangle.less";// .less可省略@import "triangle.less";

2019-10-06 17:30:12 3509 1

原创 Less-混合的匹配模式

混合的匹配模式就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合通用的匹配模式无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码@_: 表示通用的匹配模式.triangle(@_, @width, @color) { width: 0; height: 0; border-style: solid;}.triangle(Bottom, @width...

2019-10-06 17:28:20 474

原创 Less-混合

混合将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来本质就是ctrl+c --> ctrl + v注意点如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码.center(){ position: abs...

2019-10-06 17:24:25 146

原创 Less-运算

less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算, 至少要有一个带单位=div{ width: 200px; height: 200px; background: blue; position: absolute; left: 50%; // margin-left: (-200px * 0.5); // margin-left: (-...

2019-10-06 17:14:19 151

原创 Less-变量差值

变量插值在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式变量插值的格式格式: @{变量名称}@size: 200px;@w: width;@s: div;@{s}{ @{w}: @size; height: @size; background...

2019-10-06 17:11:18 200

原创 Less-变量

变量和js中的概念基本一样less中定义变量的格式@变量名称: 值;less中使用变量的格式==@变量名称;=@w: 400px;@h: 200px;将一个变量赋值给另外一个变量@变量名称 : @变量名称;@h: @w;全局变量和局部变量定义在=={}外面的就是全局变量==, 什么地方都可以使用定义在=={}里面的就是局部变量==, 只能在{}中使用注意: less中的...

2019-10-06 17:07:39 497

原创 Less-内置函数

Less-内置函数混杂方法单位转换列表数学字符串判断类型颜色操作颜色混合混杂方法image-size("file.jpg"); // => 100px 50pximage-width("file.jpg"); // => 100pximage-height("file.jpg"); // => 50px单位转换convert(9s, "ms"); // =>...

2019-10-06 16:58:54 473

原创 JS - 函数节流封装

函数节流[throttle]函数节流也是优化高频率执行js代码的一种手段可以减少高频调用函数的执行次数函数节流作用减少代码执行次数, 提升网页性能函数节流应用场景oninput / onmousemove / onscroll / onresize等事件函数节流和函数防抖区别函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)函数防抖是让连...

2019-10-05 23:38:37 1291

原创 JS - 函数防抖封装

function debounce(fn, delay) { let timerId = null; return function () { let self = this; let args = arguments; timerId && clearTimeout(timerId); timerId...

2019-10-05 23:36:13 825

原创 JS - 获取网页宽高封装

function getScreen() { let width, height; // IE9以及IE9以上的浏览器 if(window.innerWidth){ width = window.innerWidth; height = window.innerHeight; }else if(document.compatMode ...

2019-10-05 23:34:15 157

原创 JS - scroll属性

scrollWidth / scrollHeight内容没有超出元素范围时scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth;scrollHeight: = 元素高度 + 内边距的高度 == clientHeight;内容超出元素范围时scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度scrollHeight: = 元素高度 + 内...

2019-10-05 23:31:35 2469

原创 JS-client属性

clientWidth / clientHeightoffset…offsetWidth = 宽度 + 内边距 + 边框offsetHeight = 高度 + 内边距 + 边框client…clientWidth = 宽度 + 内边距clientHeight = 高度 + 内边距clientLeft/clientTopoffset…offsetLeft/offsetTop: 距...

2019-10-05 23:27:12 469

原创 JS-offsetParent作用

作用获取元素的第一个定位祖先元素如果没有祖先元素是定位的, 那么就是获取到的就是body<style> *{ margin: 0; padding: 0; } .grand-father{ width: 300px; height: 300px; margin-top: 1...

2019-10-05 23:23:39 212

原创 JS-offsetLeft和offsetTop

获取元素到第一个定位祖先元素之间的偏移位如果没有祖先元素是定位的, 那么就是获取到body的偏移位<style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; margin-top: 100...

2019-10-05 23:20:01 157

原创 JS-获取元素宽高的方式

获取元素宽高的方式stylegetComputedStylecurrentStyleoffsetWidth和offsetHeight区别<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; pad...

2019-10-05 23:11:47 265

原创 JS-BOM中常见的对象

window代表整个浏览器窗口window是BOM中的一个对象, 并且是一个顶级对象(全局)Navigator代表当前浏览器的信息, 通过Navigator可以判断用户当前是什么浏览器var agent = window.navigator.userAgent;if(/chrome/i.test(agent)){ alert("当前是谷歌浏览器");}else if(/fi...

2019-10-05 22:38:58 506

空空如也

空空如也