jQuery

jquery

jquery简介

jquery库可以通过一行简单的标记被添加到网页中
什么是jquery?
- jquery是一个JavaSript函数库
- jquery是一个轻量级的写的少，做的多的JavaScript库
- jquery包含以下功能：
  - HTML元素选取
  - HTML元素操作
  - CSS操作
  - HTML时间函数
  - JavaScript特效和动画
  - HTML DOM遍历和修改
  - AJAX
  - Utilities
  - 除此之外，jquery还提供了大量的插件

jquery语法

通过jquery，可以选取（查询，query）HTML元素，并对它们进行操作（action)
基础语法：$(selector).action()
文档就绪事件
- $(document).ready(function() { // jquery代码})
- $(function() { // jquery代码}) (简洁写法，与以上效果相同)

jquery选择器

jquery选择器允许您对HTML元素或单个元素进行操作
jquery选择器基于元素的id、类、类型、属性、属性值等查找（或选择)HTML元素，它基于已经存在的CSS选择器，除此之外，它还有一些自定义的选择器
jquery中所有选择器都以美元符号开头：$()
jquery选择器
- $('elementName')
- $('#identityName')
- $('.className')
- $('*') 选取所有元素
- $(this) 选取当前HTML元素
- $('p.intro') 选取class为intro的p元素
- $('ul li:first') 选取第一个ul元素的第一个li元素
- $('ul li:first-child') 选取每个ul元素的第一个li元素
- $('[href]') 选取带有href属性的元素
- $('a[target='blank']') 选取所有target属性值等于’blank'的元素
- $('a[target!='blank']') 选取所有target属性值不等于’blank'的元素
- $(':button') 选取所有type='button'的input元素和button元素
- $('tr.even') 选取偶数位置的tr元素
- $('tr.odd) 选取奇数位置的tr元素
- 更多详情见：jQuery 选择器 | 菜鸟教程 (runoob.com)
独立文件中使用jquery函数

jquery事件

jquery是为事件处理特别设计的
什么是事件？
- 页面对不同访问者的响应叫做时间
- 事件处理程序指的是当HTML中发生某些事件时所调用的方法
- 在实践中经常使用术语触发（或激发）
常见的DOM事件

鼠标事件键盘事件表单事件文档/窗口事件

click keypress submit load

dbclick keyup change resize

mouseenter keydown focus scroll

mouseleave blur unload

hover
jquery事件方法语法
- 在jquery中，大多数DOM事件都有一个等效的jquery方法
常见的jquery事件方法
- $(document).ready() 允许我们在文档加载完后执行函数
- click() 当按钮点击事件被触发时会调用一个函数，该函数在用户点击HTML元素执行
- dbclick() 当双击元素时，会触发dbclick事件
- mouseenter() 当鼠标指针穿过元素时，会发生mouseenter事件
- mouseleave() 当鼠标指针离开元素时，会发生mouseleave事件
- mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件
- mouseup() 当在元素上松开鼠标按钮时，会发生mouseuo事件
- hover() 模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter)，当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
- focus() 当元素获得焦点时，发生focus事件，当通过鼠标点击选中元素或tab键定位到元素时，该元素就会获得焦点
- blur() 当元素失去焦点时，发生blur事件
- 更多详情见：jQuery 参考手册 - 事件 (w3school.com.cn)

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dbclick	keyup	change	resize
mouseenter	keydown	focus	scroll
mouseleave		blur	unload
hover

jquery效果

隐藏、显示、切换、滑动、淡入淡出、以及动画等

jquery效果--隐藏和显示

hide()和show()
- 通过jquery，您可以使用hide()和show()方法来隐藏和显示HTML元素
- $(selector).hide(speed,callback);
- $(selector).show(speed,callback);
  - 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
toggle()
- 通过jquery，您可以使用toggle()方法来切换hide()和show()方法
- $(selector).toggle(speed,callback);
  - 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
</head>

<body>
    <script>
        // jquery效果
        $(function() {
            // 隐藏和显示
            $('#show').on('click', function() {
                $('p').show('slow', function() {
                    alert('p显示了')
                })
            })
            $('#hide').on('click', function() {
                $('p').hide('fast', function() {
                    alert('p隐藏了')
                })
            })
            $('#toggle').on('click', function() {
                $('p').toggle('3000', function() {
                    alert('p切换了')
                })
            })
        })
    </script>

    <p style="display: none;">我是一段文本</p>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="toggle">切换</button>
</body>

</html>

jquery效果--淡入淡出

fadeIn()
- jquery fadeIn()用于淡入已隐藏的元素
- $(selector).fadeIn(speed,callback);
  - 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeOut()
- jquery fadeOut()用于淡出已隐藏的元素
- $(selector).fadeOut(speed,callback);
  - 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeToggle()
- jquery fadeToggle()方法可以在fadeIn()与fadeOut()方法之间进行切换
- $(selector).fadeToggle(speed,callback);
  - 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo()
- jquery fadeTo()允许渐变为给定的不透明度（值介于0与1之间）
- $(selector).fadeTo(speed,opacity,callback);
  - 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
  - 可选的 callback 参数是 fading 完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        #container {
            width: 50%;
            height: 200px;
            margin: auto;
        }
        
        #button {
            width: 100%;
            height: 30%;
            background-color: aquamarine;
            border: 2px solid grey;
            text-align: center;
        }
        
        #panel {
            width: 100%;
            height: 70%;
            background-color: aquamarine;
            border: 2px solid grey;
            text-align: center;
        }
    </style>
