jQuery

不爱搞学术的蜡笔小新

已于 2022-03-17 10:03:46 修改

阅读量1.2k

点赞数 1

分类专栏： web前端技术文章标签： jquery javascript 前端

于 2022-03-14 09:57:18 首次发布

本文链接：https://blog.csdn.net/A13526_/article/details/123470643

版权

web前端技术专栏收录该内容

39 篇文章 7 订阅

订阅专栏

01-10

了解jQuery

jQuery是一个javaScript库
jQuery极大简化了JavaScrip编程

初识jQuery

例子：需求：点击"确定" 按钮，提示输入的值

方式一：使用原生DOM实现

<script>
    // 使用原生dom实现
    window.onload = function () {
        var btn1 = document.getElementById('btn1')
        btn1.onclick = function () {
            // 对应相应的value值就是如此，
            var username = document.getElementById('username').value
            alert(username)
        }
    }
</script>

<body>
    <!-- 
        需求：点击"确定"按钮，提示输入的值
     -->
    用户名:<input type="text" id="username">
    <button id="btn1">确定(原生版)</button>
    <button id="btn2">确定(jQuery版)</button>
</body>

方式二：使用jQuery实现

引入jQuery的两种方式：① 本地引入 ② 远程引入

本地引入

<!-- 本地引入 -->
<script src="./js/jquery-1.12.3.js"></script>

远程引入

查找jQuery库常见jQuery库

<!-- 远程引入 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script>

<script>
    // 绑定文档加载完成的监听 --> $可以理解为查询的意思
    /* $(function () {
        // 加上监听就是绑定回调函数
        $('#btn2').click(function () { // 给btn2绑定点击监听
            var username = $('#username').val()
            alert(username)
        })
    }) */
    $(function () {
        // 加上监听绑定回调函数,在进行$查询的时候，使用到的是什么选择器就是什么选择器，比如用到的是id选择器，就需要用到#,这一点还是很关键的
        $('#btn2').click(function () {  // 绑定监听，里面传入的是回调函数
            var username = $('#username').val()
            alert(username)
        })
    })
    /*
        1、使用jQuery核心函数：$/jQuery
        2、使用jQuery核心对象：执行$() 返回的对象
    */
    /* $(function () {
        var $btn2 = $('#btn2')
        // 加上监听就是绑定回调函数
        $('#btn2').click(function () { // 给btn2绑定点击监听
            var username = $('#username').val()
            alert(username)
        })
    }) */
</script>

<body>
    <!-- 
        需求：点击"确定"按钮，提示输入的值
     -->
    用户名:<input type="text" id="username">
    <button id="btn1">确定(原生版)</button>
    <button id="btn2">确定(jQuery版)</button>
</body>

jQuery的两把利器

jQuery核心函数 ($ / jQuery)
jQuery核心对象 ()

<body>
    <!-- 
        jQuery的两把利器：
            - jQuery核心函数 ($ / jQuery)
            - jQuery核心对象 ()

        1.jQuery核心函数
        *简称：jQuery函数($/jQuery)
        *jQuery,库向外直接暴露的就是$/jQuery
        *引入jQuery,库后，直接使用方法即可
        *当函数用：$(XXX)
        *当对象用：$.XXx()
        2.jQuery核心对象
        简称：jQuery对象
        得到jQuery.对象：执行jQuery.函数返回的就是jQuery对象
        使用jQuery.对象：8obj.Xxx（）
     -->
<script src="./js/jquery-1.12.3.js"></script>
<script>
    // 1、jQuery函数:执行jQuery函数得到它
    console.log($, typeof $)
    console.log(jQuery === $) // true
    // 2、jQuery对象
    console.log($() instanceof Object) // true
    // $内部实现细节大概是
    /* (function(window){
        var jQuery = function(){
            return new xxx()
        }
        window.$ = window.jQuery = jQuery()
    })(window) */
</script>
</body>

jQuery函数的使用

$ - 有查询的意思
而且$可以调用很多方法来进行相应使用

<body>
    <div>
        <button id="btn">测试</button><br />
        <input type="text" name="msg1"><br />
        <input type="text" name="msg2"><br />
    </div>
    <!-- 
        $
        1.作为一般函数调用：$(param)
            1.参数为函数：当D0M加载完成后，执行此回调函数
            2).参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
            3).参数为DOM对象：将dom对象封装成jQuery.对象
            4).参数为htmL标签字符串（用得少）：创建标签对象并封装成jQuery对象
        2.作为对象调用：$.Xx()
            1) $.each():隐式遮历数组
            2) $.trim()：去除两端的空格
     -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        /*
           需求：
           需求1.点击按钮：显示按钮的文本，显示一个新的输入框
           需求2.遍历输出数组中所有元素值
           需求3.去掉"my atguigu"两端的空格
        */
        // 1.1 参数为函数，当DOM加载完成后，执行此回调函数
        $(function () { // 绑定文档加载完成的监听
            // 2).参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象
            $('#btn').click(function () { // 绑定点击事件监听
                // dom事件的回调函数
                // this是什么？发生事件的dom元素（<button>）
                // alert(this.innerHTML)
                // 包装以后就可以使用
                // 1.3 参数为DOM对象：将dom对象封装成jQuery.对象
                alert($(this).html())
                // 1.4).参数为htmL标签字符串（用得少）：创建标签对象并封装成jQuery对象
                // $('<input type="text" name="msg3"><br />') // 在内存里面
                // 显示出新的内存框
                $('<input type="text" name="msg3"><br />').appendTo('div') // 弄在页面当中
            })
        })
        /* 
             需求2.遍历输出数组中所有元素值
        */
        // 进行简单的测试
        var arr = [2, 4, 7]
        //  1、$.each():隐式遮历数组
        $.each(arr, function (index, item) {
            console.log(index, item)
        })

        // 2、$.trim()：去除两端的空格
        var str = ' my atguigu '
        // console.log('---'+str.trim()+'---') 原生方式
        console.log('---' + $.trim(str) + '---')
    </script>
