jquery学习
💡:详细文档请查看 jQuery API 中文文档
入口函数
$(function(){
})
1.等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成, jQuery帮我们完成了封装。
2.相当于原生js中的DOMContentl oaded.
3.不同于原生js中的load事件是等页面文档、外部的js文件、css文件、 图片加载完毕才执行内部代码。
jQuery的顶级对象
1.$
是jQuery的别称,在代码中可以使用jQuery代替$
,但一般为了方便,通常都直接使用$
.
2.$
是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用
jQuery的方法。
jQuery对象和DOM对象
因为原生js比jQuery大,原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用
1.DOM对象转换为jQuery对象:$(DOM对象)
$('div')
2.jQuery对象转换为DOM对象(两种方式)
$('div')[index] index是索引号
$('div').get(index) inde是索引号
jQuery选择器
$('选择器') //里面选择器直接写CSS选择器即可,但是要加引号
基本选择器
层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $('ul>li') |
使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $('ul li') |
使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
jQuery设置样式
$('div').css('属性','值')
隐式迭代
遍历内部DOM元素(伪数组形式存储) 的过程就叫做隐式迭代
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,
方便我们调用。
示例
<div>周杰伦</div>
<div>刘德华</div>
<div>马可波罗</div>
<ul>
<li>猪八戒</li>
<li>孙悟空</li>
<li>沙和尚</li>
</ul>
$(function(){
$('div').css('background','pink')
$('ul li').css('color','skyblue')
})
jQuery筛选选择器
示例
<ul>
<li>HTMl</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>周一</li>
<li>周二</li>
<li>周三</li>
</ol>
$(function(){
$('ul li:first').css('background','red')
$('ul li:last').css('background','green')
$('ul li:eq(1)').css('background','pink')
$('ol li:odd').css('color','blue')
$('ol li:even').css('color','skyblue')
})
jQuery筛选方法
jQuery遍历
用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止
遍历-祖先(查找)
1、parent( ) 方法返回被选元素的直接父元素
返回每个<span>
元素的直接父元素
$("span").parent();
2、parents( ) 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>
)
返回所有 <span>
元素的所有祖先
$("span").parents();
3、parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
返回介于<span>
与 <div>
元素之间的所有祖先元素
$("span").parentsUntil("div");
遍历-后代(查找)
1、children() 方法返回被选元素的所有直接子元素
返回每个<div>
元素的所有直接子元素
$("div").children();
返回类名为 "1" 的所有 <p>
元素,并且它们是<div>
的直接子元素
$("div").children("p.1");
2、find() 方法返回被选元素的后代元素,一路向下直到最后一个后代
返回属于<div>
后代的所有<span>
元素
$('div').find('span')
返回 <div>
的所有后代
$("div").find("*");
遍历-兄弟(查找)
1、siblings() 方法返回被选元素的所有兄弟元素
返回 <h2>
的所有兄弟元素
$("h2").siblings();
🟢使用可选参数来过滤对兄弟元素的搜索
返回属于 <h2>
的同胞元素的所有<p>
元素
$("h2").siblings('p');
2、next() 方法返回被选元素的下一个兄弟元素,该方法只返回一个元素
返回 <h2>
的下一个兄弟元素
$("h2").next();
3、nextAll() 方法返回被选元素的所有跟随的兄弟元素
返回 <h2>
的所有跟随的兄弟元素
$("h2").nextAll();
4、nextUntil() 方法返回介于两个给定参数之间的所有跟随的兄弟元素
返回介于 <h2>
与<h6>
元素之间的所有兄弟元素
$("h2").nextUntil("h6");
🟢prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的兄弟元素(在 DOM 树中沿着兄弟之前元素遍历,而不是之后元素遍历)
jQuery过滤
1、first() 方法返回被选元素的首个元素。
选取首个<div>
元素内部的第一个<p>
元素
$("div p").first();
2、last() 方法返回被选元素的最后一个元素。
选择最后一个 <div>
元素中的最后一个<p>
元素:
$("div p").last();
3、eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始,因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个·<p>
元素(索引号 1)
$("p").eq(1);
4、filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
下面的例子返回带有类名 "url" 的所有 <p>
元素:
$("p").filter(".url");
5、not() 方法返回不匹配标准的所有元素,not() 方法与 filter() 相反
返回不带有类名 "url" 的所有<p>
元素
$("p").not(".url");
6、hasClass(class)检查当前的元素是否含有某个特定的类,如果有,则返回true
给div里面包含名为protected的元素设置一个动画
$("div").click(function(){
if ( $(this).hasClass("protected") )
$(this)
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: -10 })
.animate({ left: 10 })
.animate({ left: 0 });
});
:checked 选取所有被选中的元素,用于复选框、单选框、下拉框
:selected 选取所有被选中的元素,该选择器只适用于<option>
:focus 选取当前获取焦点的元素
:text 选取所有的单行文本框(<input type="text">)
:password 选取所有的密码框
:input 选取所有的<input>,<textarea>,<select>,<button>元素。
*注意,$(":input")是选中可以让用户输入的标签元素;而$("input")是选择名字为input的标签元素。*
:enable 选取所有可用元素,该选择器仅可用于支持disable属性的html元素。(<button>,<input>,<optgruop>,<option>,<select>,<textarea>)
:disable 选取所有不可用元素,该选择器也仅可用于支持disable属性的html元素。
:radio 选取所有的单选框
:checkbox 选取所有的多选框
:submit 选取所有的提交按钮
:image 选取所有的input类型为image的表单元素
:reset 选取所有的input类型为reset的表单元素
:button 选取所有的input类型为button的表单元素
:file 选取所有的input类型为file的表单元素
示例
<ol>
<li>橘右京</li>
<li>妲己</li>
<li class="item">哪吒</li>
<li>程咬金</li>
<li>刘备</li>
</ol>
<ol>
<li>橘右京</li>
<li>妲己</li>
<li class="item1">哪吒</li>
<li>程咬金</li>
<li>刘备</li>
</ol>
<ol>
<li>橘右京</li>
<li>妲己</li>
<li class="item2">哪吒</li>
<li>程咬金</li>
<li>刘备</li>
</ol>
<ul>
<li>关羽</li>
<li>张飞</li>
<li>嫦娥</li>
<li>杨戬</li>
<li>典韦</li>
</ul>
<div class="money">我有钱</div>
<div>我没钱</div>
$(function(){
//1. 查找自身元素之外的所有元素
$('.item').siblings('li').css('color','blue');
//2. 查找当前元素之后的同级元素
$('.item1').nextAll().css('color','red');
//3. 查找当前元素之前的同级元素
$('.item2').prevAll().css('color','green');
//4. 查找第n个元素
// 方法1
$('ul li:eq(2)').css('color','#55efc4');
// 方法2 推荐
$('ul li').eq(0).css('font-size','30px');
//5. 判断是否有某个类名
console.log($('div:first').hasClass('money')); // true
console.log($('div:last').hasClass('money')); // false
})
jQuery样式操作
操作CSS方法
1.参数只写属性名,则是返回属性值
$(this).css('color');
2.参数是属性名,属性值,逗号分隔,是一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css('color',red);
3.参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号
$(this).css({'color':'white','font-size':'20px'})
设置类样式方法
1.添加类(addClass相当于追加类名)
$('div').addClass('current')
2.移除类
$('div').removeClass('current')
3.切换类
$('div').toggleClass('current')
jQuery效果
显示与隐藏
show([speed,[easing],[fn]])
显示
语法:
show([speed,[easing],[fn]])
显示参数:
1、参数都可以省略,无动画直接显示。
2、speed :三种预定速度之一 的字符串( "slow" ,"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000)。
3、easing : (Optional)用来指定切换效果,默认是"swing” ,可用参数"Iinear"
4、fn:回调函数,在动画完成时执行的函数,每个元素执行次。
-
hide([speed,[easing],[fn]])
隐藏 -
toggle([speed,[easing],[fn]])
切换
滑动
与显示隐藏的参数相同
-
slideDown([speed,[easing],[fn]])
下滑效果 -
slideUp([speed,[easing],[fn]])
上滑效果 -
slideToggle([speed,[easing],[fn]])
上下滑动切换效果
事件切换
hover([over,]out)
( 1 ) over:鼠标移到元素上要触发的函数(相当于mouseenter )
( 2 ) out:鼠标移出元素要触发的函数(相当于mouseleave )
动画队列及其停止排队方法
1.动画或效果队列
动画或者效果一旦触发就会执行 ,如果多次触发,就造成多个动画或者效果排队执行。
2.停止排队
(1 ) stop()方法用于停止动画或效果。
(2) 注意: stop()写到动画或者效果的前面,相当于停止结束上一 次的动画。
淡入淡出
-
fadeln()
淡入效果 -
fadeOut()
淡出效果 -
fadeToggle()
淡入淡出切换效果 -
fadeTo()
渐进方式调整到指定的不透明度
fadeTo([ [speed] , opacity, [easing], [fn]] )
2.效果参数
(1) opacity透明度必须写,取值0~1之间 (必须写)
(2) speed :三种预定速度之-的字符串( "slow" ,"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000),必须写
(3) easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"linear”
自定义动画
animate()
语法:
animate (params, [speed] , [easing], [fn])
参数
(1) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
(2) speed :三种预定速度之-的字符串( "slow" ,"normal" , or "fast" )或表示动画时长的毫秒数值(如: 1000),必须写
(3) easing : (Optional)用来指定切换效果,默认是"swing” , 可用参数"linear”
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
})
</script>
</body>
jQuery属性操作
1、设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如<a>
元素里面的href ,比如<input>
元素里面的type.
- 获取属性语法
prop('属性')
- 设置属性语法
prop('属性','属性值')
2、设置或获取元素自定义属性值 atr()
用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index= "1"
- 获取属性语法
attr('属性') //类似原生 getAttribute
- 设置属性语法
attr('属性','属性值') //类似原生setAttribute
jQuery事件
事件处理
1、on(events,[selector],[data],fn) 在选择元素上绑定一个或多个事件的事件处理函数
events:一个或多个用空格分隔的事件类型和可选的命名空间
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代
data:当一个事件被触发时要传递event.data给事件处理函数
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false
- 🟢绑定单一事件
$('h1').on('click', function(){
console.log(1);
})
- 🟢绑定多个事件 多个事件名之间使用空格隔开
事件对象 event.type 事件类型
$('h1').on('click mouseover mouseout', function(e){
if(e.type == 'click'){
$(this).css({color:'red'})
}else if(e.type == 'mouseover'){
$(this).css({background:'green'})
}else if(e.type == 'mouseout'){
$(this).css({background:'blue'})
}
- 事件委托
$('.wrap').on('click', 'li', function(e){
// this 指向委托的元素
// console.log(this);
// e.target 事件源对象
// console.log(e.target);
// console.log(e.currentTarget);
})