</head>

<body>
    <script>
        // jquery效果
        // 淡入淡出
        $(function() {
            var flag = 0; // 隐藏标志
            // 写法一
            $('#button').on('click', function() {
                if (flag === 0) {
                    $('#panel').fadeIn('slow', function() {
                        alert('请注意，我要出来了')
                    })
                    flag = 1;
                } else {
                    $('#panel').fadeOut('fast', function() {
                        alert('请注意，我要藏起来了')
                    })
                    flag = 0;
                }
            })

            // 写法二
            $('#button').on('click', function() {
                $('#panel').fadeToggle('3000', function() {
                    alert('请注意，我要切换了')
                })
            })

            // 写法三
            $('#button').on('click', function() {
                if (flag === 0) {
                    $('#panel').fadeTo('slow', 1, function() {
                        alert('请注意，我要渐变了')
                    })
                    flag = 1;
                } else {
                    $('#panel').fadeOut('fast', 0, function() {
                        alert('请注意，我要渐变了')
                    })
                    flag = 0;
                }
            })
        })
    </script>

    <div id="container">
        <div id="button">点击展示淡入淡出面板</div>
        <div id="panel" style="display: none;">因为时间是宝贵的，我们提供快捷方便的学习方法。<br /> 在菜鸟教程,你可以学习需要的知识。</div>
    </div>
</body>

</html>

jquery效果--滑动

slideDown()用于向下滑动元素
- $(selector).slideDown(speed,callback);
  - 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是滑动完成后所执行的函数名称。
slideUp()用于向上滑动元素
- $(selector).slideUp(speed,callback);
  - 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是滑动完成后所执行的函数名称。
slideToggle()可以在slideDown()和slideUp()方法之间进行切换
- $(selector).slideToggle(speed,callback);
  - 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是滑动完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        #container {
            width: 50%;
            height: 200px;
            margin: auto;
        }
        
        #button {
            width: 100%;
            height: 30%;
            background-color: aquamarine;
            border: 2px solid grey;
            text-align: center;
        }
        
        #panel {
            width: 100%;
            height: 70%;
            background-color: aquamarine;
            border: 2px solid grey;
            text-align: center;
        }
    </style>
</head>

<body>
    <script>
        // jquery效果
        // 滑动
        $(function() {
            // 写法一
            var flag = 0 // 隐藏标志
            $('#button').on('click', function() {
                if (flag === 0) {
                    $('#panel').slideDown('slow', function() {
                        alert('注意了，我向下滑动了')
                    })
                    flag = 1;
                } else {
                    $('#panel').slideUp('fase', function() {
                        alert('注意了，我向上滑动了')
                    })
                    flag = 0;
                }
            })

            // 写法二
            $('#button').on('click', function() {
                $('#panel').slideToggle('3000', function() {
                    alert('注意了，我滑动了')
                })
            })
        })
    </script>

    <div id="container">
        <div id="button">点击隐藏/显示面板</div>
        <div id="panel" style="display: none;">一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。<br /> 在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。</div>
    </div>
