jQuery的选择器操作以及dom操作总结——2018年9月17日 - JavaScript

首页 > 博客列表 > jQuery的选择器操作以及dom操作总结——2018年9月17日

博主信息

博文 36

粉丝 0

访问量 27683

专题推荐

更多>

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery对象核心</title>
</head>
<body>
<script src="../lib/jquery.js"></script>
<script>
    //1.$(selector/html/obj/function())
    $('<ul class="list"></ul>').appendTo('body');
    //插入li元素
    $('.list').append($('<li>新苹果来了，买买买</li>'));//append()父级调用

    //创建元素时添加 属性
    $('ul').append($('<li id="two">我的***蠢蠢欲动</li>'));

    //创建元素的属性较多时 可传入第二个字面量参数
    $('.list').append($('<li>',{class:'iphone6s',text:'我的6s还能再战3年',click:function () {
        alert('iphone6s')
        }}));

    //$(function(){})执行一个回调函数
    $(function(){
        $('.iphone6s').css('color','yellow');
    });

    //each(function): 对jquery对象的每个元素 都进行回调处理
    $('li').each(function () {
        $(this).css('background-color','skyblue');
    });

    //查看jquery对象集合中dom数量  length属性
    console.log($('li').length);

    //get()和[], 获取jquery中的dom，将jquery转为dom
    $('li').get(0).style.backgroundColor = 'green';
    $('li')[1].style.backgroundColor = 'coral';
    console.log($('li').get().length);
</script>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

jquery常用的选择器（层级和表单）
jquery的层级选择器就是css的层级选择器，有相邻选择器、相邻兄弟选择器等。表单选择器则是带有：,例如：input就是选中所有的input标签元素，还可以根据type属性或者加入not（）来选择。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery常用的选择器</title>
    <style>
        .highlight{
            background-color: yellow;
        }
        #title{
            color:red;
        }
    </style>
</head>
<body>
<ul>
    <li>
        <h3 id="title">前端课程</h3>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>
                <h3>JavaScript</h3>
                <ul>
                    <li>jquery</li>
                    <li>bootstrap</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
邮箱：<input type="email"><br>
密码：<input type="password"><br>
<!--input:radio-->
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby" value="sing" checked>唱歌
<input type="checkbox" name="hobby" value="dance">跳舞
<br>
你的学历：
<select name="" id="">
    <option value="">小学</option>
    <option value="">初中</option>
    <option value="高中" selected>高中</option>
    <option value="">大学</option>
</select><br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>

<script src="../lib/jquery.js"></script>
<script>
    //层级选择器
    // $('li:first h3').addClass('highlight'); //选择每个li下的h3
    $('li:first>h3').addClass('highlight');//仅选择子元素

    //li:contains('html'):last 定位到最后一个内容是html的li
    $("li:contains('HTML'):last").addClass('highlight');
    $("li:contains('HTML'):last+li").addClass('highlight'); //相邻的li
    $("li:contains('HTML'):last~li").addClass('highlight');//相邻所有兄弟

    //选择文本框、
    $('input[type="email"]').addClass('highlight');//属性选择器
    $(':input').not(':submit').not(':disabled').addClass('highlight');

    console.log($(':checkbox:checked').val());//当前选中的值
    console.log($(':checkbox').not(':checked').val());//未被选中的值
    console.log($(':checkbox').val());//默认选中的值

    console.log($(':input :selected').val());// 过滤器之间空格 隔开
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.jQuery操作dom

操作dom，就是创建、更新、删除元素。以上的操作都是利用jQuery的函数来实现。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery中的dom操作</title>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
</ul>

<script src="../lib/jquery.js"></script>
<script>
    $('ul').append('<li>新元素1</li>'); //添加到尾部
    $('<li>新元素2</li>').appendTo('ul');
    $('ul').prepend('<li>新元素3</li>');//头部添加
    $('<li>新元素4</li>').prependTo('ul');

    //元素前后添加
    $('li:eq(3)').after('<li>新元素5</li>');
    $('li:eq(6)').before('<li>新插入</li>');
    $("<li>新元素6</li>").insertAfter('li:eq(3)');

    //替换 replaceWith（）
    $('li:contains("新元素")').replaceWith('<li style="color:red;">新元素</li>');
    $('<li style="color:skyblue">新元素</li>').replaceAll('li:contains("新元素")');

    //删除
    // $('li').remove();  全部删除
    //$('li').remove(':odd')  删除奇数

    $('ul').empty();//清空子节点
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4.jQuery和原生JS相比的优劣势

优点：jQuery相对js来说，语法更加精简，更少的代码实现更多的功能，拥有大量的函数可以使用。js的代码则较为繁琐。另外jquery的兼容性比原生js要好。

缺点方面：jquery版本不能向后兼容，新版本不能兼容旧版本，引入多个jquery的插件可能会冲突。

批改状态：合格

老师批语：