菜单 搜索
首页 前端知识 jQuery库 01 基础知识

jQuery库 01 基础知识

2024-06-21 09:06:00 前端知识 前端哥 585 441 我要收藏

文章目录

  • 一、jQuery是什么
  • 二、jQuery对象与基本语法
  • 三、选择器和筛选器
    • 1、选择器
      • （1）基本选择器
      • （2）层级选择器
      • （3）基本筛选器
      • （4）属性选择器
      • （5）表单选择器
    • 2、筛选器
      • （1）过滤筛选器
      • （2）查找筛选器
  • 四、属性操作
  • 五、jQuery循环
  • 六、文档处理
  • 七、css操作
  • 八、事件
    • （1）两种事件加载方式
    • （2）事件绑定与解除
    • （3）事件代理
  • 九、动画效果
    • （1）显示/隐藏/切换
    • （2）滑动
    • （3）淡入淡出
  • 十、扩展方法（插件机制）

一、jQuery是什么

jQuery是javascript的一个轻量级库，兼容各种浏览器。

二、jQuery对象与基本语法

首先需要官网下载 jQuery库文件，再导入到html文档中，即：

script src="jquery-3.1.1.js"></script>

使用 jQuery 的方法，需要在每条语句前，写出jQuery对象。jQuery的对象为 $ (等同jQuery)。
基本语法： $(selector)action()
jQuery对象与DOM对象相互转化：

var $var1 = jQuery对象
var var2 = DOM对象

jQuery对象转化为DOM对象：
$var1[0]

DOM对象转化为jQuery对象:
$(var2)

三、选择器和筛选器

1、选择器

（1）基本选择器

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

<p id="p1" lmx="nb">p1</p>
<p id="p2" lmx="nb">p2</p>

<div class="outer">
    outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>lmx</p>
</div>

<div class="outer2">luMX</div>
<p>hello p</p>

<script src="jquery-3.1.1.js"></script>
<script>
    // $("div").css("color","red");
    // $("*").css("color","red");
    // $("#p1").css("color","red");
    // $(".outer").css("color","red");
    $(".inner,p,div").css("color","red");
</script>

</body>
</html>

（2）层级选择器

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

<p id="p1" lmx="nb">p1</p>
<p id="p2" lmx="nb">p2</p>

<div class="outer">
    outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>lmx</p>
</div>
<p>hello p3</p>
<div class="outer2">luMX</div>
<p>hello p3</p>

<script src="jquery-3.1.1.js"></script>
<script>
    // $(".outer p").css("color","red");   //后代选择器
    // $(".outer>p").css("color","red");   //子代选择器
    // $(".outer+p").css("color","red");   //选择下面紧邻的一个兄弟
    $(".outer~p").css("color","red");   //选择下面的所有兄弟
</script>

</body>
</html>

（3）基本筛选器

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

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
</ul>

<script src="jquery-3.1.1.js"></script>
<script>
    // $("li:first").css("color","red");
    // $("li:last").css("color","red");
    // $("li:eq(1)").css("color","red");
    // $("li:gt(2)").css("color","red");
    $("li:lt(2)").css("color","red");
</script>

</body>
</html>

（4）属性选择器

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

<p id="p1" lmx="nb">p1</p>
<p id="p2" lmx="nb2">p2</p>

<div class="outer">
    outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>lmx</p>
</div>
<p>hello p3</p>
<div class="outer2">luMX</div>
<p>hello p3</p>

<script src="jquery-3.1.1.js"></script>
<script>
    // $("[lmx]").css("color","red");
    // $("[lmx='nb2']").css("color","red");
    $("[lmx][id='p1']").css("color","red");
</script>

</body>
</html>

（5）表单选择器

只适用于input标签

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

<input type="text">
<input type="checkbox">
<input type="submit">

<script src="jquery-3.1.1.js"></script>
<script>
    // $("[type='text']").css("width","400px");
    $(":text").css("width","400px");    //表单选择器，与上面等同
</script>

</body>
</html>

2、筛选器

（1）过滤筛选器

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

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li>666</li>
    <li>777</li>
</ul>

<script src="jquery-3.1.1.js"></script>
<script>
    // $("li").eq(2).css("color","red");
    // $("li").first().css("color","red");
    $("li").last().css("color","red");

</script>

</body>
</html>

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

<div class="div1" con="c1"></div>

<script src="jquery-3.1.1.js"></script>

<script>

    console.log($("div").hasClass("div1")); // true

</script>

</body>
</html>