</body>

</html>

jquery效果--动画

jQuery animate() 方法用于创建自定义动画。
- $(selector).animate({params},speed,callback);
  - 必需的 params 参数定义形成动画的 CSS 属性。
  - 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
  - 可选的 callback 参数是动画完成后所执行的函数名称。
jQuery stop()用于停止动画或效果，在它们完成之前。
- stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
- $(selector).stop(stopAll,goToEnd);
  - 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
  - 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

jquery--Callback方法

Callback函数在当前动画100%完成之后执行
同步异步

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
</head>

<body>
    <script>
        // jquery
        // Callback 在当前动画100%完成之后执行


        $(function() {
            // 1.
            var fn1 = function() {
                $('p').hide('slow', function() {
                    alert('段落现在被隐藏了')
                })
            }
            $('#button1').on('click', fn1)

            // 2.
            function fn2() {
                $('#p').hide('fast')
                alert('段落现在被隐藏了')
            }
            $('#button2').on('click', fn2)
        })
    </script>

    <div id="container">
        <p id="p">我是一段文本</p>
        <button id="button1">Callback1</button>
        <button id="button2">Callback2</button>
    </div>
</body>

</html>

jquery--链（Chaining）

通过jquery，我们可以把动作/方法链接在一起
Chaining允许我们在一条语句中运行多个jquery方法（在相同的元素上）
如需链接一个动作，只需要简单地把该动作追加到之前的动作上
如果需要，我们也可以添加多个方法的调用
当进行链接时，代码会变得很长，不过，jquery语法不是很严格，可以按照希望的格式来写，包含换行和缩进，jquery会抛掉多余的空格，并当成一行长代码来执行代码行

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
</head>

<body>
    <script>
        // jquery
        // Chaining
        $(function() {
            $('#button').on('click', function() {
                // $('#p').slideUp('fast').css('color', 'red').slideDown('slow')
                $('#p').slideUp('fast')
                    .css('color', 'red')
                    .slideDown('3000')
            })
        })
    </script>

    <div id="container">
        <p id="p">我是一段文本</p>
        <button id="button">Chaining</button>
    </div>
</body>

</html>

jqueryHTML

jquery--获取和设置内容和属性

jquery拥有可操作HTML元素和属性的强大方法
获得和设置内容
- text()设置或返回所选元素的文本内容
- html()设置或返回所选元素的内容（包括HTML标签）
- val()设置或返回表单字段的值
- 回调函数
  - i被选元素列表中当前元素的下标
  - origText原始（旧的）值
获取属性和设置
- attr()用于获取自定义属性值
- prop()用于获取固有属性值
- 回调函数
  - i被选元素列表中当前元素的下标
  - origValue原始（旧的）值

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
</head>

<body>
    <script>
        // jquery
        // 获取内容和属性
        $(function() {
            // 1.text()
            $('#button1').on('click', function() {
                alert('Text:' + $('#text').text())
            })

            // 2.html()
            $('#button2').on('click', function() {
                alert('html:' + $('#html').html())
            })

            // 3.val()
            $('#button3').on('click', function() {
                alert('val:' + $('#val').val())
            })

            // 4.attr()  适用于HTML元素自定义DOM属性
            // 4.1 如果没有相应的属性，返回值是undefined
            // 4.2 如果有相应的属性，返回指定的属性值
            $('#button4').on('click', function() {
                alert('attr:' + $('#a').attr('href'))
            })

            // 5.prop() 适用于HTML元素固有属性
            // 5.1 如果没有相应的属性，返回值是空字符串
            // 5.2 如果有相应的属性，返回指定的属性值
            $('#button5').on('click', function() {
                alert('prop:' + $('#a').attr('data-id'))
            })
        })
    </script>

    <div id="container">
        <p id="text">我是一段<b>文本</b></p>
        <p id="html">我是一段<b>文本</b></p>
        <input type="text" id="val" placeholder="请输入用户名">
        <a href="#" data-id="0" id="a"></a>
        <button id="button1">text()</button>
        <button id="button2">html()</button>
        <button id="button3">val()</button>
        <button id="button4">attr()</button>
        <button id="button5">prop()</button>
    </div>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
