• JavaScript笔记


    1.知识点:
    JQuery 选择器
    JQuery 事件
    JQuery 效果
    JQuery 属性操作
    JQuery 文档操作
    JQuery CSS操作----------
    **************************************************************************************
    jQuery选择器:
    1.实现内容的隐藏或者显示:。css('display','none')
    2.变换图片:。attr('src','');
    3.单击标题后内容可以伸缩:
    检测当前内容的显示或者隐藏状态:。is(’:visible‘)。该值返回一个布尔值。
    4.获取元素内容的函数:。text();
    5.将元素隐藏的函数:。hide();
    6.增加样式:。addClass(选择器);~~~~~~该选择器在样式中定义
     
    **********************************************************************
    jQuery操作DOM
    ~~~~~~~~~~~~~~~~~~~~~~~name为元素属性的名称,用时用单引号括起来。
    1.Document:文档
    2.访问元素:元素的属性、内容、值、css的操作。
        a。属性操作:获取、设置、操作
            获取:attr(’属性名‘);
            设置元素的属性:attr(属性名,属性值);或者attr({属性名:属性值,。。。。})或则attr(属性名,function(index))
            删除元素的属性;removeAttr(属性名);
        b。内容操作:获取、设置
             html(【val】):获取和设置元素的html内容
              text(【val】):获取和设置元素的文本内容
     
         c。值操作:获取和操作
                获取元素的值:val();
                设置元素的值:val(val);
     
         d。样式操作:
                直接设置样式:css(样式名称,样式值);
                增加css类别:addClass(定义的类别class1,class2。。。。。);
                类别切换:toggleClass(类别名称)~~~~当元素中含有该类别是,删除该类别,否则增加该类别。
                删除类别:removeClass(类别名称class1, class2.。。。。)~~~若无参数,则删除所有类别。
     
    3、创建节点元素
            ·    $('<p>sd</p>')即$(html);~~~~~~~~只完成DOM元素的创建,出入到页面中还需要通过元素节点                                                              
                                                                                 的插入或者追加操作。
    4.插入节点
                 内部插入节点:append(content)、append(function(index,html))、                            
                                                    appendTo(content);
                                            prepared(content)、prepared(function(index,html))、                            
                                                    prepared(content);
                外部插入节点:
                                    after(content)、after(function)
                                    before(content)、before(function)
                                    insertAfter(content)、insetBefore(content);
     
    5.复制节点:~~~~~~~~~~~~~将某个元素节点复制到另外一个节点后。
                复制元素本身,不具有任何元素行为:clone()
                 复制元素时将元素的行为也进行复制:clone(true);
     
    6.替换节点:
                replaceWith(content):将所有选择的元素替换成html或者dom元素,。参数为被选择元素替换的                   
                                            内容。
                 replaceAll(selector):将所有选择的元素替换成指定selector的元素,参数为需要被替换的元素。
     
    7.包裹节点;
                wrap(html)、wrap(element)、wrap(function)
                 unwrap();
                  wrapAll(html)、wrapAll(element)
              wrapInner(html)、wrapInner(element)、wrapInner(function)
                eg:包裹所有的段落标记加粗:$('p').wrap('<b></b>')
                        包裹段落中的span为斜体:$('span').wrapInner(<i></i>')
     
    8.遍历元素
                each(callback)~~~~~参数是一个function函数,该函数接受一个参数index。同时还可实现元素属
                                              ~~~~~~性的获取和设置。
                                eg:。each(function(index){});
     
    9.删除元素
                remove()
               empty();
    案例 :删除数据和图片预览
                隔行变色:$('table tr:nth-child(odd)').css('background-color','#eee')
                小图片鼠标移动事件:初始化图片位置-〉设置提示图片的src属性-〉   设置提示图片的位置-〉      显示图片:$('#imgTip').show(3000)
                小图片鼠标移出事件;.mouseout(function(){$('img').hide()});
     
     
    ******************************************************************************
    jQuery中的事件
    1.事件机制
                a.页面加载时,执行load事件。
                b。事件触发后,分为两个阶段:捕获(capture)、冒泡(bubbing)。
                        大多数浏览器不支持捕获。
                        冒泡:时间执行中的顺序。
                C.阻止冒泡过程:event.stopPropagation();
    2.页面载入事件
                $(function(){
                .........
                });
                或者
                $(document).ready(function(){
                ..........
                });
                或者将$换成jQuery。
     
    3.绑定事件
                三种方法:a。
                                  b。bind(type,【data】,function(){});~~~~~~为每个选择元素的事件绑定处理函数 
                                  c。映射方式绑定不同的事件
                  
                A.为一个选择器添加多个动作:就是讲两个动作合在一起
                        eg:$('a').bind({
                                        click:function(){}, 
                                        mouseover:function(){}
                                })
    4.切换事件
                hover(over out):使元素在鼠标悬停与鼠标移出的事件中进行切换。解释:当鼠标移动到所选的元素上面时,执行第一个函数,当鼠标移出这个元素时,执行第二个函数。
                toggle(函数集合):每次单击后依次调用函数。
     
    5.移除事件
                  unbind(【事件类型】,【事件的处理函数】)。如无参,移除所有的绑定事件。
    ////可绑定不同的事件,包括自定义事件
     
    6.其他事件
                   one(事件类型,【data】,事件处理函数):为所选的元素绑定一个仅触发依次的事件。
                   trigger(事件类型,【data】):在选择的元素上触发指定类型的事件。
     
    7.表单应用
                    a.文本框中的事件应用:eg:邮箱验证输入
                    b.下拉列表框的事件应用
     
    8.列表应用
    9.网页选项卡的应用:门户网站
     10.事件:
            下拉列表框改变事件:change(function(){})
     
    **************************************************************************************
    jQuery的动画与特效(基本,滑动,淡入淡出,自定义,设置)
     
    1.显示和隐藏(基本)
     
                show()和hide()
                动画效果的显示和隐藏:
                            a。show(speed,[callback])
                                                speed为执行动画时的速度。有三个默认字符值:slow=0.6秒。normal=0.4秒,                     fast=0.2秒。还可以直接写入数值,单位是毫秒。
                            b。hide(speed,[callback])
                            c。检测当前元素的显示状态,在根据该状态进行元素时隐藏还是显示。。
                                (1)。无参调用格式
                                                 toggle()
                                   (2)。逻辑参数调用格式
                                                toggle(true或则false)。true显示元素,false隐藏元素
                                  (3)。动画效果调用模式
                                                toggle(speed ,[callback])等价于show(speed,[callback])
     
    2.滑动
                效果像拉窗帘。
                 改变元素高度 。
               a。 slideDown(speed,[callback])
                                以动画效果将所选择元素的高度向下增大,使其呈现一种“滑动效果,”而元素的其他属性没有发生变化。
                                speed:动画显示的速度。
                                 callback:动画显示完成后,执行的回调函数。
             b。slideUp(speed,[callback])
                                以动画的效果将选择的元素的高度 向上减少,同样也仅仅是改变其高度属性。参数与上一个一样。
             c。slideToggle(speed,[callback])
                                以动画的效果切换选择元素的高度,即:如果高,则减少。如果低,则增大。
     
    3.淡入淡出
                  通过元素渐渐改变背景色的动画效果显示或者隐藏元素。
                   改变元素透明度,不改变其他属性。
                a。fadeIn(speed,[callback])淡入。透明度从1.0到0.0淡入
                b。fadeOut(Speed,[callback])淡出。透明度从0.0到1.0淡出
                c。fadeTo(speed,opacity,[callback])将透明度指定到某一个值。
     
    4.自定义动画
            a。简单的动画
                animate(param,    [duration],    [easing],     [callback])
                                    param:制作动画效果的属性和值得集合。
                                    duration:三种默认的速度字符:slow、normal、fast或者自定的数字
                                    easing:动画插件的使用,用于 控制动画的显示效果,通常有linclear和swing字符值。
                                    callback
               d。动画停止和 延时
                    stop():停止某个动画的执行
                    delay():延时某个动画的执行。
     
     
     
    *************************************************************************************
    打开页面
    window.open(url):新的窗口打开链接,跳转后无后退功能
    window.location=url:跳转后有后退功能
    window.location.href;
    window.location.replace(url):跳转后无后退功能
     
     

    window.location.reload()刷新当前页面.

    parent.location.reload()刷新父亲对象(用于框架)

    opener.location.reload()刷新父窗口对象(用于单开窗口)

    top.location.reload()刷新最顶端对象(用于多开窗口)

    都是重定向 

     

    **********************************************************************************

    jQuery事件之鼠标事件

    鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的。
       (1):click事件:click事件于用户在元素敲击鼠标左键,并在相同元素上松开左键时触发。
            $('p').click(function(){
                    alert('click function is running !');
                  });
        (2):dbclick事件:dbclick事件在用户完成迅速连续的两次点击之后触发,双击的速度取决于操作系统的设置。一般双击事件在页面中不经常使用。
            $('p').dbclick(function(){
                    alert('dbclick function is running !');
                  });
        (3):mousedown事件:mousedown事件在用户敲击鼠标键时触发,跟keydown事件不一样,该事件仅在按下鼠标时触发。
            $('p').mousedown(function(){
                    alert('mousedown function is running !');
                  });
        (4):mouseup事件:mouseup事件在用户松开鼠标时触发,如果在与按下鼠标的元素相同元素上松开,那么click事件也会触发。
            $('p').mouseup(function(){
                    alert('mouseup function is running !');
                  }).click(function(){
                     alert('click function is running too !');
                     });
        (5):mouseover事件:mouseover事件于用户把鼠标从一个元素移动到另外一个元素上时触发,如果需要知道来自那个元素可以使用,relatedTagrget属性。
        (6):mouseout事件:mouseout事件于用户把鼠标移出一个元素时触发,这包括从父元素移动到子元素上,或者使用键盘跳到元素上。
       (5)和(6)这两个事件一般不常用,很难实现与用户的交互,也就是说不易捕获用户事件。
        (7):mouseenter事件:mouseenter事件是在用户光标进入元素上时触发。
             $('p').mouseenter(function(){
                    alert('mouseenter function is running !');
                  });
        (8):mouseleaver事件:mouseleaver事件是在用户的光标离开元素时触发。
               $('p').mouseleaver(function(){
                    alert('mouseleaver function is running !');
                 });
         (7)和(8)这两个事件一般连起来使用,在jQuery中可以使用hover这个函数来代替这两个函数。
           $('p').hover(function(){
                           alert('mouseenter function is running !');
                          },function(){
                                  alert('mouseleaver function is running !');
                             });

    *************************************************************************************
    deferred:延缓。
  • 相关阅读:
    RabbitMq(四)远程过程调用RPC
    RabbitMq(三)交换机类型
    RabbitMq(二)工作队列
    java基础知识01--JAVA准备
    匿名子类
    网络之Socket详解
    网络之Socket、TCP/IP、Http关系分析
    Eclipse搭建springboot项目(九)常用Starter和整合模板引擎thymeleaf
    Vue学习——Router传参问题
    sql函数——find_in_set()
  • 原文地址:https://www.cnblogs.com/123qw/p/3751214.html
Copyright © 2020-2023  润新知