首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript类库---JQuery(一)

方法4种不同调用方式: 参数是字符串表示CSS选择器:$('.class')返回当前文档中匹配到元素集。...HTML文本字符串:(不能是纯文本,会被当做CSS字符串)返回文本创建好HTML元素并封装成JQuery对象;此方式接受可选第二个参数;1、可以用Document对象来指定所创建元素关联文档...2、可以使用object对象,对象属性名是Jquery关键字时,可用于传入属性值; 参数为一个函数:文档加载完毕时调用;相当于onLoad()函数;形如$(function(){})或JQuery(...;map返回值为新包含回调函数所有返回值JQuery对象; index() : 参数为一个元素或字符串(当做CSS选择器使用),返回值为元素在此JQuery对象中索引值,找不到返回-1; is...: 设置:text():纯文本;html():HTML内容格式; x.html() === x[0].innerHTML; 元素数据:   设置获取文档、元素、window对象相关联数据 $('div

4.2K30
您找到你想要的搜索结果了吗?
是的
没有找到

jQuery之事件绑定到触发全过程及知识点补充

, //事件处理函数,如 function(){console.log('aaaa')} handler: handler, //索引,用于关联元素和事件...五、guid作用? 添加guid目的是因为handler没有直接跟元素节点发生关联,所以需要一个索引来寻找或者删除handler 六、命名空间namespace作用?...十、trigger触发机制 $("#A").on("click" ,function (event) { console.log(event,"A被点击了") }) 元素#A本身绑定了一个...jQuerytrigger是能够无差别模拟这个交互行为 $("#A").trigger("click") 从trigger()功能上就可以解释 为什么jQuery要设计元素数据分离了: 如果是直接绑定的话就无法通过...trigger机制去触发click事件, 正是因为jQuery没有直接把事件相关handler元素直接绑定,而是采用了分离处理, 所以我们通过trigger触发click事件addEventListener

75910

zepto 基础知识(5)

类型; self   基于一组特定元素为所有选择器匹配元素附加一个处理事件,匹配元素可能现在货将来才创建。 89.die   die(type,function(e){...})...类型 self   添加一个个事件处理器到符合目前选择器所有元素匹配,匹配元素可能在或将来才创建。...否则,只通过事件类型调用此方法将移除该类型所有处理程序。   如果没有参数,将移出当前元素上全部注册事件。...如果给定css选择器,当事件   在匹配选择器元素上发起时,事件才会被触发(愚人码头注:即事件委派,或者说事件代理)。   ...如果给定data参数,这个值将在事件处理程序执行期间被作为有用 event.data 属性   事件处理程序在添加该处理程序元素、或在给定选择器情况下匹配选择器元素上下文中执行(愚人码头注:

66470

jQuery学习笔记

常规选择器 $("*") 选择所有节点 $("#id") ID选择器,注意其中一些特殊字符,如 . $(".class") 类选择器 $("tag") 标签选择器 $("子元素") $("直接子元素"...控件选择器 :checked 选择所有被选中元素 :selected 被选择元素 :disabled/:enabled 选择被禁用/禁用元素 :hidden 隐藏元素,不仅是 [type="hidden...事件触发 事件触发有两种方式,一是使用预定“事件函数”( .click(), .focus()),二是使用 trigger()或 triggerHandler()。...(); $('#btn').trigger('click'); trigger() triggerHandler()不同之处在于前面是触发事件,而后者是执行绑定函数。...document鼠标位置 event.namespace 事件触发时名字空间,比如 trigger('click.namespace') event.data 额外传入数据 event.result

3.5K20

JQuery快速入门

jQuery选择器 示例 基本选择器 #id, .class, element 最基本id,类,元素选择器 * 匹配所有元素, $("*") selector1,selector2,… 将每一个选择器匹配到元素合并后一起返回...为two元素后面所有兄弟元素 过滤选择器 :first, :last 选择第一个/最后一个元素 :not(selector) 去除所有给定选择器匹配元素 :even, :odd 选取索引为偶数...)文档对象模型是一种浏览器、平台、语言无关接口,通过接口可以轻松访问浏览器中所有标准组件。...之前就介绍$(document).ready()相信大家都不会陌生,其window.onload实际上有一些区别的,前者是当DOM加载完成后触发,而后者则是页面中所有元素(包括所有关联元素)加载完成后执行...()方法来阻止元素默认行为,常用a链接元素和submit表单提交行为。

2.5K100

Vue 应用单元测试策略实践 03 - Vue 组件单元测试

我们不但可以通过 find 方法查找 DOM 元素,还可以通过 trigger 方法在组件上模拟触发某个 DOM 事件,比如 Click,Change 等等。...对于浅渲染来说,事件模拟并不会像真实环境中所预期那样进行传播,因此我们必须在一个已经设置好了事件处理方法实际节点上才能够调用,实际上 .trigger() 方法将会根据模拟事件触发这个组件 prop...例如,.trigger('click') 实际上会获取 对应 clickHandler propsData 并调用它。...未完待续…… ## 单元测试基础 ### 单元测试自动化意义 ### 为什么选择 Jest ### Jest 基本用法 ### 如何测试异步代码?...## Vue 单元测试 ### Vue 组件渲染方式 ### Wrapper find() 方法选择器 ### UI 组件交互行为测试 ## Vuex 单元测试 ### CQRS Redux-like

1.3K10

openwrt外网web管理_OpenAPI

如果func是个方法,则object是func函数引用关联对象。当func被调用时,trigger()其他参数会传递给它。...这就是为什么,大部分时间里,你在定位部件里 HTML 时,必须限制 jQuery 选择器选择范围。 出于同样逻辑,你也可以猜测到,不能够在部件里使用 HTML id。...如果widget 被实例化两次,在应用程序里将有两个相同 id,但却是不同 HTML元素情况。而这本身就是一个错误。...所以key click.my_button将绑定在所有CSS类名为“my_button”HTML标签 click事件上。dictionaryvalue值是对象内被调用方法名称。...几乎所有时候,id可为空,使用 CSS类或保留一个DOM节点引用,或嵌套在一个jQuery元素内去引用。

6.2K10

jQuery 事件(三) 事件绑定和解绑、对象使用、自定义事件

如果提供了第二参数,那么事件在往上冒泡过程中遇到了选择器匹配元素,将会触发事件回调函数 卸载事件off()方法 通过.on()绑定事件处理程序 通过off() 方法移除绑定 根据on绑定事件一些特性...,off方法也可以通过相应传递组合事件名,名字空间,选择器或处理函数来移除绑定在元素上指定事件处理函数。...方法就可以调用到alert .trigger定义 根据绑定到匹配元素给定事件类型执行所有的处理程序和行为 trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数 $...:会在DOM树上冒泡,所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中.stopPropagation() 方法可以使事件停止冒泡 trigger事件是具有触发原生自定义能力...trigger用法是一样,重点看不同之处: triggerHandler不会触发浏览器默认行为,.triggerHandler( “submit” )将不会调用表单上.submit() .trigger

4K30

jQuery源码解析之click()事件绑定

( data, fn ) { xxx } 如果有参数,则是绑定事件,调用 on() 方法; 没有参数,则是调用事件,调用 trigger() 方法( trigger() 放到下篇讲 ) 三、$().on...//绑定事件on方法 //源码5143行 //目标元素,类型(click,mouseenter,focusin,xxx),回调函数function(){xxx} function on(...方法最终调用 jQuery.event.add( ) 方法 四、jQuery.event.add( ) 作用: 为目标元素添加事件 源码: //源码5235行 /* * Helper functions...if 判断,都是在初始化对象,最后通过 while 循环,调用目标元素 addEventListener 事件,也就是说,click()/on() 本质是 element.addEventListener...(); 在 jQuery 对象中,有唯一id属性 $("#one") elemData = dataPriv.get( elem ) ① Data() //目标元素jQuery id

1.7K20

02-老马jQuery教程-jQuery事件处理

],fn]) $("p").blur(); 当元素失去焦点时触发 blur 事件,这个函数会调用执行绑定到blur事件所有函数,包括浏览器默认行为。...这个方法行为表现trigger类似,但有以下三个主要区别: 第一,他不会触发浏览器默认事件。 第二,只触发jQuery对象集合中第一个元素事件处理函数。...selector:一个选择器字符串用于过滤器触发事件选择器元素后代。如果选择< null或省略,当它到达选定元素,事件总是触发。...要删除特定委派事件处理程序,提供一个selector 参数。选择器字符串必须是完全匹配递到.on()事件处理程序附加选择器。要删除非委托元素所有事件,使用特殊值 "**" 。...// $('#btn').trigger('click'); // 触发所有的click事件,包括所有的命名空间 // $('#btn').trigger('click.demo');

6.4K00

JavaScript学习笔记(四)—— jQuery入门

1. jQuery选择器 - 选择器都是以 $() 开头 基础选择器 选择器 描述 id选择器 指定id元素 class选择器 遍历css类元素 element元素 遍历HTML元素 *选择器 遍历所有元素...并列选择器 这类选择器将每一个选择器匹配到元素合并后一起返回 id="notMe" id="...:header 选择标题元素 :animated 选择所有正在执行动画效果元素 :root 选择页面的根元素 :target 选择当前活动目标元素(锚点) $("tr:..."整数或odd或even" :only-child 选择父元素中唯一元素(元素只有一个子元素) 区分元素类型 选择器 说明 :first-of-type 选择同元素类型第一个子元素 :last-of-type...选择同元素类型随后一个子元素 :nth-of-type 选择同元素类型第n个或奇偶元素,n值为"整数或odd或even" :only-of-type 匹配父元素中特定类型唯一子元素(元素可以有多个子元素

11.1K50

jQuery最佳实践

(1)最快选择器id选择器元素标签选择器 举例来说,下面的语句性能最佳:   $(‘#id’)   $(‘form’)   $(‘input’) 遇到这些选择器时候,jQuery内部会自动调用浏览器原生方法...可以看到,ID选择器遥遥领先,然后是标签选择器,第三是Class选择器,其他选择器都非常慢。 3. 理解子元素和父元素关系 下面六个选择器,都是从父元素中选择子元素。...再来看一个例子,为a元素绑定一个处理点击事件函数:   $(‘a’).click(function(){ alert($(this).attr(‘id’));   }); 这段代码意思是,点击a元素后...,弹出元素id属性。...更正确写法是,直接采用javascript原生方法,调用this.id:   $(‘a’).click(function(){ alert(this.id);   }); 根据测试,this.id速度比

82730

jQuery最佳实践

(1)最快选择器id选择器元素标签选择器 举例来说,下面的语句性能最佳:   $('#id')   $('form')   $('input') 遇到这些选择器时候,jQuery内部会自动调用浏览器原生方法...可以看到,ID选择器遥遥领先,然后是标签选择器,第三是Class选择器,其他选择器都非常慢。 3. 理解子元素和父元素关系 下面六个选择器,都是从父元素中选择子元素。...(5) $('#parent .child') 这条语句上一条是同样情况。但是,上一条只选择直接元素,这一条可以于选择多级子元素,所以它速度更慢,大概比最快形式慢了77%。...,点击a元素后,弹出元素id属性。...更正确写法是,直接采用javascript原生方法,调用this.id:   $('a').click(function(){ alert(this.id);   }); 根据测试,this.id

1.7K60

jQuery 快速入门教程

在jQuery库中实际上定义了一个jQuery()方法,它是jQuery库核心。我们调用方法并传入指定参数,就可以返回一个jQuery实例对象,对象中包含匹配一个或多个DOM元素。...// 多个选择器以空格或指定符号隔开,将匹配前者具有指定关系最后一个选择器所表示元素 $("#uid span"); // 选择id为"uid"元素所有后代span元素 $("p > span...当我们使用$("选择器字符串")匹配到指定元素后,将返回一个jQuery对象。对象就包含匹配到所有DOM元素。...,一般都会返回jQuery对象本身(或者其它jQuery对象),因此我们可以继续调用返回jQuery对象上方法。...// 触发所有匹配元素click事件 $("selector").trigger("click"); // 触发所有匹配元素change事件 $("selector").trigger("change

13.6K30

事件绑定几种常见方式

bind方法   会给每一个符合selector元素添加click执行函数,即:将click事件绑定到所有设置了selector元素上,如果动态添加了元素,之前绑定事件也起作用 live方法   ...解决方案:避免这样使用 嵌套元素事件冒泡   解决方案:   e.preventDefault()//阻止默认       e.stoppropagation()//阻止冒泡 频繁使用trigger...函数   可能有时候需求需要触发某个特定事件,这时我们会想当然使用trigger触发事件,但是却没有考虑到带来隐患。...Click事件为例: click me function clickBtn() { alert('click!')...; } 1、直接在元素上绑定回调函数 click me 2、JS获取DOM元素对象后,对onclick属性赋值

1.8K80
领券