- 博客(127)
- 收藏
- 关注
RSS订阅原创 jQuery自定义事件
自定义事件自定义事件, 必须满足以下两个条件事件必须是通过on绑定的事件必须通过trigger来触发$(".son").on("myClick", function () { alert("son");});$(".son").triggerHandler("myClick");
2021-01-20 01:17:29
276
1
原创 jQuery事件自动触发
事件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
159
原创 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
187
原创 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
254
原创 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
71
原创 jQuery的scrollTop方法
scrollTop获取滚动的偏移位获取网页滚动的偏移位注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法$("body").scrollTop()+$("html").scrollTop()；设置网页滚动偏移位为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法 $("html,body").scrollTop(300)；...
2021-01-20 00:53:28
184
原创 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
101
原创 jQuery文本值相关的方法
html()和原生JS中的innerHTML一模一样text([)和原生JS中的innerText一模一样val()获取value值
2019-10-23 10:01:57
78
原创 jQuery操作类相关的方法
addClass()作用: 添加一个类如果要添加多个, 多个类名之间用空格隔开即可removeClass()作用: 删除一个类如果想删除多个, 多个类名之间用空格隔开即可toggleClass()作用: 切换类有就删除, 没有就添加...
2019-10-22 23:07:45
150
原创 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
157
原创 jQuery的prop方法
prop方法特点和attr方法一致prop方法不仅能够操作属性, 他还能操作属性节点官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()removeProp方法特点和removeAttr方法一致...
2019-10-22 23:00:27
543
原创 jQuery的attr方法
attr()作用: 获取或者设置属性节点的值可以传递一个参数, 也可以传递两个参数如果传递一个参数, 代表获取属性节点的值如果传递两个参数, 代表设置属性节点的值注意:如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值如果是设置:找到多少个元素就会设置多少个元素如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增removeAttr()会删除...
2019-10-22 22:57:11
128
原创 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
148
原创 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
131
1
原创 jQuery - 筛选
过滤方法作用eq(N)获取第N个元素first()获取匹配到的第一个元素last()获取匹配到的最后一个元素hasClass(class)检查当前的元素是否含有某个特定的类，如果有，则返回truenot()删除与指定表达式匹配的元素查找方法作用children()取得一个包含匹配的元素集合中每一个元素的所有子元...
2019-10-22 11:23:32
92
原创 jQuery核心函数
$();/jQuery原理();就代表调用jQuery的核心函数$(function () { alert("hello lnj"); // 1.接收一个字符串 // 1.1接收一个字符串选择器 // 返回一个jQuery对象, 对象中保存了找到的DOM元素 var $box1 = $(".box1"); var $box2 = $("#box2"...
2019-10-22 10:58:42
75
原创 jQuery- 释放$的使用权
释放$的使用权释放操作必须在编写其它jQuery代码之前编写释放之后就不能再使用$,改为使用jQueryjQuery.noConflict();自定义一个访问符号var xx = jQuery.noConflict();xx(function () { alert("hello");});...
2019-10-22 10:54:50
394
原创 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
148
原创 jQuery - 入口函数写法
第一种写法$(document).ready(function () { // alert("hello lnj");});第二种写法jQuery(document).ready(function () { // alert("hello lnj");});第三种写法(推荐)$(function () { // alert("hello lnj");})...
2019-10-22 10:34:15
158
原创 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
206
原创 CSS-文字超出隐藏
overflow: hidden;/*超出部分隐藏*/text-overflow:ellipsis;/* 超出部分显示省略号 */white-space: nowrap;/*规定段落中的文本不进行换行 */
2019-10-10 16:23:56
145
原创 Less-条件判断
less中可以通过when给混合添加执行限定条件, 只有条件满足(为真)才会执行混合的代码when表达式中可以使用比较运算符(> < >= <= =)、逻辑运算符、或检查函数来进条件判断(),()相当于JS中的||/* 当下边 div 中 .size 传入的第一个参数是100px或者第二个参数是100px才会执行*/.size(@width,@height) w...
2019-10-06 17:42:41
9436
原创 Less-继承
less中的继承和less中混合的区别使用时的语法格式不同 (选择器:extend(混合))转换之后的结果不同(混合是直接拷贝, 继承是并集选择器).center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}.father:extend(.center){ ...
2019-10-06 17:37:47
674
原创 Less-层级结构
如果在某一个选择器的{}中直接写上了其它的选择器, 会自动转换成后代选择器例如以下代码: .box1 .son&的作用, 是告诉less在转换的时候不用用后代来转换, 直接拼接在当前选择器的后面即可.box1 { width: 400px; height: 300px; position: relative; background-color: p...
2019-10-06 17:35:50
1728
原创 Less-less导入其他less文件
@import "triangle.less";// .less可省略@import "triangle.less";
2019-10-06 17:30:12
3445
1
原创 Less-混合的匹配模式
混合的匹配模式就是通过混合的第一个字符串形参,来确定具体要执行哪一个同名混合通用的匹配模式无论同名的哪一个混合被匹配了, 都会先执行通用匹配模式中的代码@_: 表示通用的匹配模式.triangle(@_, @width, @color) { width: 0; height: 0; border-style: solid;}.triangle(Bottom, @width...
2019-10-06 17:28:20
438
原创 Less-混合
混合将需要重复使用的代码封装到一个类中, 在需要使用的地方调用封装好的类即可在预处理的时候less会自动将用到的封装好的类中的代码拷贝过来本质就是ctrl+c --> ctrl + v注意点如果混合名称的后面没有(), 那么在预处理的时候, 会保留混合的代码如果混合名称的后面加上(), 那么在预处理的时候, 不会保留混合的代码.center(){ position: abs...
2019-10-06 17:24:25
111
原创 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
113
原创 Less-变量差值
变量插值在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量如果属性名称或者选择器名称想使用变量中保存的值, 那么必须使用变量插值的格式变量插值的格式格式: @{变量名称}@size: 200px;@w: width;@s: div;@{s}{ @{w}: @size; height: @size; background...
2019-10-06 17:11:18
146
原创 Less-变量
变量和js中的概念基本一样less中定义变量的格式@变量名称: 值;less中使用变量的格式==@变量名称;=@w: 400px;@h: 200px;将一个变量赋值给另外一个变量@变量名称 : @变量名称;@h: @w;全局变量和局部变量定义在=={}外面的就是全局变量==, 什么地方都可以使用定义在=={}里面的就是局部变量==, 只能在{}中使用注意: less中的...
2019-10-06 17:07:39
372
原创 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
360
原创 JS - 函数节流封装
函数节流[throttle]函数节流也是优化高频率执行js代码的一种手段可以减少高频调用函数的执行次数函数节流作用减少代码执行次数, 提升网页性能函数节流应用场景oninput / onmousemove / onscroll / onresize等事件函数节流和函数防抖区别函数节流是减少连续的高频操作函数执行次数 (例如连续调用10次, 可能只执行3-4次)函数防抖是让连...
2019-10-05 23:38:37
1180
原创 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
752
原创 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
108
原创 JS - scroll属性
scrollWidth / scrollHeight内容没有超出元素范围时scrollWidth: = 元素宽度 + 内边距宽度 == clientWidth;scrollHeight: = 元素高度 + 内边距的高度 == clientHeight;内容超出元素范围时scrollWidth: = 元素宽度 + 内边距宽度 + 超出的宽度scrollHeight: = 元素高度 + 内...
2019-10-05 23:31:35
2422
原创 JS-client属性
clientWidth / clientHeightoffset…offsetWidth = 宽度 + 内边距 + 边框offsetHeight = 高度 + 内边距 + 边框client…clientWidth = 宽度 + 内边距clientHeight = 高度 + 内边距clientLeft/clientTopoffset…offsetLeft/offsetTop: 距...
2019-10-05 23:27:12
410
原创 JS-offsetParent作用
作用获取元素的第一个定位祖先元素如果没有祖先元素是定位的, 那么就是获取到的就是body<style> *{ margin: 0; padding: 0; } .grand-father{ width: 300px; height: 300px; margin-top: 1...
2019-10-05 23:23:39
147
原创 JS-offsetLeft和offsetTop
获取元素到第一个定位祖先元素之间的偏移位如果没有祖先元素是定位的, 那么就是获取到body的偏移位<style> *{ margin: 0; padding: 0; } .father{ width: 200px; height: 200px; margin-top: 100...
2019-10-05 23:20:01
101
原创 JS-获取元素宽高的方式
获取元素宽高的方式stylegetComputedStylecurrentStyleoffsetWidth和offsetHeight区别<style> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; pad...
2019-10-05 23:11:47
189
原创 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
445
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人