本文介绍了jQuery的基础知识，包括基本概念、语法、选择器和事件。jQuery是一个JavaScript库，简化DOM操作。文中详细讲解了如何使用选择器选取元素，如元素选择器、ID选择器和类选择器，并演示了如何结合事件处理函数实现元素点击变色的效果。此外，还探讨了jQuery的动画效果，如淡入淡出、滑动和自定义动画。
1.Jquery基础知识
1.1基本概念：
Jquery是一个js库，能够帮我们轻松实现一些原本可能比较麻烦的功能。
Jq每个版本都有两个小版本：压缩版和未压缩版，压缩版文件较小，没有排版和注释，所以不利于阅读；未压缩版有排版有注释，利于阅读。
JQ实际就是一个JS文件，加载到页面就可以直接使用了 。
<script src="jquery-3.2.1.min.js"></script>
也可以提供CDN（ContentDistribute Network，内容分发网络）来引用JQ
下面是菜鸟网提供：
<scriptsrc="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
使用cdn的好处:
1. 省事
2. 速度快
缺点：无法调试。
1.2语法：
$（选择器）.action（）；
$：定义了这个是一个JQ的代码。
选择器：（和css非常相似）按照一定的规则选择DOM元素。
Action：对选中元素执行操作。
案例点中p标签内任意一行，都会变红
方法一：比较常用的：
<body>
<p id="id1"
onclick="a()">第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
var p=document.getElementById("id1");
functiona(){
p.style.color="red";
}
方法二：更方便一点的
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
var p=document.getElementsByTagName("p");
for(var
i in
p){
p[i].addEventListener("click",a);
}
方法三：引用jQ
$("p").click(red);
function red(){
this.style.color="red";
}
1.3选择器
（1）元素选择器：
根据表签名来获取元素。
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
$("p").click(red);
functionred(){
this.style.color="red";
}
比如$（“p”）：表示的获取所有的段落
（2）id选择器：
$(“#p1”)：表示选择id=“p1”的元素
<body>
<p>第一个段落</p>
<p id="p2">第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
$("#p2").click(red);
functionred(){
this.style.color="red";
}
</script>
（3）class选择器： $(".top2").click(red);
<p class="top2">第一个段落</p>
<p class="top2">第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
</body>
<script>
$(".top2").click(red);
functionred(){
this.style.color="red";
}
（4）后代选择器： $("div p").click(red);
<div>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
</div>
<p>第四个段落</p>
</body>
<script>
$("div p").click(red);
function red(){
this.style.color
="red";
}
（5）$("p:first").click(red)：表示选择P标签的第一个元素，相当于css中的伪类选择器。
（6）属性选择器： $("p[name]").click(red);
<p
name="first">第一个段落</p>
<p name="qwe">第二个段落</p>
<p name="asd">第三个段落</p>
<p>第四个段落</p>
</body>
<script>
$("p[name]").click(red);
function red(){
this.style.color
="red";
}
（7）$("p[name='asd']").click(red)：只选择：name=asd的
1.4事件：
Jq中注册事件的方法也是调用jq对象的方法，
比如单击事件：
鼠标移入事件
$("#div1").mouseenter()
而且方法名就是js中的事件名
之前，我们所有的js大妈是放在<body>之后的，如果放到body之前呢？
实验证明放到body之前，是会出错的，获取的元素为空，因为代码是从上往下走的，还没有加载完成，所以这样。
怎么解决呢？
$(document).ready(function(){
});
在其中的匿名函数里写你想要的东西，就可以解决这个问题了。
2.动画
2.1显示、隐藏
Hide（）：隐藏
将高度、宽度、透明度变为0.
$("#div1").hide(600); （注意：这个600是毫秒时间，变化的速度，可要可无）
Show（）：显示
将高度、宽度、透明度变为初始的css设置的格式。
$("#div1").show(600);
Toggle（）：
如果display为none的时候，点击一下就变成block；
反之则变成none。
$("#div1").toggle(600);
2.2淡入淡出
fadeIn():淡入
$("#div1").fadeIn(600);
将隐藏的样式通过改变其透明度（透明度从0到1），让他显示出来。
Fadeout：淡出
$("#div1").fadeOut(600);
将显示出的样式通过改变其透明度（透明度从1到0）让他隐藏起来。
fadeToggle：淡入淡出的切换
$("#div1").fadeToggle(600);
如果样式显示，则点击它，就隐藏；反之，出现。
fadeTo：（）：固定其透明度。
$("#div1").fadeTo(600,0.5); 0.5为透明度
2.3滑动
Slideup（）：上滑
$("#div1").slideUp(600);
将设置的高度从初始值变为0，最后隐藏它。
Slidedown（）：下滑
$("#div1").slideDown(600);
显示它，然后将设置的高度从0变为初始值
Slidetoggle（）：上滑下滑切换$("#div1").slideToggle(600);
如果是隐藏，点击它，则出现，反之隐藏。
2.4
Animate：移动，推动
$("button").click(function
() {
/*$("#div1").animate({left:'600px',top:'200px'});*/
$("#div1").animate({left:'300px',width:'200px',height:'200'});
});
同时实现多个属性的方法
$("#div1").animate({
left:'200px',
top:"200px",
width:"+=300px",
height:"+=300px",
opacity:"0.5"
})
2.3预定义值
改变预定义值来实现内容的显示或隐藏
<style>
#div1{
width:100px;
height:100px;
background-color:darkgray;
position:absolute;
}
</style>
</head>
<body>
<button>开始动画</button>
<div id="div1"></div>
</body>
<script>
$("button").click(function
() {
$("#div1").animate({
height:'toggle'
});
})
2.4队列功能
<style>
#div1{
width:100px;
height:100px;
background-color:darkgray;
position:absolute;
}
</style>
</head>
<body>
<button
id="start">开始动画</button>
<button
id="stop">停止</button>
<div id="div1"></div>
</body>
<script>
var div
= $("#div1");
$("#start").click(function
() {
div.animate({height:'300px',
opacity:'0.4'},
"slow");
div.animate({width:
'300px',opacity:
'0.8'},"slow");
div.animate({height:
'100px',opacity:
'0.4'},"slow");
div.animate({width:
'100px',opacity:
'0.8'},"slow");
});
$("#stop").click(function(){
div.stop(true);
});
意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。
2.5相对值
也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：
$("button").click(function(){
$("div").animate({left:'250px', height:'+=150px', width:'+=150px'
});
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
