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)
          w rapInner(html)、 w rapInner (element)、 w rapInner (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:延缓。

你可能感兴趣的:(JavaScript)