jQuery初学者笔记一

时间:2020-02-14 Mirror王宇阳人气:2

jQuery初学者笔记一

Mirror王宇阳 by

jQuery语法

jQuery语法是通过选取HTML元素，并对选取的元素进行操作

基础语法：

所有jQuery语句用“$”符号开始

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <p>点击消失</p>
        <p>点击消失</p>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <script>
            $(document).ready(function(){ //固定的jQ开头
                $("p").click(function(){ // 选取p标签，并绑定clisk事件
                    $(this).hide(); //事件触发使用hide()方法（隐藏当前标签属性）
                })
            })
        </script>
    </body>
</html>

jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档

// jQuery入口函数

$(document).ready(function(){
    //jQuery代码
});
/*******************************/
$(function(){
    //jQuery代码
});

选择器语法:

jQuery的选择器语法格式和CSS的调用方法一样的哦！

选择器允许基于元素的id、class、type、属性、属性值等选择方法来找到指定的HTML元素

元素选择器
```
$("p"); //选取p标签元素
```
id选择器
```
$("#demo"); // 选取id='demo'的元素
```

.class选择器

$(".demo"); // 选取class='demo'的元素

所有元素
```
$("*"); // 选取全部元素
```

jQuery事件：

事件语法：

参考：

过滤选择器

基本标签层次过滤器

:first/:last

:first:选取第一个元素

:last:选取最后一个元素
:not(*):去除选择器给定的元素
:even/:odd

:even:偶数索引的标签

:odd:奇数索引的标签
:eq()/:gt()/:lt()

eq():选取指定索引的元素

ge():选取大于指定索引的元素

lt():选取小于指定索引的元素
:focus 选取所有失去焦点的元素
:header 选取所有标题元素（h1\h2\h3……）
:animated 匹配所有正在执行动画操作的元素
实例：

$(document).ready(function(){
                $("div:lt(4)").addClass("myClass");// 除最后三个元素以外添加myClass
                $("div:not(.green,.gray)").addClass("myClass"); //除了green和gay以外的元素添加myClass
                $("div:gt(3)").addClass("myClass");//给最后三个元素添加myClass
                $("div:even").addClass("myClass");//偶数索引添加myClass
                $("div:odd").addClass("myClass");// 奇数索引添加没有Class
                $("div:eq(3)").addClass("myClass");//给指定索引添加myClass
                $("div:first").addClass("myClass");//第一个标签
                $("div:last").addClass("myClass");//最后一个标签
            });

内容过滤选择器

:contains(text) 选取包含text文本内容的元素；区分大小写
:empty 选取不含子元素或者文本节点的空元素
:has(selector) 选取含有选择器所匹配的元素的元素
:parent 选取含有子元素或文本节点的元素

属性过滤选择器

[attribute] 选取拥有此属性的元素
[attribute = value] 选取此属性值为value的所有元素
[attribute != value] 选取此属性值不为value的所有元素
[attribute ^= value] 选取此属性值为value开始的所有元素
[attribute $= value] 选取此属性值为value结束的所有元素
[attribute *= value] 选取属性值包含value的所有元素

表单过滤选择器

表单属性过滤选择器

jQuery效果

隐藏和显示 (hide/show)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>hide()/show()</title>
    </head>
    <body>
        <div id="demo">
            <input type="button" id="hide" value="隐藏" />
            <input type="button" id="show" value="显示" />
            <div id="a1" style=
                "color: #000; 
                background-color: #66FF66;
                width: 100px;
                height: 100px;
                margin-top: 20px;
                text-align: center;">
                演示块
            </div>
        </div>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <script>
            $(function(){
                $("#hide").click(function(){
                    // 隐藏
                    $("#a1").hide();
                })
                $("#show").click(function(){
                    //显示
                    $("#a1").show();
                })
            })
        </script>
    </body>
</html>
<!-- hide/show()语法原型
    $().hide(speed,callback);
    $().show(speed,callback);
     speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

toggle():开关

$("#toggle").click(function(){
    // toggle开关
    $("#a1").toggle();
});
<!-- 
     speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

淡入淡出

fadeIn():淡入已隐藏的元素

语法

$().fadeIn(speed,callback);
<!--
     speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

fadeOut():淡出可见的元素

语法

$().fadeOut(speed,callback);
<!-- 
    speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

fadeToggle()：淡入/出已隐藏的/可见的元素

语法

