JQuery部分个人笔记

Posted 2021-04-08 Java开发程序猿

欢迎大家关注

一起学习,共同进步

JQuery部分单词    
    1.prototype :
        n.  原型，雏形，蓝本;
        变形 复数: prototypes
    2.jQuery
        是一个快速、简洁的javascript框架，
        是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
    3.DWR :（Direct Web Remoting）是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架，
        可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数，
        就像它就在浏览器里一样。
    4.prototype.js
        是由Sam Stephenson写的一个javascript类库。该框架的设计思路巧妙，而且兼容标准的类库，
        能够帮助开发人员轻松建立有交互性良好的web2.0特性富客户端页面。
    5.ExtJS
        可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
        因此，可以把ExtJS用在.Net、Java、php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，
        通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，
        都可算是一款不可多得的JavaScript客户端技术的精品。
    slide          slideUp();    --向上滑动        slideDown();    --向下滑动
        vi.  滑落; 下跌; 打滑; [棒球]滑垒;
        vt.  衰落（成）; 逐渐降低; 使悄悄转动; （使）快捷而悄声地移动;
        n.  幻灯片; 降低;
    hide          
        vt.  隐藏; 躲避，隐匿，躲藏; 遮蔽，覆盖;
        vi.  隐瞒; 遮住; 遮挡; 掩盖;
        n.  兽皮; <口>生命; <口>人的皮肤; （观看野生动物的）隐蔽处;
    fade           fadeOut();    --淡出        fadeIn();        --淡入
        vi.  褪去，失去光泽; 逐渐消逝; 凋谢，衰老;
        vt.  使褪色;
        adj.  乏味的，平淡的;
    animate          animate();    --自定义动画
        vt.  使有生气; 驱动; 使栩栩如生地动作; 赋予…以生命;
        adj.  有生命的; 活的; 有生气的; 生气勃勃的;
    toggle          toggle();        --单击切换函数
        n.  棒形纽扣; 套索扣; 转换键; 切换键;
        v.  切换;
【基本选择器】(*****)
    ?id选择器
    用法:$(“#id”)
    ?类选择器
    用法:$(“.类名”)
    ?元素选择器
    用法:$(“元素名称”)
    ?通配符选择器
    用法:$(“*”)
    ?并列选择器
    用法:$(“选择器,选择器,选择器”)
【层级选择器】：
?    后代选择器：使用空格    所有后代包含孙子及以下的元素
?    子元素选择器：使用>        第一层的元素（儿子）
?    下一个元素:使用+        下一个同辈元素
?    兄弟元素:使用~        后面所有的同辈元素
【基本过滤选择器】
        :first
        :not(selector)
        :even
        :odd
        :eq(index)
        :gt(index)
        :lang1.9+
        :last
        :lt(index) 匹配所有小于给定索引值的元素
        :header  匹配如 h1, h2, h3之类的标题元素
        :animated 匹配所有正在执行动画效果的元素
        :focus
        :root1.9+
        :target1.9+

【内容选择器】    
    内容
        :contains(text)
        :empty
        :has(selector)
        :parent
    
【属性选择器】    
    属性
        [attribute]
        [attribute=value]
        [attribute!=value]
        [attribute^=value]
        [attribute$=value]
        [attribute*=value]
        [attrSel1][attrSel2][attrSelN]

【子元素选择器】    
    子元素
        :first-child
        :first-of-type1.9+
        :last-child
        :last-of-type1.9+
        :nth-child
        :nth-last-child()1.9+
        :nth-last-of-type()1.9+
        :nth-of-type()1.9+
        :only-child
        :only-of-type1.9+

    
【表单选择器】    
    表单
        :input
        :text
        :password
        :radio
        :checkbox
        :submit
        :image
        :reset
        :button
        :file
        :hidden
    
【表单属性选择器】    
    表单对象属性
        :enabled
        :disabled
        :checked
        :selected
    
【JQuery中添加和移除样式】
    * 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
    * 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：
    * addClass();    添加样式
    * removeClass();    移除样式
    
【JQuery的DOM操作】
    * 常用的方法:
    * append();            ---在某个元素后添加内容.    
    * appendTO();        ---将某个元素添加到另一个元素后.
    * remove();            ---将某个元素移除.

【JQuery对属性的操作的方法】
    * attr();
        * 使用方法一：$(“”).attr(“src”);
        * 使用方法二：$(“”).attr(“src”,”test.jpg”);
        * 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
    * removeAttr();
    * prop();新版本的方法.
        * 使用方法一：$(“”).prop(“src”);
        * 使用方法二：$(“”).prop(“src”,”test.jpg”);
        * 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
    * removeProp();
    * addClass()
    * removeClass();

【JQuery的遍历】
    遍历的方式一：
        * $.each(objects,function(i,n){
        
        });
    遍历的方式二:
        * $(“”).each(function(i,n){

        });
【JQuery常用事件】
    事件
        blur([[data],fn])          当元素失去焦点时触发 blur 事件。
        change([[data],fn])      当元素的值发生改变时，会发生 change 事件。
        click([[data],fn])      单机
        dblclick([[data],fn])      双击
        error([[data],fn])      当元素遇到错误（没有正确载入）时，发生 error 事件。
        focus([[data],fn])       当元素获得焦点时，触发 focus 事件。
        focusin([data],fn)         当元素获得焦点时，触发 focusin 事件。
        focusout([data],fn)     当元素失去焦点时触发 focusout 事件。
                                  focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
        keydown([[data],fn])      当键盘或按钮被按下时，发生 keydown 事件。
        keypress([[data],fn])      当键盘或按钮被按下时，发生 keypress 事件。
        keyup([[data],fn])      当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
        mousedown([[data],fn])     当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
        mouseenter([[data],fn]) 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
                                  与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
                                  如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
        mouseleave([[data],fn]) 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
                                  与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
                                  如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
        mousemove([[data],fn])  当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
        mouseout([[data],fn])    当鼠标指针从元素上移开时，发生 mouseout 事件。
        mouseover([[data],fn])    当鼠标指针位于元素上方时，会发生 mouseover 事件。
        mouseup([[data],fn])    当在元素上放松鼠标按钮时，会发生 mouseup 事件。
        resize([[data],fn])     当调整浏览器窗口的大小时，发生 resize 事件。
        scroll([[data],fn])      (滚动条)当用户滚动指定的元素时，会发生 scroll 事件。
        select([[data],fn])      当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
        submit([[data],fn])      当提交表单时，会发生 submit 事件。
        unload([[data],fn])     在当用户离开页面时，会发生 unload 事件。
        
【JQ的事件切换】
    * toggle();        --单击事件的切换（适用于1.8之前的版本）
    * hover();        --鼠标悬停的切换()鼠标放上一个效果,离开有一个效果