jQuery
香柠檬YU
这个作者很懒,什么都没留下…
展开
-
使用jQuery查找元素的方法
在这里大概列出几种用于查找元素的方法。先给出文档的大概内容:欢迎到来Welcome欢迎到来Welcome欢迎到来Welcome欢迎到来Welcome1.利用find()的方法,根据当前集合及其后代的上下文创建一个新的元素包装器集。$(document).ready(function(){ alert($("div").find("p").length);原创 2016-11-28 17:08:00 · 679 阅读 · 0 评论 -
分页展示图片
下面的是关于较为简单的图片进行分页展示。无标题文档$(document).ready(function() { var $pic=$('.img a');var length=$pic.length;$pic.hide();var next=$pic.eq(0);next.show();var pagenumbers=$('');f原创 2017-03-08 13:34:03 · 1391 阅读 · 0 评论 -
验证整个表单
以下的代码是从书上打入进来的,里面设计一些最为常用表单的代码,可以学到更加详细具体的知识。虽然代码不难,但是对于规范格式等很有用。验证整个表单.submit{margin-left:125px;margin-top:10px;}.label{float:left;width:120px;}.infobox{width:120px;}.error{colo转载 2017-02-25 13:40:21 · 413 阅读 · 0 评论 -
垂直滚动图片
这个效果不美观,只要了解的是函数如何进行调用的。函数循环还可以调用animate,控制动画的时间就可以实现隔一段时间调用一次函数,而不一定一直使用setTimeout()函数。垂直滚动图片$(document).ready(function(){ var $wrapper=$("#scroller");/* 首先我们把ID为scroller的所有元素都存放原创 2017-03-04 16:35:19 · 563 阅读 · 0 评论 -
图片水平滚动,当鼠标悬停的时候暂停滚动
图片会水平移动,但是当图片在鼠标悬停的时候在任意一幅画的时候,暂停水平移动,当鼠标从图片上移动的时候再继续移动。无标题文档$(document).ready(function(){ var $wrapper=$("#scroller a img");/*这里我们获得的引用是单独图片的引用,而不是整个图片整体的引用,原创 2017-03-04 18:10:22 · 4224 阅读 · 0 评论 -
如何做成面包屑导航
怎么做面包屑导航,如何用jQuery来实现三角形转载 2017-02-25 18:59:52 · 778 阅读 · 0 评论 -
jQuery选择器
以下的都是参考菜鸟教程的jQuery的选择器。jQuery选择器选择器实例选取*$('*')表示选取所有的实例#id$('#name')id='name'的元素.class$('.name')class="name"的元素.class,.class$('.name1,.name2原创 2017-03-09 15:45:30 · 238 阅读 · 0 评论 -
展开和折叠项
这个是用列表来制作的简单的折叠效果。无标题文档.top{width:500px;margin:0 auto;}.plus{list-style-image:url(1.jpg);/*这些是列表前面的标识,这里设成了图片*/}.min{list-style-image:url(2.jpg);}.none{list-style-i原创 2017-03-09 17:35:40 · 386 阅读 · 0 评论 -
掌握jQuery插件开发
在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在转载 2017-03-31 21:46:05 · 280 阅读 · 0 评论 -
jQuery的each与map的区别
1、$.map(array,function)语法分析:为包装集中的每一个元素调用回调函数,并将返回值收集到jQuery对象的实例中,在回调函数中,this指向每次迭代中的当前DOM元素。2、$.each(array,function)语法分析:对数组array中的每一个元素,调用function函数处理,但没有返回值(因此不管在callback里面加不加r转载 2017-04-29 14:38:03 · 534 阅读 · 0 评论 -
什么?你还不会写jQuery插件
什么?你还不会写JQuery 插件前言 如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这转载 2017-05-04 21:02:34 · 382 阅读 · 0 评论 -
jQuery绑定事件的四种方式
jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码。下面我们来看下jQuery中绑定事件的方式都有哪些。 jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。在开始看他们之前转载 2017-05-05 21:31:30 · 323 阅读 · 0 评论 -
使用jQuery选择器的优势
使用jQuery选择器的优势 最近在慕课网上再回顾一下jQuery,发现其中有挺多的细节之前也没有留意到,如果我们使用jQuery选择器,或者使用的是DOM操作方法,其中jQuery选择器会有什么样的优势呢?我们肯定知道利用id,class,tag可以通过原生的方法获取到对应的节点,但是其中会有一些兼容性的问题。而jQuery的优势有很多,包括容易上手,利用更少的代码可以写原创 2017-06-07 09:21:32 · 3221 阅读 · 0 评论 -
JavaScript的this 与JQuery的$(this)
JavaScript的this 与JQuery的$(this) 首先,我们先来了解一下,javascript中的this,因为在JS中,每一个function都是一个对象,所以这里var temp=this指的是function当前的对象。this是JS中的一个关键字,指的是当前的上下文对象,简单来说其实就是方法/属性的所有者。它代表的是函数运行的时候自动生成一个内部对象,只能在原创 2017-06-07 14:34:08 · 718 阅读 · 0 评论 -
验证两个字段,如果为空显示错误
我们举较为简单的例子,如果表单上只有用户名与密码的时候,我们需要确认每个字段都不能留空白,如果其中任意一个被留空白,屏幕上都显示错误的消息。如果我们把焦点又放在显示错误的文本框内,错误的信息就会消失。$(document).ready(function(){$('.error').hide();$('.message').each(function(){$(th原创 2017-02-23 19:57:35 · 939 阅读 · 0 评论 -
一步选择或者取消所有的复选框
有些时候为了方便,需要check all选择所有复选框,或者取消所有的复选框,但是如果选项太多的话,又不想点击鼠标一个个实现,这样子我们就可以应用到下面的代码来实现以上的功能。$(document).ready(function(){$('#checkall').click(function(){$("input[type='checkbox']").attr('che原创 2017-02-23 17:15:59 · 706 阅读 · 0 评论 -
图片在浏览器窗口中来回滚动
这个主要是了解一些函数的用法,所以做出来的效果并不是很好看的。无标题文档$(document).ready(function() {scroll();});function scroll(){ $('img').animate({'left':'-160px'},'slow',function(){$(this).css('left',原创 2017-03-02 21:07:08 · 1122 阅读 · 0 评论 -
jQuery读取选择结果集合
我们为什么想要使用循环读取结果集合呢?一般来说,在选择集上执行任何的操作都将集合看成是一个整体,有些时候我们想单独地为每一个元素进行操作。此时我们就想到使用循环读取结果集合,当然你也可以不使用这个方法,看实际的需求以及哪种用法更加适合。而在这里我们会使用循环读取结果集合,它就相当于jQuery的for循环。假定我们希望建立某个DOM元素中所有链接的一个列表(可能是这个有很多用户提供内容的网原创 2016-11-29 20:03:15 · 2024 阅读 · 0 评论 -
jQuery原则
因为最近在学习一些关于jQuery的有关知识,所以想在这里做一些学习的笔记。jQuery原则jQuery的原则是用更少的代码做更多的事。jQuery先于浏览器吸收来自W3C的规范,但是它却不是W3C标准。W3C的标准分为3个方面:结构化标准语言(如XHTML和XML),表现标准语言(如CSS),行为标准(如W3C DOM)等,这些标准大部分由W3C起草和发布的,也有一些是其他标准组织制定的原创 2016-11-28 09:41:42 · 650 阅读 · 0 评论 -
$(document).ready()与window.onload的区别
jQuery提供了ready()方法,用来代替javascript核心的window.onload,事件通常与DOM的文档对象绑定。而ready()方法的参数是一个函数,后者包含在DOM可以遍历和操纵时执行的Javascript代码。但是只有在JavaScript必须嵌入到页面顶端的文档流并封装在元素里时才有必要。如果我们将所有的JavaScript文件包含和内联代码防止结束元素之前,就可以避免使原创 2016-11-28 13:47:10 · 810 阅读 · 0 评论 -
折叠式的菜单
关于折叠式的菜单,网上有挺多的源代码,但是我搜了一下,关于jQuery方面还有css方面上有些看不懂,所以干脆用其他我觉得较为简单的方式来创建折叠式的菜单,知识比较少,所以看不大懂。下面是我改动过的代码。折叠式的导航$(document).ready(function(){$('.link').click(function(){$(this).next().原创 2017-02-27 20:49:55 · 1368 阅读 · 0 评论 -
关于javascript延迟执行
一般来说,我们都是在HTML文档的head部分中引用了javascript文件。如果浏览器发现了javascript文件的话,就会开始执行该文件。但是样式无法应用于HTML元素,因为javascript文件在head部分中已经被引用了,但是HTML中的元素在body后才会出现,所以这个时候HTML元素还没有被加载。如果想要让javascript作用于HTML元素,我们需要延迟javascript代原创 2017-02-21 13:31:37 · 980 阅读 · 0 评论 -
chidlren(),each(),text()和parent()
这些是关于jQuery的一些方法这里我们先给出例子:ABC$(document).ready(function(){var $nodes=$('#top').children();alert('Number of nodes is '+$nodes.length);var txt="";$('#top').children().each(function()){原创 2017-02-21 14:51:29 · 491 阅读 · 0 评论 -
关于回调函数
百度对于回调函数是这样子说明的,回调函数是一个通过函数指针调用的函数。如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针调用它所指向的函数时,我们就说是回调函数。因此回调函数不是由一个函数所实现或者直接调用的,而是在特定的条件下发生时由另一方调用的,用于对该事件或者条件进行响应。在一般的编程语言中,传统函数是以参数形式输入数据,并且使用返回语句返回值。理论上,在函数结尾处有一个re原创 2017-02-21 20:48:06 · 385 阅读 · 0 评论 -
利用jQuery来对字符串数组和数值数组排序
1.首先我们对字符串数组进行排序,对字符串数组进行排序就比较简单,关键在于使用一个叫sort()的函数。接下来我们先举个例子:AB我们会将在.origin里面放置原始的字符串数组,在.end中放置排序后的字符串数组。$(document).ready(function(){var members=["John","Steve","Ben","Damon","Ian"];原创 2017-02-21 21:43:38 · 5548 阅读 · 0 评论 -
点击按钮一次之后禁用按钮
点击按钮一次之后禁用按钮这里我们可以用几种方法,首先第一种是用unbind()这个方法。先举个例子:$(document).ready(function(){ $("#b1").click(function(){ alert("ok1"); }); $("#b1").click(function(){ $("#b1").unbind(); }); $(原创 2017-02-22 13:16:29 · 11879 阅读 · 0 评论 -
查找鼠标按下时的屏幕坐标
有时候,我们想知道按下鼠标键,就显示在屏幕上的坐标位置。那我们应该如何用jQuery来实现呢?$(document).ready(function(){$('img').mousedown(function(event){$('p').text('Mouse is clicked at :'+event.screenX+','+enevt.screenY);});});原创 2017-02-22 13:40:45 · 616 阅读 · 0 评论 -
jQuery中toggleClass()与toggle()
1.toggleClass()如果我们在CSS类的应用与不应用之间进行切换,我们可以使用toggleClass()来实现。$(document).ready(function(){ $(".btn1").click(function(){ $("p").toggleClass('hover'); });});.hover{background-color:ye原创 2017-02-22 20:17:33 · 2685 阅读 · 0 评论 -
jQuery--animate()方法
一般来说,用animate()是用来执行CSS属性集的自定义动画的。该方法通过CSS样式将元素从一个状态改编为另一个状态。CSS属性值是逐渐改编的,这样子我们可iuk恶意创建动画效果了。只有数字值才可以创建动画(比如“margin:30px”).字符串是没有办法创建动画的。让图像从左到右滚动.$(document).ready(function(){$('img').click(func原创 2017-02-22 21:49:04 · 252 阅读 · 0 评论 -
确认必须字段不留空
如果我们有一个文本输入字段,请确保字段不留空白。如果用户没有在必须字段中输入数据,那么我们应该及时提醒用户,使用户填上相关的信息。首先我们建立一个表单。$(document).ready(function(){$('.s2').hide();$('.submit').click(function(event){var data=$('.i1').原创 2017-02-23 13:34:34 · 448 阅读 · 0 评论 -
Jquery--防止事件冒泡
防止事件冒泡首先我们要知道的前提是当任何的元素发生事件时,事件处理机制首先会检查该元素是否附加了事件方法(以及事件处理函数)。如果是,就执行(附加的事件方法的)事件处理函数的语句。在此之后,事件处理机制继续检查该元素的亲节点,看是否附加了事件方法,如果是,也会执行事件处理函数。继续检查其亲元素(即亲元素的亲元素),如此类推,换句话说,事件冒泡指的是被触发事件在DOM中向上传播直到DOM的根过程原创 2017-02-23 12:56:40 · 322 阅读 · 0 评论