美文网首页
(17.04.24)jquery、原生和jq的区别、选择器(jq

(17.04.24)jquery、原生和jq的区别、选择器(jq

作者: 张不困_ | 来源:发表于2017-11-04 22:20 被阅读0次

    jquery:库,框架
        js,别人封装成的js

    官网:http://jquery.com/

    1.7

    jq 1.X 兼容ie6
    jq 2.x 兼容ie9+

    怎么来选择库:

        基于你公司定位!

    稳定版本!

    准备:
        库:
        帮助手册:


    原生:

        window.onload=function(){}
    
        doucment.getElementById('box')
    

    jq:

        $(function(){
            
        })
    
        $('#box')
    
        hide()---display:none;
        show()---display:block;
    
        $('#box').addClass('active');添个加一个class
    
        $('#box').removeClass('active');删除class
    
        $('#btn').hover(function(){
            $('#box').show();---鼠标移入
        },function(){
            $('#box').hide();---鼠标移出    
        });
    
    
        $('#btn').toggle(function(){---点击显示隐藏!
            $('#box').show();
        },function(){
            $('#box').hide();   
        });
    
    
        $(function(){-----上滑下滑!
            $('#btn').hover(function(){
                $('#box').slideDown();
            },function(){
                $('#box').slideUp();    
            });
        })
    
        $(function(){----淡入淡出!
            $('#btn').hover(function(){
                $('#box').fadeIn();
            },function(){
                $('#box').fadeOut();    
            });
        })
    

    结论:
        原生js:只用系统函数,自己写!

        jq:别人写好的函数!


    回调函数:
    前一个函数执行完毕以后,再开始执行的这个函数!


    jq选择器:

    $('#div1')  获取一个元素!
    
    $('.red') 获取一组class!
    
    $('#ul1 .red') 获取#ul1下面的一组class(red)--具有优先级!
    
    $('li') 标签来获取一组
    

    伪类选择器:

        $('li:first')  第一个li
    
        $('li:last')  最后一个li
        $('li:eq(3)') 第某一个li
    
        $('li:odd')  奇数
        $('li:even')  奇数
    

    特殊:

    $('div:has(span)') ---根据标签里面包的span标签来获取这个标签div
    
    $('div:contains(智)')---根据标签里面的内容来获取这个div!
    

    属性选择器:

    $('ul li input[type=text]')---通过input属性来获取一组input
    

    标签的内容:
        原生:
            普通:innerHTML
            表单:value

        jq:
            普通:html();
            表单:val();

    相关文章

      网友评论

          本文标题:(17.04.24)jquery、原生和jq的区别、选择器(jq

          本文链接:https://www.haomeiwen.com/subject/tzvqmxtx.html