当前位置：首页 → 问答吧 → jquery笔记

jquery笔记

时间：2010-09-30

来源：互联网

分享我的jquery学习笔记

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.border { border:red solid 1px }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    //andSelf() 加入先前所选的加入当前元素中。
    $("#outDiv").find("div").andSelf().addClass("border");

    //end() 回到最近的一个"破坏性"操作之前。即，将匹配的元素列表变为前一次的状态。
    $('#showCon0').html($("#myP").find("span").end().attr('id'));

    //data(name) 返回元素上储存的相应名字的数据，可以用data(name, value)来设定。
    $('#saveData').data('myData', 'zhao');
    $('#showCon1').html($('#saveData').data('myData'));
    $('#saveData').removeData('myData');
    $('#showCon2').html($('#saveData').data('myData'));

    //index(subject) 搜索与参数表示的对象匹配的元素，并返回相应元素的索引值。
    //如果找到了匹配的元素，从0开始返回；如果没有找到匹配的元素，返回-1。
    $('#showCon3').html($('.div').index($('#specialDiv')));

    //replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
    $('<b>my b</b>').replaceAll($('.p'));

    //empty() 删除匹配的元素集合中所有的子节点。
    $('#emptyExample').empty();

    // remove([expr])
    // 从DOM中删除所有匹配的元素。
    // 这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。
    $('.removeExample').remove();
    $('.remove > div').remove('.r');

    //wrapAll(elem) 将所有匹配的元素用单个元素包裹起来。
    //这于 '.wrap()' 是不同的，'.wrap()'为每一个匹配的元素都包裹一次。
    //$('.inwrap').wrapAll($('<div id="wrap"></div>'));
    $('.inwrap').wrap($('<div class="wrap"></div>'));

    //$.map()
    var arr = [0, 1, 2];
    arr = $.map(arr, function(n) { return n + 2; });
    alert(arr);

    //jQuery.inArray(value,array) 确定第一个参数在数组中的位置(如果没有找到则返回 -1 )。
    var arr1 = [1, 'zhao', 'jin', 'tian'];
    $('#showCon4').html( $.inArray('zhao', arr1) );

    //jQuery.grep(array,callback,[invert]) 使用过滤函数过滤数组元素。
    // 此函数至少传递两个参数：待过滤数组和过滤函数。过滤函数必须返回 true 以保留元素或 false 以删除元素。
    var arr2 = $.grep([0, 1, 2], function(n,i) {
        return n > 0;
    });
    var arr3 = $.grep([0, 1, 2, 3, 4], function(n,i) {
        return n > 2;
    }, true); //true 代表排除
    alert(arr2);
    alert(arr3);

    //jQuery.param(obj) 将表单元素数组或者对象序列化。是.serialize()的核心方法。
    var params = { width:1680, height:1050 };
    var str = $.param(params);
    $("#showCon5").html(str);

    //not 删除与指定表达式匹配的元素。
    $('.not').not('p').addClass('border');

    //filter(expr)
    // 筛选出与指定表达式匹配的元素集合。
    // 这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
    $('.filter').filter('#hello, p').addClass('border');

    // prevAll([expr])查找当前元素之前所有的同辈元素。可以用表达式过滤。
    // $('.prevAll:last').prevAll().addClass('border');

    //slice(start,[end]) 选取一个匹配的子集。与原来的slice方法类似。
    $('.slice').slice(1, 3).addClass('border');

    //lt
    $('ul li:lt(3)').addClass('border');
});
</script>
</head>
<body>
<div id="outDiv">
    <div>0</div>

    <div>
        <div>1</div>
    </div>
</div>

<p id="myP"><span>Hello</span>,how are you?</p>

<div id="saveData"></div>

<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div" id="specialDiv"></div>
<div class="div"></div>

<p class="p">p0</p>
<p class="p">p1</p>
<p class="p">p2</p>
<p class="p">p3</p>

<p id="emptyExample">Hello, <span>Person</span> <a href="#">and person</a></p>

<p class="removeExample">0</p>
<p class="removeExample">1</p>
<p class="removeExample">2</p>

<div class="remove">
    <div class="r">1</div>

    <div class="r">2</div>
    <div>3</div>
</div>

<div class="inwrap"></div>
<div class="inwrap"></div>
<div class="inwrap"></div>

<div class="not"></div>
<p class="not"></p>
<div class="not"></div>

<div class="filter" id="hello"></div>
<p class="filter"></p>
<div class="filter"></div>

<div class="prevAll"></div>
<div class="prevAll"></div>
<div class="prevAll"></div>

<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>
<div class="slice"></div>

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<div id="showCon0"></div>
<div id="showCon1"></div>
<div id="showCon2"></div>
<div id="showCon3"></div>
<div id="showCon4"></div>
<div id="showCon5"></div>
</body>
</html>

作者: zhao 发布时间: 2010-09-30

顶个鸟用

作者: masong 发布时间: 2010-09-30

jquery笔记

热门阅读

热门下载