（2）查找筛选器

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

<p id="p1" lmx="nb">p1</p>
<p id="p2" lmx="nb2">p2</p>

<div class="outer">
    outer
    <div class="inner">
        inner
        <p>inner p</p>
    </div>
    <p>lmx</p>
</div>
<p>hello p3</p>
<div class="outer2">luMX</div>
<p>hello p3</p>

<script src="jquery-3.1.1.js"></script>
<script>
    // $(".outer").children("p").css("color","red");   //选择子代p标签
    // $(".outer").find("p").css("color","red");   //找出outer内所有p标签
    // console.log($(".outer .inner p").parent().html());
    // $(".outer .inner p").parents().css("color","red");
    // $(".outer .inner p").parentsUntil(".outer").css("color","red");
    $(".outer").siblings().css("color","red");
</script>

</body>
</html>

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

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
    <li>555</li>
    <li id="end">666</li>
    <li>777</li>
</ul>

<script src="jquery-3.1.1.js"></script>
<script>
    // $("li").eq(2).next().css("color","red");
    // $("li").eq(2).nextAll().css("color","red");
    $("li").eq(2).nextUntil("#end").css("color","red");

    // $("li").eq(4).prev().css("color","red");
    // $("li").eq(4).prevAll().css("color","red");
    // $("li").eq(4).prevUntil("li:eq(4)").css("color","red");

</script>

</body>
</html>

四、属性操作

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

<div class="div1" con="c1"></div>
<input type="checkbox" checked><span>是否可见</span>
<input type="checkbox"><span>是否可见</span>

<input type="text" value="123">

<script src="jquery-3.1.1.js"></script>

<div class="div2"></div>
<script>

    // console.log($("div").attr("con"));  // c1
    $("div").attr("con","c2");  // 设置con的值为c2
    // console.log($("div").attr("con"));  // c2
    console.log($(".div2").attr("con")); // c2
    $(".div2").removeAttr("con");
    console.log($(".div2").attr("con")); // undefined

    // console.log($(":checkbox:first").attr("checked"));  // checked
    // console.log($(":checkbox:last").attr("checked"));  // undefined

    // console.log($(":checkbox:first").prop("checked"));  // true
    // console.log($(":checkbox:last").prop("checked"));   // false

    // console.log($("div").prop("con"));  // undefined
    // console.log($("div").prop("class"));// div1 返回第一个class值
    // $(".div1").removeClass("div1");
    // console.log($("div").prop("class"));

</script>

</body>
</html>

总结：处理自定义属性用attr，处理固有属性用prop。

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

<div class="div1" con="c1"></div>
<input type="checkbox" checked><span>是否可见</span>
<input type="checkbox"><span>是否可见</span>

<input type="text" value="123">
<div value="456"></div>

<script src="jquery-3.1.1.js"></script>

<div class="div2"></div>

<div id="id1">
    uuuuu
    <p>ppppp</p>
</div>
<script>

    // console.log($("#id1").html());
    // console.log($("#id1").text());
    // console.log($("#id1").text("<h1>YUAN</h1>"))

    // val()返回的是固有属性
    // console.log($(":text").val());  // 123
    console.log($(":text").next().val()); // 返回空
    $(":text").val("789");
</script>

</body>
</html>

五、jQuery循环

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

<p>aaa</p>
<p>bbb</p>
<p>ccc</p>

<script src="jquery-3.1.1.js"></script>

<script>

    arr=[11,22,33];

    // 将p标签的内容替换为11,22,33
    // for (var i=0;i<arr.length;i++){
    //     $("p").eq(i).html(arr[i]);
    // }

    //方式一
    // $.each(arr,function (x,y){
    //     console.log(x);
    //     console.log(y);
    // });

    //方式二
    $("p").each(function (){
        console.log($(this));
        $(this).html("hello");
    });
</script>

</body>
</html>

六、文档处理

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

<div class="c1">
    <p>hello p</p>
</div>

<button class="button1">add</button>
<button class="button2">内部插入1</button>
<button class="button3">内部插入2</button>
<button class="button4">外部插入1</button>
<button class="button5">外部插入2</button>
<button class="button6">替换</button>
<button class="button7">删除与清空</button>

