jQuery总结

小谭の努力

已于 2023-10-27 16:15:50 修改

阅读量288

点赞数 1

分类专栏： JQuery 文章标签： jquery

于 2022-11-12 16:57:25 首次发布

本文链接：https://blog.csdn.net/weixin_57689217/article/details/127817078

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery的简介和入门

JQuery是一种JavaScript库(框架)，作用是简化JavaScript开发

一. 如何引入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>
    <!-- 1.使用本地文件 -->
    <!-- <script src="JQ/jquery.js"></script> -->

    <!-- 2.使用CDN方式这里使用的是Microsoft (需要联网) -->
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
    /jquery-1.4.min.js"></script>

    <!-- 测试 -->
    <script type="text/javascript">
        // function() 页面加载完成之后再来执行
        $(function () {
            // 会弹出对话框-alert("弹出的内容")
            alert("表哥，我又来了哟");
        });
    </script>
</head>
<body>
</body>
</html>

结果图：

在这里插入图片描述

二. jQuery 选择器

关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

JQuery选择器分为：

CSS选择器
JQuery特有的选择器

(1). 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="JQ/jquery.js"></script>

    <script type="text/javascript">

        // function() 页面加载完成之后再来执行
        $(function () {
            // 会弹出对话框-alert("弹出的内容")
            // alert("表哥，我又来了哟");
        });

        // 1.给所有span标签文字改为红色
        // $("span").css("color","red"); 这样是错的，页面是从上往下加载，span标签未加载，所以执行无效果；
        //为啥这样就阔以了 -->见上
        $(function () {
       		 //css() 加样式，一个css（）加一个样式
            $("span").css("color", "red");
        })

        // 2.给class有one类样式的所有标签文字改为黄色
        $(function () {
            $(".one").css("color", "yellow");
        })

        // 3.给id为two 且子类标签是div 文字改为绿色
        $(function () {
            $("#two div").css("color", "green");
        })  
    </script>
</head>

<body>
    <span>span标签1</span>
    <span>span标签2</span>
    <div class="one">标签1</div>
    <div id="two">
        <div>div标签2</div>
        <span>div下span</span>
    </div>
    <p class="one three">p标签</p>
</body>
</html>

效果图：

在这里插入图片描述

(1). JQuery特有的选择器