</body>

appendTo(‘元素符’) - 将一行代码添加到某个元素的下面

jQuery对象的使用

执行jQuery核心函数返回的对象
jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom

jQuery对象

jQuery.对象是一个包含所有匹配的任意多个dom元素的伪数组对象
基本行为：① size() / length:包层含的DOM元素个数 ② index/get(index):得到网应位置DOM元素 ③ each():遍历包含的所有DOM元素
④ index()：得到在所在兄弟元素中的下标

<body>
    <!-- 
        - 执行jQuery核心函数返回的对象
        - jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)
        - jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作dom
    -->
    <button>测试一</button>
    <button>测试二</button>
    <button id="btn3">测试三</button>
    <button>测试四</button>
    <script src="./js/jquery-1.12.3.js"></script>
    <!-- 
        1.jQuery.对象是一个包含所有匹配的任意多个dom元素的伪数组对象
        2.基本行为
        * size() / length:包层含的DOM元素个数
        *[index]/get(index):得到网应位置DOM元素
        *each():遍历包含的所有DOM元素
        *index（）:：得到在所在兄弟元素中的下标
     -->

    <!-- 
        需求：
            需求1.统计一共有多少个按钮
            需求2.取出第2个button的文本
            需求3.输出所有button标签的文本
            需求4.输出'测试三'按钮是所有按钮中的第几个

    -->

    <script>
        // 需求1: 统计一共有多少个按钮
        var $button = $('button')
        // size() / length:包层含的DOM元素个数
        console.log($button.size(), $button.length) // 4 4

        // 需求2.取出第2个button的文本
        // [index]/get(ndeX):得到对应位置的dom元素
        console.log($button[1].innerHTML, $button.get(1).innerHTML) // 测试二 测试二

        // 需求三：each():遍历包含的所有DOM元素
        $button.each(function (index, domEle) {
            console.log(index, domEle.innerHTML, this)  // this --> domEle
        })
        $button.each(function () {
            console.log(this) // 把所有dom元素打印出来
        })

        // 需求四: 输出'测试三'按钮是所有按钮中的第几个
        // *index(): 得到在所在兄弟元素中的下标
        console.log($('#btn3').index()) // 2 函数和方法不能弄混
    </script>
</body>

伪数组

Object对象
length属性
数组下标属性
没有数组特别的方法：forEach() push() pop() splice()

/* 
    1、伪数组
    - Object对象
    - length属性
    - 数值下标属性
    - 没有数组特别的方法，：forEach() push() pop() splice()

*/
console.log($button instanceof Array) // false

// 自定义一个伪数组
var weiArr = {}
weiArr.length = 0
weiArr[0] = 'atguigu'
weiArr.length = 1
weiArr[1] = 123
weiArr.length = 2
for (var i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i]
    console.log(i, obj)
}

console.log(weiArr.forEach, $button.forEach) // undefined undefined

基本选择器

选择器

本身是一个有特定语法规则的字符串，没有实质用处

<body>
    <!-- 
        选择器：
            - 本身是一个有特定语法规则的字符串，没有实质用处
            - 
    -->
    <div id="div1" class="box">div1(class="box")</div>
    <div id="div2" class="box">div2(class="box")</div>
    <div id="div3">div3</div>
    <span class="box">span(class="box)</span>

    <br>
    <ul>
        <li>AAAAAA</li>
        <li title="hello">BBBBB(title="hello")</li>
        <li class="box">CCCCC(class="box")</li>
        <li title="hello">DDDDD(title="hello")</li>
    </ul>
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        /*
        需求：
            1.选id为div1的元素
            2.选择所有的div元素
            3.选择所有cLass属性为box的元素
            4.选择所有的div和span元素
            5.选择所有class属性为box的div元素
        */
        // 1、选择id为div1的元素
        // $('#div1').css('background', 'red')
        // 2.选择所有的div元素
        // $('div').css('background', 'red')
        // 3.选择所有cLass,属性为box的元素
        // $('.box').css('background', 'red')
        //4.选择所有的div和span元素
        // $('div, span').css('background', 'red')
        //5.选择所有cLass属性为box的div元素
        $('div.box').css('background', 'red')
    </script>
</body>

层次选择器

层次选择器

选择子元素，后代元素，兄弟元素的选择器

种类

ancestor descendant：在给定的祖先元素下匹配所有的后代元素
parent>child: 在给定的父元素下匹配所有的子元素
prev+next ：匹配所有紧接在preV元素后的next元素
prev~siblings：匹配prev元素之后的所有siblings元素


<body>
    <ul>
        <li>AAAAA</li>
        <li class="box">CCCCC</li>
        <li title="hello"><span>BBBBB</span></li>
        <li title="hello"><span class="box">DDDD</span></li>
        <span>EEEEE</span>
    </ul>
    <!-- 
        层次选择器：选择子元素，后代元素，兄弟元素的选择器
            1.ancestor descendant
            在给定的祖先元素下匹配所有的后代元素
            2.parent>child
            在给定的父元素下匹配所有的子元素
            3.prev+next
            匹配所有紧接在preV元素后的next元素
            4.prev~siblings
            匹配prev元素之后的所有siblings元素
     -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        /* 
        需求：
            1.选中ul下所有的的span
            2.选中ul下所有的子元素span
            3.选中class为box的下一个Li
            4.选中uL下的cLass为box的元素后面的所有兄弟元素
        */
        // 1.选中uL下所有的的span
        // $('ul span').css('background', 'yellow')
        // 2.选中uL下所有的子元素span
        // $('ul>span').css('background', 'yellow')

        // 3.选中class为box的下一个li
        // li的颜色占的是整个，说明其为一个块元素
        // $('.box+li').css('background', 'yellow')

        // 4.选中ul下的class为box的元素后面的所有兄弟元素
        $('ul .box~*').css('background', 'yellow')


    </script>
</body>

过滤选择器

在原有选择器匹配的元素中进一步进行过滤的选择器
通过一个个例子来实现即可

<body>
    <div id="div1" class="box">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br />
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two">BBBBB</li>
        <li style="display:none">我本来是隐藏的</li>
    </ul>
    <script src="./js/jquery-1.12.3.js"></script>
    <!-- 
        过滤选择器:
            - 在原有选择器匹配的元素中进一步进行过滤的选择器

    -->
    <script>
        /*
        需求：
            1.选择第一个div
            2.选择最后一个class为box的元素
            3.选择所有cLass属性不为box的div
            4.选择第二个和第三个li元素
            5.选择内容为BBBBB的li
            6.选择隐藏的li
            7.选择有title属性的li元素
            8.选择所有属性title为heLlo的Li元素
        */
        // 1.选择第一个div
        // $('div:first').css('background', 'red')

        // 2.选择最后一个class为box的元素
        // $('.box:last').css('background', 'red')

        // 3.选择所有class属性不为box的div
        // $('div:not(.box)').css('background', 'red') // 没有class属性也可以

        // 4.选择第二个和第三个li元素
        // $('li:gt(0):lt(2)').css('background', 'red') 
        /* 
            多个过滤选择器不是同时执行，而是依次执行的，
        */
        // $('li:gt(0):lt(2)').css('background', 'red') 
        // $('li:lt(3):gt(0)').css('background', 'red') 

        // 5.选择内容为BBBBB的li
        // $('li:contains("BBBBB")').css('background', 'red') 

        // 6.选择隐藏的li
        // console.log($('li:hidden').length, $('li:hidden')[0])

        // 7.选择有title属性的li元素
        // $('li[title]').css('background', 'red') 

        // 8.选择所有属性title为heLlo的li元素
        $('li[title = "hello"]').css('background', 'red') 

    </script>
</body>

常见效果1_表格隔行变色

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格隔行变色</title>
    <style>
        div,
        span,
        p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }

        #data {
            width: 600px;
        }

        #data,
        td,
        th {
            border-collapse: collapse;
            border: 1px solid #aaaaaa;
        }

        th,
        td {
            height: 28px;
        }

        #data thead {
            background-color: #333399;
            color: #ffffff;
        }

        .odd {
            background-color: #ccccff;
        }
    </style>

