web前端系列课程之jQuery(一)

最新推荐文章于 2021-09-06 17:29:56 发布

葡萄籽啊

最新推荐文章于 2021-09-06 17:29:56 发布

阅读量178

点赞数

分类专栏： Web前端JQuery 文章标签： jquery 1024程序员节

本文链接：https://blog.csdn.net/qiuqiudongdong/article/details/109231181

版权

Web前端JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

jQuery简介:

jquery可以通过简单的标记被添加到网页中.

需要具备HTML CSS Javascript基础知识.

一 什么是jQuery?

jQuery是一个’轻量级的’javaScript函数库.
jQuery库包含以下功能:

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
Javascript特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
**提示:**除此之外,jQuery还提供了大量插件

二 为什么使用jQuery?

提供了大量的扩展
目前大量公司都是使用jQuery框架

三 jQUery安装:

网页中添加jQuery
从 jquery.com 下载 jQuery 库
下载jQuery
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
jQuery 库是一个 JavaScript 文件，可以使用 HTML 的

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

四替代方案:

不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。
Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

<!--Staticfile CDN: -->
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

<!--百度 CDN:-->
<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

<!--又拍云 CDN:-->
<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

<!--Google CDN:不大推荐使用Google CDN来获取版本，因为Google产品在中国很不稳定。-->
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

在这里插入图片描述
五 jQuery语法:

通过jQuery,可以选取(查询)HTML元素,并对他们执行"操作"(actions).
通过选取HTML元素,并对选取的元素执行某些操作.
基础语法:
$(selector).action()
美元符号定义jQuery
选择符(selector)"查询"和"查找"HTML元素
jQuery的action()执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$(“p”).hide()-隐藏所有
元素
$("#p.test").hide()-隐藏所有class="test"的
元素
$("#test").hide()-隐藏id=“test的元素”

六文档就绪事件:

我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
防止文档在完全加载（就绪）之前运行 jQuery 代码:

    $(document).ready(function () {


        //jQuery代码...

    })

简洁写法:

  $(function() {
        //jQuery代码
    })

jQuery选择器:

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 基于的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
jQuery 中所有选择器都以美元符号开头：$()。
**
七元素选择器:**

<!--在页面中选取所有的<p>元素-->
$("p")

实例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>别点击按钮！我该消失了！！！</p>
    <button>按钮</button>

</body>
<script>
    $(document).ready(function() {
        $("button").click(function() {
            $("p").hide();

        });
    });
</script>

</html>

在这里插入图片描述
八 #id选择器

jQuery #id 选择器通过HTML元素的id属性选取指定的元素

$("test")

实例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>下面的是id选择器，你点击 它就消失了！!!</p>
    <p id="test">别点击按钮！我该消失了！！！</p>
    <button>按钮</button>

</body>
<script>
      $(document).ready(function() {
        $('button').click(function() {
            $('#test').hide();
        })



    })
</script>

</html>

在这里插入图片描述
九 .class选择器

jQuery 类选择器可以通过指定的calss查找元素

$(".test")

实例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>下面的是class（类）选择器，你点击 它们就消失了！!!</p>
    <p class="test">别点击按钮！我该消失了1！！！</p>
    <p class="test">别点击按钮！我该消失了2！！！</p>
    <p class="test">别点击按钮！我该消失了3！！！</p>
    <button>按钮</button>

</body>
<script>
    $(document).ready(function() {
        $('button').click(function() {
            $('.test').hide();
        })



    })
</script>

</html>

在这里插入图片描述
十更多实例

语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$(“p.intro”)	选取 class 为 intro 的 <p> 元素
$(“p:first”)	选取第一个 <p> 元素
$(“ul li:first”)	选取第一个 <ul> 元素的第一个<li> 元素
$(“ul li:first-child”)	选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$(“a[target=’_blank’]”)	选取所有 target 属性值等于 “_blank” 的 <a> 元素
$(“a[target!=’_blank’]”)	选取所有 target 属性值不等于 “_blank” 的 <a> 元素
$(":button")	选取所有 type=“button” 的 <input> 元素和 <button> 元素
$(“tr:even”)	选取偶数位置的 <tr> 元素
$(“tr:odd”)	选取奇数位置的 <tr> 元素

十一独立文件中使用jQuery函数

把 jQuery 函数放到独立的 .js 文件中,易于维护.
通过 src 属性来引用文件

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

十二 jQuery事件

