美文网首页
jquery学习笔记(一)

jquery学习笔记(一)

作者: 海深不蓝_ | 来源:发表于2019-12-23 21:46 被阅读0次

    选择器

    元素选择器

    jQuery元素选择器基于元素名选取元素。
    选取页面中所有<p>元素:

    $(“p”)
    

    #id选择器

    jQuery #id选择器通过HTML元素的ID属性选取指定的元素。

    $(“#test”)
    

    .class选择器

    jQuery类选择器可以通过指定的class查找元素。

    $(“.test”)
    

    CSS选择器

    语法 描述
    $(“*”) 选取所有元素
    $(this) 选取当前html元素
    $(“p.intro”) 选取class为intro的<p>元素
    $(“ul li:first-child”) 选取每个<ul>元素的第一个<li>元素
    $(“ul li:first”) 选取第一个<ul>元素的第一个<li>元素
    $(“[href]”) 选取带有href属性的元素
    $(“a[target=‘_blank’]”) 选取所有target属性值为”_blank”的<a>元素
    $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 在线实例
    $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
    $("tr:even") 选取偶数位置的 <tr> 元素
    $("tr:odd") 选取奇数位置的 <tr> 元素

    jQuery事件

    jQuery是为事件处理特别设计的。

    事件

    鼠标事件 键盘事件 表单事件 文档/窗口事件
    click keypress submit load
    dblclick keydown change resize
    mouseenter keyup focus scroll
    mouseleave blur unload

    jQuery事件方法语法

    $(“...”).event(function(){
        ....
    });
    

    比较eypress、keydown与keyup

    • keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
    • keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
    • keyup:用户松开某一个按键时触发,与keydown相对,返回键盘代码.

    jQuery效果

    隐藏和显示

    在jQuery中可以使用hide()和show()方法来隐藏和显示HTML元素,以及使用toggle()方法能够切换hide()和show()方法。

    语法:

    $(selector).hide(speed,callback);                
    $(selector).show(speed,callback);
    

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

    jQuery toggle()

    通过jQuery,可以使用toggle()方法来切换hide()和show()方法。
    语法:

    $(selector).toggle(speed,callback);
    

    可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
    可选的 callback 参数,具有以下三点说明:

    1. $(selector)选中的元素的个数为n个,则callback函数会执行n次
    2. callback函数名后加括号,会立刻执行函数体,而不是等到显示/隐藏完成后才执行
    3. callback既可以是函数名,也可以是匿名函数

    淡入淡出

    可以通过fadeIn(),fadeOut(),fadeToggle()以及fadeTo()
    jQuery fadeIn() 方法

    jQuery fadeIn() 用于淡入已隐藏的元素。
    语法:

    $(selector).fadeIn(speed,callback);
    

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。.
    可选的 callback 参数是 fading 完成后所执行的函数名称。


    jQuery fadeOut()方法

    jQuery fadeOut() 方法用于淡出可见元素。
    语法:

    $(selector).fadeOut(speed,callback);
    

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是 fading 完成后所执行的函数名称。


    jQuery fadeToggle() 方法

    jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
    如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
    如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
    语法:

    $(selector).fadeToggle(speed,callback);
    

    可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
    可选的 callback 参数是 fading 完成后所执行的函数名称。


    jQuery fadeTo() 方法

    jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
    语法:

    $(selector).fadeTo(speed,opacity,callback);
    

    必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

    fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

    可选的 callback 参数是该函数完成后所执行的函数名称。

    相关文章

      网友评论

          本文标题:jquery学习笔记(一)

          本文链接:https://www.haomeiwen.com/subject/uwvtoctx.html