</head>

<body>
    <table id="data">
        <thead>
            <tr>
                <th>姓名</th>
                <th>工资</th>
                <th>入职时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tom</td>
                <td>$3500</td>
                <td>2010-10-25</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>$3400</td>
                <td>2010-12-1</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>King</td>
                <td>$5900</td>
                <td>2009-08-17</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Scott</td>
                <td>$3800</td>
                <td>2012-11-17</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Smith</td>
                <td>$3100</td>
                <td>2014-01-27</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
            <tr>
                <td>Allen</td>
                <td>$3700</td>
                <td>2011-12-05</td>
                <td><a href="javascript:void(0)">删除</a></td>
            </tr>
        </tbody>
    </table>

    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        // $('#data>tbody>tr:odd').css('background', '#ccccff')
        // $('#data>tbody>tr:odd').addClass('odd')
        $('#data>tbody>tr:odd').attr('class', 'odd')
    </script>
</body>

表单选择器

表单选择器需要使用到 : 来进行才可
通过举例子来说明

<body>
    <form>
        用户名: <input type="text" /><br>
        密 码: <input type="password" /><br>
        爱 好:
        <input type="checkbox" checked="checked" />篮球
        <input type="checkbox" " />足球
        <input type=" checkbox" checked="checked" />羽毛球 <br>
        性 别:
        <input type="radio" name="sex" value='male' />男
        <input type="radio" name="sex" value='female' />女<br>
        邮 箱: <input type="text" name="email" disabled="disabled" /><br>
        所在地:
        <select>
            <option value="1">北京</option>
            <option value="2" selected="selected">天津</option>
            <option value="3">河北</option>
        </select><br>
        <input type="submit" value="提交" />
    </form>
    <script src="./js/jquery-1.12.3.js"></script>
    <!-- 
        表单选择器：
            - 表单
            - 表单对象属性
    -->
    <!-- 
        需求：
        1.选择不可用的文本输入框
        2.显示选择爱好的个数
        3.显示选择的城市名称
    -->
    <script>
        //  1.选择不可用的文本输入框
        // $(':text:disabled').css('background', 'red')

        // 2.显示选择爱好的个数
        console.log($(':checkbox:checked').length) // 2

        // 3.显示选择的城市名称
        $(':submit').click(function () {
            /* var city = $('select>option:selected').html()
            alert(city) */
            var city = $('select').val()  // 选择的是option的value值
            alert(city) 
        })
    </script>
</body>

11-20

工具方法

    1.$.each():遍历数组或对象中的数据
    2.$.trim（）:去除字符串两边的空格
    3.$.type(obj):得到数据的类型
    4.$.isArray(obj):判断是否是数组
    5.$.isFunction(obj):判断是否是函数
    6.$.parseJS0N(json):解析行json字符串转换为js对象/数组

