jquery速成大法

Cherish李 Cherish李     2022-08-28     455

关键词:

什么是JQuery呢,很多都是只闻其名。

jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

要用JQuery,首先要有一定的JS基础,否则根本看不懂这是个嘛玩意。有了JS基础后,就会发现,哇,JS好复杂,JQuery好简单粗暴

下面就让我们来看一下如何来用JQuery

【Jquery语法】
         1.通过jQuery("选择器").action();通过选择器调用事件函数。
             但JQuery中jQuery可以用$符代替,$("选择器").action();
             ①选择器可以直接使用CSS选择器,选中元素
             ②action表示对元素执行的操作

ps:各种选择器的用法可以自己去查帮助文档
         2.文档就绪函数:防止了文档在完全加载(就绪)之前运行JQuery代码
             $(document).ready(function(){
                    JQuery代码
                });
            $(function(){})//这是文档就绪函数简写方式PS


看到文档就绪函数,不免就会想到JS中的window.onload。这里我们来说一下它们俩的区别

①.window.onload需在网页所有内容加载完成后执行,包括图片音频等。 而文档就绪函数只需要在网页DOM结构加载以后便可执行。

②.window.onload只能写一个,写多个只会执行最后一个。 文档就绪函数,可以写多个,也不会被覆盖。


当然,原生DOM对可以与JQuery对象可以相互转化

①原生DOM对象转JQuery对象: $(DOM对象);
            var p=document.getElementById("p");
            $(P);//转为JQuery对象
②JQuery对象转DOM对象
         $("p").get[0]   或者  $("p")[0]
         例子:$("p").get(0).style.color="red";


当然我们一般也不会这么干,容易弄混了。

JQuery中的事件绑定

时间绑定的快捷方式

$("button:first").click(function(){

})

 使用on进行事件绑定

使用on进行单事件绑定

$("button").on("click",function(){

  //this取到当前调用函数的对象

  console.log($(this).html());

})

使用on同时为多个事件绑定同一函数

$("button").on("mouseover click",function(){

  console.log($(this).html());

})

调用函数时传入自定义参数

$("button").on("click",{name:"lyx"},function(event){

  //使用event.data.属性名 找到传入的参数

  console.log(event.data.name);

})

使用on进行多函数多事件绑定

$("button").on({

  click:function(){

  console.log("click")

  },

  mouseover:function(){

  console.log("mouseover")

}

})

使用on进行事件委派

>>将原本应该绑定到某元素上的事件还为绑定在父元素乃至根节点上,然后委派给当前元素生效

eg:$("p").click(function({}));

$(document).on("click","p",function(){});

>>默认的绑定方式只能帮顶到页面初始时已有的p元素,当前页面新增p元素时。无法绑定到新元素上;

使用事件委派方式,当页面新增元素时,可以为所有新元素绑定事件

$("button").on("click",function(){

  var p=$("<p>44444</p>");

  $("p").after(p);

})

$(document).on("click","p",function(){

  alert("1");

})

这段程序中新增的P都会有alert("1") 事件

 

 

off取消事件绑定

1.$("p").off(); 取消所有事件

2.$().off("click"); 取消点击事件

3.$("p").off("click mouseover")取消多个事件

4.$(document).off("click","p")取消事件委派

 

用.one绑定事件,只能执行一次

 $("button").one("click",function(){

  alert("1");

})

 

.trigger("event")自动触发某元素的事件

 

$("p").click(function(event,arg1,arg2){

  alert("触发了p的click事件"+arg1+arg2);

})

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

  $("p").trigger("click",["haha00","hehe"]);

})

JQuery中常见的动画效果

.show
①.不传参:让隐藏的元素直接显示,不进行动画
②传入时间:多少毫秒之间之内完成动画
③传入(时间,函数):完成动画之后,执行回掉函数
.show()动画执行效果:同时修改元素的宽度,高度,opacity属性
.hide()让显示元素隐藏,与show()相反
.slideDown()让隐藏元素显示,效果为从上往下增加高度
.slideUp()让显示元素隐藏,效果,从下往上减小高度
.slideToggle()让现实的隐藏,让隐藏的显示
.fadeOut():让显示元素隐藏,淡出
.fadein();让隐藏元素显示,淡入
.fadeToggle();让现实的隐藏,让隐藏的显示,淡入淡出
.fadeTo(时间,透明度,函数);同.fadeToggle(),但多了透明度参数,可以指定显示的最终透明度
.animate({最终样式属性键值对},动画时间,动画效果"linear" "swing",回掉函数)   自定义动画

    p{
                width: 0px;
                height: 100px;
                background-color: green;
                overflow:"hidden";
                /*display: none;*/
            }
            $("p").animate({
                width:"100px",
                opacity:"0.5"
                
            },3000,"linear",function(){
                alert("hello")
            })

 

 这段JQ代码的效果是使p的宽度在3秒内从0渐变为100px,透明度由1渐变为0.5,

