python jquery初识

jQuery的介绍

jQuery是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，
事件处理动画和Ajax更加简单。通过多功能性和可扩展性的结合，
jQuery改变了数百万人编写JavaScript的方式。

jquery 中 98%的都是方法

为什么要使用jquery?

JavaScript书写代码的不足

window.onload 事件有事件覆盖的问题，因此只能写一个事件。
代码容错性差。
浏览器兼容性问题。
书写很繁琐，代码量多。
代码很乱，各个页面到处都是。
动画效果很难实现。

jQuery的下载

https://jquery.com/ 下载对应的jQuery
https://www.bootcdn.cn/ 通过cdn的方式引入

jQuery的使用

1 基础选择器

- 标签选择器 $('div')
- id选择器$('#box')
- class选择器$('.box')
- 后代 $("x y")     // x的所有后代y（子子孙孙）
- 子代 $("x >y")  // x的所有儿子y（儿子）
- 组合  $("#id, .className, tagName") //多个标签配合使用
- 交集   //表示2者选中之后共有的特征
- 兄弟 $("x + y")  // 找到所有紧挨在x后面的y
         $("x ~ y")  // x之后所有的兄弟y

简单案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<div class = "box" id = "wrap">
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
    <p class="active">alex</p>
</div>
<script src="./jquery-3.3.1.min.js"></script>
<script>
    $(function(){
        //jQuery的选择器(获取DOM对象 注意,它获取的是jQuery对象而不是jsDOM对象)
        $("div")[0].style.backgroundColor = "red";
        console.log($("#wrap")); //id选择器
        console.log($(".box"));  //类选择器
        console.log($("#wrap .active"));  //后代选择器
        // 获取到jQuery对象,click时间
        $("#wrap .active").click(function(){
            // console.log(this.innerText); //错误写法因为获取到的是jQuery对象而不是结束DOM对象
            // //isdom =>jQuery对象
            // console.log($(this));

            console.log($(this).text()); //点击获取jqery对象的text值 7个alex
            $(this).text("haha");   //将获取当前点击的jQuery值修改
            console.log($(this).text("haha")); //打印出来修改的值
        })
})

</script>
</body>
</html>

2基本过滤器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

　表单筛选器（多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些）：

:text
:password
:file

:radio
:checkbox

:submit
:reset
:button

过滤器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>天龙八部</li>
    <li>射雕英雄传</li>
    <li>神雕侠侣</li>
    <li>倚天屠龙记</li>
</ul>
<input type="text">
<script src="./jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //获取值,eq()的使用
        console.log($("li:eq(1)").css("color"));
        //设置单个值
        // $("li:eq(1)").css("color", 'red');
        $("li:eq(1)").css({
            color: "red",
            backgroundColor: 'blue'
        });
        //属性选择器
        $("input[type='text']").css({
            backgroundColor: 'yellow'
        })
    })
</script>
</body>
</html>

3 筛选选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>天龙八部</li>
    <li class="item"><a href="">晓峰</a></li>
    <li>神雕侠侣</li>
    <li>倚天屠龙记</li>
</ul>
<input type="text">
<script src="./jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //查的是后代  length: 1
        console.log($("li").find("a"));
        //亲儿子 ul下的所有li
        console.log($("ul").children());
        //亲老爸 a标签的亲爸
        console.log($("a").parent());
        //
        console.log($('ul li').eq(1))
    })
</script>
</body>
</html>

小结:

- find() 查找的是后代
- children() 查找的是亲儿子
- parent()查找的是亲爹
- eq() 选择匹配的元素
- siblings() 选择兄弟元素(除了自己本身)

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

//this  谁做的事件操作 this指向谁

siblings() 兄弟标签方法的用途

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $("button").click(function () {
            console.log($(this).css("backgroundColor", "red"));

            //获取索引
            let i = $(this).index()
            console.log(i);
            //把自己按钮变成红色 把除了他以外的背景变成灰色
            $(this).css("backgroundColor", "red").siblings("button").css("backgroundColor", "#666");
            //把当前的索引添加class属性 除了他以外的全部删除
            $("div").eq(i).addClass("active").siblings("div").removeClass("active");

            addClass();// 添加指定的CSS类名。
            removeClass();// 移除指定的CSS类名。
            hasClass();// 判断样式存不存在
            toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
        })
    })
