首页 > 其他分享 >jQuery

jQuery

时间:2023-06-06 09:11:57浏览次数:43  
标签:jQuery 动画 遍历 自定义 对象 拷贝

jQuery

jQuery常用插件网站

jQuery插件库:http://www.jq22.com/

jQuery之家 http://www.htmleaf.com/

image-20220511120535980

image-20220511120442620

image-20220511121306456

jQuery事件/on()绑定多个事件

image-20220511212937678

image-20220511213117237

image-20220511213204247

image-20220511213453823

image-20220511213721368

image-20220511213645740

jQuery解绑事件off()

image-20220512100851678

jQuery绑定只执行一次事件one()

image-20220512101036029

jQuery自动触发事件trigger()

和定时器一起使用可以达到自动触发指定事件的效果

image-20220512102412152

image-20220512101253845

第三种方法不会触发元素的默认行为

image-20220512102353313

jQuery事件对象

image-20220512102819012

jQuery对象拷贝

deep默认为浅拷贝,设置成true则为深拷贝

浅拷贝和深拷贝的区别:浅拷贝传址,深拷贝传值

浅拷贝不考虑自身,重复字段会完全覆盖

深拷贝保留自身的情况下,重复的覆盖

传址就是共享一个地址,会同时改变,一个改变了,另一个也会改变

传值就是独立的值,一个改变,另一个不会改变

image-20220512104118502

image-20220512102913985

image-20220512103536278

jQuery入口函数

image-20220511121722046

image-20220511121604692

jQuery顶级对象$,等价于jQuery

image-20220511121844822

jQuery对象和DOM对象的区别

image-20220511122247326

jQuery和DOM对象的相互转换

jQuery获取到的是一个伪数组集合,若只有1个元素,那它的索引就是0

image-20220511154625900

image-20220511154418719

jQuery常用选择器

image-20220511154809753

image-20220511154951118

image-20220511155522555

image-20220511155908213

jQuery直接修改样式-css

jQuery自带隐式for循环【隐式迭代】,会遍历选出来的伪数组,依次遍历,进行样式的赋值和修改

多组样式使用对象封装起来,用逗号分开。属性名和值可以不加引号,当css就好啦

image-20220511175223854

jQuery直接修改样式-get

image-20220511175042444

jQuery通过添加自定义类名修改样式

image-20220511175745447

jQuery修改html内容

html()/text()

image-20220511190735333

val()

image-20220511190836014

image-20220511190809469

image-20220511190928449

jQuery判断类名是否存在

image-20220511173559792

jQuery获取当前元素在伪数组中的索引

$(this).index()

jQuery排他思想

通过$(this).siblings选中其他兄弟节点

image-20220511173821289

判断复选框是否全选

妙啊!checked返回的是伪数组的长度,自然也是选中的复选框的个数

image-20220511190159311

链式编程

按顺序执行代码

image-20220511174719260

jQuery效果

  • 显示隐藏
  • 滑动
  • 淡入淡出
  • 自定义动画

image-20220511180313724

image-20220511180853141

页面设置动画

image-20220511212243016

jQuery动画队列停止-stop()

防止一次性触发多个动画进行展示,使用stop()方法就会停止之后的动画,仅展示当前动画

image-20220511181921108

image-20220511181842921

获取jQuery对象自带的属性值使用prop()

image-20220511183118274

image-20220511183134404

获取jQuery对象自定义属性值使用attr()

image-20220511183340474

数据缓存-data()【不常用】

获取dom中data-index自定义属性的值的时候,只需要element.data("index")即可

不用写前缀data-,而且返回的是数字类型

image-20220511184843467

image-20220511184923773

jQuery尺寸

image-20220511192339087

jQuery位置

offset()

image-20220511211231819

position()

image-20220511211413537

scrollTop()/scrollLeft()

image-20220511212024738

image-20220511211817183

遍历-each

image-20220511191409182

遍历-$.each()

主要用于处理数据,可以遍历对象

image-20220511191938866

image-20220511192057791