<script src="jquery-3.1.1.js"></script>
<script>
    $(".button1").click(function (){
        $(".c1").append("<h1>hello h1</h1>");
    })

    $(".button2").click(function (){
        var $ele=$("<h1></h1>");
        $ele.html("hello world!");
        $ele.css({"color":"red", "background-color":"green"});

        // $(".c1").append($ele);   //插入到c1内部,插到最下面
        $ele.appendTo(".c1");   // 与上一句效果等同
    })

    $(".button3").click(function (){
        var $ele=$("<h1></h1>");
        $ele.html("hello world!");
        $ele.css({"color":"red", "background-color":"green"});

        // $(".c1").prepend($ele); // //插入到c1内部,插到最上面
        $ele.prependTo(".c1");  // 与上一句效果等同
    })

    $(".button4").click(function (){
        var $ele=$("<h1></h1>");
        $ele.html("hello world!");
        $ele.css({"color":"red", "background-color":"green"});

        // $(".c1").after($ele);   // 插入到c1下面
        $ele.insertAfter(".c1");    // 与上一句效果等同
    })

    $(".button5").click(function (){
        var $ele=$("<h1></h1>");
        $ele.html("hello world!");
        $ele.css({"color":"red", "background-color":"green"});

        // $(".c1").before($ele);   // 插入到c1上面
        $ele.insertBefore(".c1");    // 与上一句效果等同
    })

    $(".button6").click(function (){
        var $ele=$("<h1></h1>");
        $ele.html("hello world!");
        $ele.css({"color":"red", "background-color":"green"});

        $("p").replaceWith($ele);
    })

    $(".button7").click(function (){
        // $(".c1").empty();    //清空c1内部
        $(".c1").remove();  //连同c1一起删除
    })

</script>

</body>
</html>

七、css操作

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

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1,.div2{
            width: 200px;
            height: 100px;
        }
        .div1{
            background-color: #84a42b;
        }
        .div2{
            background-color: coral;
        }
        .outer{
            position: relative;
        }
    </style>
</head>
<body>

<div class="div1"></div>

<div class="outer">
    <div class="div2"></div>
</div>

<script src="jquery-3.1.1.js"></script>

<script>

// offset()相对于视口的偏移量
// console.log($(".div1").offset().top);
// console.log($(".div1").offset().left);
// console.log($(".div2").offset().top);
// console.log($(".div2").offset().left);

//position()：相对于已经定位的父标签的偏移量
console.log($(".div1").position().top);
console.log($(".div1").position().left);
console.log($(".div2").position().top);
console.log($(".div2").position().left);

</script>

</body>
</html>

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

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 200px;
            height: 100px;
            background-color: #84a42b;

            border: 5px solid rebeccapurple;
            padding: 20px;
            margin: 2px;
        }

    </style>
</head>
<body>

<div class="div1"></div>

<script src="jquery-3.1.1.js"></script>

<script>

// 内容区的高度宽度
console.log($(".div1").height());
console.log($(".div1").width());

// 内容区加上padding的高度宽度
console.log($(".div1").innerHeight());

//再加上border的高度宽度
console.log($(".div1").outerHeight());

//又加上margin的高度宽度
console.log($(".div1").outerHeight(true));