</head>

<body>
    <script>
        // juqery
        // 设置内容和属性
        $(function() {
            // 1. 传参
            // text()
            $('#button1').on('click', function() {
                $('#text').text('我是另一段<b>文本</b>')
            })

            // html()
            $('#button2').on('click', function() {
                $('#html').html('我是另一段<b>文本</b>')
            })

            // val()
            $('#button3').on('click', function() {
                $('#val').val('zhangsan')
            })

            // attr()
            // 设置/改变多个属性值时，采用JSON语法中的对象模式传参
            $('#button4').on('click', function() {
                $('#a').attr('data-id', 1)
            })

            // prop()
            // 设置/改变多个属性值时，采用JSON语法中的对象模式传参
            $('#button5').on('click', function() {
                $('#a').attr('href', 'http://www.runoob.com')
            })

            // 2.回调函数
            // text()、html()、val()的回调函数
            $('#button6').on('click', function() {
                $('#html').html(function(i, origText) {
                    return '旧文本: ' + origText + ' 新文本: Hello world! (index: ' + i + ')'
                })
            })

            // attr()、prop()
            $('#button7').on('click', function() {
                $('#a').prop('href', function(i, origValue) {
                    return origValue + '/jquery'
                })
            })
        })
    </script>

    <div id="container">
        <p id="text">我是一段文本</p>
        <p id="html">我是一段文本</p>
        <input type="text" id="val" placeholder="请输入用户名">
        <a href="#" data-id="0" id="a">链接</a>
        <button id="button1">text()</button>
        <button id="button2">html()</button>
        <button id="button3">val()</button>
        <button id="button4">attr()</button>
        <button id="button5">prop()</button>
        <button id="button6">html()回调函数</button>
        <button id="button7">prop()回调函数</button>
    </div>
</body>

</html>

jquery--添加元素

通过jquery，可以很容易地添加新元素/内容
添加新的HTML内容
- 被选元素内部
  - append()在被选元素的结尾插入内容
  - prepend()在被选元素的开头插入内容
- 被选元素外部
  - after()在被选元素之后插入内容
  - before()在被选元素之前插入内容

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
</head>

<body>
    <script>
        // jqeruy
        // 添加元素
        $(function() {
            // 元素内部
            // append()
            $('#button1').on('click', function() {
                $('#ul').append('追加文本').append('<li>追加文本</li>')
            })

            //prepend()
            $('#button2').on('click', function() {
                $('#ul').prepend('追加文本').prepend('<li>追加文本</li>')
            })

            // 元素外部
            // after()
            $('#button3').on('click', function() {
                $('#ul').after('追加文本').after('<b>追加文本</b>')
            })

            //prepend()
            $('#button4').on('click', function() {
                $('#ul').before('追加文本').before('<b>追加文本</b>')
            })

            // 通过text/HTML、jQuery或者JavaScript/DOM来创建元素
            // append()、prepend()、after()、before()
            // 参数可以是数组...
            function appendText() {
                var txt1 = '<b>追加文本</b>'
                var txt2 = $('<b></b>').text('追加文本')
                var txt3 = document.createElement('p')
                txt3.innerText = '追加文本'
                $('body').append(txt1, txt2, txt3)
            }

            appendText()
        })
    </script>

    <ul id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <button id="button1">append</button>
    <button id="button2">prepend</button>
    <button id="button3">after</button>
    <button id="button4">before</button>
</body>

</html>

jquery--删除元素

通过jquery，可以很容易地删除已有的HTML元素
删除元素和内容
- remove()删除被选元素及其子元素
  - 该方法可以接收一个参数，允许对被删除的元素进行过滤
  - 该参数可以是任何jquery选择器的语法
- empty()从被选元素中删除子元素

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        #container {
            width: 300px;
            height: 300px;
            background-color: yellowgreen;
            border: 1px solid black;
        }
        
        .big {
            font-size: larger;
        }
    </style>