</script>

</body>

</html>

升级版的选择卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

    </style>
</head>
<body>
<ul>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
    <li>
        <a href="javascript:void(0)">1</a>
    </li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        $("ul li").click(function () {
            //先找到ul下的所有li标签 把颜色更改为红色,找到a父亲也就是li,
            //除了他之外的a标签全部变为蓝色
            $(this).find("a").css("color", 'red').parent()
                .siblings('li').find('a').css('color', 'bule');
        })
    })
</script>

</body>

</html>

jQuery的文档操作

1插入操作

//语法:
父元素.append(子元素)
//解释:追加某子元素:
stirng| element(js对象)|jquery元素

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>倚天屠龙</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        //追加字符串
        $('.comment').append('<li id="item">张无忌</li>');
        $('#item').click(function () {
            alert($(this).text())
        });
        //追加js对象
        var li = document.createElement('li');
        li.innerText = '赵敏';
        $(".comment").append(li);

//如果是jquery对象,相当于移动操作
//setTimeout方法用于在指定的毫秒数后调用函数或计算表达式。
//   setTimeout(function(){
//             $(".comment").append($("li").eq(0));
//         },2000);
        $("<li>周芷若</li>").appendTo(".comment").click(function () {
            alert($(this).html())
        })

    })
</script>

</body>

</html>

2.前置插入

//语法
$(A).append(B)// 把B追加到A  A是父B是子
$(A).appendTo(B)// 把A追加到B A是子B是父

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>倚天屠龙</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script>
    $("#append").click(function () {
        let content = $('input[type=text]').val();
        // $('.comment').prepend(`<li>${content}</li>`);
        //第二种添加方式
        $(`<li>${content}</li>`).prependTo('.comment')
    })
</script>

</body>

</html>

后置追加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="append">追加</button>
<ul class="comment">
    <li>倚天屠龙</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script>
    //后置追加 正序
    $("#append").click(function () {
        let content = $("input[type=Text]").val();
        if (!content) {
            return;
        }
        $('.comment').append(`<li>${content}</li>`);
    })
</script>
</body>

</html>

3.兄弟追加(后)

目标兄弟.after(要插入的兄弟)
要插入的兄弟.inertAfter(目标兄弟)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="after">追加</button>
<ul class="comment">
    <li>倚天屠龙</li>
    <li id="item">张无忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script>
    $("#after").click(function () {
        let content=$('input[type=text]').val()
        $('#item').after(`<li>${content}</li>`);
        //第二种写法
        // $(`<li>${content}</li>`).insertAfter('#item')
    })
</script>
</body>

</html>

兄弟追加(前)

目标兄弟.before(要插入的兄弟)
要插入的兄弟.insertBefore(目标兄弟)

attr prop

attr 设置属性值或者返回被选元素的属性值

prop() 方法设置或返回被选元素的属性和值。

$(':checkbox').prop('checked', true)

1.是有true,false两个属性使用prop();

2.其他则使用attr();

4.删除和清空

//删除
$(seletor).remove();//删除整个标签 事件也删除
$(seletor).detach();//删除整个标签 事件保留

//清空
$(seletor).empty();//删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在

$(seletor).html(''); 
$(seletor).text('');

删除代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="del">追加</button>
<button id="detach">追加2</button>
<ul class="comment">
    <li>倚天屠龙</li>
    <li id="item">张无忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script>
    $("#del").click(function(){
        alert(1);
        //remove()删除,表示整个标签都删除(事件也删除)
        // $("ul").remove();
        var jbtn = $(this).remove();
        $(".comment #item").append(jbtn)
    });


    //detach 删除标签,事件不删除 再次点击detach按钮时还会有个弹出事件
    $("#detach").click(function(){
        alert(1);
      var jbtn =  $(this).detach();
      console.log(jbtn);
      $('.comment #item').append(jbtn)

    })
