jQuery

AoA.

于 2023-10-08 00:30:00 发布

阅读量32

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/weixin_64022848/article/details/133653800

版权

一、jQuery入门

1.介绍

目前最流行的JavaScript函数库之一，对JavaScript进行了封装。并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。

2.特点

JavaScript的缺点

选择器功能弱

DOM操作繁琐至极

浏览器兼容性不好

动画功能弱

jQuery的优点

强大的选择器

出色的DOM封装

出色的浏览器兼容性

强大的动画功能

体积小，压缩后只有100KB左右

可靠的事件处理机制

使用隐式迭代简化编程

丰富的插件支持

3.jQuery的使用

关于jQuery的使用需要先导入jQuery的js文件，发现jQuery本身就是一个JS文件。
$是jQuery使用最多的符号，它有多个作用。这个示例中就使用了$的两个作用。作用1：$(function(){})
- 相当于 window.οnlοad=function(){}，功能比window.onload更强大
- window.onload一个页面只能写一个，但是可以写多个$() 而不冲突
- window.onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），但是$的执行时间要早
- 完整形式是$(document).ready(…….);
  
  jQuery(document).ready(…….);
作用2： $(selector)
- 选择器。jQuery具有强大的选择器功能，后面会有专门章节进行介绍
jQuery的基本语法：$(selector).action

获取页面内容:$(selector)

操作页面的内容：action
- 控制页面样式
- 访问和操作DOM元素
- 事件处理功能
- 动画功能
- Ajax功能（jQuey不仅封装了JavaScript，还封装了Ajax）

4.jQuery对象和DOM对象

DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value

jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val()

DOM对象转换成jQuery对象 $(DOM对象)

jQuery对象转换成DOM对象 jQuery对象[index] jQuery对象.get(index)

案例理解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
        $(function(){
            //dom对象
            var in1Value = document.getElementById('in1').value;
            document.getElementById('in2').value = in1Value;

            var pEle = document.getElementById('p1');
            var pText = pEle.innerHTML;
            document.getElementById('p2').innerHTML = pText;

            //jquery对象
            var val1 = $('#in1').val();
            $('#in3').val(val1);

            var p1 = $('#p1').html();
            $('#p3').html(p1);

            //js ---- > jquery
            alert(pEle);
            alert($(pEle));

            //jquery ---> js
            alert($('#in1')[0]);

        })
    </script>
</head>
<body>

    <input type="text" value="123" id="in1"><br>
    <input type="text" id="in2"><br>
    <input type="text" id="in3"><br>

    <p id="p1">jQuery对象和DOM对象！</p>
    <p id="p2"></p>
    <p id="p3"></p>

</body>
</html>

二、jQuery选择器

1.基本选择器

标签选择器 $("a")

ID选择器 $("#id") $("p#id")

类选择器 $(".class") $("h2.class")

通配选择器 $("*")

并集选择器$("elem1， elem2， elem3")

后代选择器$(ul li)

父子选择器 $(ul > li)

后面第一个兄弟元素节点 prev + next

后面所有的兄弟元素节点 prev ~ next

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){

            //标签选择器
            // $('h3').css('background-color'， 'red');

            //id选择器
            // $('#p1').css('font-size'， '30px');

            //类选择器
            // $('.p2').css('color'， 'red');

            //通配选择器
            // $('*').css('background-color'， 'blue');

            //并集选择器
            // $('span，h2').css('color'， 'green');

            //后代选择器
            // $('#div1 p').css('color'， 'red');

            //子元素选择器
            // $('#div1 > p').css('color'， 'red');

            //后面的第一个元素
            // $('h2+p').css('color'， 'red');

            //后面的所有兄弟元素
            $('h2~p').css('color'， 'red');
        })

    </script>
</head>
<body>

    <p id="p1">我是段落1.</p>
    <p class="p2">我是段落2.</p>
    <p class="p2">我是段落3.</p>

    <div id="div1">
        <span>我是div中span的内容！</span>
        <h2>我是div中的h2标题内容1！</h2>
        <p>我是div中的段落1.</p>
        <p>我是div中的段落2.</p>
        <div>
            <p>我是div中的div中的段落.</p>
        </div>
        <h2>我是div中的h2标题内容2！</h2>
    </div>

    <h3>我是h3内容1</h3>
    <h3>我是h3内容2</h3>
    <h3>我是h3内容3</h3>

</body>
</html>

2.属性选择器

[attribute] 匹配包含给定属性的元素

[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性

[attribute=value] 匹配给定的属性是某个特定值的元素

[attribute!=value] 匹配所有属性不等于特定值的元素

[attribute^=value] 匹配给定的属性是以某些值开始的元素

[attribute$=value] 匹配给定的属性是以某些值结尾的元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){
            //[attribute] 匹配包含给定属性的元素
            // var test1 = $('input[id]');
            // alert(test1.length);

            //[attribute1][attribute2] 复合属性选择器，需要同时满足多个属性
            // var test2 = $('input[name][value]');
            // alert(test2.length);

            //[attribute=value] 匹配给定的属性是某个特定值的元素
            // var test3 = $('input[type=password]');
            // alert(test3.length);

            //[attribute!=value] 匹配所有属性不等于特定值的元素
            // var test4 = $('input[name!=hobby]');
            // alert(test4.length);

            //[attribute^=value] 匹配给定的属性是以某些值开始的元素
            // var test5 = $('input[name^=u]');
            // alert(test5.length);

            //[attribute$=value] 匹配给定的属性是以某些值结尾的元素
            // var test6 = $('input[name$=y]');
            // alert(test6.length);

            //[attribute*=value] 匹配给定的属性是以包含某些值的元素
            var test7 = $('input[name*=s]');
            alert(test7.length);
        })

    </script>