<body>
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        // 1.$.each(): 遍历数组或对象中的数据
        // 在对象当中，属性之间间隔使用逗号隔开
        var obj = {
            name: 'tom',
            setName: function (name) {
                this.name = name
            }
        }
        $.each(obj, function (key, value) {
            console.log(key, value)  // 键值对的形式打印出来即可
        })
        // 2.$.trim(): 去除字符串两边的空格
        
        // 3.$.type(obj): 得到数据的类型
        console.log($.type($)) // function
        // 4.$.isArray(obj): 判断是否是数组
        console.log($.isArray($('body')), $.isArray([])) // false  true
        // 5.$.isFunction(obj): 判断是否是函数
        console.log($.isFunction($)) // true
        // 6.$.parseJS0N(json): 解析行json字符串转换为js对象/数组
        var json = '{"name":"tom", "age":12}' // json对象:{}
        // json对象 ==> JS对象
        console.log($.parseJSON(json))
        json = '[{"name":"tom", "age":12}, {"name":"JACK", "age":13}]' // json数组
        // json数组 ===> JS数组
        console.log($.parseJSON(json))

        /* 
            现在一般使用
            - JSON.parse(jsonString)  json字符串 ==> js对象/数组
            - JSON.stringify(jsObj/jsArr)  js对象/数组 ===> json字符串
        */
    </script>
</body>

常见效果2_多TAB点击切换

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见效果2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tab li {
            float: left;
            list-style: none;
            width: 80px;
            height: 40px;
            line-height: 40px;
            cursor: pointer;
            text-align: center;
        }

        #container {
            position: relative;
        }

        #content1,
        #content2,
        #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }

        #tab1,
        #content1 {
            background-color: #ffcc00;
        }

        #tab2,
        #content2 {
            background-color: #ff00cc;
        }

        #tab3,
        #content3 {
            background-color: #00ccff;
        }
    </style>

</head>

<body>
    <h2>多Tab点击切换</h2>
    <ul id="tab">
        <li id="tab1" value="1">10元套餐</li>
        <li id="tab2" value="2">30元套餐</li>
        <li id="tab3" value="3">50元包月</li>
    </ul>
    <div id="container">
        <div id="content1">
            10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
        </div>
        <div id="content2" style="display: none">
            30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
        </div>
        <div id="content3" style="display: none">
            50元包月详情：<br />&nbsp;每月无限量随心打
        </div>
    </div>
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        var $contents = $('#container>div')
        // 给三个li加监听
        /* $('#tab>li').click(function () { // 隐式遍历
            // alert('----')
            // 隐藏所有内容
            $contents.css('display', 'none')
            // 显示对应的内容
            // 得到当前点击的li在兄弟中的下标，当前点击的使用this来获取dom元素
            var index = $(this).index()
            // 找到对应的内容div,并显示
            // $contents[index].style.display = 'block' 原生的 -- 推荐
            $($contents[index]).css('display', 'block') */

            var currentIndex = 0 // 当前显示的内容div的下标
            $('#tab>li').click(function () { // 隐式遍历
                // alert('----')
                // 隐藏当前已经显示的内容div，先要把当前的进行隐藏才行，然后将最近获取的进行相应更新
                $contents[currentIndex].style.display = 'none'
                // 显示对应的内容
                // 得到当前点击的li在兄弟中的下标
                var index = $(this).index()
                // 找到对应的内容div,并显示
                // $contents[index].style.display = 'block' 原生的 -- 推荐
                $($contents[index]).css('display', 'block')

                // 更新下标
                currentIndex = index
            })
    </script>
</body>

属性

操作任意属性

attr()
removeAttr()
prop()

操作class属性

addClass()
removeClass()

操作HTML代码/文本/值

html()
val()

<body>
    <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box" title="two">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br />
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>

    <input type="text" name="username" value="guiguClass" />
    <br>
    <input type="checkbox">
    <input type="checkbox">
    <br>
    <button>选中</button>
    <button>不选中</button>

    <!--
    1. 操作任意属性
       attr()
       removeAttr()
       prop()
    2. 操作class属性
       addClass()
       removeClass()
    3. 操作HTML代码/文本/值
       html()
       val()
    -->

    <script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
         需求:
         1. 读取第一个div的title属性
         2. 给所有的div设置name属性(value为atguigu)
         3. 移除所有div的title属性
         4. 给所有的div设置class='guiguClass'
         5. 给所有的div添加class='abc'
         6. 移除所有div的guiguClass的class
         7. 得到最后一个li的标签体文本
         8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
         9. 得到输入框中的value值
         10. 将输入框的值设置为atguigu
         11. 点击'全选'按钮实现全选
         12. 点击'全不选'按钮实现全不选
         */
        $(function () {
            //  1. 读取第一个div的title属性
            console.log($('div:first').attr('title')) // one
            //  2. 给所有的div设置name属性(value为atguigu)
            $('div').attr('name', 'atguigu')
            //  3. 移除所有div的title属性
            $('div').removeAttr('title') // 先找到，然后在进行移除
            //  4. 给所有的div设置class='guiguClass'
            $('div').attr('class', 'guiguClass') // 以前有的话进行覆盖即可
            //  5. 给所有的div添加class值(abc)
            $('div').addClass('abc')
            //  6. 移除所有div的guiguClass的class
            $('div').removeClass('guiguClass')
            //  7. 得到最后一个li的标签体文本
            console.log($('li:last').html()) // <span>BBBBB</span>
            //  8. 设置第一个li的标签体为"<h1>mmmmmmmmm</h1>"
            $('li:first').html('<h1>mmmmmmmmm</h1>')
            //  9. 得到输入框中的value值
            console.log($(':text').val())  // guiguclass
            //  10. 将输入框的值设置为atguigu
            $(':text').val('atguigu') // 读写合一

            /* 
                attr() - 专门操作属性值为非布尔值的属性
                prop() - 专门操作属性值为布尔值的属性
            */
            //  11. 点击'全选'按钮实现全选
            var $checkboxs = $(':checkbox')
            $('button:first').click(function () {
                $checkboxs.prop('checked', true)
            })
            // 12.点击全不选，
            var $checkboxs = $(':checkbox')
            $('button:last').click(function () {
                $checkboxs.prop('checked', false)
            })
        })
    </script>
</body>

复习

了解jQuery