//也可利用上述方法进行尺寸的设置，例如：
console.log($(".div1").height("400px"));
</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div2{
            width: 100%;
            height: 800px;
            background-color: rebeccapurple;
        }
        .div1{
            width: 40%;
            height: 150px;
            background-color: aquamarine;
            overflow: auto;
        }
        .returnTop{
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 90px;
            height: 50px;
            background-color: gray;
            color: white;
            text-align: center;
            line-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>

<div class="div1">
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
    <h1>111</h1>
</div>

<div class="div2">
    <button onclick="returnTop()">return</button>
</div>

<div class="returnTop hide" onclick="returnTop()">
    返回顶部
</div>

<script src="jquery-3.1.1.js"></script>
<script>

    // onscroll:在元素滚动时,触发相应的事件处理程序
    window.onscroll=function (){
        //scrollTop()：滚动条相对于顶部的垂直偏移量
        //scrollLeft()：滚动条相对于左侧的水平偏移量
        if($(window).scrollTop()>300){
            $(".returnTop").removeClass("hide");
        }else {
            $(".returnTop").addClass("hide");
        }
    };

    function returnTop(){
        $(window).scrollTop(0);
    }

    $(".div2 button").click(function (){
        $(".div1").scrollTop(0);
    })

</script>

</body>
</html>

八、事件

（1）两种事件加载方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.1.js"></script>
    <script>
    	// 整个document加载完毕，执行回调函数function
        // 事件加载方式一
        // $(document).ready(function (){
        //     $("ul li").html(5);
        // });

        // 事件加载方式二
        $(function (){
            $("ul li").html(5);
        });
    </script>
</head>
<body>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

<button>add</button>

</body>
</html>

（2）事件绑定与解除

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

</head>
<body>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

<button>add</button>

<script src="jquery-3.1.1.js"></script>
<script>
    // 绑定方式一,是绑定方式二的简写
    // $("ul li").click(function(){
    //     alert(666);
    // });

    // 绑定方式二
    $("ul li").bind("click",function (){
        alert(666);
    });

    // 解除绑定
    $("ul li").unbind("click");
</script>

</body>
</html>

（3）事件代理

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

</head>
<body>

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>

<button>add</button>

<script src="jquery-3.1.1.js"></script>
<script>
    $("ul").on("click","li",function (){
        alert(666);
    })

    $("button").click(function (){
        var $ele = $("<li>");
        var len = $("ul li").length;
        $ele.html(len);
        $("ul").append($ele);
    })

</script>

</body>
</html>

九、动画效果

（1）显示/隐藏/切换

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

</head>
<body>

<div>hello</div>

<button onclick="f1()">显示</button>
<button onclick="f2()">隐藏</button>
<button onclick="f3()">切换</button>

<script src="jquery-3.1.1.js"></script>
<script>
    function f1(){
        $("div").show(1000,function(){  // 1000毫秒显示。function为回调函数
            alert("show")
        });
    }

    function f2(){
        $("div").hide(1000,function(){
            alert("hide")
        });
    }

    function f3(){
        $("div").toggle(1000);
    }

</script>

</body>
</html>

（2）滑动

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

    <style>
        #content{
            text-align: center;
            background-color: lightblue;
            border: solid 1px red;
            padding: 50px;
        }
    </style>
    <script src="jquery-3.1.1.js"></script>
    <script>
        $(document).ready(function(){
            $("#slideDown").click(function (){
                $("#content").slideDown(1000);
            });

            $("#slideUp").click(function (){
                $("#content").slideUp(1000);
            });

            $("#slideToggle").click(function (){
                $("#content").slideToggle(1000);
            })
        });
    </script>


</head>
<body>

<div id="slideDown">slideDown</div>
<div id="slideUp">slideUp</div>
<div id="slideToggle">toggle</div>
<div id="content">hello world</div>

</body>
</html>

（3）淡入淡出

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

    <script src="jquery-3.1.1.js"></script>

    <script>
        $(document).ready(function (){
            $("#in").click(function (){
                $("#id1").fadeIn(2000);
            });

            $("#out").click(function (){
                $("#id1").fadeOut(2000);
            });

            $("#toggle").click(function (){
                $("#id1").fadeToggle(2000);
            })

            $("#fadeto").click(function (){
                $("#id1").fadeTo(1000,0.5)
            })
        });
    </script>


</head>
<body>

<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>

<div id="id1" style="width: 80px;height: 80px;background-color: blueviolet"></div>

</body>
</html>

十、扩展方法（插件机制）

$.extend(object)    // 为jQuery添加一个静态方法
$.fn.extend(object) // 为jQuery实例添加一个方法

第一种方法：

$.extend({
    Myprint:function(){
        console.log("hello");
    }
});

$.Myprint();

第二种方法：

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

<p>111</p>
<p>222</p>
<p>333</p>

<script>

$.fn.extend({
    GetText:function (){
        for (var i=0;i<this.length;i++){
            console.log(this[i].innerHTML);
        }
    },
    gettext:function (){
        $.each($(this),function (x,y){
            console.log($(y).html());
        });
    }
})

$("p").GetText();
$("p").gettext();

</script>
</body>
</html>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/13155.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

读魏书生的心得体会

2024-07-03 14:07:10

jQuery 选择器

2024-05-12 00:05:34

jQuery框架实现元素显示及隐藏动画【附案例分析】

2024-07-02 23:07:50

猴子也能学会的jQuery第一期——什么是jQuery

2024-07-02 23:07:41

Vue ts项目中封装echarts组件

2024-07-02 23:07:40

echarts添加水印背景，以及鼠标经过水印区域不显示tooltip的问题

2024-07-02 23:07:38

Vue puppeteer插件安装问题解决方案

2024-07-02 23:07:34

Vue中public/assets目录区别

2024-07-02 23:07:29

【VUE】7、VUE项目中集成watermark实现页面添加水印

2024-07-02 23:07:28

【Vue】如何使用Webpack实现打包操作

2024-07-02 23:07:11

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！