</head>

<body>
    <script>
        // jquery
        // 删除元素
        $(function() {
            // remove()
            $('#button1').on('click', function() {
                $('#container').remove()
            })

            // empty()
            $('#button2').on('click', function() {
                $('#container').empty()
            })


            // 过滤被删除的元素
            // remove()过滤器删除时，过滤器中的条件只能作用于同级，而不能作用于子级
            // remove()
            $('#button3').on('click', function() {
                $('#container').remove('.big')
            })

            // empty()
            $('#button4').on('click', function() {
                $('#container').empty('.big')
            })
        })
    </script>

    <div id="container" class="big">
        这是div中的文本
        <p id="p1">这是div中的p元素内的文本</p>
        <p id="p2">这是div中的p元素内的文本</p>
    </div>

    <div id="container">
        这是div中的文本
        <p id="p1" class="big">这是div中的p元素内的文本</p>
        <p id="p2" class="big">这是div中的p元素内的文本</p>
    </div>

    <button id="button1">remove</button>
    <button id="button2">empty</button>
    <button id="button3">remove</button>
    <button id="button4">empty</button>
</body>

</html>

jquery--获取并设置CSS类

通过jquery，可以很容易地对CSS元素进行操作
获取并设置CSS类
- addClass()向被选元素添加一个或多个类
- removeClass()从被选元素删除一个或多个类
- toggleClass()对被选元素进行添加/删除类的切换操作
- css()设置或返回样式属性

jquery--css()方法

css()方法设置或返回被选元素的一个或多个样式属性
- 返回CSS属性
- 设置CSS属性
- 设置多个CSS属性

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        .important {
            font-size: larger;
        }
        
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <script>
        // jquery
        $(function() {
            // 获取并设置CSS类
            // 方法一
            // 标志
            var flag = 0 // 无CSS类状态
            $('#button1').on('click', function() {
                if (flag === 0) {
                    $('#p').addClass('important blue')
                    flag++
                } else {
                    $('#p').removeClass('important blue')
                    flag--
                }
            })

            // 方法二
            $('#button2').on('click', function() {
                $('#p').toggleClass('important blue')
            })

            // 返回CSS属性
            $('#button3').on('click', function() {
                // 一个
                alert($('#p').css('font-size'))
                // 多个
                console.log($('#p').css(['font-size', 'color']));
            })

            // 设置CSS属性
            // 设置多个属性时，使用JSON语法中地对象模式
            $('#button4').on('click', function() {
                $('#p').css('font-size', '64px')
            })

        })
    </script>

    <div id="container">
        <p id="p">通过jquery，我们可以很容易地对进行CSS元素进行操作</p>
        <button id="button1">切换CSS类1</button>
        <button id="button2">切换CSS类2</button>
        <button id="button3">返回CSS属性</button>
        <button id="button4">设置CSS属性</button>
    </div>
</body>

</html>

jquery--尺寸

通过jquery，很容易处理元素和浏览器窗口的尺寸
jquery提供多个处理尺寸的重要方
- width()设置和返回元素的宽度（不包括内边距、边框或外边距）
- height()设置和返回元素的高度（不包括内边距、边框或外边距）
- innerWidth()返回元素的宽度（包括内边距）
- innerHeight()返回元素的高度（包括内边距）
- outerWidth()返回元素的宽度（包括内边距和边框）
- outerHeight()返回元素的高度（包括内边距和边框）

jquery遍历

什么是jquery遍历？
- jquery遍历，意为移动，用于根据其相对于其他元素地关系来查找（或选取）HTML元素，以某项选择开始，并沿着这个选择移动，直到抵达您期望地元素位置
遍历DOM
- jquery提供了多种遍历DOM的方法
- 遍历方法中最大的种类是树遍历（tree-traversal）

jquery遍历--祖先