jQuery多库共存

image-20220512104846116

image-20220512104609046

解决方法【换个名字呗】:

image-20220512104825556

标签:jQuery,动画,遍历,自定义,对象,拷贝
From: https://www.cnblogs.com/lost-ways/p/17459573.html

相关文章

  • jQuery Backstretch动态设置背景图片插件
    [url]http://www.2cto.com/kf/201411/348425.html[/url]官方:[url]https://github.com/srobbin/jquery-backstretch[/url]<scriptsrc="Scripts/jquery-1.8.2.min.js"></script><scriptsrc="Scripts/jquery.backstretc......
  • jQuery使用iframe做tab标签
    jQueryTab插件[url]http://jqueryui.com/tabs/#default[/url][b][color=red]Jquery、tabs、iframe相结合[/color][/b][url]http://blog.sina.com.cn/s/blog_656977f401014oy6.html[/url]使用Jquery中的ui.tabs.js,如果tab中的界面有按钮需要跳转到新的页......
  • jquery mobile的一些使用记录。
    [color=red][b]自定义按钮图标去除按钮阴影/圆角[/b][/color][url]http://bbs.phonegap100.com/thread-218-1-1.html[/url][color=red][b]jQueryMobile自定义按钮图标[/b][/color]JqueryMobile自定义按钮图标[url]http://liningjustsoso.iteye.com/blog/1986769[/url][co......
  • 高效的jQuery代码编写技巧大盘点
    [b]缓存变量[/b]DOM遍历是昂贵的,所以尽量将会重用的元素缓存。//糟糕h=$('#element').height();$('#element').css('height',h-20);//建议$element=$('#element');h=$element.height();$element.css('height',h-20);[b]避免全局变......
  • jQuery动画插件: Velocity.js
    官方:[url]http://julian.com/research/velocity/[/url]介绍:[url]http://www.w3ctech.com/topic/1403[/url]使用Velocity.js改善用户体验[url]http://www.w3ctrain.com/2015/11/15/faster-ui-animations-with-velocity-js/[/url]使用VELOCITY.JS来改善和......
  • 分享10个最好的jQuery表单插件
    为web设计或者开发者来说,表单是我们经常需要打交道的设计元素之一。不论你开发登陆功能,在线购物功能,或者是注册功能,你都需要使用表单来执行用户输入。但其实并不是很多开发人员都关心开发或者设计表单元素。而表单设计最重要的目的在于能够将表单设计超越它本身结构以达到使用体......
  • JQuery 导航插件和图表
    [b][color=red]导航代码例子集[/color][/b]:[url]http://www.skyuu.net/jscode/adsCode/caidandaohang/[/url]15个最新的jQuery导航菜单插件[url]http://www.bobd.cn/resources/others/50381.html[/url]这篇文章中,将向大家展示采用jQuery最新技术的导航菜单......
  • jQuery队列控制方法详解queue()/dequeue()/clearQueue()
    jQuery遍历-jQuery.queue()方法:[url]http://www.w3school.com.cn/jquery/data_jquery_queue.asp[/url]jQuery核心中,有一组队列控制方法,这组方法由queue()/dequeue()/clearQueue()三个方法组成,它对需要连续按序执行的函数的控制可以说是简明自如,......
  • jquery插件合集之分页插件[表单和表格]
    [url]http://www.skygq.com/2011/01/24/jquery%E6%8F%92%E4%BB%B6%E5%90%88%E9%9B%86%E4%B9%8B%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6/[/url][color=red][b]jPaginate:AFancyjQueryPaginationPlugin[/b][/color][url]http://tympanus.net/codrops/2......
  • 4 个多才多艺的 jQuery 下拉菜单插件
    [url]http://www.php100.com/html/webkaifa/javascript/2012/0607/10512.html[/url]这里我们收集了4个最棒的jQuery下拉菜单插件,提供很多特性,例如自动完成、搜索、标签、多选、ajax等。1.ddSlickddSlick是一个轻量级的jQuery插件用来实现定制的下......