是什么: What?
- 一个JS函数库: write less, do more
- 封装简化DOM操作(CRUD) / Ajax(局部刷新)
为什么用它: why?
- 强大选择器: 方便快速查找DOM元素
- 隐式遍历(迭代): 一次操作多个元素 each(), 给多个元素加监听
- 读写合一: 读数据/写数据用的是一个函数
- 链式调用: 可以通过.不断调用jQuery对象的方法
- 事件处理
- DOM操作(CUD)
- 样式操作
- 动画
- 浏览器兼容
如何使用: How?
- 引入jQuery库
  - 本地引入与CDN远程引入
  - 测试版与生产版(压缩版)
- 使用jQuery
  - 使用jQuery函数: $/jQuery
  - 使用jQuery对象: $x x x (执行$ ()得到的) $xxx其实就是一个变量名

jQuery的2把利器

jQuery函数: $/jQuery
- jQuery库存，向外暴露的就是jQuery函数, 可以直接使用
- 当成一般函数使用人: $(param)
  - param是function: 相当于window.onload = function(文档加载完成的监听)
  - param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
  - param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
  - param是标签字符串(<>): 创建标签DOM元素对象并包装为jQuery对象返回
- 当成对象使用: $.xxx
  - each(obj/arr, function(key, value){})
  - trim(str)
jQuery对象
- 包含所有匹配的n个DOM元素的伪数组对象
- 执行$()返回的就是jQuery对象
- 基本行为:
  - length/size(): 得到dom元素的个数
  - each(function(index, domEle){}): 遍历所有dom元素
  - index(): 得到当前dom元素在所有兄弟中的下标

选择器

是什么?
- 有特定语法规则(css选择器)的字符串
- 用来查找某个/些DOM元素: $(selector)
分类
- 基本
  - #id
  - tagName/* * 对标签名没有要求
  - .class
  - selector1,selector2,selector3: 并集 — 三个合起来
  - selector1selector2selector3: 交集
- 层次(至少找两个选择器)
  - 找子孙后代, 兄弟元素
  - selector1>selector2: 子元素
  - selector1 selector2: 后代元素
- 过滤
  - 在原有匹配元素中筛选出其中一些
  - :first
  - :last
  - :eq(index)
  - :lt
  - :gt
  - :odd
  - :even
  - :not(selector)
  - :hidden
  - :visible
  - [attrName]
  - [attrName=value]
- 表单(一定要加上冒号)
  - :input
  - :text
  - :checkbox
  - :radio - 单选按钮
  - :checked: 选中的

属性/文本

操作标签的属性, 标签体文本
attr(name) / attr(name, value): 读写非布尔值的标签属性
prop(name) / prop(name, value): 读写布尔值的标签属性
removeAttr(name)/removeProp(name): 删除属性
addClass(classValue): 添加class
removeClass(classValue): 移除指定class
val() / val(value): 读写标签的value
html() / html(htmlString): 读写标签体文本

css模块

该模块就是用来设置css样式及读取css的值

<body>
    <p style="color: blue;">尚硅谷的后裔</p>
    <p style="color: green;">太阳的后裔</p>

    <!--
设置css样式/读取css值
  css()
-->
    <script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
         1. 得到第一个p标签的颜色
         2. 设置所有p标签的文本颜色为red
         3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)
         */
        $(function () {
            //1. 得到第一个p标签的颜色
            console.log($('p:first').css('color'))  // rgb(0, 0, 255)
            //2. 设置所有p标签的文本颜色为red
            $('p').css('color', 'red')
            //3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px)		//对象
            $('p:eq(1)').css({
                color: '#ff0011',
                background: 'blue',
                width: 300,
                height: 30
            })

            // 使用style操作属性，需要书写四条语句，还是非常关键的
            
        })
    </script>
</body>

offset和position

获取/设置标签的位置数据
offset() - 相对页面左上角的坐标
position() - 相对于父元素左上角的坐标
需要记住的是offset里面和css一样，可以设置很多很多属性

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 20px;
        left: 10px;
        background: blue;
    }

    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        top: 50px;
        background: red;
    }

    .div3 {
        position: absolute;
        top: 250px;
    }
</style>

<body style="height: 2000px;">

    <div class="div1">
        <div class="div2">测试offset</div>
    </div>

    <div class='div3'>
        <button id="btn1">读取offset和position</button>
        <button id="btn2">设置offset</button>
    </div>

    <!--
  获取/设置标签的位置数据
    * offset(): 相对页面左上角的坐标
    * position(): 相对于父元素左上角的坐标
  -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        /*
        需求:
        1. 点击 btn1
          打印 div1 相对于页面左上角的位置
          打印 div2 相对于页面左上角的位置
          打印 div1 相对于父元素左上角的位置
          打印 div2 相对于父元素左上角的位置
        2. 点击 btn2
          设置 div2 相对于页面的左上角的位置
         */
        $('#btn1').click(function () {
            // 打印 div1 相对于页面左上角的位置
            var offset = $('.div1').offset()
            console.log(offset.left, offset.top)

            // 打印 div2 相对于页面左上角的位置
            var offset = $('.div2').offset()
            console.log(offset.left, offset.top)

            // 打印 div1 相对于父元素左上角的位置
            var position = $('.div1').position()
            console.log(position.left, position.top) // 

            // 打印 div2 相对于父元素左上角的位置
            position = $('.div2').position()
            console.log(position.left, position.top) // 0 50
        })

            // 设置offset
            /* $('#btn2').click(function () {
                $('.div2').offset({
                    left: 20,
                    top: 40
                })
            }) */
            // 通过设置offset来设置属性位置即可
        $('#btn2').click(function () {
            $('.div2').offset({
                left:50,
                top:100
            })
        })
    </script>
</body>

scroll

** scrollTop()**

读取/设置滚动条的Y坐标

$(document.body).scrollTop()+$(document.documentElement).scrollTop()

读取页面滚动条的Y坐标(兼容chrome和IE),因为兼容性问题，其中肯定有一个为0

$(‘body,html’).scrollTop(60)

