JQ 常见操作(一)

jquery 是封装好的 javascrapy 代码，每次使用都要引入使用。

jq 是前端神器，掌握好了jq 就可以快速的操作元素，大大的简化了代码与时间！

/*
//JQ 是先于css 执行的，所以拿不到 css 的值,但是可以拿到 html 的属性值！
一 找到元素的两张种方式！
    1, 直接获取！
       $(\'div\')  通过属性
       $(\'.box\')  通过类名
       $(\'#bo\')   通过id

    2, 间接获取！
       $(\'.box\').next()   类名为 box 的下一个元素
       $(\'.box\').prev()   类名为 box 的上一个元素
       $(\'a\').parent().siblings().children()    父亲的兄弟的孩子节点

二 操作属性！
    1,  animate动画效果   先上后下，每个都是两秒之内执行完毕
         $(\'input\').click(function () {
               $(\'div\').animate({\'height\':\'500px\'},2000,linear,function(){
                        alert(\'这是匿名函数\')
               })
           })
        参数一：要改变的样式属性值，写成字典的形式
        参数二：动画持续的时间，单位为毫秒，一般不写单位
        参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
        参数四：动画回调函数，动画完成后执行的匿名函数

    2,常用效果！
        $(\'img\').hide()     瞬间隐藏
        $(\'img\').show();    瞬间显示
        $(\'img\').stop().fadeIn(1000)   淡入 设置stop是为了杜绝排队机制就像定时器一样！
        fadeTo(1000, 0.3)  表示可以设置阴影的淡入，淡出。
        $(\'img\').stop().fadeOut(1000)   淡出
        $(\'img\').stop().slideUp(1000)      向上隐藏，但是必须设置宽和高
        $(\'img\').stop().slideDown(1000)    向下隐藏

        $(\'img\').toggle() 切换瞬间隐藏与瞬间显示
        $(\'img\').stop().slideToggle()   切换淡入与淡出

    3,对标签，内容进行操作
        $(\'h1\').html(\'更改后\')  直接设置标签的内容！
        $(\'a\').prop({\'href\':\'http://www.baidu.com\'})   对标签属性操作

    4,循环操作   操作的不是父标签
        $(\'a\').each(function () {
            $(this).html(\'这是第一个\'+$(this).index())  .html()直接设置标签的内容！
        })

    5,鼠标的移入，移除效果: 两个函数效果，第一个是移入的操作，第二个是移除的操作！
        $(\'div\').hover(function () {
            alert("鼠标进入！")
        },function () {
            alert(\'鼠标进出！\')
        })

   5,焦点操作
        为属性设置焦点
        $(\'input\').focus(function () {
            $(this).addClass(\'input\')
        });
        为属性减去焦点
        $(\'input\').blur(function () {
        $(this).removeClass(\'input\')
        })

    6,submit 提交表单：  将验证放置 submit 之中就可以了！
        $(\'form\').submit(function () {
        if ($(\'input\').eq(0).val() == \'\' || $(\'input\').eq(1).val() == \'\') {
            alert(\'请完善信息！\')
        }
        })

     7,正则表达式！  使用正则去取匹配内容！
        var se = /^\d+\d$/;
        var str1 = \'1ewiuhf2\';

* */