JQuery

最新推荐文章于 2022-10-17 22:07:41 发布

文洛

最新推荐文章于 2022-10-17 22:07:41 发布

阅读量2.4k

点赞数

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/a126789/article/details/77169957

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、JQuery基础知识

1、基本概念

JQuery是一个JS库，能够帮助我们轻松实行一些原本可能比较麻烦的功能。

Jquery每个又有两个小版本：压缩版和未压缩版，压缩版文件较小、但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。

Jquery实际上就是一个js文件，加载到页面就可以使用了。

<scriptsrc="../jquery-3.2.1.min.js"></script>

也可以通过CDN（Content Distribute Network，内容分发网络）来引用JQuery

菜鸟网：

<scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

百度：

<scriptsrc="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">

使用cdn的好处：

（1）省事

（2）速度更快

2、语法

$(选择器).action();

$：定义了这是一个JQuery的代码。

选择器：按照一定的规则选择DOM元素，非常类似于CSS选择器。

Action：对选中元素执行的操作。

案例：所有段落单击事件变红

方案一：使用js

<body>
 第一个段落
 第二个段落
 第三个段落
 第四个段落
 第五个段落
</body>
<script>
 var paras= document.getElementsByTagName("p");
 for(vari in paras){
 paras[i].addEventListener("click",red);
 }
 function red(){
 this.style.color="red";
 }
</script>

方案二：使用JQuery

<body>
 第一个段落
 第二个段落
 第三个段落
 第四个段落
 第五个段落
</body>
<script>
 $("p").click(red);
 function red(){
 this.style.color="red";
 }
</script>

JQuery的一行代码：

$("p").click(red);

相当于JS的若干行代码：

var paras = document.getElementsByTagName("p");
    for(vari in paras){
        paras[i].addEventListener("click",red);
    }

所以说JQuery极大简化了程序员的工作。

3、选择器

（1）元素选择器：根据标签名来获取元素，比如：

$(“p”)：表示获取所有的段落。

（2）id选择器