</script>
</body>

</html>

清空代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="empty">追加</button>
<ul class="comment">
    <li>倚天屠龙</li>
    <li id="item">张无忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script>
    $('#empty').click(function () {
        $('.comment').empty();
        // $(".comment").html("");
        // $('.comment').text("");
    })
</script>
</body>

</html>

替换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text">
<button id="replace">追加</button>
<ul class="comment">
    <li><a href="">倚天屠龙</a></li>
    <li id="item">张无忌</li>
</ul>
<script src="jquery-3.3.1.min.js"></script>

<script>
    $(function () {
        $('#replace').click(function () {
          $(".comment li a").replaceWith('<span>1</span>')
        })
    })
</script>
</body>

</html>

事件

(1)常见事件

(2)触发方式

    $('#btn1').click(function () {
        alert('666');
    })

    $('#btn1').on('click',function () {
        alert('66666')
    })

常见事件

click //点击
hover //鼠标移动上去
focus //光标触发时间
blur //光标移走触发事件
change //内容发生变化，input，select等 触发另一个标签事件
keyup //键盘按下
keyup //键盘抬起
keyCode//获取键盘值
mouseover //事件只要你在绑定该事件的对象上移动就会一直触发
mouseenter  //事件只触发一次，表示鼠标进入这个对象