通过jquery，您能够向上遍历DOM树，以查找元素的祖先
向上遍历DOM树
- parent()返回被选元素的直接父元素
- parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素html
- parentsUntil()返回介于两个给定元素之间的所有祖先元素

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        #gp,
        #father,
        #son {
            margin: 4px;
            padding: 4px;
        }
        
        #son {
            display: block;
        }
        
        .switch {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <script>
        // jquery
        // 遍历
        $(function() {
            // parent()
            $('#button1').on('click', function() {
                $('#son').parent().toggleClass('switch')
            })

            // parents()
            $('#button2').on('click', function() {
                $('#son').parents().toggleClass('switch')
            })

            // parentsUntil() 给定元素之间的所有祖辈元素
            $('#button3').on('click', function() {
                $('#son').parentsUntil('#gp').toggleClass('switch')
            })
        })
    </script>

    <div id="gp">gp
        <p id="father">father
            <span id="son">son</span>
        </p>
    </div>

    <button id="button1">parent</button>
    <button id="button2">parents</button>
    <button id="button3">parentsUntil</button>
</body>

</html>

jquery遍历--后代

通过jquery，能够向下遍历DOM树，以查找元素的后代
向下遍历DOM树
- children()返回所有直接子元素
- find()返回被选元素的后代元素，一路向下一直到最后一个子代

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        #gp,
        #father,
        #son {
            margin: 4px;
            padding: 4px;
        }
        
        #son {
            display: block;
        }
        
        .switch {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <script>
        // jquery
        // 遍历
        $(function() {
            // children()
            $('#button1').on('click', function() {
                $('#gp').children().toggleClass('switch')
            })

            // find()
            $('#button2').on('click', function() {
                $("#gp").find().toggleClass('switch');
            })

        })
    </script>

    <div id="gp">gp
        <p id="fahter">fahter
            <span id="son">son
            </span>
        </p>
    </div>

    <button id="button1">children</button>
    <button id="button2">find</button>
</body>

</html>

jquery遍历--同胞（siblings)

