【前端新手小白】穿出js开始学习jq

前言

        如果你也和我一样是一个前端新手小白如果你觉得自己的JS功底还有所欠缺，如果你觉得自己平时做的项目还不够丰富，如果你觉得自己遇到的场景还不够丰富或者刚有兴趣来学习的话，那么我将分享一些最最基础，最好理解的关于jq的文章。

一

1.1

        jQuery的介绍，相比javascript对比来说，jQuery就是以另一种方式来代替了javascript，但要是说二者的区别，我自认为js可以抓很多细节，jq可以运用库来进行非常简约的方式来进行网页效果的编辑。

二

2.1

        jq的下载，想要运用这如此方便简约的使用，就要做一些准备工作，比如下载：jQuery

2.2

        jq的使用，下载完得用，我们下载好后是以后缀名为js的一个文件，导入在我们使用的vscode同一文件夹使用即可。

三

3.1

入门学习jq函数基础

        第一种

                        $(function(){

                        ..//此处是页面dom加载完成的入口

                        })

        第二种

                        $(document).ready(function(){

                        ..//此处是页面dom加载完成的入口

                        })

3.2

jq的基本使用

        在我们日后使用jq的过程中经常要使用’$’这个符号，在使用jq中，这个符号就是jQuery的别称，在代码中为了方便就不打jQuery了，通常使用$这个符号

四

4.1

jq的选择器

        假如之前学习过js，我们要获取方式很多，很杂，而且还要考虑浏览器版本兼容否，因此我们上面下载的库就有了大作用，给我们做了封装，是获取元素统一标准

        在这里举例常用的jq选择器

                1.找索引

                        $( ‘标签’ : eq ( 索引值) )

                2.找父级

                        $( ‘标签’ ) . parent( )

                3.找子集

                        $(‘标签’) . children( ‘孩子标签名’ )

                4.找后代

                        $(‘标签’) . find(‘ li’)

                5.找兄弟

                        $(‘标签’).siblings(‘兄弟标签名或不写’)

4.2

排他思想

        在js中了解或熟知排他思想的，就知道需要很好逻辑思维能力才能思考出这里面的思路和意思，但在jq中我们只需要简单几句代码就可以实现排他思想。

        原理：如果在鼠标经过某个盒子的某个button堆中的某一个button，那么这个button需要做出相应的效果，但其他的button不动，上述操作对其他button也是如此。

        方法：我们先获取这些按钮，然后给予点击事件，

                $btn.click(function(){

再通过css样式选择器，来做出被点击button的改变：

                $(this).css(‘width’,100)

                $(this).css(‘color’,’red’)

最后让除这个按钮的兄弟节点全部清除样式，就实现了派他思想

                $(this).siblings().css({

                ‘color’:’’,

                ‘width:’’

                })

4.3

jq效果

        控制这页面效果消失或出现我们可以使用

        首先就是最基础的显示隐藏效果

括号里为参数

        1.都可以不写

        2，speed 代表速度 slow缓慢，normal正常的 fast快速的 还可以直接写毫秒值，比如1000

        3，easing swing 摆动 linear直线

        4，回调函数，在动画执行完执行

                show(speed,[easing],[fn])

                hide(speed,[easing],[fn])

                toggle(speed,[easing],[fn])

4.3.1

滑动效果

                slideDown(speed,[easing],[fn])

                slideUp(speed,[easing],[fn])

                slideToggle(speed,[easing],[fn])

通过不同的方向滑动过去，可控制时间（毫秒）来决定动画的快慢速度

4.3.2

事件切换

hover([over,]out) //就是鼠标经过和移开

over：鼠标移动到元素上要触发的函数（相当与mouseover）

out：鼠标一处元素要触发的函数（相当于mouseleave）

如果只写一个函数，则鼠标经过和离开都会触发它

4.3.3

上面说了两种动画

还有一种为淡入淡出效果

                fadeIn(speed,[easing],[fn])

                fadeOut(speed,[easing],[fn])

                fadeToggle(speed,[easing],[fn])

                fadeTo(speed,opacity,[easing],[fn])

在最后的一个方法中注意必须要写两个参数，speed和opacity。是修改透明度用的，参数为0-1

4.4

自定义动画

        以上为jq给我们的基础的动画移动变化的效果

        动画还可以通过自定义达到自己想要的效果

通过

animate(params,[speed],[easing],[fn])

params:想要更改的样式属性，以对象形式传递，属性名可以不用带引号

speed：三种预定速度之一的字符串（‘slow’,’normal’,or’fast’）或表示动画时长的毫秒数值（如：1000）

easing：（Optional）用来指定切换效果，默认是’swing’,可用参数linear

fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

举例

        在body中我们我们先定义一个带有形状样式的div,再定义一个用来进行效果动画展示的按钮button。

                <div></div>

                <button>an</button>

都完成之后在script中我们先来获取按钮然后给予按钮点击事件，

                 $('button').click(function(){

再通过自定义动画让定义的div完成固定条件的动画。例如让这个div来进行宽和高和颜色的变化

                $('div').animate({

                width:'500px',

                height:'500px',

                backgroundColor:'red'

            })

        })

        这样就可以实现一个形状的动画效果展示，在animate可以添加更多的条件，来进行不同的变化，只要你想。

        jq不仅是技术发展的重要推动力，也是企业创新和协作另一种方式。未来，我们在技术领域的开发中、会在产业应用和社会影响力方面将继续发挥重要作用。