选择器	实例	说明
:first	$(“p:first”)	选第一个p元素
:last	$(“p:last”)	选最后一个 p元素
:even	$(“tr:even”)	所有偶数 tr 元素(从下标0开始)
:odd	$(“tr:odd”)	所有奇数 tr元素(从下标1开始)
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:contains(text)	$(“:contains(‘W3School’)”)	包含指定文字的所有元素
:has(selector)	$(“div:has§”)	选中div标签中所有子标签p
:visible	$(“table:visible”)	所有可见的表格
:hidden	$(“p:hidden”)	所有隐藏的 p 元素
[属性=值]	$(“[href=‘#’]”)	所有 href 属性的值等于 “#” 的元素
:first-child	$(“ul li:first-child”)	选取每个 ul元素的第一个 li 元素
:last-child		最后一个子标签
:checked	$(“:checked”)	选中的复选框或单选按钮
:selected	$(“:selected”)	选中的下拉菜单
:input	$(“:input”)	所有input标签
:text	$(“:text”)	所有 type=“text” 的 input>元素
:checkbox	$(“:checkbox”)	所有 type=“checkbox” 的 input 元素
:password	$(“:password”)	所有 type=“password” 的 input 元素
:button	$(“:button”)	所有按钮

代码演示

<!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="JQ/jquery.js"></script>

    <script type="text/javascript">
        $(function(){
            // 选第一个span元素 
            // $("span:first").css("background-color","green");
            // 选最后一个span元素 
            // $("span:last").css("background-color","green");
            // 所有偶数 span 元素(从下标0开始)
            $("span:even").css("background-color","yellowgreen");
            // 所有奇数 span元素(从下标1开始)
            $("span:odd").css("background-color","red");
            // p标签中的第2个元素（index 从 0 开始）
            $("p:eq(1)").css("background-color","red");
            // p标签中包含指定文字的所有元素
            $("p:contains(1)").css("background-color","yellow");
            // 包含某些选择器的 
            $("div:has(p)").css("background-color","yellow");
        });

    </script>
</head>
<body>
    <span>span标签0</span><br>
    <span>span标签1</span><br>
    <span>span标签2</span><br>
    <span>span标签3</span><br>
    <span>span标签4</span><br>
    <span>span标签5</span>
    <p>p标签1</p>
    <p>p标签2</p>
    <p>p标签31</p>
    <div><p>div</p></div>
    <div>div2</div>
    <div><p>div</p></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="JQ/jquery.js"></script>

    <script type="text/javascript">
        $(function () {
            // $("span:last-child").css("color","green");
            $("span:first-child").css("color","red");
            //选中的input元素type="text" 的高设置为30px
            $(":text").css("height","30px")
			//单选框选中的input元素中的value值
            alert($(":radio:checked").val())
        });

    </script>
</head>

<body>
    <span>body中第一个</span>
    <div>
        <span>span标签0</span><br>
        <span>span标签1</span><br>
        <span>span标签2</span><br>
        <span>span标签3</span><br>
    </div>
    <span>body中最后第一个</span>
    <hr>
    姓名：<input type="text"><br>
    账号：<input type="text"><br>
    密码：<input type="password"><br>
    <input type="radio" name="sex" checked value="男">男
    <input type="radio" name="sex">女<br>
    爱好：
    <input type="checkbox" name="" id="">游泳
    <input type="checkbox" name="" id="">跑步
    <input type="checkbox" name="" id="">读书<br>
    <select name="" id="">
        <option value="">出生年分</option>
        <option value="">2022</option>
        <option value="">2021</option>
    </select><br>
    <button>提交按钮</button>
</body>

</html>

效果图：
在这里插入图片描述

三. jQuery的常用方法

方法	作用
css(“样式名”)/css(“样式名”,“值”)	读/写样式
val()/val(值)	读/写表单元素的value属性
prop(“属性名”)/prop(“属性名”,“值”)	读/写标签的内置属性
attr(“属性名”)/attr(“属性名”,“值”)	读/写标签的自定义属性
text()/text(值)	读/写标签中的文字
html()/html(值)	读/写标签中的html
each(function(){})	用于遍历选中的标签，$(this)代表当前遍历的对象
next()	获得当前标签相邻的下一个标签
prev()	获得当前标签相邻的上一个标签
parent()	获得当前标签的父标签
append(“html”)	追加新的内容
remove()	删除标签
find(选择器)	获得当前标签的子标签
addClass(类样式)	当前标签添加类样式
removeClass(类样式)	当前标签删除类样式
toggleClass(类样式)	当前标签切换类样式

<!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>
    <style type="text/css">
        .one{
            background-color: aqua;
            font-size: 30px;
        }
        .two{
            font-size: 20px;
        }
    </style>
    <script src="JQ/jquery.js"></script>

    <script type="text/javascript">
        $(function () {
            // 读/写表单元素的value属性
            // alert($(":text").val())
            $(":text").val("四过瘾")

            // 读/写标签的内置属性
            // alert($("span").prop("style"));
            $("span").prop("style","color: green;");

            // 读/写标签中的文字
            $("span").text("哎哟喂，你干嘛！")

            // 读/写标签中的html
            // console.log($("span").html());
            // $("span").html("你别吃我下的蛋蛋")

            // 当前标签切换类样式
            $("span").toggleClass("one");

            // $("span").addClass("one");

            $("span").removeClass("two");
        });

    </script>
</head>
<body>
    <input type="text" value="八嘎雅鹿">
    <span style="color: red;" class="two">滴滴，我是鸡哥！</span>
</body>
</html>

四. jQuery的事件

JQuery设置事件的方法:

$(“选择器”).bind(“事件名”,function(){});
$(“选择器”).事件名(function(){

});

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件
…	…

<!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>
    <style type="text/css">
        .one{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
    <script src="JQ/jquery.js"></script>

    <script type="text/javascript">
        $(function () {
            // 单机
           $("[name=one]").click(function(){
            $(".one").hide();
           })
           $("[name=two]").click(function(){
            $(".one").show();
           })
        //    获得焦点
           $(":text").focusin(function(){
            $(this).css("height","30px")
           })
        //    失去焦点
        $(":text").focusout(function(){
            $(this).val("小傻瓜").css("height","40px");
           })
        });

    </script>
</head>
<body>
    <div class="one"></div>
    <button name="one">隐藏</button>
    <button name="two">显示</button>
<br>
    姓名：<input type="text">
</body>
</html>

五. 动画

方法	说明
show()/show(毫秒)	显示
hide()/hide(毫秒)	隐藏
fadeIn()/fadeIn(毫秒)	淡入
fadeOut()/fadeOut(毫秒)	淡出
fadeToggle(毫秒)	淡入淡出
slideDown(毫秒)	下滑
slideUp(毫秒)	上滑
animate({“样式”:“值”,“样式”:“值”},毫秒,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>
</head>
<script src="../JQ/jquery.js"></script>

<script type="text/javascript">
    $(()=>{
        $(":button:contains(隐藏)").click(function(){
            $("img").hide(3000);
        })
    })
    $(()=>{
        $(":button:contains(显示)").click(function(){
            $("img").show(3000);
        })
    })
    $(()=>{
        $(":button:contains(淡入)").click(function(){
            $("img").fadeIn(3000)
        })
    })
    $(()=>{
        $(":button:contains(淡出)").click(function(){
            $("img").fadeOut(3000)
        })
    })
    $(()=>{
        $(":button:contains(上滑)").click(function(){
            $("img").slideUp(3000)
        })
    })
    $(()=>{
        $(":button:contains(下滑)").click(function(){
            $("img").slideDown(3000)
        })
    })
    $(()=>{
        $(":button:contains(自定义)").click(function(){
            $("img").animate({"width":"300px","hetght":"500px"},4000,
            ()=>{
                $("img").prop("src","").prop("alt","小傻子");
            });
        })
    })
</script>
<body>
    <button>隐藏</button>
    <button>显示</button>
    <button>淡入</button>
    <button>淡出</button>
    <button>淡入淡出</button>
    <button>上滑</button>
    <button>下滑</button>
    <button>自定义</button><br>
    <img src="./u=3804971268,2392876250&fm=253&fmt=auto&app=120&f=PNG.webp" alt="">
</body>
</html>