$().fadeToggle(speed,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     callback:完成执行后调用的函数名称
-->

fadeTo()：允许渐变为给定的不透明度（值介于 0 与 1 之间）

语法：该方法严格的说只是将原本100%透明的隐藏给设置了不透明度来利用

$().fadeTo(speed,opacity,callback);
<!-- speed:规定了淡入淡出的延迟时间可取(slow/fast/毫秒数;即：缓慢的、快速的、延迟的)
     opacity:设置给定的不透明度（0~1）
     callback:完成执行后调用的函数名称
-->

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>fadeIn()|fadeOut()|fadeToggle()|fadeTo()</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
    </head>
    <body>
        <div id="demo">
            <input type="button" id="fadeIn" value="fadeIn" />
            <input type="button" id="fadeOut" value="fadeOut" />
            <input type="button" id="fadeToggle" value="fadeToggle" />
            <input type="button" id="fadeTo" value="fadeTo" />
            <br>
            <div id="a1" style="
                background-color: #5555FF;
                width: 300px;
                height: 100px;
                margin-top: 20px;
            ">  
            </div>
            <div id="info" style="display: none;">
                已隐藏
            </div>
        </div>
        <script>
            function info(){
                $("#info").toggle();
            }
            $(function(){
                $("#fadeIn").click(function(){
                    $("#a1").fadeIn("slow",info());
                    // slow:慢速的
                    // fast:快速的
                });
                $("#fadeOut").click(function(){
                    $("#a1").fadeOut("slow",info());
                });
                $("#fadeToggle").click(function(){
                    $("#a1").fadeToggle("slow",info());
                })
                $("#fadeTo").click(function(){
                    // 设置隐藏不透明度(通俗的讲就是颜色变淡并不是完全淡出)
                    $("#a1").fadeTo("slow",0.5);
                })
            })
        </script>
    </body>
</html>

滑动

slideDown():向下滑动元素

语法

$().slideDown(speed,callback);
<!-- 
    speed:slow\fast\毫秒值
    callback:完成动作后执行的函数名称
 -->

slideUp():向上滑动元素

语法

$().slideUp(speed,callback);
<!-- 
    speed:slow\fast\毫秒值
    callback:完成动作后执行的函数名称
 -->

slideToggle():上/下切换滑动元素

$().slideToggle(speed,callback);

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>slideDown()|slideUp()|slideToggle()</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <style type="text/css">
            *{margin: 0px;padding: 0px;}
            #Down,#Up,#Toggle{
                width: 60px;
                height: 20px;
                color: #000000;
                font-size: 10px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            #Down{background-color: #5555FF;}
            #Toggle{background-color: #FCFF9F;}
            #Up{background-color: #66FF66;}
            #slide{
                clear: both;
                background-color: #CCCCCC;
                width: 180px;
                height: 100px;
                border-top: #FF0000;
                text-align: center;
                position: relative;
            }
            #demo{margin: 10px 0px 0px 10px;}
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="Down">向下滑动</div>
            <div id="Toggle">滑动切换</div>
            <div id="Up">向上滑动</div>
            <div id="slide">
            </div>
        </div>
        <script>
            $(function(){
                $("#Down").click(function(){
                    $("#slide").slideDown();
                })
                $("#Up").click(function(){
                    $("#slide").slideUp();
                })
                $("#Toggle").click(function(){
                    $("#slide").slideToggle();
                })
            })
        </script>
    </body>
</html>

动画

animate():创建自定义动画

语法

$().animate({css},speed,callback);
<!-- 
    {css}:定义动画的css属性
        （支持多个同时、支持相对值[+=/-=]、支持hide,toggle…等预定义值）
        支持‘队列’式的动画（即多个animate()组成一串（队列）动画）
    speed:slow/fast/毫秒值
    callback:执行完成调用函数
 -->

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>animate()动画</title>
        <script src="jq/jquery-3.4.1.min.js"></script>
        <style type="text/css">
            #demo{
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: #5555FF;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            
        </div>
        <script>
            $(function(){
                $("#demo").animate({
                    left:'300px',
                    width:'+=150px',
                    height:'+=150px',
                    // 支持多个样式的组合的动画
                    // 支持相对值
                },2000);//支持延迟
                $("#demo").animate({left:'10px',width:'-=100px',height:'-=100px'});
                $("#demo").click(function(){
                    $("#demo").animate({top:'100px'},1000);
                    $("#demo").animate({left:'100px'},1000);
                    $("#demo").animate({top:'0px'});
                    $("#demo").animate({left:'0px'});
                    // 支持队列组合的动画动作
                })
            })
        </script>
    </body>
</html>

停止动画或效果：
- 语法

$().stop(stopAll,goToEnd);
<!-- 
    stopAll:是否清除动画队列 默认false
    goToEnd:是否立即停止动画 默认false
    默认情况下，stop()会清除被选中的元素的当前动画
 -->

Callback()

当前动画 100% 完成之后执行

jQuery DOM

获取/设置内容

text() 设置/返回所选元素的文本内容[原型：innerhtml]
html() 设置/返回所选元素的内容（含HTML标签）
val() 设置/樊湖表单字段的value