</head>
<body>
<form action="">

    <table>
        <tr>
            <td>用户名：</td>
            <td><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox" name="hobby" value="Java">Java
                <input type="checkbox" name="hobby" value="C++">C++
                <input type="checkbox" name="hobby" value="PHP">PHP
            </td>
        </tr>
        <tr>
            <td>职业：</td>
            <td>
                <select name="professional" id="professional">
                    <option value="程序员">程序员</option>
                    <option id="p2" value="公务员">公务员</option>
                    <option value="律师">律师</option>
                    <option value="医生">医生</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" value="注册"></td>
        </tr>
    </table>

</form>
</body>
</html>

3.位置选择器

针对整个页面而言的位置选择器

:first 获取第一个元素

:last 获取最后一个元素

:odd 匹配所有索引值为奇数的元素，从 0 开始计数

:even匹配所有索引值为偶数的元素，从 0 开始计数

:eq(n) 匹配一个给定索引值的元素，从0开始计数

:gt(n) 匹配所有大于给定索引值的元素

:lt(n) 匹配所有小于给定索引值的元素

针对上级标签而言的位置选择器

:first-child 匹配第一个子元素

:last-child 匹配最后一个子元素

:nth-child(n) 匹配其父元素下的第N个子元素

:nth-child(odd|even) 匹配其父元素下的奇偶元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">

        $(function(){
            //针对整个页面而言的位置选择器
            //:first  获取第一个元素
            // alert($('h4:first').text());

            //:last  获取最后一个元素
            // alert($('p:last').text());

            //:odd 匹配所有索引值为奇数的元素，从 0 开始计数
            // $('p:odd').css('color'， 'red');

            //:even匹配所有索引值为偶数的元素，从 0 开始计数
            // $('p:even').css('color'， 'red');

            //:eq(n) 匹配一个给定索引值的元素
            // alert($('p:eq(2)').text());

            //:gt(n) 匹配所有大于给定索引值的元素
            // $('p:gt(1)').css('color'， 'red');

            //:lt(n) 匹配所有小于给定索引值的元素
            // $('p:lt(2)').css('color'， 'red');

            //针对上级标签而言的位置选择器
            //:first-child  匹配第一个子元素
            // $('div :first-child').css('color'， 'red');

            //:last-child匹配最后一个子元素
            // $('div :last-child').css('color'， 'red');

            //:nth-child(n)   :nth-child(odd|even) 匹配其父元素下的第N个子或奇偶元素
            // $('div :nth-child(3)').css('color'， 'red');
            // $('div :nth-child(odd)').css('color'， 'red');
        })
    </script>
</head>
<body>

    <div>
        <p>我是段落1.</p>
        <p>我是段落2.</p>
        <p>我是段落3.</p>
        <p>我是段落4.</p>
        <h4>标题1</h4>
        <h4>标题2</h4>
        <h4>标题3</h4>
        <div>
            <h3>我是h3标题</h3>
            <p>我是段落！</p>
        </div>
        <div>
            <p>唯一的儿子段落！</p>
        </div>
    </div>
</body>
</html>

4.表单选择器

关于表单项的选择器

:text :password :radio :checkbox :hidden :file :submit

:input 匹配所有 input， textarea， select 和 button 元素

注意：$("input")和$(":input")的区别

$("input")：标签选择器，只匹配input标签

$(":input")：匹配所有 input， textarea， select 和 button 等元素

关于表单项状态的选择器

selected :checked :disabled

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

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
        $(function(){

            //:text 用来获取表单项中 type="text"的元素
            // $(':text').css('background-color'， 'red');

            //:password 用来获取表单项中 type="password"的元素
            // $('#form1>:password').css('background-color'， 'red');

            //:radio 用来获取表单项中单选按钮   :checked表示选中的意思
            // alert($(':radio:checked').val());

            //:checkbox 用来获取表单中的复选框
            // alert($(':checkbox:checked').val());

            //(元素):hidden
            // alert($('input:hidden').val());

            //:file 获取表单中 type="file"的元素
            // alert($(':file:nth-child(21)').attr('class'， 'abc'));

            //:submit
            // alert($(':submit').attr('value'));

            //:input  匹配所有 input， textarea， select 和 button 元素
            // alert($(':input').length);

            //:selected  匹配select元素中选中的元素
            // alert($(':selected').text());

            //:checked
            // alert($(':checked[name=sex]').val());

            //:disabled
            // alert($(':disabled').val());
        })
    </script>
