web前端开发
「已注销」
这个作者很懒,什么都没留下…
展开
-
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 255 阅读 · 0 评论 -
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 阅读 · 0 评论 -
jQuery的scrollTop方法
scrollTop获取滚动的偏移位获取网页滚动的偏移位注意点: 为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法$("body").scrollTop()+$("html").scrollTop();设置网页滚动偏移位为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法 $("html,body").scrollTop(300);...原创 2021-01-20 00:53:28 · 184 阅读 · 0 评论 -
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 阅读 · 0 评论 -
jQuery文本值相关的方法
html()和原生JS中的innerHTML一模一样text([)和原生JS中的innerText一模一样val()获取value值原创 2019-10-23 10:01:57 · 78 阅读 · 0 评论 -
jQuery操作类相关的方法
addClass()作用: 添加一个类如果要添加多个, 多个类名之间用空格隔开即可removeClass()作用: 删除一个类如果想删除多个, 多个类名之间用空格隔开即可toggleClass()作用: 切换类有就删除, 没有就添加...原创 2019-10-22 23:07:45 · 150 阅读 · 0 评论 -
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 · 158 阅读 · 0 评论 -
jQuery的prop方法
prop方法特点和attr方法一致prop方法不仅能够操作属性, 他还能操作属性节点官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()removeProp方法特点和removeAttr方法一致...原创 2019-10-22 23:00:27 · 543 阅读 · 0 评论 -
jQuery的attr方法
attr()作用: 获取或者设置属性节点的值可以传递一个参数, 也可以传递两个参数如果传递一个参数, 代表获取属性节点的值如果传递两个参数, 代表设置属性节点的值注意:如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值如果是设置:找到多少个元素就会设置多少个元素如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增removeAttr()会删除...原创 2019-10-22 22:57:11 · 128 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
jQuery- 释放$的使用权
释放$的使用权释放操作必须在编写其它jQuery代码之前编写释放之后就不能再使用$,改为使用jQueryjQuery.noConflict();自定义一个访问符号var xx = jQuery.noConflict();xx(function () { alert("hello");});...原创 2019-10-22 10:54:50 · 394 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
JS-元素内容操作
获取元素内容<div> 我是div <h1>我是标题</h1> <p>我是段落</p></div>innerHTMLinnerHTML获取的内容包含标签 不会去除两端空格console.log(oDiv.innerHTML);innerTextinnerText获取的内容不包含标签 ...原创 2019-10-02 11:13:27 · 121 阅读 · 0 评论 -
JS-贪吃蛇
* { margin: 0; margin: 0;}body { width: 100%; height: 100%; overflow: hidden;}.map { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);...原创 2019-09-27 09:44:09 · 71 阅读 · 0 评论 -
JS-元素属性操作
<img src="images/1.jpg" alt="我是alt" title="我是title" abc="666">获取元素属性getAttribute()通过对象.属性名称的方式无法获取到自定义属性的取值通过getAttribute方法可以获取到自定义属性的取值oImg.alt;oImg.getAttribute("alt");oImg.abc; // 获...原创 2019-09-24 10:28:53 · 155 阅读 · 0 评论 -
JS-操作节点
创建节点document.createElement(’’);let oSpan = document.createElement("span");添加节点appendChild方法会将指定的元素添加到最后oDiv.appendChild(oSpan); // 括号中不能加引号插入节点insertBefore(A, B); 把A查到B前面oDiv.insertBefor...原创 2019-09-24 10:09:13 · 74 阅读 · 0 评论 -
JS-获取指定元素或节点
文章目录节点获取指定元素所有的子元素childrenchildNodes获取指定节点中的第一个子元素 / 节点firstChildfirstElementChild获取指定节点中的最后子元素 / 节点lastChildlastElementChild通过子元素获取父元素/父节点parentNodeparentElement获取相邻上一个节点 / 元素previousSiblingpreviousE...原创 2019-09-24 10:01:49 · 2719 阅读 · 0 评论 -
JS-获取DOM元素
通过id获取指定元素由于id不可以重复, 所以找到了就会将找到的标签包装成一个对象返回给我们, 找不到就返回NullDOM操作返回的是一个对象, 这个对象是宿主类型对象(浏览器提供的对象)let oDiv = document.getElementById("box");console.log(typeof oDiv); // Object通过class名称获取由于cl...原创 2019-09-24 09:43:39 · 105 阅读 · 0 评论 -
JS-对象遍历
将指定对象中所有的属性和方法的名称取出来 依次赋值给key这个变量for (let key in obj) {}ES6之前function Person(name, age) { this.name = name; this.age = age; this.say = function () { console.log('Hi'); }}...原创 2019-09-23 00:37:15 · 94 阅读 · 0 评论 -
JS-对象增删改查
增加©class Person {}let per = new Person();// per.name = '菜墟琨';per['name'] = '菜墟琨';console.log(per.name);// per.say = function () {// console.log('Hi')// }per['say'] = function () { console....原创 2019-09-23 00:32:51 · 426 阅读 · 1 评论 -
JS-判断对象属性
判断某一个对象是否拥有某一个属性in的特点: 只要类中或者原型对象中有, 就会返回trueclass Person{ name = null; age = 0;}Person.prototype.height = 0;let per = new Person();console.log("name" in per ); // trueconsole.log("widt...原创 2019-09-23 00:27:15 · 281 阅读 · 0 评论 -
JS-isPrototypeOf属性
isPrototypeOf用于判断 一个对象是否是另一个对象的原型只要调用者在传入对象的原型链上都会返回truefunction Person(myName) { this.name = myName;}function Student(myName, myScore) { Person.call(this, myName); this.score = mySc...原创 2019-09-23 00:22:36 · 341 阅读 · 0 评论 -
JS-instanceof关键字
instanceof用于判断 “对象” 是否是指定构造函数的 “实例”只要构造函数的原型对象出现在实例对象的原型链中都会返回trueclass Person { name = '菜墟琨'; age = 12;}let per = new Person();class Student {}let stu = new Student();console.log(pe...原创 2019-09-23 00:18:11 · 324 阅读 · 0 评论 -
JS-获取对象类型
XXX.constructor.name;let arr = new Array();let fun = new Function();console.log(arr.constructor.name); // Arrayconsole.log(fun.constructor.name); // Functionfunction Person() {}let per = new...原创 2019-09-22 00:26:43 · 406 阅读 · 0 评论 -
JS-ES6继承
ES6之前的继承在子类中通过call/apply方法借助父类的构造函数将子类的原型对象设置为父类的实例对象function Person(name, age) { this.name = name; this.age = age; this.say = function () { console.log('Hi'); }}funct...原创 2019-09-22 00:24:07 · 110 阅读 · 0 评论 -
JS-ES6类和对象
从ES6开始系统提供了一个名称叫做class的关键字, 这个关键字就是专门用于定义类的class Person { // 当我们通过new创建对象的时候, 系统会自动调用constructor constructor (name, age) { this.name = name; this.age = age; this.say = f...原创 2019-09-22 00:17:20 · 113 阅读 · 0 评论 -
JS-字符串的常见属性和方法
字符串的常见属性和方法属性length方法charAt() 返回在指定位置的字符concat() 连接字符串indexOf() 检索字符串replace() 替换slice() 提取split()substr() 截取子串toLowerCase()、toUpperCase();属性length属性length就是字符串的长度中文、数字、英语字母、空格,都是1个长度let str = 'z...原创 2019-09-21 22:04:08 · 306 阅读 · 0 评论 -
JS-bind、call、apply
bind修改函数或者方法中的this为指定的对象, 并且会返回一个修改之后的新函数bind方法除了可以修改this以外, 还可以传递参数, 只不过参数必须写在this对象的后面let obj = { name : '踩墟捆', age : 12, say : function () { console.log('我是' + name); }...原创 2019-09-21 22:02:07 · 71 阅读 · 0 评论 -
JS-继承性
在子类的构造函数中通过call借助父类的构造函数将子类的原型对象修改为父类的实例对象function Person(name, age) { this.name = name; this.age = age;}Person.prototype.say = function () { console.log('Hi');}let per = new Perso...原创 2019-09-21 21:49:12 · 128 阅读 · 0 评论 -
JS-对象属性方法分类
属性实例属性通过实例对象访问的属性, 就称之为实例属性实例方法通过实例对象调用的方法, 就称之为实例方法function Person() { this.name = '菜墟琨'; this.say = function () { console.log("hello world"); }}let obj = new Person();con...原创 2019-09-21 21:42:10 · 209 阅读 · 0 评论 -
JS-封装性
局部变量和局部函数无论是ES6之前还是ES6, 只要定义一个函数就会开启一个新的作用域只要在这个新的作用域中, 通过let/var定义的变量就是局部变量只要在这个新的作用域中, 定义的函数就是局部函数对象的私有变量和函数默认情况下对象中的属性和方法都是公有的, 只要拿到对象就能操作对象的属性和方法外界不能直接访问的变量和函数就是私有变量和是有函数构造函数的本质也是一个函数, 所以也会...原创 2019-09-21 11:31:26 · 192 阅读 · 0 评论 -
JS-原型链
原型prototype原型的定义注意原型的用途特点原型的定义在JavaScript中,任何一个函数,都有一个prototype属性,指向一个对象。输出了一个函数的prototype属性,你会发现是一个空对象。输出这个prototype的类型,发现是object类型prototype就是英语“原型”的意思。每个函数都有原型,原型是一个对象function fun(){ alert("...原创 2019-09-19 22:51:52 · 112 阅读 · 0 评论 -
JS-创建对象
new Object()创建对象let 对象名 = new Object();new是一个运算符,和±*/一样是一个运算符 , 表示新创建一个对象由于我们是使用系统默认的类创建的对象, 所以系统不知道我们想要什么属性和行为, 所以我们必须手动的添加我们想要的属性和行为给一个对象添加属性 : 对象名称.属性名称 = 值;给一个对象添加行为 : 对象名称.行为名称 = 函数;le...原创 2019-09-19 19:00:03 · 117 阅读 · 0 评论 -
JS-this
直接用()运算符来调用函数,那么函数里面的this指的是window对象函数如果绑定给了某个HTML元素的事件上,那么函数里面的this就是这个HTML对象用定时器调用函数,函数内部的this就是window对象用对象打点(方法)来调用函数,函数里面的this指的是这个对象用apply、call,可以人工设置this是谁了...原创 2019-09-19 16:11:44 · 67 阅读 · 0 评论