动画效果完成后执行函数,alert("hello")

sqlserver速成之路索引与数据完整性(代码片段)

🎉个人主页:这个昵称我想了20分钟✨往期专栏:【速成之路】jQuery🎖️专栏:【速成之路】SQLserver🔓往期回顾:【SQLserver速成之路】数据库基础【SQLserver速成之路】数据库和表(一)【SQLserv... 查看详情

前端构建大法gulp系列

参考:前端构建大法Gulp系列(一):为什么需要前端构建前端构建大法Gulp系列(二):为什么选择gulp前端构建大法Gulp系列(三):gulp的4个API让你成为gulp专家前端构建大法Gulp系列(四):gulp实战 查看详情

珂学大法好

珂朵莉好可爱啊(QAQ)! 查看详情

精配色达人速成

查看详情

vim粘贴大法好(代码片段)

粘贴之前,先:setpaste然后粘贴粘贴之后:setnopaste 查看详情

bnu34974matlab大法好

题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=34974MATLAB大法好 TimeLimit: 8000msMemoryLimit: 65536KB64-bitintegerIOformat: %lld     Javaclassname:&nbs 查看详情

大法师广泛的

Matlab读文件     数字图像处理参考importjava.io.*;importjava.net.URL;publicclassLove publicstaticvoidmain(String[]args)throwsIOException //TODOAuto-generatedmethodstub System.out.println("HelloWorld!"); 查看详情

linux终端命令行首尾切换大法

切换到命令行开始ctrl+a切换到命令行结尾ctrl+e 查看详情

对拍大法好!!

 :loop    data.exe   a.exe   b.exe   fc a.out b.out   if not errorlevel 1 goto loop   pause end %%%zyl 查看详情

文件隐藏大法

文件隐藏大法1.将放置文件的文件夹改名为"recycled",如E:/文件/recycled/文件夹下2.将我提供的批处理放在E:/文件/下,与recycled文件夹同在一个目录.3.运行该批处埋..批处理脚本如下:@echooffrem原理:采用与回收站同名文件夹。在该文件... 查看详情

vim大法

Vim大法Vim的精髓在于命令键的组合,全键盘的操作,可以使你手不离开键盘输入区域即可完成所有的操作,想想都是一种炫酷的体验,b格很高~Vim作为Linux上一款强大的开源编辑器,相对于IDE最大的特点就是轻巧,不会卡顿,在wi... 查看详情

textnpm速成课程命令(代码片段)

查看详情

静态路由巡查大法

一、静态路由巡查大法梳理思路:GO1---查看全局路由表中是否有该静态路由---检查下一跳可达性---检查静态路由掩码长度。G02---查看全局路由表中是否有该静态路由---检查出接口状态---检查BFD或者NQA配置状态。G03---查看全局路由... 查看详情

afnetworking速成教程(代码片段)

AFNetworking速成教程(1) ScottSherwood onMarch26,2013Tweet这篇文章还可以在这里找到 英语LearnhowtouseAFNetworking:aneasytousenetworkAPIforiOS!本文是由iOSTutorial小组成员 ScottSherwood撰写,他是一个基于位置动态加载(D 查看详情

afnetworking速成教程(代码片段)

AFNetworking速成教程(1) ScottSherwood onMarch26,2013Tweet这篇文章还可以在这里找到 英语LearnhowtouseAFNetworking:aneasytousenetworkAPIforiOS!本文是由iOSTutorial小组成员 ScottSherwood撰写,他是一个基于位置动态加载(D 查看详情

altiumdesigner18速成实战:汇总贴

...用操作​​第一部分:系统安装及综合设置AltiumDesigner18速成实战第一部分系统安装及综合设置(一)AltiumDesigner18的安装及XXAltiumDesigner18速成实战第一部分系统安装及综合设置(二) 查看详情

卡常数大法好!

咳咳咳……好东西_(:зゝ∠)_转自某位大佬 http://www.cnblogs.com/widerg/p/7353866.htmlC++Interesting卡常数作为一名OIer,在Noip中卡(kǎ)常数可以说是必备技巧。在此总结一下我所知卡常数的神奇手法:IO优化fread和fwrite,如果还想再优... 查看详情

java调试大法,来了~

...么细,有没有什么方法?此时,我一般回复四个字:调试大法。然后,他们就会很懵逼:调试我也会呀,但是,我就做不到你那么细(像是在夸我),难道调试还有我不知道的技巧?我:是的,调试也是有技巧的。同学:那你能... 查看详情