jQuery之入门1篇（jquery基础）

最新推荐文章于 2023-04-22 15:25:02 发布

这蛆烫头了

最新推荐文章于 2023-04-22 15:25:02 发布

阅读量94

点赞数

分类专栏：学习记录 jQuery 文章标签： jquery

原文链接：https://www.bilibili.com/video/BV1oT4y1u7FS?p=2&spm_id_from=pageDriver

版权

学习记录同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

学习记录：

学习视频链接https://www.bilibili.com/video/BV1oT4y1u7FS?p=2&spm_id_from=pageDriver

jQuery概述：

（1） jQuery就是 JavaScript库

仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

JavaScript库:即library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解︰就是一个JS文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。

（2）常见的JavaScript库

jQuery
Prototype
YUI
Dojo .
ExtJS
移动端的zepto

这些库都是对原生JavaScript的封装,内部都是用JavaScript实现的,我们主要学习的是jQuery.

（3） jQuery的宗旨

jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是"write Less , Do More" , 即倡导写更少的代码,做更多的事情。

j就是JavaScript; Query 查询;意思就是查询js ,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
jQuery封装了JavaScript 常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
学习jQuery本质:就是学习调用这些函数(方法).
jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。

（4） jQuery的优点

轻量级。核心文件才几十kb ,不会影响页面加哦速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等
免费、开源

（5） jQuery的使用

引入jquery文件（官网https://jquery.com/）
使用即可

1. jQuery 的入口函数

$ (function () {
//此处是页面DOM加载完成的入口
}) ;
$ (document) . ready(function() {
//此处是页面DOM加载完成的入口
}) ;

等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, 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>
    <script src="./jquery/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <script>
        // $('div').hide();
        // 1.等着页面DOM加载完毕再去执行js代码
        // $(document). ready( function() {
        // $('div').hide();
        // })
        // 2.
        //等着页面DOM加载完毕再去执行js代码
        $(function() {
            $('div').hide();
        })
    </script>
    <div>
    </div>
</body>

</html>

2. jQuery 的顶级对象$

1. $是jQuery的别称,在代码中可以使用jQuery代替$,但-般为了方便,通常都直接使用$.
2. $是jQuery的顶级对象，相当于原生JavaScript中的window. 把元素利用$包装成jQuery对象,就可以调用jQuery的方法。

<script>
	// 1. $是jQuery的别称(另外的名字)
	// $(function() {
	//
	//alert(11)
	// });
	jQuery(function() {
		// alert(11)
		// $('div').hide();
	jQuery('div').hide();| T
});
	// 2. $同时也是jQuery的 顶级对象
</script>

3. jQuery对象和DOM对象

用原生JS获取来的对象就是DOM对象
jQuery方法获取的元素就是jQuery对象。
jQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储) .

<body>
    <div></div>
    <span></span>
    <script>
        // 1. DOM对象:用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
        var mySpan = document.querySelector('span'); // mySpan 是DOM对象
        console.dir(myDiv);
        // 2. jQuery对象: 用jquery方式获取过来的对象是jQuery对象。 本质:通过$把DOM元素进行了包装
        $('div'); // $('div')是一 个jQuery对象
        $('span'); // $('span')是 一 个jQuery对象
        console.dir($('div'));
        // 3. jQuery 对象只能使用jQuery 方法，DOM对象则使用原生的JavaScirpt 属性和方法
        // myDiv. style.display = ' none ' ;
        // myDiv. hide(); myDiv是一个dom对象不能使用jquery 里面的hide方法
        // $( 'div').style.display = 'none'; 这个$( ' div')是一个jQuery对 象不能使用原生js的属性和方法
    </script>

    <div>
    </div>
</body>

DOM对象与jQuery对象之间是可以相互转换的。
因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

DOM对象转换为jQuery对象: $(DOM对象)

$("div")

jQuery对象转换为DOM对象(两种方式)

