首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

data自定义属性jQuery用法

(1)如果在HTML文档设置data-自定义属性单个字符串名称属性若有大写值,在js文件获取时只能用小写形式获取。...如: HTMLdata-Role,获取当时为$(node).data(“role”); (2)如果在HTML设置data-role和data-Role是一样,html属性不区分大小写。...然后我们从验证结果可以看出,js只会找到第一个与其匹配就直接返回。 (3)如果用js来设置data属性,那么如果你定义是大写格式,则访问也必须是大写形式。...最后讲一下data()和attr()区别: (1) 是否需要传参: data() 可以不传入参数,这使获得是一个js对象,就算你在html没有设置任何data自定义属性时,获得也是一个对象。...(4)data-attribute属性会在页面初始化时候放到jQuery对象,被缓存起来,而attr方法却不会。

2.9K20

JQuery属性操作及事件

一、属性操作1、固有属性(1)获取:选中元素.prop('属性名')console.log($('img').prop('src'));(2)设置:选中元素.prop('属性名','值')(3)区别①data():在元素本身是看不到设置属性...(不会更改DOM结构),但是该属性是存在,且可以获取输出②attr():在元素本身是可以看到设置属性,也可以获取输出二、遍历操作1、区别(1)隐式迭代:给同一类元素做同样操作(2)遍历操作:给同一类元素做不同事情...}, mouseenter:function(){ console.log('成功'); } })(2)优点二: 可以给动态生成元素绑定...插件库-收集最全最新最好jQuery插件小伙伴可以在这个网站找喜欢作品,下载压缩包后,可以直接看效果,而且都有源码

1.7K70

Jquery属性操作和DOM操作

JQ中非常重要部分,就是操作DOM能力  一   属性操作 1 text():获取或设置某个文本属性           2 html()    :获取或设置某个元素属性        3 val...attr(xxx)  :返回被选元素属性                $(selector).attr(xxxx,xxxx)  :设置被选元素属性和值,第一个参数为被选中属性,第二个参数为属性值...l  该函数返回一个坐标对象,该对象有一个left属性和top属性。Position()坐标参考系是以被定位祖辈元素左上角为原点(0,0),向右为正,向下为正。...offset和position区别     JQ两个方法都返回一个包含两个属性对象-左边距和上边距,它们两个不同点在于位置相对点不同。    ...删除所有子节点),绑定事件,附加数据都会移除         2 detach()从DOM删除所有匹配元素()与remove()不同是,绑定事件,附加数据都会被保留下来        3

1.3K20

jQuery原理(原型上属性、方法)