滚动到指定位置(兼容chrome和IE)

<body style="height: 2000px;">
    <div style="border:1px solid black;width:100px;height:150px;overflow:auto">
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        This is some text. This is some text. This is some text. This is some text.
        his is some text.
    </div>
    <br>
    <br>
    <br>
    <button id="btn1">得到scrollTop</button>
    <button id="btn2">设置scrollTop</button>

    <!--
    1. scrollTop():
      读取/设置滚动条的Y坐标
    2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
      读取页面滚动条的Y坐标(兼容chrome和IE)
    3. $('body,html').scrollTop(60);
      滚动到指定位置(兼容chrome和IE)
    -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        /*
         需求:
         1. 得到div或页面滚动条的坐标
         2. 让div或页面的滚动条滚动到指定位置
         */
        $('#btn1').click(function () {
            // 1. 得到div或页面滚动条的坐标
            console.log($('div').scrollTop())
            console.log($('html').scrollTop() + $('body').scrollTop())
            console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()) // 兼容·IE和chrome

        })
        // 2. 让div或页面的滚动条滚动到指定位置
        $('#btn2').click(function(){
            $('div').scrollTop(200)
            $('html, dody').scrollTop(300) // 因为肯定有一个有效，所以添加逗号即可
        })

    </script>
</body>

常见效果三_回到顶部

在书写效果的时候，先把书写效果的流程给写出来，然后按照书写效果来一步一步执行即可

<head>
    <meta charset="UTF-8">
    <title>03_回到顶部</title>
    <style>
        #to_top {
            width: 30px;
            height: 40px;
            font: 14px/20px arial;
            text-align: center;
            background: #06c;
            position: fixed;
            cursor: pointer;
            color: #fff;
            left: 1250px;
            top: 500px;
        }
    </style>
</head>

<body style="height: 2000px;">

    <div id="to_top">返回顶部</div>

    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        //回到顶部， 要设置相应的点击函数，这一点还是很关键的，需要注意
        $('#to_top').click(function () {
            // 瞬间滚到顶部
            // $('html, body').scrollTop(0)

            // 希望平滑的滚动到顶部
            // 总距离
            var $page = $('html, body') // 这种写法只能用于设置
            var distance = $('html').scrollTop() + $('body').scrollTop()
            // 总时间
            var time = 500
            // 间隔时间
            var intervalTime = 50
            // 计算每次移动需要移动的距离是多少
            var itemDistance = distance / (time / intervalTime)
            // 使用循环定时器不断滚动
            var intervalId = setInterval(function () {
                distance -= itemDistance
                // 到达顶部，停止定时器
                if(distance <= 0){
                    distance = 0 // 修正
                    clearInterval(intervalId)
                }
                $page.scrollTop(distance) // 滚动的距离，最后一次滚动的距离为0
            }, intervalTime)
        })
    </script>
</body>

元素的尺寸

1、内容尺寸

height(): height
width(): width

2、内部尺寸

innerHeight(): height+padding
innerWidth(): width+padding

3. 外部尺寸

outerHeight(false/true): height+padding+border 如果是true, 加上margin
outerWidth(false/true): width+padding+border 如果是true, 加上margin

</head>
<style>
    div {
        width: 100px;
        height: 150px;
        background: red;
        padding: 10px;
        border: 10px #fbd850 solid;
        margin: 10px;
    }
</style>
</head>

<body>
    <div>div</div>

    <!--
        1. 内容尺寸
          height(): height
          width(): width
        2. 内部尺寸
          innerHeight(): height+padding
          innerWidth(): width+padding
        3. 外部尺寸
          outerHeight(false/true): height+padding+border  如果是true, 加上margin
          outerWidth(false/true): width+padding+border 如果是true, 加上margin
    -->
    <script src="./js/jquery-1.12.3.js"></script>
    <script>
        var $div = $('div')
        // 1、内容尺寸
        console.log($div.width(), $div.height()) // 100 150
        // 2、内部尺寸
        console.log($div.innerWidth(), $div.innerHeight()) // 120 170
        // 3、外部尺寸
        console.log($div.outerWidth(), $div.outerHeight()) // 140 190
        console.log($div.outerWidth(true), $div.outerHeight(true)) //160 210 

    </script>
</body>

jQuery对象的过滤

在jQuery对象中的元素对象数组中过滤出一部分元素来

1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)

<body>
    <ul>
        <li>AAAAA</li>
        <li title="hello" class="box2">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDDD</li>
        <li title="two"><span>BBBBB</span></li>
    </ul>
    <li>eeeee</li>
    <li>EEEEE</li>
    <br>

    <!--
    在jQuery对象中的元素对象数组中过滤出一部分元素来
    1. first()
    2. last()
    3. eq(index|-index)
    4. filter(selector)
    5. not(selector)
    6. has(selector)
    -->

    <script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
         需求:
         1. ul下li标签第一个
         2. ul下li标签的最后一个
         3. ul下li标签的第二个
         4. ul下li标签中title属性为hello的
         5. ul下li标签中title属性不为hello的
         6. ul下li标签中有span子标签的
         */
        $(function () {
            var $lis = $('ul>li'); // 找到ul下面所有的li
            //1. ul下li标签第一个
            // $lis.first().css('background', 'red') // 前面返回的是一个jQuery元素对象
            // $lis[0].style.background = 'red' // DOM元素对象
            //2. ul下li标签的最后一个
            // $lis.last().css('background', 'red')
            //3. ul下li标签的第二个
            // $lis.eq(1).css('background', 'red') // 调用eq() 来进行相应的匹配操作
            //4. ul下li标签中title属性为hello的
            // $lis.filter('[title=hello]').css('background', 'red')
            //5. ul下li标签中title属性不为hello的
            // $lis.not('[title=hello]').css('background', 'red')
            // $lis.not('[title=hello]').css('background', 'red')
            // $lis.filter('[title][title!=hello]').css('background', 'red')
            // $lis.filter('[title!=hello]').filter('[title]').css('background', 'red')
            // ('[title][title!=hello]')中间是交集选择器
            //6. ul下li标签中有span子标签的
            $lis.has('span').css('background', 'red') // 影响的是li
        })
    </script>
