唯一

Posted 2020-07-11 ☼柚子

有些东西不是什么人都能看得 ,有时候需要靠运气 你进来了却没看 你运气好 可你不知道珍惜 你没进来 那注定你看不成

下面来看看是什么东西 说是【唯一】 什么东西有些人才能看 有些人却看不了...

大家请看?【锋利的jQuery】 

为什么说是"锋利的"jQuery?

我的答案是  鬼知道啊,你自己不会看啊

为什么说是【唯一】?

我的答案是 因为我就写这一篇 不是唯一还唯二啊 下篇指不定写啥呢 这可不就是唯一嘛

相信大家看到这都很无语,因为我也很无语,[哈哈哈]

话说这里面有啥说的呢?下载就和我一起走进来瞧一瞧 看一看 会不会没关系 主要是你知道有个好东西在我这里面,没事就可以来翻翻,相信你就是下一个高级工程师

No.4 jQuery中的时间呢和动画

javascript和html之间的交互是通过用户额浏览器操作页面时引发的时间来处理的,当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.虽然利用传统的JavaScript事件能完成这些交互,但jQuery增加并扩展了基本的时间处理机制.jQuery不仅提供了更加优雅的事件处理语法,而且极大地增强了时间处理能力.

jQuery中的事件

由于$(document).ready()方法内注册的事件,只要DOM就绪就会而被执行,因此可能此时元素的关联文件未下载完. 如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发.jQuery代码如下:

$(window).load(){
        }    

等价于

window.onload function()
{}

事件绑定

在文档装在完成后,如果打算为元素绑定事件来完成某些操作,则可以使用bind()方法来对匹配元素进行特定事件的绑定,bind()方法的电泳格式为:

bind( type[.data].fn);
bind()方法有3个参数

第一个参数是事件类型,类型包括:

blur,fous,load,resize,scroll,unload,click,dblclick,

mousedown,mouseup,mouseover,mouseover,

mouseout,mouseenter,mouseleave,change,select,

subinit,keydown,keypress,keyup和error等,

当然也可以是自定义名称
第二个参数为可选参数,作为event.data属性值传递给事件对象的额外数据对象.

第三个参数则是用来绑定的处理函数.

注* 可以发现,jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了"on",例如鼠标单击事件在jQuery中对应的死click()方法,而在JavaScript总对应的是onclick(),当发现相同的选择器在你的代码里出现多次,请使用变量把他缓存起来.

改变绑定时间的类型

上面的例子中,给元素绑定的事件类型是click,当用户单击的时候会触发绑定的事件,然后执行事件的函数代码,现在吧事件类型换成mouseover和mouseout,即当光标换过的时候,就触发事件们需要进行一下几个步骤操作.

1.等待DOM装载完毕

2.找到"标题"所在的元素,绑定mouseover事件

3.找到"内存"元素,显示"内容".

4.找到"标题"所在的元素,绑定mouseout事件

5.找到"内容"元素,隐藏"内容"

根据分析的步骤,可以写出如下jQuery代码:

$(function(){
$("#pare1 h5.head").bind("mouseover",function(){
    $(this).next().show();
    }).bind("mouseout".function(){
       $(this).next().hide();
     })
})

代码运行后,当光标滑过"标题"链接后,相应的"内容"将被显示,当光标滑出"标题"链接后,相应的"内容"则被隐藏
简写绑定事件

像click,mouseout和mouseover这类事件,在程序中经常会使用到,jQuery为此雅提供了一套简写的方法,简写方法和bind()方法的使用类似,实现的效果也相同,唯一的区别是能够减少代码量.

代码如下:

$(function(){
   $ ("#pane1 h5.head").mouseover(function(){
       $(this).next().show();
     }).mouseout(function(){
    $(this).next().hide();
    })
})

合成事件
jQuery有两个合成事件---hover()方法和toggle()方法,类似前面讲过的ready()方法,hover()

和toggle()方法都属于jQuery自定义的方法

1.hover()方法

hover()方法的语法结构:hover(enter.leave);

hover()方法用于模拟光标悬停事件,当光标移动到元素上时,会触发指定的第2个函数(leave).

将上面的例子改写成使用hover()方法,jQuery代码如下:

$(function(){
    $("#pane1 h5.head").hover(function(){
    $(this).next().show();
    }.function(){
    $(this).next().hide();
    })
})    

代码运行代码运行后的效果与下面代码运行后的效果都一样的,当光标滑过"标题"链接时,相应的"内容"将被显示;当光标滑出"标题"链接后,相应的"内容"则被隐藏.

$(function(){
    $("#pane1 h5.head").mouseover(function(){
    $(this).next().show();
        }).mouseout(function(){
              $(this).next().hide();
      })
    })        

注*css中有伪类选择符,例如":hover",当用户光标悬停在元素上时,会改变元素的外观,在大多数符合规范的浏览器中,伪类选择器可以用于任何元素,然而在IE6浏览中,伪类选择器仅可用于超链接元素,对于其他元素,可以使用jQuery的hover()方法.

.

.

未完待续...