jquery下拉菜单
摘要:下拉菜单或者导航是我们在网站开发中不可或缺的网站元素之一,使用jQuery可以制作出简洁易用、美观大方的下拉菜单或者导航效果。 下面展示的12款利用jQuery实现的下拉菜单即导航效果整理自前端大牛爱好公众号的美文推送,用于分享和收藏。 1,全屏大幅下拉菜单导航 2,电商网站分类导航菜单特效 3,黑
阅读全文
posted @
2018-10-13 19:04
紅葉
阅读(2793)
推荐(0) 编辑
jQuery控制网页字体大小和肤色
摘要:在一些网站上经常看到有控制网页肤色和字体大小的功能,接下来,我们将用两个例子来实现这两个功能。 网页字体大小 首先我们在网页中添加一些被控制大小的文字和字体控制的按钮。 有两种控制字体大小的方式:在当前字体大小的基础上放大或缩小,直接选择字号进行控制。 首先是第一种,需要获取当前文字的字体大小,获取
阅读全文
posted @
2018-08-25 22:13
紅葉
阅读(1440)
推荐(0) 编辑
基于jQuery的表单操作
摘要:1,文本框的聚焦和失焦 在对文本框进行操作时,通常为了提升用户体验,是用户的操作得到及时的反馈,会在文本框获得焦点时,让其颜色改变,然后在失去焦点时恢复为原来的样式,一般情况下,我们可以通过css的伪类选择器实现这个功能: 我们可以看到,浏览器对伪类选择器的支持并不是很好,特别是在IE浏览器中。此时
阅读全文
posted @
2018-08-21 21:24
紅葉
阅读(420)
推荐(0) 编辑
动画停止和延迟
摘要:1,停止动画 停止匹配元素正在进行的动画,需要使用stop()方法,该方法接收两个可选参数clearQueue和gotoEnd,均为布尔值,其中clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将在执行的动画跳转到末状态。 如果直接使用stop()方法,则会立即停止当前
阅读全文
posted @
2018-08-19 22:27
紅葉
阅读(588)
推荐(0) 编辑
元素的超链接和图片提示效果
摘要:1,超链接提示效果 在现代的浏览器中,超链接都自带了提示,只需要在超链接中加入title属性就可以实现提示效果,但是这个提示效果的响应速度非常缓慢,接下来就通过代码手动实现一个类似的功能。 首先是在空白页面,添加两个普通超链接和两个带有class的超链接。 要想实现提示效果,需要以下步骤: 为元素添
阅读全文
posted @
2018-08-19 14:16
紅葉
阅读(588)
推荐(0) 编辑
自定义动画animate()
摘要:在上一节总结了一下3中类型的动画,其中show()和hide()方法会同时修改元素的多个属性,fadeOut()和fadeIn()方法只会修改元素的不透明度,而slideDown()和slideUp()方法只会改变元素的高度,但是很多情况下,需要对动画有更多控制,这些方法无法满足用户的需求,这时,j
阅读全文
posted @
2018-08-19 11:08
紅葉
阅读(334)
推荐(0) 编辑
常用动画效果
摘要:动画效果也是jQuery库吸引人的地方,通过jQuery的动画方法,能轻松地为网页添加非常精彩的视觉效果,给用户一种全新的体验。下面,简单介绍几种常用的动画方法。 show()和hide() show()方法和hide()方法是jQuery中最基本的动画方法,在HTML文档里,为一个元素调用hide
阅读全文
posted @
2018-08-12 14:15
紅葉
阅读(762)
推荐(0) 编辑
事件的绑定与移除
摘要:事件的绑定 在jQuery中,可以使用bind()方法来对元素进行特定事件的绑定,该方法接受三个参数:第一个参数是事件类型:blur、focus、click等,也可以是自定义名称;第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象;第三个参数则是用来绑定的处理函数。 但
阅读全文
posted @
2018-08-09 21:37
紅葉
阅读(1229)
推荐(0) 编辑
事件对象属性
摘要:jQuery在遵循W3C规范的情况下,对事件对象的常用属性进行了封装,使得事件处理在各大浏览器下都可以正常的运行而不需要进行浏览器类型判断。在jQuery中,有如下常用的事件对象属性。 event.type 该方法的作用是可以获取事件的类型。 event.preventDefaule() 该方法的作
阅读全文
posted @
2018-08-08 21:10
紅葉
阅读(1207)
推荐(0) 编辑
DOM节点遍历
摘要:在jQuery中,遍历节点的方法也有很多,接下来我们通过下面的dom结构依次操作这些方法的异同。 children() 该方法用于获取匹配元素的子元素集合,需要注意的是,该方法只考虑子元素而不考虑其他后代元素。 next() next()方法用于取得匹配元素后面紧邻的同辈元素。 <script> v
阅读全文
posted @
2018-08-05 13:16
紅葉
阅读(1981)
推荐(0) 编辑
CSS-DOM操作
摘要:所谓CSS-DOM操作就是读取和设置style对象的各种属性,style属性很强大,但是美中不足的是无法通过它来提取到通过外部CSS设置的样式信息,然而在家jQuery中,这些就可以通过css()方法实现了。 和之前一样,在开始前,我们先在html中写出接下来操作要用到的DOM结构树: css()
阅读全文
posted @
2018-08-05 12:32
紅葉
阅读(2333)
推荐(1) 编辑
DOM操作之获取HTML、文本和值
摘要:在前面的知识中,我们有提到一个text()方法用来获取文本,其实,在jQuery中,获取HTML和文本的方法有很多,下面依次演示这些方法。 在开始操作前,我们先在html中添加如下代码,后期所有的操作都在此基础上进行。 html() 在JavaScript中,可以通过innerHTML方法获取元素包
阅读全文
posted @
2018-08-03 21:10
紅葉
阅读(17317)
推荐(0) 编辑
DOM操作之属性和样式操作
摘要:在DOM操作,除了前面的节点操作以外,常常被用到的操作还有属性操作和节点操作,下面,主要来总结一下jQuery中的属性操作方法和样式操作方法。 在开始操作前,我们需要先在html中添加如下代码,后面所有的操作都是基于该DOM结构进行的。 <!DOCTYPE html> <html lang="en"
阅读全文
posted @
2018-08-02 21:55
紅葉
阅读(1978)
推荐(0) 编辑
DOM节点的增删改查
摘要:在开始展开DOM操作前,首先需要构建一棵DOM树。 接下来,对DOM的增删改查操作都将围绕这棵DOM树展开。 1、查找节点 1.1查找元素节点 在获取元素节点内容的时候,text()方法只对文本其作用,该方法获得节点包含内容时,会把html标签给删除,只保留文本内容html()方法对"文本"和"ht
阅读全文
posted @
2018-07-30 21:30
紅葉
阅读(3390)
推荐(1) 编辑
其他选择器
摘要:除了前面详细介绍几种选择器以外,在jQuery中还有以下几种选择器也经常被用到。 1、可见性过滤选择器 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。 需要注意的是,元素被隐藏包括4种情况:1、display:none;2、表单元素的type='hidden';3、宽度和高度均为0;
阅读全文
posted @
2018-07-30 20:49
紅葉
阅读(272)
推荐(0) 编辑
属性过滤选择器
摘要:属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素,常见的属性过滤选择器如下表: 同前面一样,在开始操作之前,先在html中写下如下基础代码,后面所有的过滤操作均在此基础之上。 1、attribute 选取拥有某属性的元素 2、attribute = value 选取属性的值为value的元素
阅读全文
posted @
2018-07-30 19:49
紅葉
阅读(285)
推荐(0) 编辑
内容过滤选择器
摘要:内容过滤选择器的过滤规则主要体现在它所包含的子元素或文本内容上。具体包含以下几种(下面的内容过滤选择器获得的都是元素集合)。 同之前一样,在操作之前,先在html中下如下代码,后期所有的操作都在基础之上。 1、:contains(text) 主要用来选取包含文本内容为“text”的元素。 2、:em
阅读全文
posted @
2018-07-28 21:33
紅葉
阅读(553)
推荐(0) 编辑
基本过滤选择器
摘要:过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素,过滤规则集与CSS中的伪类选择器语法相同,都是以一个冒号开头。按照不同的过滤规则,过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤,接下来主要看一下基本过滤选择器。 基本过滤选择器主要有以下几种: :
阅读全文
posted @
2018-07-28 21:10
紅葉
阅读(1837)
推荐(0) 编辑
层次选择器
摘要:如果想要通过DOM元素之间的层次关系来获取特点的元素,如后代元素、子元素、相邻元素和同辈元素等,那个层次选择器是一个非常好的选择。 在介绍层次选择器之前,我们先在html中写下如下代码,后面所有的操作均在此基础之上。 1、派生选择器 用于选择父级下所有的派生子级 $(function(){ $("d
阅读全文
posted @
2018-07-28 16:31
紅葉
阅读(1926)
推荐(0) 编辑
基本选择器
摘要:基本选择器是jQuery中最常见的选择器,也是最简单的选择器,它是通过元素id,calss和标签名等来查找DOM元素,常见基本选择器分别有: #id:根据给定的id匹配一个元素(单个元素) .class:根据给定的类名匹配元素(元素集合) element:根据给定的元素名匹配元素(元素集合) *:匹
阅读全文
posted @
2018-07-28 15:40
紅葉
阅读(204)
推荐(0) 编辑