</body>

使用 .css 来设置相应的样式

jQuery对象的查找

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签

1. children(): 子标签中找
2. find() : 后代标签中找
3. parent() : 父标签
4. prevAll() : 前面所有的兄弟标签
5. nextAll() : 后面所有的兄弟标签
6. siblings() : 前后所有的兄弟标签

<body>
    <div id="div1" class="box" title="one">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br />
    <div>
        <ul>
            <span>span文本1</span>
            <li>AAAAA</li>
            <li title="hello" class="box2">BBBBB</li>
            <li class="box" id='cc'>CCCCC</li>
            <li title="hello">DDDDDD</li>
            <li title="two"><span>span文本2</span></li>
            <span>span文本3</span>
        </ul>
        <span>span文本444</span><br>
        <li>eeeee</li>
        <li>EEEEE</li>
        <br>
    </div>

    <!--
    在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签
    1. children(): 子标签中找
    2. find() : 后代标签中找
    3. parent() : 父标签
    4. prevAll() : 前面所有的兄弟标签
    5. nextAll() : 后面所有的兄弟标签
    6. siblings() : 前后所有的兄弟标签
    -->
    <script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
         需求:
         1. ul标签的第2个span子标签
         2. ul标签的第2个span后代标签
         3. ul标签的父标签
         4. id为cc的li标签的前面的所有li标签
         5. id为cc的li标签的所有兄弟li标签
         */

        $(function () {
            var $ul = $('ul')
            /* 
                已经进行的是查找操作
            */
            // 1. ul标签的第2个span子标签
            // $ul.children('span:eq(1)').css('background', 'red')
            // $ul.children('span:eq(1)').css('background', 'red') // 进行一个标签的代码识别即可
            // 2. ul标签的第2个span后代标签
            // $ul.find('span:eq(1)').css('background', 'red')
            // 3. ul标签的父标签
            // $ul.parent().css('background', 'red')
            // 4. id为cc的li标签的前面的所有li标签
            var $li = $('#cc')
            // $li.prevAll('li').css('background', 'red')
            // $ul.children('#cc').prevAll('li').css('background', 'red')
            // 5. id为cc的li标签的所有兄弟li标签
            $li.siblings('li').css('background', 'red')
            // $ul.children('#cc').siblings('li').css('background', 'red')
        })

    </script>
</body>

爱好选择器_练习

<body>

    <form>
        你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

        <br />
        <input type="checkbox" name="items" value="足球" />足球
        <input type="checkbox" name="items" value="篮球" />篮球
        <input type="checkbox" name="items" value="羽毛球" />羽毛球
        <input type="checkbox" name="items" value="乒乓球" />乒乓球
        <br />
        <input type="button" id="checkedAllBtn" value="全　选" />
        <input type="button" id="checkedNoBtn" value="全不选" />
        <input type="button" id="checkedRevBtn" value="反　选" />
        <input type="button" id="sendBtn" value="提　交" />
    </form>

    <script src="./js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        /*
         功能说明:
         1. 点击'全选': 选中所有爱好
         2. 点击'全不选': 所有爱好都不勾选
         3. 点击'反选': 改变所有爱好的勾选状态
         4. 点击'全选/全不选': 选中所有爱好, 或者全不选中
         5. 点击某个爱好时, 必要时更新'全选/全不选'的选中状态
         6. 点击'提交': 提示所有勾选的爱好
         */
        $(function () {
            var $checkedAllBox = $('#checkedAllBox')
            // jQuery对象最好加上 $符号
            var $items = $(':checkbox[name=items]')
            // 1. 点击'全选': 选中所有爱好
            // 关于id选择器的话，千万不要忘记选择#
            $('#checkedAllBtn').click(function () {
                $items.prop('checked', true)
                $checkedAllBox.prop('checked', true)
            })

            // 2. 点击'全不选': 所有爱好都不勾选
            $('#checkedNoBtn').click(function () {
                $items.prop('checked', false)
                $checkedAllBox.prop('checked', false)
            })

            // 3. 点击'反选': 改变所有爱好的勾选状态
            $('#checkedRevBtn').click(function () {
                $items.each(function () {
                    this.checked = !this.checked
                })
                $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length === 0)
            })

            // 4、点击提交，提示所有勾选的爱好
            $('#sendBtn').click(function () {
                $items.filter(':checked').each(function () {
                    alert(this.value)
                })
            })

            // 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中
            $checkedAllBox.click(function () {
                $items.prop('checked', this.checked) // this是dom对象
            })

            // 6、点击某个爱好时, 必要时更新'全选/全不选'的选中状态
            $items.click(function(){
                $checkedAllBox.prop('checked', $items.filter(':not(:checked)').length === 0)
            })
        })
    </script>
</body>

文档_增删改

  1. 添加/替换元素
    * append(content)
      向当前匹配的所有元素内部的最后插入指定内容
    * prepend(content)
      向当前匹配的所有元素内部的最前面插入指定内容
    * before(content)
      将指定内容插入到当前所有匹配元素的前面
    * after(content)
      将指定内容插入到当前所有匹配元素的后面替换节点
    * replaceWith(content)
      用指定内容替换所有匹配的标签删除节点
  2. 删除元素
    * empty()
      删除所有匹配元素的子元素
    * remove()
      删除所有匹配的元素

<style type="text/css">
    * {
        margin: 0px;
    }

    .div1 {
        position: absolute;
        width: 200px;
        height: 200px;
        top: 20px;
        left: 10px;
        background: blue;
    }

    .div2 {
        position: absolute;
        width: 100px;
        height: 100px;
        /*top: 50px;*/
        background: red;
    }

    .div3 {
        position: absolute;
        top: 250px;
    }
