1 绵羊万

尚未进行身份认证

每天多一点点!

等级
TA的排名 6w+

jQuery中使用trigger()方法完成模拟操作

我们前面说的栗子都是需要主要主动去触发事件,但是有时候需要用户进入页面之后,就自动触发事件,而不需要用户去主动触发,这就可以用到我们的trigger()方法了$('button').trigger('click');这样,加载完页面之后,就会立刻输出想要的结果,也可以用简化写法click(),来达到同样的效果$('button').click(); 1.触发自定义事件t...

2018-10-26 20:40:14

jQuery的两个合成事件---hover()方法和toggle()方法

 1.hover()方法语法结构为:hover(enter,leave);该方法用于鼠标的悬停事件,当光标移动到元素上时,会触发第一个函数(enter),当光标移除这个元素时,会触发第二个函数(leave) $(function(){$('div').hover(function(){//我是第一个函数},function(){//我是第二个函数...

2018-10-26 20:18:33

jQuery中$(document).ready()函数的理解

$(document).ready()方法是事件模块中最重要的一个函数,可以极大的提高Web应用程序的响应速度,jQuery就是用$(document).ready()方法来代替传统的JS的window.onload方法的下面利用对比的方式,可以加深对$(document).ready()的理解1.执行时机JS(window.onload):网页中所有的元素(包括元素的所有关联文件)完...

2018-10-26 19:46:03

jQuery事件对象的属性

1.什么是事件对象?即将触发的事件作为一个对象处理,对于事件对象,我们需要有以下几个方面的理解:$('div').click(function(event){$(this).css('backgroundColor',red);})1)当事件触发时,事件对象就被创建了。上面的代码中当<div>被单击时,事件对象就被创建了。2)这个事件对象,只有事件处理函数能...

2018-10-26 16:56:35

jQuery 隐式迭代和链式调用

jQuery隐式迭代和链式调用学过jQuery之后,一般是不太有人再愿意写原生JS的,甚至有段时间jQuery成了JS的代名词。原因无他,足够简单方便。可在这简单方便的背后,可少不了两大功臣:隐式迭代和链式调用。隐式迭代对于原生JS来说,一般我们设置某类元素的样式,都得使用循环设置,而jQuery在使用的时候则无需考虑这点,简单示例如下://设置.p...

2018-09-30 17:12:23

事件委托(事件代理)

事件委托一般来说我们要给某个元素绑定事件,都会直接绑定在该元素上,如下://给li元素绑定点击事件$('li').click(function(){console.log('你点击我了');})但是这种直接的处理会有以下问题:通过JS新添加的li元素并没有该事件绑定,所以点击无效 元素如果比较多的话,比喻有200个li,那每个li都绑定一...

2018-09-30 17:09:27

jQuery事件监听

jQuery事件监听实现jQuery事件的四个要素如下所示:1)触发事件的目标元素2)触发事件的名称(即事件类型)3)事件触发时的回调(即事件处理函数)4)事件对象(即event)举个栗子来解释它的格式:$('#targrt').on('click',function(event){console.log('target');//被点击了$('...

2018-09-30 17:07:48

详细分类 jQuery选择器

 jQuery选择器----->CSS选择器     jQuery选择器实际上是实现了CSS选择器jQuery选择器的分类 jQuery选择器可以分为下面三种类型的选择器基本选择器$('tag')    -------按元素标签选择$('.class') -------按类名选择$('#id')   -------按id选择$('*')   ...

2018-09-30 16:41:11

谈谈jQuery对象

jQuery其实就是对原生JS的封装与调用我们用jQuery时的$到底是什么呢?$就是jQuery的简写也就是说$===jQuery返回的结果是ture jQuery对象定义$()---------就是jQuery对象怎么理解上面这句话呢?$(element)会将所选择的元素封装为jQuery对象,使其带有额外的方法,使用超方便!!下面举几个生成jQuery对象的...

2018-09-30 16:09:42

JS中addEventListener的用法

事件模型这是一个完整的事件流:事件捕获----处于目标----事件冒泡注意:事件捕获由于浏览器兼容问题用的比较少 事件处理程序(addEventListener)格式为:element.addEventListener(type,handle,false);type:事件触发类型,如click,keypress等等,下面我们详细的讲讲事件类型!!handle...

2018-09-30 11:30:43

利用DOM来遍历所有元素(children和childNodes的区别)

如果一个元素的子元素里还有子元素,那么我们常常用到的一个方法就是递归例子如下图所示:functiontraversal(dom){varlen=dom.length;vard=null;for(vari=0;i<len;i++){d=dom[i];console.log(d);if(d....

2018-09-30 10:04:06

谈谈JS中property和attribute的区别

property称为属性,而attribute称为特性!特殊的属性就叫特性!(如className,href等等)property和attribute的区别1)公认的attribute会映射到property现在我们来看一个元素的全部属性(用console.dir即可得到)里面的attributes就是特性,特性就是该元素所特有的属性,其他的都是property,所有元素都有的...

2018-09-29 22:28:46

谈谈JS的DocumentFragment

DocumentFragment简单描述documentFragment是nodeType值为11,nodeName的值为#document-fragment.1)documentFragment是一个文档片段,一种‘轻量级节点’2)通常作为仓库来使用,不存在DOM树上,是一种游离态 DocumentFragment的用途当我们用JS的DOM创建很多节点时,在加入节点到...

2018-09-29 21:45:53

谈谈JS系统对话框

window对象window---储存了窗口相关的信息window对象---扮演的是ECMA的global对象怎么理解呢?看下面两句话1)凡是不是其他作用域的变量都是window的属性2)凡是不是其他作用域的函数都是window的方法下面谈谈window常用的几个方法系统对话框1)window.alert('注意')点击确认之后的返回值为: 2....

2018-09-29 21:26:10

谈谈JS的for/in语句的使用

for/in语句的使用 for/in语句的使用格式为:for(变量in对象){遍历执行的代码;}用一个实例来解释会更清晰,实例如下所示:varbottle={name:'bottle',price:49,diameter:6.7,isKeepWarm:ture;}for(varkeyinbottle){...

2018-09-29 20:30:48

JS函数声明与函数表达式的区别

函数声明与函数表达式的区别前面我们已经说了两种定义函数的方式:函数声明与函数表达式。那么这两种方式有区别吗,还是一样的呢?下面我们来进一步探讨探讨。下面我们定义了两个函数分别为 hello 和 hi,前者采用函数声明,后者采用函数表达式,然后再调用,如下:functionhello(){console.log('Hellotheworld');}varhi...

2018-09-29 19:44:48

JS数组的常用方法

数组的常用方法数组作为一种重要的数据类型,除了我们前面已经说到的pop、push、shift、unshift几个方法外,还有很多实用的方法也是我们的必备技能。假设我们有一队人,如下图:我们要对其进行一些排序或筛选的操作(比喻按高矮排序,筛选女性等),我们都可以通过数组来进行操作。 抽出一些人首先我们用数组定义该数据(为了简单起见,我们数据就不搞那么多):var...

2018-09-29 19:39:08

深入了解JS的Number类型

深入了解Number类型Number类型作为JS的基本数据类型之一,被应用在程序中的各种场景,其重要性就如数字对于我们日常生活。下面就让我们来一起深入了解下,为以后的“策马奔腾”做好铺垫。定义方式一般来说我们可以直接使用数值字面量格式来定义一个数字,如下:varnum1=15;varnum2=7;console.log(typeofnum1);...

2018-09-29 19:31:18

说说background-size:cover;与background-size:contain的区别

1.background-size:cover官方background-size:cover;的解释是这个样子的,截图如下所示:解释:1)是按照图片的比例放大或者缩小至充满容器,而不是按照容器的比例大小来缩放。      2)如果照片的比例和容器的比例是不一致的,必定会导致照片的不完整性。下面举一个栗子来说明这种情况:首先原始的背景图片是这样的。而设置b...

2018-09-04 21:09:08

图标水平排列(间隙相同)的实现

 问题描述:思路:我们可以用flex布局,对justify-content:space-between;稍作改进,即可实现上图所示的效果!!代码如下所示:<ulclass="share-list"><liclass="share-item"></li><liclass="share-item"&amp

2018-08-13 16:42:09

查看更多

勋章 我的勋章
  • GitHub
    GitHub
    绑定GitHub第三方账户获取