jquery 基础知识总结 -

wangchongbiao

浏览: 53410 次
性别:
来自: 河北、沧州

最近访客更多访客>>

孤叶翔云

jidizhanshi0

remaindertime

abc558899

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jquery 基础知识总结

博客分类：

JQuery

JQuery

JQuery拿取对象的方式

写道

$(‘#id’) ：通过元素的id
$(‘tagName’) : 通过元素的标签名
$(‘tagName tagName’) : 通过元素的标签名,eg: $(‘ul li’)
$(‘tagName#id): 通过元素的id和标签名
$(‘:checkbox’):拿取input的 type为checkbox’的所有元素:
   Eg: <input type="checkbox" name="appetizers" value="imperial"/>
$('span[price] input[type=text]') ：拿取下面的input元素
   <span price="3">
       <input type="text" name="imperial.quantity" disabled="disabled" value="1"/>
   </span>
$('div',$(this).parents('div:first'))：拿取该div的上（至少都是父节点）的第一个div节点
$('~ span:first',this)： locates the first sibling of this that’s a <span> element.

延迟加载js文件——$.getScript

例子：

  <html>  
<head>  
    <title>$.getScript Example</title>  
    <link rel="stylesheet" type="text/css" href="../common.css">  
    <script type="text/javascript"
            src="../scripts/jquery-1.2.1.js"></script>  
    <script type="text/javascript">  
      $(function(){  
        $('#loadButton').click(function(){  
          $.getScript(
             'new.stuff.js'//,function(){$('#inspectButton').click()}  
          );  
        });  
        $('#inspectButton').click(function(){  
          someFunction(someVariable);  
          test()  
        });  
      });  
    </script>  
</head>  

<body>  
    <button type="button" id="loadButton">Load</button>  
    <button type="button" id="inspectButton">Inspect</button>  
</body>  
</html>

jquery数组处理：

  <html>  
<head>  
    <title>Hi!</title>  
    <script type="text/javascript" src="../scripts/jquery-1.2.1.js">  
    </script>  
    <script type="text/javascript">  
      var $ = 'Hi!';  
      jQuery(function(){  
        alert('$ = '+ $);//这里的 $ 为 Hi!,把它变回jquery的符号:jQuery(function($){...}/这样就可以了  
        //alert(jQuery)
       });  

      jQuery(function($){  
        //------------遍历数组 .each的使用-------------  
        var anArray = ['one','two','three'];  
        $.each(anArray,function(n,value) {  
            //do something here  
            //alert(n+' '+value);  
        });  
        var anObject = {one:1, two:2, three:3};  
        $.each(anObject,function(name,value) {  
            //do something here  
            //alert(name+' '+value);  
        });  

        //-----------过滤数组 .grep的使用------------  
        var originalArray =[99,101,103];  
       
        var bigNumbers = $.grep(originalArray,'a>100');//第2种写法,还可以用正则表达式来过滤  
        $.each(bigNumbers,function(n,value) {  
            //do something here  
            //alert(n+' '+value);  
        });  

        //------------转换数组 .map的使用------------  
        var strings = ['1','2','3','4','S','K','6'];  
        var values = $.map(strings,function(value){  
            var result = new Number(value);  
            return isNaN(result) ? null : result;//如果result不是数字则返回null（返回null在这里相当于不返回）  
        });  
        $.each(values,function(n,value) {  
            //do something here  
            //alert(value);  
        });  

        var characters = $.map(  
            ['this','that','other thing'],  
        function(value){return value.split('');}//分离字符串用返回给characters  
        );  
        //alert(characters.length);  

        //------------.inArray(value,array)的使用------------返回value在array下标的位置，如果value不在array中则返回-1  
        var index = $.inArray(2,[1,2,3,4,5]);  
        //alert(index);  

        //------------makeArray(obj)的使用------------将类数组对象转换为数组对象。  
        var arr = jQuery.makeArray(document.getElementsByTagName_r("div"));  
        //arr.reverse(); // 使用数组翻转函数   
        $.each(arr,function(n,value) {  
            //do something here  
            //alert(n+' '+value);  
            //alert(value.html());  
        });  
        var arr2 =$.unique(document.getElementsByTagName_r("div")); //获得唯一的对象，看API,说得很模糊,http://docs.jquery.com/Utilities/jQuery.unique  
        alert();  
        $.each(arr2,function(n,value) {  
            //do something here  
            alert(n+' '+value);  
        });  
      });  
    </script>  
</head>  
<body>  
    <div>First</div><div>Second</div><div>Third</div><div>Fourth</div><div>Fourth</div>  
</body>  
</html>

分享到：