获取/设置属性

attr() 设置/返回所选元素的属性内容（支持多个属性设置，返回数组）

添加元素

append() 尾部插入元素
prepend() 开头插入元素
after() 被选元素后插入元素
before() 被选元素前插入元素

删除元素

remove() 删除被选元素和子元素
- 接受一个参数，过滤被删除的元素（即指定删除）
- removeClass() 删除元素的class加载
empty() 删除被选元素的子元素

jQuery CSS 获取/设置

addClass() 向被选元素添加一个或多个Class类
removerClass() 从被选元素中删除指定的一个或多个Class类
toggleClass() 对被选元素的add/remove进行切换式的操作
css() 设置/获取被选元素的Class属性
- css("classname","value") 单个
- css("classname":"value",……) 多个

jQuery 尺寸设置

width()/height() 设置/返回元素的宽度/高度（content;不包括内边距、边框、外边距）
innerWidth()/innerHeight() 设置/返回元素的宽度/高度（Content+Padding；不包括边框、外边距）
outerWidth()/outerHeight() 设置/返回元素的宽度/高度（Content+Padding+Border；不包括外边距）

jQuery 遍历

向上遍历DOM树

parent() 返回自己的直接父类元素
parents() 返回自己的所有直系类元素（直至根元素）
parentsUntil() 返回两种直接的所有直系类元素（不包含）

// parents(*)/parentsUntil(*):两个方法在这里均可选一个参数接收

向下遍历DOM树

children() 返回被选元素的所有直接子元素(支持过滤参数)
find() 返回被选元素的后代元素(支持过滤参数，指定标签、类名、id、name等)

水平遍历DOM树

siblings() 返回被选元素的所有同级元素(支持过滤参数)
next() 返回被选元素的下一个同级元素
nextAll() 返回被选元素之后的所有同级元素
nextUntil() 返回被选元素与参数之间的所有同级元素
prev() 返回被选元素的上一个同级元素
prevAll() 返回被选元素之前的所有同级元素
prevUntil() 返回被选元素与参数之间的所有同级元素

遍历过滤

first() 返回被选元素的首个子元素
last() 返回被选元素的最后子元素
eq() 返回被选元素中带有指定索引的元素(可选参数，指定索引)
filter()返回可匹配的所有元素
not() 返回不匹配的所有元素

jQuery AJAX

AJAX

AJAX = 异步JavaScript + XML

在不重载网页的情况下，后台加载数据并显示在页面上
AJAX菜鸟教程 jQuery ajax()方法

AJAX load()

load() 从服务器加载数据，并返回数据

常常利用：调用一个重复的代码块，例如网页的导航、版本块等……

由此可以大大的减少代码量的编写工作，模块化的团队开发应该常用

语法

$().load(URL,data,callback);
<!-- 
    URL:加载的数据文件位置uRL
    data:与URL加载请求一起发送的字符串键/值对集合
    callback:执行完毕后调用的函数
        - responseTxt : 调用成功的结果
        - statusTXT : 调用的状态
        - xhr : XMLHttpRequest对象
 -->

AJAX GET()

$.get() 从指定的资源请求数据
语法

$.get(URL , callback);
<!-- 
    URL:加载的uRL
    callback:执行完毕后调用的函数
 -->

实例

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
  });
});

AJAX POST()

$.post() 使用 POST 请求向服务器提交数据

加载全部内容

jQuery初学者笔记 一

jQuery初学者笔记 一

jQuery语法

基础语法：

选择器语法:

jQuery事件：

事件语法：

过滤选择器

基本标签层次过滤器

内容过滤选择器

属性过滤选择器

表单过滤选择器

表单属性过滤选择器

jQuery效果

隐藏和显示 (hide/show)

toggle():开关

淡入淡出

fadeIn():淡入已隐藏的元素

fadeOut():淡出可见的元素

fadeToggle()：淡入/出 已隐藏的/可见的元素

fadeTo()：允许渐变为给定的不透明度（值介于 0 与 1 之间）

实例

滑动

slideDown():向下滑动元素

slideUp():向上滑动元素

slideToggle():上/下 切换滑动元素

实例

动画

animate():创建自定义动画

实例

Callback()

jQuery DOM

获取/设置内容

获取/设置属性

添加元素

删除元素

jQuery CSS 获取/设置

jQuery 尺寸设置

jQuery 遍历

向上遍历DOM树

向下遍历DOM树

水平遍历DOM树

遍历 过滤

jQuery AJAX

AJAX

AJAX load()

AJAX GET()

AJAX POST()

jQuery初学者笔记一

jQuery初学者笔记一

fadeToggle()：淡入/出已隐藏的/可见的元素

slideToggle():上/下切换滑动元素

遍历过滤