Java面试复习（三）

五、JQuery

1.语法：
    $(选择器).方法();
    $("#id").click(function(){
        方法体
    });

    $("#id").addClass(类样式);添加样式
    $("#id").removeClass(类样式)：移出样式
    $("#id").css("属性","属性值");单个属性操作
    $("#id").css("属性":"值","属性":"值");多个属性操作
    $("#id").show();显示元素
    $("#id").hide();隐藏元素

2.选择器
    基本选择器 $("#id"),$("div"),$(".class"),$("#name,#pasword"),$("*");

    层次选择器 $("#id span"),$("#id>span"),$("#id+span"),$("#id~span"),$("#id").next();$("#id").nextAll();

    属性选择器 
    $("#news a[href]"):选取#news中所有a标签含有href属性的元素
    $("#news a[href='hot']"):选取#news中所有a标签href='hot'的属性元素
    .....!='hot'):选取#news中所有a标签href！='hot'的属性元素
    .....^='hot'):选取#news中所有a标签href以hot开头的属性元素
    .....$='hot'):选取#news中所有a标签href值以hot结尾的属性元素
    .....*='hot'):选取#news中所有a标签href值包含hot的属性元素

    基本过滤选择器
    $("ul:first"):选取所有ul中的第一个
    $("ul:last"):选取所有ul中的最后一个
    $("ul:not(#id)"):选取所有ul中id不是id的所有元素
    $("ul:even"):选取所有ul中的偶数元素，从0开始
    $("ul:odd"):选取所有ul中的奇数元素，从0开始
    $("ul:eq(index)"):选取所有ul中第index-1的元素
    $("ul:gt(index)"):选取所有ul中大于index-1的元素
    $("ul:lt(index)"):选取所有ul中小于index-1的元素
    $("ul:header"):选取所有ul中所有header元素
    $("ul:focus"):选取所有ul中获取焦点的元素
    $("ul:anmimated"):选取所有ul中所有动画元素

    可见性过滤选择器
    $("ul:visible")选取所有ul中所有可见元素
    $("ul:hidden")选取所有ul中所有可见元素

3.JQuery事件

    鼠标事件
    click():单击事件
    dblclick():双击事件
    mouseover():鼠标移过事件
    mouseout():鼠标移出事件
    mouseenter():鼠标进入
    mouseleave():鼠标离开

    键盘事件
    keydown():按下按键触发
    keyup():释放按键触发
    keypress():产生可打印的字符时
    resize():浏览器事件

    绑定事件
    bind(事件类型,[可选，携带数据],处理函数);
    绑定多个事件$("#id").bind({mouseover:function(){

    },mouseout:function(){

    }
    }):
    unbind(事件类型,处理函数);

    焦点事件
    facus();处在焦点
    Blur():失去焦点

    复合事件
    hover():鼠标移入移出事件
    $("#id").hover(function(){
        事件1
    }，function(){
        事件2
    })；});
    Toggle():隐藏和显示切换
    toggleClass(className):加载样式和移出样式
    Show([速度],[需要执行的函数]):控制元素显示
    Hide([速度],[需要执行的函数]):控制元素的隐藏
    fadeIn([速度],[函数]):控制元素淡入
    fadeOut()…
    slideUp([速度],[函数]):从下到上至隐藏
    slideDown([速度],[函数]):从上到下至展开

4.内容操作

    HTML代码操作
    html([content]):动态增加内容，[]内可选，选择后为增加content内容，不选为获取内容，相当于JS中的innerHTML
    text([content]):动态增加内容，[]内可选，选择后为增加content内容，不选为获取内容，与html()区别在于是否翻译标签，text不翻译，标签直接展示
    val([value]):无参数为获取，有参数为将新内容覆盖旧内容

5.节点操作

    查找结点：前面的各种选择器

    创建节点
    使用$(html)创建
    var $newNode=$("<li id='name' >我是章贵敏</li>") ,有属性则需要打单引号；

    插入节点
    $("#id").append(B);将B内容追加到#id中
    $("#id").appendTo(B);将#id内容追加到B中
    $("#id").prepend(B);将B内容追加到#id内最前
    $("#id").prependTo(B);将#id内容追加到B内最前

    $("#id").after(B):并列，B插入到#id的后面
    $("#id").insertAfter(B):并列，#id插入到B的后面
    $("#id").befor(B):前面
    $("#id").insertBefor(B):颠倒

    删除节点
    remove()
    detach()
    empty():情况那个节点内容

    替换节点
    replaceWith()
    replaceAll():两个用法一致，和append（），appengTo（）一样，只是顺序颠倒

    复制
    Clone([布尔值]);复制节点，true时事件一同复制

6.属性操作

    获取属性
    attr([属性名]):获取属性值
    attr({[属性名：值],[属性名：值],[属性名：值]…..})：设置多个属性值

    删除属性
    removeAttr(属性名):删除属性

7.节点遍历

    遍历子元素
    children([需要过滤的表达式])

    遍历同辈元素
    next():获取后面相邻同辈元素
    prev()：获取前面相邻同辈元素
    siblings()：获取所有其它同辈元素

    遍历前辈元素
    parent():获取当前匹配元素的父级元素
    parents():获取当前匹配元素的祖先元素

8.表单校验

    表单选择器
    :input
    :text
    :password
    ….
    表单属性过滤器
    ：enabled 匹配可用元素
    ：disabled 匹配不可用元素
    ：checked 匹配被选择元素
    ：selected 匹配所有select中的option元素

    表单验证事件和方法
    事件:
    onblur
    Oofocus
    方法：
    blur()
    focus()
    select()