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';

* */

 

转载于:https://www.cnblogs.com/shi-qi/articles/9008457.html