12月23日_jQuery文档处理、筛选、属性和效果

一、jQuery文档处理

1. 内部插入

1) append()

向每个匹配的元素内部追加内容

示例

html代码

<div>
    <p>你好</p>
</div>
<button onclick="js_append()">append</button>

JavaScript代码

    function js_append(){
        html = '<p>hello</p>';
        $('div').append(html);
    }

2) prepend()

向每个匹配的元素内部前置内容

示例

html代码

<div id="mydiv">
    <span>哈哈哈</span>
</div>
<button onclick="js_prepend()">prepend</button>

JavaScript代码

    function js_prepend() {
        html = '<p>这是一句话</p>';
        $('div[id="mydiv"]').prepend(html);
    }

3) appendTo()

把所有匹配的元素追加到另一个指定的元素元素集合中

示例

html代码

<p>我是段落p</p>
<div id="div1">
    我是div1
</div>
<div id="div2">
    我是div2
</div>
<button onclick="js_appendTo()">appendTo</button>

JavaScript代码

    function js_appendTo() {
        $('p').appendTo('div');
    }

4) prependTo()

把所有匹配的元素前置到另一个、指定的元素元素集合中

示例

html代码

<div>
    <span>这是一个字段</span>
</div>
<p>span2</p>
<br>
<button onclick="js_prependTo()">prependTo</button>

JavaScript代码

    function js_prependTo() {
        $('p').prependTo('div');
    }

2. 外部插入

1) after()

在每个匹配的元素之后插入内容

示例

html代码

<span>点击下方查看按钮查看城市：</span>
<br>
<button onclick="js_after()">查看</button>

JavaScript代码

    function js_after() {
        $('span').after('<select><option>北京</option><option>上海</option><option>深圳</option></select>');
    }

2）before()

在每个匹配的元素之前插入内容

示例

html代码

<p>我是猪小明</p>
<button onclick="js_before()">before</button>

JavaScript代码

    function js_before() {
        $('p').before('<p>你好</p>');
    }

3. 删除

1) empty()

删除匹配的元素集合中所有的子节点

示例

html代码

<div id="mydiv">
    <p>我是div里面的p</p>
</div>
<p>我是和div相邻的p</p>
<button onclick="js_empty()">empty</button>

JavaScript代码

    function js_empty() {
        $('div[id="mydiv"]').empty();
    }

2) remove()

从DOM中删除所有匹配的元素

示例

html代码

<button onclick="js_remove(this)">remove</button>

this表示当前对象
JavaScript代码

    function js_remove(obj) {
        $(obj).remove();
    }

4. 复制

clone()

克隆匹配的DOM元素并且选中这些克隆的副本

示例

html代码

<button onclick="js_clone(this)">复制</button>

JavaScript代码

    function js_clone(obj) {
        $('script').before($(obj).clone());
    }

5. 案例：省市联动

html代码

<label>省份</label>
<select name="province" onchange="checked()">
    <option value="">请选择省份</option>
    <option value="sd">山东省</option>
    <option value="hn">河南省</option>
    <option value="ah">安徽省</option>
</select>
<label>城市</label>
<select name="city">
    <option>请选择城市</option>
</select>

JavaScript代码

    function get_citys(province){
            var citys = [];
            if (province == 'sd'){
                citys = [{val:'jn',txt:'济南'},{val:'qd',txt:'青岛'},{val:'zb',txt:'淄博'}];
            }
            if (province == 'hn'){
                citys = [{val:'zz',txt:'郑州'},{val:'ly',txt:'洛阳'},{val:'kf',txt:'开封'}];
            }
            if (province == 'ah'){
                citys = [{val:'hf',txt:'合肥'},{val:'hs',txt:'黄山'},{val:'aq',txt:'安庆'}];
            }
            return citys;
    }
    function checked() {
        var province = $('select[name="province"]').val();
        var citys = get_citys(province);
        var city_show = '<option value="">请选择城市</option>';
        for (var i=0;i<citys.length;i++){
            city_show += '<option value="'+citys[i].val+'">'+citys[i].txt+'</option>';
        }
        $('select[name="city"]').empty().append(city_show);
    }

二、jQuery筛选

1. 过滤

1）eq()

获取匹配的第几个元素

示例

html代码

<p id="p1">第一个p</p>
<p id="p2">第二个p</p>

JavaSript代码

    var t = $('p').eq(1);
    console.log(t);

2）first()

获取匹配的第一个元素

示例

html代码

<p id="p1">第一个p</p>
<p id="p2">第二个p</p>
<p id="p3">第三个p</p>

JavaScript代码

    console.log($('p').first());

3）last()

获取匹配的最后个元素

示例

html代码

<p id="p1">第一个p</p>
<p id="p2">第二个p</p>
<p id="p3">第三个p</p>

JavaScript代码

    console.log($('p').last());

4）hasClass()

检查匹配的元素是否含有某个特定的类，如果有，则返回true

示例

html代码

<div name="div1" class="hello">
    div1
</div>
<div name="div2">
    div2
</div>

JavaScript代码

    console.log($('div[name="div1"]').hasClass('hello'));
    console.log($('div[name="div2"]').hasClass('hello'));

2. 查找

children()

取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合

示例

html代码

<div id="mydiv">
    <p id="div_p">我是div里的p</p>
    <div id="div_div">
        <p id="p2">我是小p</p>
    </div>
    <span id="sp">你好</span>
</div>

JavaScript代码

    console.log($('div[id="mydiv"]').children());
    console.log($('div[id="mydiv"]').children('p'));

三、jQuery属性

CSS类

1）addClass()

为每个匹配的元素添加指定的类名

2) removeClass()

从所有匹配的元素中删除全部或者指定的类

示例

html代码

<div id="mydiv">
    <a href="javascript:;" onclick="checked(this)">北京</a>
    <a href="javascript:;" onclick="checked(this)">上海</a>
    <a href="javascript:;" onclick="checked(this)">深圳</a>
    <a href="javascript:;" onclick="checked(this)">青岛</a>
</div>

CSS代码

    #mydiv{
        background: lavender;
        width: 200px;
        height: 100px;
    }
    #mydiv a{
        text-decoration: none;
    }
    .active{
        background: deeppink;
        color: white;
    }

JavaScript代码

    function checked(obj){
        $('div[id="mydiv"] a').removeClass('active');
        $(obj).addClass('active');
    }

3）toggleClass()

如果存在（不存在）就删除（添加）一个类
JavaScript代码

$(obj).toggleClass('active');

四、jQuery效果

基本

1）show()

显示隐藏的匹配元素

2）hide()

隐藏显示的元素

示例

html代码

<div id="mydiv">
    <h3 onclick="showed()">导航</h3>
    <ul>
        <li>手机数码</li>
        <li>家用电器</li>
        <li>玩具乐器</li>
        <li>汽车用品</li>
        <li>礼品鲜花</li>
    </ul>
</div>

CSS代码

div ul{
    display: none;
}

JavaScript代码

    function showed(){
        var t = $('div[id="mydiv"] > ul');
        if (t.css("display") == 'none'){
            t.show(1000);
        }else{
            t.hide(200);
        }
    }

3）toggle()

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的
JavaScript代码

$('div[id="mydiv"] > ul').toggle(500);

五、总结

对jQuery的常用操作有了进一步的了解。