$("div") [index]     index是索引号
$("div) .get(index)  index 是索引号

<body>
    <video src=" mov . mp4" muted></video>
    <script>
        // 1. DOM对象转换为jQuery对象
        // (1)我们直接获取视频，得到就是jQuery对象
        $('video');
        // (2)我们已经使用原生js获取过来DOM对象
        var myvideo = document.querySelector('video');
        // $(myvideo). play(); jquery里面没有play 这个方法
        // 2. jQuery对象转换为DOM对象
        // myvideo.play();
		$('video' )[0].play()
		$( 'video ' ).get(0).play() 

    </script>
</body>

4. jQuery选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$(“选择器”）//里面选择器直接写CSS选择器即可，但是要加引号

（1）基础选择器

名称	用法	描述
ID选择器	s("#id")	获取指定ID的元素
全选选择器	$("*")	匹配所有元素
类选择器	s(".class")	获取同一类class的元素
标签选择器	s(“div”)	获取同一类标签的所有元素
并集选择器	s(“li.current”)	选取多个元素
交集选择器	s("#id")	交集元素

（2）层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取亲儿子层级的元素;注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

（3）筛选选择器

语法	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	≤(“li:last”)	获取最后一个li元素
:eq(index)	$(“li:eq(2y”)	获取到的li元素中，选择索引号为2的元素。索引号index从0开始。
:odd	$(“li:odd”)	获取到的li元素中，选择索引号为奇数的元素
:even	s(“li:zeven”)	获取到的li元素中，选择索引号为偶数的元素

（4）筛选方法

语法	用法	描述
parent()	$(“li”) .parent();	查找父级（亲爸爸）
children(selector)	s(“u1”).children(“li”)	相当于s(“ul>li”)，最近一级(亲儿子)
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”).后代选择器
siblings(selector)	s(".first").siblings(“li”);	查找兄弟节点，不包括自己本身
nextAll([expr])	$(".first") . nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last").prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$ ( " div").hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“1i”).eq(2);	相当于s(“li:eq(2)”) ,index从0开始

重点记住: parent() children0 find0 siblings0 eq0

5. 隐式迭代（重要)

遍历内部 DOM元素（伪数组形式存储)的过程就叫做隐式迭代。
简单理解∶给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<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="./jquery/jquery.min.js"></script>
</head>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
	// 1．获取四个div元素
	console.log($("div"));
	// 2．给四个div设置背景颜色为粉色jquery对象不能使用style
	$("div").css("background" , "pink"");
    //3．隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
    $("ul li").css("color","red");
</ script>

6. 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>
    <script src="./jquery/jquery.min.js"></script>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <script>
        $(function() {
            //隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                //当前元素变化背景颜色
                $(this).css("background", "pink");
                //兄弟去掉背景颜色
                $(this).siblings("button").css("background", "");
            })
        })
    </script>
</body>

</html>

下拉菜单案例


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function() {
            // 鼠标经过
            $(".nav>li").mouseover(function() {
                // $(this) jQuery 当前元素  this不要加引号
                // show() 显示元素  hide() 隐藏元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function() {
                $(this).children("ul").hide();
            })
        })
    </script>
</body>

</html>

鼠标移动显示图片案例

①核心原理:鼠标经过左侧盒子某个小li ,就让内容区盒子相对应图片显示,其余的图片隐藏。
②需要得到当前小li的索引号,就可以显示对应索引号的div，显示图片
③jQuery得到当前元素索引号$(this).index()
④中间对应的图片,可以通过eq(index) 方法去选择
⑤显示元素show()隐藏元素hide()


<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            // 1. 鼠标经过左侧的小li 
            $("#left li").mouseover(function() {
                // 2. 得到当前小li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
                // $("#content div").eq(index).show();
                // 4. 让其余的图片（就是其他的兄弟）隐藏起来
                // $("#content div").eq(index).siblings().hide();
                // 链式编程
                $("#content div").eq(index).show().siblings().hide();

            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>
</body>

</html>

7. 操作css方法

（1）操作样式

<head>
    <script src="jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        // 操作样式之css方法
        $(function() {
            console.log($("div").css("width"));
            // $("div").css("width", "300px");
            // $("div").css("width", 300);
            // $("div").css(height, "300px"); 属性名一定要加引号
            $("div").css({
                width: 400,
                height: 400,
                backgroundColor: "red"
                    // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
            })
        })
    </script>
</body>

</html>

（2）操作类


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }
        
        .current {
            background-color: red;
            transform: rotate(360deg);
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="current"></div>
    <script>
        $(function() {
            // 1. 添加类 addClass()
            // $("div").click(function() {
            //     // $(this).addClass("current");
            // });
            // 2. 删除类 removeClass()
            // $("div").click(function() {
            //     $(this).removeClass("current");
            // });
            // 3. 切换类 toggleClass()
            $("div").click(function() {
                $(this).toggleClass("current");
            });
        })
    </script>
</body>

</html>

tab栏切换


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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 978px;
            margin: 100px auto;
        }
        
        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }
        
        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }
        
        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }
        
        .item_info {
            padding: 20px 0 0 20px;
        }
        
        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价（50000）</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价（50000）模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $(function() {
            // 1.点击上部的li，当前li 添加current类，其余兄弟移除类
            $(".tab_list li").click(function() {
                // 链式编程操作
                $(this).addClass("current").siblings().removeClass("current");
                // 2.点击的同时，得到当前li 的索引号
                var index = $(this).index();
                console.log(index);
                // 3.让下部里面相应索引号的item显示，其余的item隐藏
                $(".tab_con .item").eq(index).show().siblings().hide();
            });
        })
    </script>
</body>

</html>

这蛆烫头了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之入门1篇（jquery基础）

学习记录：学习视频链接https://www.bilibili.com/video/BV1oT4y1u7FS?p=2&spm_id_from=pageDriverjQuery概述：（1） jQuery就是 JavaScript库仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。JavaScript库:即library，是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画anima
复制链接

扫一扫

专栏目录