jQuery是为事件处理特别设计的

什么是事件?

页面对不同的访问者的响应叫做事件.
事件处理程序指的是当HTML中发生某些事件时所调用的方法.
实例:
在元素上移动鼠标
选取单选按钮
点击元素
在事件中经常使用术语触发(或激发),例如:“按下按钮触发keypress事件.”
常见Dom事件:

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

十三 jQuery事件方法语法

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件:

$("p").click(function(){
//动作触发后执行代码!!!
});

十四常用的jQuery事件方法

$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。

案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>你碰到我，我就消失了</p>
    <p>别点击我！我该消失了</p>

</body>
<script>
    $(document).ready(function() {
        $('p').click(function() {
            $(this).hide();
        })
    })
</script>

</html>

在这里插入图片描述

dblclick()
当双击元素时,发生dblclick事件.
dblclick()方法触发dblclick事件,或规定当发生dblclick事件运行的函数:

案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>你碰到我，我就消失了</p>
    <p>别点击我！我该消失了</p>

</body>
<script>
    $(document).ready(function() {
        // 双击消失
        $('p').dblclick(function() {
            $(this).hide();
        })
    })
</script>

</html>

在这里插入图片描述
mouseenter()
当鼠标指针穿过元素时,会发生mouseenter事件.
mouseenter()方法触发mouseenter事件,或规定发生mouseenter事件运行的函数:

案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>

    <button id="button">我是id为button的元素</button>
</body>
<script>
    $(document).ready(function() {
        // 双击消失
        $('#button').mouseenter(function() {
            alert('哇哦~你的鼠标移到了id为button的元素上!')
        })
    })
</script>

</html>

在这里插入图片描述
hover()

hover()方法用于模拟光标悬停事件.
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p id="p1">我在这里</p>
</body>
<script>
    $(document).ready(function() {
        $('#p1').hover(function() {
                alert('我进来啦~')
            },
            function() {
                alert('我出去啦~')
            })



    })
</script>

</html>

在这里插入图片描述
focus()

当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点.
focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数

blur()

当元素失去焦点时，发生 blur 事件。
案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>

    Name: <input type="text" name="fullname"><br> Email: <input type="text" name="email">
</body>
<script>
    $(document).ready(function() {
        $('input').focus(function() {
            $(this).css("background-color", "red");
        });
        $('input').blur(function() {
            $(this).css("background-color", "blue");
        });
    })
</script>

</html>

在这里插入图片描述

jQuery效果- 隐藏和显示

jQuery hide() 和 show()

实例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>点击“隐藏” 消失，点击”显示“出现</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
</body>
<script>
    $(document).ready(function() {
        $("#hide").click(function() {
            $("p").hide();
        });
        $("#show").click(function() {
            $("p").show();
        })

    })
</script>

</html>

在这里插入图片描述
语法:

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的speed参数规定隐藏显示的速度,可以取以下值:“slow”,"fast"或毫秒.
可选的 callback 参数是隐藏或显示完成后所执行的函数名称

案例:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>点击“隐藏” 消失，点击”显示“出现</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
</body>
<script>
    $(document).ready(function() {
        $("#hide").click(function() {
            $("p").hide(1000);
        });
        $("#show").click(function() {
            $("p").show(1000);
        })

    })
</script>

</html>

在这里插入图片描述
案例二:

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <p>点击“隐藏” 消失，点击”显示“出现</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
</body>
<script>
<!--第二个参数是一个字符串，表示过渡使用哪种缓动函数。-->
    $(document).ready(function() {
        $("#hide").click(function() {
            $("p").hide(1000, "linear", function() {
                alert("hide()方法已完成")
            });
        });
        $("#show").click(function() {
            $("p").show(1000, "linear", function() {
                alert("show()方法已完成！")
            });
        })

    })
</script>

</html>

在这里插入图片描述
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称

在这里插入图片描述

葡萄籽啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端系列课程之jQuery(一)

jQuery简介:jquery可以通过简单的标记被添加到网页中.需要具备HTML CSS Javascript基础知识.一什么是jQuery?jQuery是一个’轻量级的’javaScript函数库.jQuery库包含以下功能:HTML元素选取HTML元素操作CSS操作HTML事件函数Javascript特效和动画HTML DOM 遍历和修改AJAXUtilities**提示:**除此之外,jQuery还提供了大量插件二为什么使用jQuery?提供了大量的扩
复制链接

扫一扫