</style>

<body>
    <ul id="ul1">
        <li>AAAAA</li>

        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>

        <li title="hello">DDDDDD</li>
        <li title="two">EEEEE</li>
        <li>FFFFF</li>
    </ul>
    <br>
    <br>
    <ul id="ul2">
        <li>aaa</li>
        <li title="hello">bbb</li>
        <li class="box">ccc</li>
        <li title="hello">ddd</li>
        <li title="two">eee</li>
    </ul>

    <!--
      1. 添加/替换元素
        * append(content)
          向当前匹配的所有元素内部的最后插入指定内容
        * prepend(content)
          向当前匹配的所有元素内部的最前面插入指定内容
        * before(content)
          将指定内容插入到当前所有匹配元素的前面
        * after(content)
          将指定内容插入到当前所有匹配元素的后面替换节点
        * replaceWith(content)
          用指定内容替换所有匹配的标签删除节点
      2. 删除元素
        * empty()
          删除所有匹配元素的子元素
        * remove()
          删除所有匹配的元素
-->
    <script src="./js/jquery-1.12.3.js" type="text/javascript"></script>
    <script type="text/javascript">
        /*
         需求:
         1. 向id为ul1的ul下添加一个span(最后)
         2. 向id为ul1的ul下添加一个span(最前)
         3. 在id为ul1的ul下的li(title为hello)的前面添加span
         4. 在id为ul1的ul下的li(title为hello)的后面添加span
         5. 将在id为ul2的ul下的li(title为hello)全部替换为p
         6. 移除id为ul2的ul下的所有li
         */
        $(function () {
            // 1. 向id为ul1的ul下添加一个span(最后)
            var $ul1 = $('#ul1')
            // $ul1.append('<span>append添加的span</span>')
            $('<span>appendTo添加的span</span>').appendTo($ul1)

            // 2. 向id为ul1的ul下添加一个span(最前)
            // $ul1.prepend('<span>prepend添加的span</span>')
            $('<span>prependTo添加的span</span>').prependTo($ul1) 

            // 3. 在id为ul1的ul下的li(title为hello)的前面添加span
            $ul1.children('li[title=hello]').before('<span>before()添加的span</span>')

            // 4. 在id为ul1的ul下的li(title为hello)的后面添加span
            $ul1.children('li[title=hello]').after('<span>before()添加的span</span>')

            // 5. 将在id为ul2的ul下的li(title为hello)全部替换为p
            $('#ul2>li[title=hello]').replaceWith('<p>replaceAll()替换的p</p>')

            // 6. 移除id为ul2的ul下的所有li
            // $('#ul2').empty() // 全部干掉 <p>标签也会被干掉
            $('#ul2>li').remove() 

            // 查询的话就是前面讲到的，选择器查询

        });
    </script>
</body>

添加删除记录

之前做过的练习，使用jQuery来重写

<body>

    <table id="employeeTable">
        <tbody>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Salary</th>
                <th>&nbsp;</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>tom@tom.com</td>
                <td>5000</td>
                <td><a href="deleteEmp?id=001">Delete</a></td>
            </tr>
            <tr>
                <td>Jerry</td>
                <td>jerry@sohu.com</td>
                <td>8000</td>
                <td><a href="deleteEmp?id=002">Delete</a></td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>bob@tom.com</td>
                <td>10000</td>
                <td><a href="deleteEmp?id=003">Delete</a></td>
            </tr>
        </tbody>

    </table>

    <div id="formDiv">

        <h4>添加新员工</h4>

        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>

    <script src="./js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /*
         功能说明:
         1. 点击'Submit', 根据输入的信息在表单中生成一行员工信息
         2. 点击Delete链接, 提示删除当前行信息, 点击确定后删除信息
         技术要点:
         1. DOM查询
         2. 绑定事件监听
         3. DOM增删改
         4. 取消事件的默认行为
         */

        /* 
           添加，删除
        */
        $(function () {
            $('#addEmpButton').click(function () {
                // 收集输入的数据
                var $empName = $('#empName')
                var $email = $('#email')
                var $salary = $('#salary')

                // 在获取相应的值
                var empName = $empName.val()
                var email = $email.val()
                var salary = $salary.val()

                // 生成对应的<tr>标签结构，并插入#employeeTable的tbody中
                /* 
                    犯了一个很严重的错误就是：在书写代码标签名的时候，结束标签别忘了加 / 
                */
                $('<tr></tr>')
                    .append('<td>' + empName + '</td>') // 拼串
                    .append('<td>' + email + '</td>')
                    .append('<td>' + salary + '</td>')
                    .append('<td><a href="deleteEmp?id="' + Date.now() + '>Delete</a></td>')
                    .appendTo('#employeeTable>tbody')
                    .find('a')
                    .click(clickDelete)
                // find是找的后代元素

                // console.log()


                // 清除输入
                $empName = $('')
                $email = $('')
                $salary = $('')
            })
            // 给所有删除链接绑定点击监听
            $('#employeeTable a').click(clickDelete)
            function clickDelete() {
                // 提示, this是dom对象，但是我们可以$() 包装成jQuery对象
                var $tr = $(this).parent().parent()
                var name = $tr.children(':first').html()
                if (confirm('确定删除' + name + '吗')) {
                    $tr.remove()
                }
                return false
            }
        })


    </script>
</body>

不爱搞学术的蜡笔小新

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

01-10了解jQueryjQuery是一个javaScript库jQuery极大简化了JavaScrip编程初识jQuery例子：需求：点击"确定" 按钮，提示输入的值方式一：使用原生DOM实现<script> // 使用原生dom实现 window.onload = function () { var btn1 = document.getElementById('btn1') btn1.onclick = function
复制链接

扫一扫