通过jquery，能够在DOM树中遍历元素的同胞元素
在DOM树中水平遍历
- sibings()返回被选元素的所有同胞元素
- next()返回被选元素的下一个同胞元素
- nextAll()返回被选元素的所有跟随的同胞元素
- nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
- prev()回被选元素的上一个同胞元素
- prevAll()返回被选元素的所有之前的同胞元素
- prevUntil()返回介于两个给定参数之间的所有之前的同胞元素

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        #gp,
        #father,
        #son {
            margin: 4px;
            padding: 4px;
        }
        
        #son {
            display: block;
        }
        
        .switch {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <script>
        // jquery
        // 遍历
        // siblings()
        $(function() {
            $('#button').on('click', function() {
                $('#son').siblings().toggleClass('switch')
            })
        })
    </script>

    <div id="gp">gp
        <p id="father">father
            <span id="son">son</span>
            <span id="son">son</span>
            <span id="son">son</span>
            <span id="son">son</span>
        </p>
    </div>

    <button id="button">siblings</button>
</body>

</html>

jquery遍历-过滤

在DOM树中遍历，无论是祖先（向上）、后代（向下）还是同胞（水平），方法都允许给定可选参数，使用可选参数可以用来过滤对元素的搜索
缩小搜索元素的范围
- 基于一组元素中的位置来选择一个特定的元素
- first()返回被选元素的首个元素
- last()返回被选元素的最后一个元素
- eq()返回被选元素中带有指定索引号的元素
- filter()规定一个标准，不匹配这个标准的元素会被从集合删除，匹配的元素会返回
- not()返回不匹配标准的所有元素

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
    <style>
        #gp,
        #father,
        #son,
        #sonf,
        #sonn {
            margin: 4px;
            padding: 4px;
        }
        
        #son,
        #sonf,
        #sonn {
            display: block;
        }
        
        .switch {
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <script>
        // jquery
        // 遍历
        // 过滤
        $(function() {
            // first()
            $('#button1').on('click', function() {
                $('#son').siblings().first().toggleClass('switch')
            })

            // last()
            $('#button2').on('click', function() {
                $('#son').siblings().last().toggleClass('switch')
            })

            // eq()
            $('#button3').on('click', function() {
                $('#son').siblings().eq(2).toggleClass('switch')
            })

            // filter()
            $('#button4').on('click', function() {
                $('#son').siblings().filter('#sonf').toggleClass('switch')
            })

            // not()
            $('#button5').on('click', function() {
                $('#son').siblings().not('#sonn').toggleClass('switch')
            })

            // 参数
            $('#button6').on('click', function() {
                $('#son').siblings('#son').toggleClass('switch')
            })
        })
    </script>

    <div id="gp">gp
        <p id="father">father
            <span id="son">son</span>
            <span id="son">son</span>
            <span id="son">son</span>
            <span id="son">son</span>
            <span id="sonf">sonf</span>
            <span id="sonn">sonn</span>
        </p>
    </div>

    <button id="button1">first</button>
    <button id="button2">last</button>
    <button id="button3">eq</button>
    <button id="button4">filter</button>
    <button id="button5">not</button>
    <button id="button6">参数</button>
</body>

</html>

jquery Ajax

Ajax是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分页面的更新
什么是Ajax？
- AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）
- 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
关于jquery与Ajax
- jquery提供了多个与Ajax有关的方法
- 通过jqueryAjax方法，您能够使用HTTP Get和HTTP Post从远程服务器请求文本、HTML、XML或JSON，同时，能够把这些外部数据直接载入网页的被选元素中
如果没有jquery，Ajax编程还是有些难度的
- 编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能
jQuery 参考手册 - Ajax (w3school.com.cn)

jquery--Ajax load()

jquery load()方法是简单但强大的Ajax方法，从服务器加载数据，并把返回的数据放入被选元素中
语法：$(selectop).load(URL,data,callback)
- 必需的URL参数规定希望加载的URL
- 可选的data参数规定与请求一同发送的查询字符串键/值对集合
- 可选的callback参数是load()方法完成后执行的函数名称
  - responseTxt 包含调用成功时的结果内容
  - statusTxt 包含调用的状态
  - xhr 包含XMLHttpRequest对象

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="jquery-2.0.0.min.js"></script>
</head>

<body>
    <script>
        // jqueryAjax
        // load()
        $(function() {
            $('#button').on('click', function() {
                $('#container').load('demo_test.txt', function(responseTxt, statusTxt, xhr) {
                    alert(statusTxt)
                    if (statusTxt === 'success') {
                        alert('加载成功' + '\n' + responseTxt)
                    } else if (statusTxt === 'error') {
                        alert(xhr.status, xhr.statusTxt)
                    }
                })
            })
        })
    </script>

    <div id="container">我是一段文本</div>
    <button id="button">load</button>
</body>

</html>

jquery--Ajax Get()/Post()

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
- Get 从指定的资源请求数据
  - GET 方法可能返回缓存数据
- Post 向指定的资源提交要处理的数据
  - POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
HTTP 方法：GET 对比 POST | 菜鸟教程 (runoob.com)
Get()
- $.get() 方法通过 HTTP GET 请求从服务器上请求数据。
- 语法：
  - $.get(URL,callback);
  - $.get( URL [, data ] [, callback ] [, dataType ] )
    - URL：发送请求的 URL字符串。
    - data：可选的，发送给服务器的字符串或 key/value 键值对。
    - callback：可选的，请求成功后执行的回调函数。
    - dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。
Post()
- $.post() 方法通过 HTTP POST 请求向服务器提交数据。
- 语法：
  - $.post(URL,callback);
  - $.post( URL [, data ] [, callback ] [, dataType ] )
    - URL：发送请求的 URL字符串。
    - data：可选的，发送给服务器的字符串或 key/value 键值对。
    - callback：可选的，请求成功后执行的回调函数。
    - dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。
详情见：Ajax笔记

jQuery - noConflict() 方法

如何在页面上同时使用 jQuery 和其他框架？如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？
jQuery noConflict() 方法 | 菜鸟教程 (runoob.com)

jquery JSON

JSON 教程 | 菜鸟教程 (runoob.com)

jquery 参考手册

posted @ 2022-09-12 00:04 litilestar 阅读(18) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· js01~

· jsgrammer

· jQuery 相关的学习

· JQuery的一些函数

· jQuery笔记 (完整详细版)

阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！

公告

昵称： litilestar
园龄： 3年3个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

little3star