</head>
<body>
<form action="" id="form1">
    <input type="hidden" name="id" value="123">
    <br>

    账号: <input type="text" name="username">
    <br>
    密码: <input type="password" name="password">
    <br>
    生日: <input type="text" name="birthday"><br>
    工资: <input type="text" name="salary"><br>
    性别：<input type="radio" name="sex" value="男">男
        <input type="radio" name="sex" value="女" checked="checked">女 <br>

    爱好：<input type="checkbox" name="hobby" value="篮球">篮球
        <input type="checkbox" name="hobby" value="足球">足球
        <input type="checkbox" name="hobby" checked="checked" value="排球">排球
        <input type="checkbox" name="hobby" value="网球">网球 <br>

    头像：<input type="file" name="photo"><br>
        <input type="file" name="photo" class="aaa"><br>
        <input type="file" name="photo"><br>

    职业：<select name="" id="">
            <option value="程序员">程序员</option>
            <option value="公务员" selected="selected">公务员</option>
            <option value="律师">律师</option>
        </select>
    <input type="submit" value="注册" disabled="disabled">
</form>
</body>
</html>

三、jQuery事件机制

1.介绍

事件驱动: 监听对应的事件, 触发了对应的事件, 事件会被监听到, 监听到事件后驱动函数的执行.

2.使用

jQuery给元素绑定事件的格式是

$(function(){
    $('选择器').事件(function(){
        
    });
})

注意：

使用jQuery给元素绑定事件时，要写在页面加载完事件内。

这里的事件可以是 click、blur、focus等等。不要写on，因为之前在js中我们写的是onClick。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            //给元素绑定点击事件
            $('button').click(function(){
                alert('点击事件被触发！');
            });

            //给元素绑定失焦事件
            $('input').blur(function(){
                alert('失焦事件被触发！');
            });
        })
    </script>
</head>
<body>
    <button>按钮</button>
    <br>
    <input type="text">
</body>
</html>

四、jQuery动画

1.显示隐藏动画

实现显示动画效果方法：show()

实现隐藏动画效果方法：hide()

实现切换显示和隐藏动画效果方法：toggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>

    <script>
        $(function(){
            $('#btn1').click(function(){
                //隐藏元素，参数表示时间，单位是毫秒
                $('div').hide(3000);
            });

            $('#btn2').click(function(){
                //显示元素
                $('div').show(3000);
            });

            $('#btn3').click(function(){
                //隐藏与显示的开关
                $('div').toggle(2000);
            });
        })
    </script>
</head>
<body>
    <div style="width: 100px;height: 100px;background: #bfa">

    </div>
    <button id="btn1">隐藏</button>
    <br>
    <button id="btn2">显示</button>
    <br>
    <button id="btn3">隐藏/显示</button>
    <br>
</body>
</html>

2.滑动动画

实现向下滑动动画效果方法：slideDown()

实现向上滑动动画效果方法：slideUp()

实现滑动切换效果方法：slideToggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('div').slideDown(2000);
            });

            $('#btn2').click(function(){
                $('div').slideUp(2000);
            });

            $('#btn3').click(function(){
                $('div').slideToggle(2000);
            });
        })
    </script>
</head>
<body>
    <div style="background: #bfa;width: 100px;height: 100px">

    </div>
    <button id="btn1">向下滑动</button>
    <br>
    <button id="btn2">向上滑动</button>
    <br>
    <button id="btn3">向上/向下滑动</button>
    <br>
</body>
</html>

3.淡入淡出动画

实现淡入动画效果方法：fadeIn()

实现淡出动画效果方法：fadeOut()

实现淡入淡出切换效果方法：fadeToggle()

实现淡入到指定透明度效果方法：fadeTo(

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                $('div').fadeIn(2000);
            });

            $('#btn2').click(function(){
                $('div').fadeOut(2000);
            });

            $('#btn3').click(function(){
                $('div').fadeToggle(2000);
            });

            $('#btn4').click(function(){
                $('div').fadeTo(3000，0.3);
            });
        })
    </script>
</head>
<body>
    <div style="width: 100px;height: 100px;background: #bfa">

    </div>
    <button id="btn1">淡入</button>
    <br>
    <button id="btn2">淡出</button>
    <br>
    <button id="btn3">淡入/淡出</button>
    <br>
    <button id="btn4">淡入到指定透明度</button>
</body>
</html>

4.自定义动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        $(function(){
            $("#go").click(function(){
                $("#block").animate({
                    width: "500px"，
                    height: "500px"，
                    fontSize: "10em"
                }， 1000);
            });
        })
    </script>
</head>
<body>
    <button id="go">Run</button>
    <div id="block">Hello!</div>
</body>
</html>

AoA.

关注

1
点赞
踩
0

收藏

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

目前最流行的JavaScript函数库之一，对JavaScript进行了封装。并不是一门新语言，而是将常用的、复杂的JavaScript操作进行函数化封装，封装后可以直接调用，大大降低了使用JavaScript的难度，改变了使用JavaScript的习惯。事件驱动: 监听对应的事件, 触发了对应的事件, 事件会被监听到, 监听到事件后驱动函数的执行.<head><script>}， 1000);});
复制链接

扫一扫