jQuery

作者: __method__ | 来源:发表于2020-04-20 16:42 被阅读0次

    jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。

    jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。

    jquery是一个函数库,一个js文件,页面用script标签引入这个js文件就可以使用。

    <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
    

    jquery加载

    将获取元素的语句写到页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。

    <script type="text/javascript">
    
    $(document).ready(function(){
    
         ......
    
    });
    
    </script>
    

    可以简写为:

    <script type="text/javascript">
    
    $(function(){
    
         ......
    
    });
    
    </script>
    

    jquery选择器
    jquery用法思想一
    选择某个网页元素,然后对它进行某种操作
    jquery选择器
    jquery选择器可以快速地选择元素,选择规则和css样式相同,使用length属性判断是否选择成功。

    $('#myId') //选择id为myId的网页元素
    $('.myClass') // 选择class为myClass的元素
    $('li') //选择所有的li元素
    $('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
    $('input[name=first]') // 选择name属性等于first的input元素
    

    对选择集进行过滤

    $('div').has('p'); // 选择包含p元素的div元素
    $('div').not('.myClass'); //选择class不等于myClass的div元素
    $('div').filter('.myClass'); //选择class等于myClass的div元素
    $('div').eq(5); //选择第6个div元素
    

    选择集转移

    $('div').prev(); //选择div元素前面紧挨的同辈元素
    $('div').prevAll(); //选择div元素之前所有的同辈元素
    $('div').next(); //选择div元素后面紧挨的同辈元素
    $('div').nextAll(); //选择div元素后面所有的同辈元素
    $('div').parent(); //选择div的父元素
    $('div').children(); //选择div的所有子元素
    $('div').siblings(); //选择div的同级元素
    $('div').find('.myClass'); //选择div内的class等于myClass的元素
    

    判断是否选择到了元素
    jquery有容错机制,即使没有找到元素,也不会出错,可以用length属性来判断是否找到了元素,length等于0,就是没选择到元素,length大于0,就是选择到了元素。

    var $div1 = $('#div1');
    var $div2 = $('#div2');
    alert($div1.length); // 弹出1
    alert($div2.length); // 弹出0
    ......
    <div id="div1">这是一个div</div>
    

    相关文章

      网友评论

        本文标题:jQuery

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