$(“#p1”)：表示选择id=”p1”的元素

<body>
 第一个段落
 <p id="p2">第二个段落
 第三个段落
 第四个段落
 第五个段落
</body>
<script>
 $("#p2").click(red);
 function red(){
 this.style.color="red";
 }
</script>

（3）class选择器

$(".top2")：表示选择所有class=”top2”的元素

<body>
 <p class="top2">第一个段落
 <p class="top2">第二个段落
 第三个段落
 第四个段落
 第五个段落
</body>
<script>
 $(".top2").click(red);
 function red(){
 this.style.color="red";
 }
</script>

（4）后代选择器

$("divp")：表示选择div里面的段落

<body>
 <div>
 第一个段落
 第二个段落
 第三个段落
 </div>
 第四个段落
 第五个段落
</body>
<script>
 $("div p").click(red);
 function red(){
 this.style.color="red";
 }
</script>

（5）$(“p:first”)：表示选择p标签的第一个元素，相当于css中的伪类选择器

<body>
 第一个段落
 第二个段落
 第三个段落
 第四个段落
 第五个段落
</body>
<script>
 $("p:first").click(red);
 function red(){
 this.style.color="red";
 }
</script>

（6）属性选择器

$("p[name]"):表示选中所有具有name属性的段落

<body>
 <p name="first">第一个段落
 <p name="second">第二个段落
 <p name="three">第三个段落
 第四个段落
 第五个段落
</body>
<script>
 $("p[name]").click(red);
 function red(){
 this.style.color="red";
 }
</script>

$("p[name='second']")：表示选中所有name=”second”的段落

<body>
 <p name="first">第一个段落
 <p name="second">第二个段落
 <p name="three">第三个段落
 第四个段落
 第五个段落
</body>
<script>
 $("p[name='second']").click(red);
 function red(){
 this.style.color="red";
 }
</script>

$("tr:even")：表示选中所有奇数行的tr

4、事件

JQuery中注册事件的方法也是调用JQuery对象的方法，比如单击事件

$(“#div”).click();

鼠标移入事件

$("#div1").mouseenter();

<style>
 #div1{
 width:100px;
 height:100px;
 background-color:aqua;
 }
 </style>
</head>

<body>
 <div id="div1"></div>
</body>
<script>
 $("#div1").mouseenter(function(){
 //$("#div1").css("background-color","skyblue");
 $(this).css("background-color","yellow");
 });
</script>

而且方法名就是js中的事件名

之前，我们所有的JS代码是放在<body>之后的，如果放在<body>之前呢？实验证明，如果放在body之前，在获取元素时得到的结果为空，因为在执行代码时，文档还没有加载完成，也就是说元素还都不存在。

那怎样解决呢？

将代码放在$(document).ready(function(){……}中，也就是在文档加载完成之后才会去执行。

<script>
 $(document).ready(function(){
 $("#div1").mouseenter(function(){
 //$("#div1").css("background-color","skyblue");
 $(this).css("background-color","yellow");
 });
 });
</script>
<body>
 <div id="div1"></div>
</body>

二、动画

1、显示、隐藏

hide()：隐藏

将高度和宽度以及透明度逐渐变为0。display=”none”

show()：显示

将高度、宽度和透明度变为初始的值（css中定义的初始值）。

Toggle()：切换

将高度、宽度和透明度，如果display的值为none时，点击切换之后，它的值变为block，反之为none。

例子：让一个正方形逐渐缩小并放大

<style>
 #div1{
 width:200px;
 height:200px;
 background-color:aqua;
 }
 </style>
</head>

<body>
 <div id="div1"></div> 
 <button id="btnHide">点击缩小</button>
 <button id="btnShow">点击放大</button>
 <button id="btnToggle">点击缩小或放大</button>
</body>
<script>
 //点击缩小
 $("#btnHide").click(function(){
 $("#div1").hide(3000);
 });
 //点击放大
 $("#btnShow").click(function(){
 $("#div1").show(3000);
 });
 //点击缩小或放大
 $("#btnToggle").click(function(){
 $("#div1").toggle(3000);
 });
</script>

2、淡入淡出

fadeIn()：淡入

将隐藏的样式通过改变其透明度（从0到1），让它显示出来。

//淡入
$("#btnFadeIn").click(function(){
$("#div1").fadeIn(3000);
});

fadeOut()：淡出

将显示出来的样式，再反向让它隐藏起来

//淡出
$("#btnFadeOut").click(function(){
$("#div1").fadeOut(3000);
});

fadeToggle()：切换（淡入/淡出）

可以通过点击来使其淡入或者淡出，要是你先设置了display为none，那么就是先淡入后淡出。

//淡出淡入
$("#btnFadeToggle").click(function(){
$("#div1").fadeToggle(3000);
});

fadeTo()：固定

将以透明度为淡入淡出条件的值固定为一个数值，然后隐藏或者显示的大小或者透明度就会以这个为标准来显示或隐藏。

//固定
$("#btnFadeTo").click(function(){
$("#div1").fadeTo(3000,0.5);
});

3、上滑/下滑

slideUp()：上滑

将设置的高度从初始值变为0，然后隐藏它

slideDown()：下滑

先显示它，将高度从0变为设置的初始值

slideToggle()：上滑/下滑

如果元素是隐藏的，就让它显示，并把它的高度增加；

如果元素是显示的，就让它隐藏，并把它的高度减为0，在隐藏它。

<script>
 $("#btnSlideUp").click(function(){
 $("#div1").slideUp(3000);
 alert("我上滑了！");
 });

 $("#btnSlideDown").click(function(){
 $("#div1").slideDown(3000);
 });

 $("#btnSlideToggle").click(function(){
 $("#div1").slideToggle(3000);
 });
</script>

4、移动

移动一个块到另一个位置

$("button").click(function(){
$("#div1").animate({left:'300px',top:'300px'},5000);
});

同时使用多个属性实现动画效果（移动位置，颜色淡化，大小改变）

var div1 = $("#p");
$("button").click(function(){
    //设置多个CSS属性
    //$("#div1").animate({left:'300px',top:'300px'});
    //设置相关属性,移动中变大
    $("#div1").animate({
        left:'300px',
        width:'+=50px',
        height:'+=50px',
       opacity:'0.5'
    });
});

改变预定义的值来实现我们所需要的内容显示或隐藏

$("#div1").animate({
//height:'hide'//隐藏
height:'toggle'//隐藏再显示
});

.animate()中有三个参数：

第一个参数是需要改变的样式；第二个参数是显示的速度（slow，fast，指定毫秒数）；第三个参数是回调函数

<body>
 <button id="start">开始动画</button>
 <button id="stop">结束动画</button> 
 <div id="div1">
 </div>
</body>
<script>
 var div = $("div");
 $("#start").click(function(){
 div.animate({height:'500px'},"slow");
 div.animate({width:'500px'},"slow");
 div.animate({height:'200px'},"slow");
 div.animate({width:'200px'},"slow");
 });
 $("#stop").click(function(){
 div.stop();
 });
</script>

链：链接，虽然少写了，但是可读性不强。

var div = $("div");
$("#start").click(function(){
//链
div.animate({height:'500px'}).animate({width:'500px'}).animate({height:'200px'}).animate({width:'200px'});
});

文洛

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery

JQuery基础知识1.1基本概念JQuery是一个JS库，能够帮助我们轻松实行一些原本可能比较麻烦的功能。Jquery每个又有两个小版本：压缩版和未压缩版，压缩版文件较小、但没有排版和注释，所以不便于阅读；而未压缩版文件较大，有排版和注释，便于阅读。Jquery实际上就是一个js文件，加载到页面就可以使用了。scriptsrc="../jquery-3.2.1.min
复制链接

扫一扫