案例一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1, .d2 {
            background-color: green;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
<button id="btn1">点击</button>
<div class="d1"></div>
<input type="text" id="i1">

<div class="d2"></div>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // $('#btn1').click(function () {
    //     alert('666');
    // })
    // $('#btn1').on('click',function () {
    //     alert('66666')
    // })

    //鼠标移动上去之前是红色 移动上去是绿色
    $('.d1').hover(
        //鼠标移动上去
        function () {
            $(this).css('background-color', 'green')
        },
        //鼠标移动出来
        function () {
            $(this).css('background-color', 'red')
        }
    );
    //获取光标触发的事件
    $('#i1').focus(function () {
        $(this).css('background-color', 'red')
    });
    //光标移走触发的事件
    $('#i1').blur(function () {
        $(this).css('background-color', 'green')
    });
    $(window).keyup(function (e) {
        if (e.keyCode === 16) {
            console.log('这是shift键')
        }
    })
    //mouseover事件只要你在绑定该事件的对象上移动就会一直触发
    // $('.d2').mouseover(function () {
    //     console.log('xxxx')
    // })

    //mmouseenter事件只触发一次，表示鼠标进入这个对象
    $('.d2').mouseenter(function () {
        console.log('2222');
    });

</script>

</body>
</html>

批量操作案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1">
    <thead>
    <tr>
        <th>id</th>
        <th>姓名</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>张三</td>
        <td>
            <select>
                <option value="1">上线</option>
                <option value="2">下线</option>
                <option value="3">停职</option>
            </select>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>张三2</td>
        <td>
            <select>
                <option value="1">上线</option>
                <option value="2">下线</option>
                <option value="3">停职</option>
            </select>
        </td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>张三3</td>
        <td>
            <select>
                <option value="1">上线</option>
                <option value="2">下线</option>
                <option value="3">停职</option>
            </select>
        </td>
    </tr>

    <tr>
        <td><input type="checkbox"></td>
        <td>张三4</td>
        <td>
            <select>
                <option value="1">上线</option>
                <option value="2">下线</option>
                <option value="3">停职</option>
            </select>
        </td>
    </tr>


    </tbody>
</table>
<script src="jquery-3.3.1.min.js"></script>
<script>
    var flag = false;
    //shift 按键按下的时候
    $(window).keydown(function (e) {
        // console.log(e.keyCode);
        if (e.keyCode === 16) {
            flag = true;
        } else {
            return;
        }
    })

    //shift按键被抬起的时候
    $(window).keyup(function (e) {
        // console.log(e.keyCode);
        if (e.keyCode === 16) {
            flag = false
        }
    })


    $("select").change(function (e) {
        //匹配 父级 选择兄弟元素(除了自己本身) td标签 第一个  :checkbox
        // var a=$(this).parent().siblings().first().find(":checkbox")
        // console.log(a);

        // prop() 方法设置或返回被选元素的属性和值。
        //  $(':checkbox').prop('checked', true)

        var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked");
        //获取匹配到的checkbox值
        console.log(isChecked);
        if (flag && isChecked){//2边条件都成立的时候
            var value=$(this).val();
            var $select = $("input:checked").parent().parent().find("select");
            $select.val(value);
        }
    })


</script>
</body>
</html>

事件冒泡点击子时间会触发父的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d2 {
            height: 100px;
            width: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="d1">
    <div id="d2"></div>
</div>

<script src="jquery-3.3.1.min.js"></script>

<script>
    $('#d1').click(function () {
        alert('父级标签')
    })
    //执行子标签的事件会触发父标签的
    $('#d2').click(function () {
        alert('子标签')
        //return false 可以避免上面的情况
        return false
    })
</script>
</body>
</html>

事件委托可以让新增条目有删除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*底部黑框样式*/
        .shadow {
            position: fixed;
            background-color: rgba(0, 0, 0, 0.3);
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 999;
        }

        .modal {
            position: fixed;
            width: 400px;
            height: 200px;
            background-color: #ffffff;
            top: 50%;
            left: 50%;
            z-index: 1000;
            margin-top: -100px;
            margin-left: -200px;
        }

        .hide {
            display: none;
        }
    </style>

</head>
<body>
<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="cancel">取消</button>
<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>#</th>
        <th>姓名</th>
        <th>爱好</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td><input type="checkbox"></td>
        <td>金老板</td>
        <td>开车</td>
        <td>
            <button class="b1">删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>景女神</td>
        <td>茶道</td>
        <td>
            <button class="b1">删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>苑昊（苑局）</td>
        <td>不洗头、不翻车、不要脸</td>
        <td>
            <button class="b1">删除</button>
        </td>
    </tr>
    </tbody>
</table>

<div class="modal hide">
    <div>
        <lable for="name">姓名</lable>
        <input type="text" id="name">
    </div>
    <div>
        <lable for="hobby">爱好</lable>
        <input type="text" id="hobby">
    </div>
    <div>
        <button class="bt2">保存</button>
    </div>
</div>

<div class="shadow hide"></div>

<script src="jquery-3.3.1.min.js"></script>
<script>
    //全选
    $("#all").click(function () {
        $(":checkbox").prop('checked', true)
    });
    //取消
    $("#cancel").on("click", function () {
        $(":checkbox").prop("checked", false)
    })
    //反选
    $("#reverse").click(function () {
        //for循环所有的checkbox,挨个判断原来选中就取消选中，原来没选中就选中
        var $checkbox = $(":checkbox");
        for (var i = 0; i < $checkbox.length; i++) {
            var status = $($checkbox[i]).prop('checked');
            //得到当前选中标签的值的状态
            // console.log(status);
            //然后把结果反着来
            $($checkbox[i]).prop('checked', !status);
        }
    })
    //点击新增,弹出模态框
    $('#add').click(function () {
        //底部黑影shadow 弹出框modal
        $('.modal,.shadow').removeClass('hide')
    })
    //弹出框保存数据步骤
    $('.bt2').click(function () {
        //1.获取用户输入信息
        var name = $('#name').val();
        var hobby = $('#hobby').val();
        //2.创建标签 数据加入标签
        var s = "<tr>" +
            "        <td><input type="checkbox"></td>" +
            "        <td>" + name + "</td>" +
            "        <td>" + hobby + "</td>" +
            "        <td>" +
            "            <button class="b1">删除</button>" +
            "        </td>" +
            "    </tr>"
        // var s = "<tr class='cc'></tr>"
        //3.将创建好的标签,添加到表格里面去
        $('tbody').append(s);
        //4.隐藏对话框
        $(".modal,.shadow").addClass('hide')
        //5清空用户输入内容
        $('#name').val('');
        $('#hobby').val('');
    })
    //事件委托,将button的click事件委托给了祖父tbody标签,实现的效果就是点击button按钮,
    // 触发tbody的click事件,$(this)表示的还是被点击的那个标签,只能使用on click
    $('tbody').on('click','.b1',function () {
        $(this).parent().parent().remove();
    });


</script>
</body>
</html>

页面加载解决了代码执行顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .d1 {
            background-color: red;
            width: 100px;
            height: 100px;
        }
    </style>

    <!--这样是不生效的 因为先执行操作 后找的标签-->
    <!--<script>-->
        <!--$('.d1').click(function () {-->
            <!--alert('xxx');-->
        <!--})-->
    <!--</script>-->
</head>
<body>
<div class="d1"></div>
<script src="jquery-3.3.1.min.js"></script>
<script src="01test.js"></script>
<script>
    //jquery 页面加载完成之后做某些事情的操作 解决了上面问题
    $(function () {
        $('.d1').click(function () {
            alert('xxx');
        })
    })
</script>
</body>
</html>

动画效果 animate 自定义

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>点赞动画示例</title>
  <style>
    div {
      position: relative;
      display: inline-block;
    }
    div>i {
      display: inline-block;
      color: red;
      position: absolute;
      right: -16px;
      top: -5px;
      opacity: 1;
    }
  </style>
</head>
<body>

<div id="d1">点赞</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
  $("#d1").on("click", function () {
    var newI = document.createElement("i");
    newI.innerText = "+1";
    $(this).append(newI);
    $(this).children("i").animate({
      opacity: 0  //1秒之后透明度变为0，注意写法，animate({属性：值},毫秒数)
    }, 1000)
  })
</script>
</body>
</html>

作业1

val和text方法的区别

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">


</head>
<body>
<span>hello</span>
<div class="c1">你好
    <span>xx</span>
</div>

<input id="username" type="text">

<input type="checkbox" name="hobby">篮球
<input type="checkbox" name="hobby" value="2">足球

<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女

<select name="" id="s1">

    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>

</select>

<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

</body>
</html>

$('span').text();
$('.c1').text();
$('.c1').html();
$('#usernmae').val() 是空的 因为input val默认是from表单提交的值
$('input:checkbox').val(); 默认是on
$('input:checkbox').val([1,2]); 有val的值就得就会被选中
$('input:checkbox').prop('checked',true); 给他们设置属性值 让他们都选中
$('select').val() select可以选中val
$('span').text('xxx') 改掉了标签里面值

相关阅读:
【SpringMVC 从 0 开始】SpringMVC RESTFul 实战案例
 【SpringMVC 从 0 开始】SpringMVC RESTFul 实战案例
 【SpringMVC 从 0 开始】RESTFul 介绍
 【SpringMVC 从 0 开始】SpringMVC 的视图
 【SpringMVC 从 0 开始】域对象共享数据
 【SpringMVC 从 0 开始】SpringMVC 中获取请求参数
 angular-cdk 探索
 angular 自定义表单/*ngFor增删不更新
 小白都能跑通的3D地图demo
腾讯地图：输入关键字选取地点
原文地址：https://www.cnblogs.com/zaizai1573/p/10385816.html

python jquery初识

jQuery的介绍

为什么要使用jquery?

jQuery的下载

jQuery的使用

简单案例

2基本过滤器

表单筛选器（多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些）：

过滤器案例

3 筛选选择器

siblings() 兄弟标签方法的用途

jQuery的文档操作

1插入操作

2.前置插入

后置追加

3.兄弟追加(后)

兄弟追加(前)

attr prop

4.删除和清空

删除代码

清空代码

替换

事件

(1)常见事件

(2)触发方式

常见事件

案例 一

批量操作案例

事件冒泡 点击子时间 会触发 父的事件

事件委托 可以让新增条目 有删除功能

页面加载 解决了代码执行顺序

动画效果 animate 自定义

val和text方法的区别

　表单筛选器（多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些）：

案例一

事件冒泡点击子时间会触发父的事件

事件委托可以让新增条目有删除功能

页面加载解决了代码执行顺序