JQuery从零开始学习笔记上知识点总结

最新推荐文章于 2024-09-23 22:17:25 发布

葛济维的博客

最新推荐文章于 2024-09-23 22:17:25 发布

阅读量174

点赞数 2

分类专栏： html 文章标签： jquery js css html

本文链接：https://blog.csdn.net/qq_26139541/article/details/109330500

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JQuery从零开始学习笔记上

什么是 jQuery ？

什么是 jQuery ？

jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

以下需要有html、css、javascript基础
可以看我博客
JavaScript入门学习学习笔记（上）
JavaScript入门学习学习笔记（下）

引入JQuery

在代码中加入

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

基础语法： $(selector).action()

selector是选择器，可以选择元素。action为执行的操作
选择器基于已有的CSS选择器，常用的id选择器，类名选择器，元素选择器，组合选择器等等
可以到这里查表 https://www.runoob.com/cssref/css-selectors.html

所有 jQuery 函数位于一个 document ready 函数中
直接这样写就行

$(function(){
 
   // 开始写 jQuery 代码...
 
});

jQuery 事件

jQuery可以对不同的事件进行处理
常见事件有

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

click()事件实例：

<!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://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <p>点我消失</p>
    <p>点我也消失</p>
    <script>
        $(function(){
            $("p").click(function(){
                $(this).hide();
            });
        });
    </script>
</body>
</html>

在这里插入图片描述
dbclick() 、 mouseenter()、 mouseleave()、 hover() 用法类似

focus()实例

<!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://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <label for="username">请输入用户名:</label><input type="text" name="username" id="username">    
    <br>
    <label for="password">请输入密码:&nbsp;&nbsp;&nbsp;</label><input type="password" name="password" id="password"> 

    <script>
        $(function(){
            //获得焦点
            $('input').focus(function(){
                $(this).css('background-color','#cccccc');
            });
            //失去焦点
            $('input').blur(function(){
                $(this).css('background-color','white');
            });

        });
    </script>
</body>
</html>

在这里插入图片描述

JQuery效果

基本隐藏和显示方法

$(selector).hide(speed,callback);	//隐藏
$(selector).show(speed,callback);	//显示
$(selector).toggle(speed,callback);  //隐藏和显示进行切换
$(selector).fadeIn(speed,callback);   //淡入动画
$(selector).fadeOut(speed,callback); //淡出动画
$(selector).fadeToggle(speed,callback); //淡入淡出切换
$(selector).fadeTo(speed,opacity,callback);  //淡入到什么程度

selector是选择器
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

同样， 滑动方法有

$(selector).slideDown(speed,callback); 
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

实例一

hide() show() fadeIn() fadeOut() slideDown() slideUp()用法实例

<!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://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        div{
            background-color:aquamarine;
            width: 150px; 
            height: 150px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div>
    <script>
        $(function(){
            //hide
            $('#div1').click(function(){ 
                $(this).hide('slow');
            });
            //hide() show()
            $('#div2').click(function(){ 
                $(this).hide('slow',function(){//callback
                    $(this).show('fast');
                });
            });
            //fadeIn() fadeOut()
            $('#div3').mouseenter(function(){
                $(this).fadeOut('fast',function(){
                    $(this).fadeIn('slow');
                });
            });
            //slideDown()
            $('#div4').dblclick(function(){
                $(this).slideUp('fast',function(){
                    $(this).slideDown();
                    
                });
            });
        });
    </script>
</body>
</html>

在这里插入图片描述

实例二

toggle() fadeToggle() slideToggle() 用法实例

<!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://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        div{
            background-color:aquamarine;
            width: 150px; 
            height: 150px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <button id="toggle">toggle</button>
    <div id="div1"></div>
    <button id="fadeToggle">fadeToggle</button>
    <div id="div2"></div>
    <button id="slideToggle">slideToggle</button>
    <div id="div3">文字文字文字文字文字</div>
    <!-- <div id="div4"></div> -->
    <script>
        $(function(){
            
            //toggle()
            $('#toggle').click(function(){
                $('#div1').toggle('1000');
            });
            //fadeToggle()
            $('#fadeToggle').click(function(){
                $('#div2').fadeToggle('slow');
            });
            //slideToggle()
           $('#slideToggle').click(function(){
                $('#div3').slideToggle('500');
           });
        });
    </script>
</body>
</html>