jQuery原型上属性 kjQuery.prototype = { constructor: kjQuery, init: function (selector) {}, /...push: [].push, // 对实例元素进行排序 sort: [].sort, // 按照指定下标指定数量删除元素,也可以替换删除元素 splice...,是jQuery类型实例对象 first: function () { return this.eq(0); }, last:获取实例最后一个元素,是jQuery类型实例对象 last:...,然后把回调返回值收集起来组成一个新数组返回 map方法与each方法区别 each静态方法默认返回值就是, 遍历谁就返回谁; map静态方法默认返回值是一个空数组 each静态方法不支持在回调函数对遍历数组进行处理...;map静态方法可以在回调函数通过return对遍历数组进行处理, 然后生成一个新数组返回 kjQuery.extend({ map: function (obj, fn) {

94320

jQuery源码研究:jQuery原型对象上属性方法(下)

接昨天jQuery原型属性方法部分。 each()方法:为每个匹配元素集合执行回调函数,是一个jQuery遍历方法。...这个each()方法其实通过返回真实each方法引用来实现,具体在后面读到jQuery.extend属性时再看。 map()方法,同样也是一个遍历方法。...至于this.pushStack()方法参数,可以明显看到它是jQuery构造对象上定义了一个方法map,该方法内部具体实现尚未可知,因为还没读到那部分,但看参数传递可以大概知道,将新创建元素集合和对新集合进行处理回调函数传入进去了...jQuery对象集合,而res则是只有一个索引为1li及其他属性方法组成`jQuery`对象集合。...说不太让人懂,虽然用也会用,不就是在jQuery实例对象进行DOM选择链条返回未选状态么,但其实看代码实现更明确: jQuery.prototype = { end: function(){

85950

jQuery源码研究:jQuery原型对象上属性方法(上)

1jQuery.fn = jQuery.prototype = { 2 constructor: jQuery, 3 length: 0, 4 // 添加原型方法和属性... 5} 从上段代码可以看到...,jQuery对象作为构造函数,在其原型上定义了一些属性和方法,同时其原型也被指向jQuery对象属性fn上面。...其中属性constructor指向构造器即jQuery对象。length属性默认值为0,为对象添加属性length,感觉这是要把对象作为类数组来处理,且看后续代码阅读能发现用在哪,暂时先不关注。...toArray方法:返回一个包含jQuery对象集合所有DOM元素数组。这个方法不接收任何参数。所有匹配DOM节点都会包含在一个标准数组。...这个方法其实作用就是把元素集合添加到一个新对象,并且这个对象还具有jQuery对象引用,所以也就是具有jQuery对象所有方法和属性,链式调用起来妥妥呀。

1.1K40

JQuery DOM操作:Class属性舞蹈魔法

在前端世界JQuery如同一位舞者,通过灵活舞步为我们展示了操纵HTML元素艺术。而在这场舞蹈精彩演出,Class属性操作是一项极富魅力技艺。...在本篇博客,我们将深入研究JQuery DOM操作Class属性操作,揭示这段舞蹈背后绝妙之处。JQuery独特韵味JQuery,这个前端开发名角,以其简洁而强大语法而备受推崇。...Class属性:元素身份标签在前端布景,Class属性是元素身份标签,定义了元素样式和行为。通过JQuery舞台,我们可以轻松地为元素添加、移除、切换Class,实现页面样式动态变化。...Class属性操作小贴士在使用Class属性操作时,有一些小贴士值得我们注意:选择器妙用在Class属性操作,选择器是一个强大工具。...小结通过本篇博客,我们深入了解了JQuery DOM操作Class属性操作。Class属性操作为我们提供了在HTML元素添加、移除、切换类便捷方法,使得页面样式变化更为灵活多变。

15710

jQuery:详解jQuery事件(二)

上一篇讲到jQuery事件,深入学习了加载DOM和事件绑定相关知识,这篇主要深入讨论jQuery事件合成事件、事件冒泡和事件移除等内容。   ...接上篇jQuery:详解jQuery事件(一)   3、合成事件   jQuery有两个合成事件——hover()方法和toggle()方法,同ready()方法一样,这些都是jQuery自定义方法...*这里要注意一点是,jQueryhover()方法准确来说是替代jQUerybind("mouseenter")和bind("mouseleave"),而不是替代bind("mouseover"...停止事件冒泡:停止事件冒泡可以阻止事件其他对象事件处理函数被执行。在jQuery中提供了stopPropagation()方法来停止事件冒泡。...5、移除事件:在绑定事件过程,不仅可以为同一个元素绑定多个事件,也可以为多个元素绑定同一个事件。在此就不举例说明了。

2.2K30

jQuery:详解jQuery事件(一)

当文档或者它某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统JavaScript也能完成这些交互,但是jQuery增加兵扩展了基本事件处理机制。...一、jQuery事件   1、加载DOM:   执行时机:在常规JavaScript,通常使用window.onload方法,而在jQuery,使用是$(document).ready()方法...例如与图片相关HTML下载完毕,并且已经解析为DOM树了,但是很有可能图片还未完全加载,所以例如图片高度和宽度等属性就不一定有效。   ...要解决这个问题,可以使用jQuery另一个关于页面加载方法——load()方法。load()方法会在元素onload事件绑定一个处理函数。...第二个参数是可选参数,作为event.data属性值传递给事件对象额外数据对象。第三个参数则是用来绑定处理函数。举个实际例子,下面网页,单击“标题”链接将显示内容。

1.6K20
领券