12月24日_jQuery筛选、事件、动画和工具

一、jQuery筛选

查找

1）find()

查找出匹配元素的指定后代元素
示例
HTML代码

<div id="mydiv">
    <p id="p1">p1</p>
    <p id="p2">p2</p>
    <span id="span1">span1</span>
</div>
<p id="p3">p3</p>
<span id="span2">span2</span>

JavaScript代码

    var temp = $('#mydiv').find('p');
    console.log(temp);

运行结果

2）parent()

取得一个包含着所有匹配元素的唯一父元素的元素集合
示例
HTML代码

<div id="div1">
    <p id="div1_p">div1_p</p>
    <div id="div2">
        <p id="div2_p">div2_p</p>
    </div>
</div>

JavaScript代码

    var temp = $('#div1_p').parent();
    console.log(temp);
    var temp2 = $('#div2_p').parent();
    console.log(temp2);

运行结果

3）siblings()

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
示例
HTML代码

<p id="p1" class="selected">p1</p>
<div id="mydiv">
    <p id="p2">p2</p>
</div>
<p id="p3">p3</p>
<span class="selected">span</span>

JavaScript代码

    var temp = $('div').siblings();
    console.log(temp);
    var temp = $('#mydiv').siblings('.selected');
    console.log(temp);

运行结果

二、jQuery事件

事件处理

on()

在选择元素上绑定一个或多个事件的事件处理函数
示例
HTML代码

<div id="mydiv">
    <p>猪小明</p>
    <p>张三</p>
</div>

JavaScript代码

    $('p').on("click",function(){
        alert($(this).text());
    });

运行结果

事件

blur()

当元素失去焦点时触发 blur 事件
示例
HTML代码

<label for="username">账号：</label>
<input type="text" id="username" name="username" value="">

JavaScript代码

    $('input[name="username"]').blur(function(){
        var temp = $('input[name="username"]').val();
        if (temp == ''){
            $('input[name="username"]').css({border:'1px solid red'});
        }else{
            $('input[name="username"]').css({border:'1px solid rgb(238, 238, 238)'});
        }
    });

运行结果

mouseover()

当鼠标指针位于元素上方时，会发生 mouseover 事件
示例
HTML代码

<p>哈哈哈</p>

JavaScript代码

    $('p').mouseover(function () {
        $('p').css("color","green");
    });

运行结果

change()

当元素的值发生改变时，会发生 change 事件
示例
HTML代码

<select name="city">
    <option value="bj">北京</option>
    <option value="sh">上海</option>
    <option value="sz">深圳</option>
</select>

JavaScript代码

    $('select[name="city"]').change(function(){
        alert("当前选择的城市是 "+$('option[value="'+$(this).val()+'"]').text());
    });

运行结果

三、jQuery效果

1）滑动

slideDown()

通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数

slideUp()

通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数
示例
HTML代码

<h3>菜单</h3>
<div id="mydiv">
    <p>水煮鱼</p>
    <p>炒土豆</p>
    <p>炖白菜</p>
</div>
<button>显示</button>

JavaScript代码

    $('button').click(function(){
        if ($('button').text() == '显示'){
            $('#mydiv p').slideDown(1000);
            $('button').text('隐藏');
            return;
        }
        if ($('button').text() == '隐藏'){
            $('#mydiv p').slideUp(1000);
            $('button').text('显示');
            return;
        }
    });

运行结果

2）自定义

animate

用于创建自定义动画的函数
示例
HTML代码

<div id="mydiv"></div>

CSS代码

#mydiv{
    width: 100px;
    height: 100px;
    background: pink;
    border-radius: 50%;
}

JavaScript代码

function sport() {
    var temp = 0;
    $('#mydiv').animate({width: '+=100', height: '+=100'}, 1000);
    temp++;
    if (temp == 1) {
        $('#mydiv').animate({width: '-=100', height: '-=100'}, 1000);
        temp == 0;
    }
}
setInterval(function () {
    sport();
}, 2000);

运行结果

四、jQuery工具

1. 数组和对象操作

1）$.each()

通用遍历方法，可用于遍历对象和数组
示例
JavaScript代码

    var arr = [1,2,3,4,5];
    var obj = {name:'猪小明',age:'18',job:'程序员'};
    $.each(arr,function(i,n){
        console.log(n);
    });
    $.each(obj,function (i,n) {
        console.log(i+'--'+n);
    });

$.each() 不支持continue和break

continue 用 return true

break 用 return false
运行结果

2）$.inArray()

确定第一个参数在数组中的位置，从0开始计数(如果没有找到则返回 -1 )
示例
JavaScript代码

    var arr = ['zhangsan','lisi','wangwu','zhaoliu'];
    console.log($.inArray('zhangsan',arr));
    console.log($.inArray('wangwu',arr));
    console.log($.inArray('xiaoming',arr));

运行结果

2. 字符串操作

$.trim()

去掉字符串起始和结尾的空格
示例
HTML代码

<form>
    <p>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" value="">
    </p>
    <p>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" name="pwd" value="">
    </p>
    <p>
        <label for="username">确认密码：</label>
        <input type="password" id="repwd" name="repwd" value="">
    </p>
    <p>
        <button type="button" onclick="judge()">注册</button>
    </p>
</form>

JavaScript代码

    function judge(){
        var username = $.trim($('input[name="username"]').val());
        var pwd = $('input[name="pwd"]').val();
        var repwd = $('input[name="repwd"]').val();
        console.log(username,pwd,repwd);
        if (username == ''){
            alert('用户名不能为空');
            return;
        }
        if (pwd == ''){
            alert('密码不能为空');
            return;
        }
        if (repwd == ''){
            alert('请再次输入密码');
            return;
        }
        if (repwd != pwd){
            alert('两次密码不一致');
            return;
        }
        alert('注册成功，您的用户名为'+username);
    }

运行结果

五、总结

对jQuery有了进一步的了解。