提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
- 系列文章目录
一、jQuery介绍及常用API
- 1.jQuery的概述
- 2.jQuery的使用
- 3.jQuery的入口函数
- 4.jQuery的顶级对象 $
- 5.jQuery对象和dom对象
二、jQuery常用API
- 1.jQuery选择器
- 2.jQuery样式 *** 作
- 3.jQuery筛选选择器
- 4.jQuery的筛选方法(重点)
- 5.jquery的排他思想
三、jQuery链式编程及样式 *** 作
- 1.用css方法 *** 作样式
- 2.设置类样式 方式 (开发常用)
四、jQuery动画
- 1.显示隐藏效果
- 2.滑动效果
- 3.淡入淡出效果
- 4.自定义动画
- 5.事件切换
- 6.动画队列及其停止排队方法
五、jQuery事件绑定和解绑
- 1. jQuery事件注册
- 2.jQuery事件处理 on()绑定事件(常用)
- 3.jQuery事件 off()解绑事件
- 4.自动触发事件trigger()
- 5.jQuery事件对象
六、jQuery其他方法
- 1.jQuery对象的拷贝方法
- 2.jQuery多库共存的两种方法
- 3.jQuery插件的使用
- 总结
一、jQuery介绍及常用API 1.jQuery的概述
简单来说,jQuery就是一个对原生dom进行再次封装的一个库(js文件),通过封装,我们可以快速高效的使用这些被封装好的功能
2.jQuery的使用在jQuery的官网上下载,复制jQuery代码到js文件中,在html页面中script引入js文件
即可
- 等着页面的dom加载完毕再去执行js代码
传统写法: $(document).ready( function () {} )
现在流行: $( function(){} )
相当于原生JS中: DOMcontentLoaded
`注意:$(” “) 字符串尽量用双引号`
4.jQuery的顶级对象 $
$
是jQuery的别称,在书写代码时,两个可以相互替代,实际中常用$
$
是jQuery的顶级对象,相当于原生JavaScript的window,把元素利用$
包装成jQuery对象就可以调用jQuery的方法了
- 用原生js获取来的对象就是dom对象
- 用jQuery获取的对象就是jQuery对象,jQuery对象是一个伪数组形式
- jQuery对象的本质:利用
$
对DOM对象包装后产生的对象 - 注意: jQuery对象只能使用jQuery方法,DOM对象则使用原生的JavaScript的属性和方法
dom对象和jQuery对象可以相互转换
dom转为jQuery对象: $(DOM对象)
jQuery转dom有两种方式:
1.$(DOM对象)[索引号]
2.$(DOM对象).get(索引号)
二、jQuery常用API 1.jQuery选择器
语法: $(‘选择器’)
2.jQuery样式 *** 作语法: $(‘选择器’).css(‘属性’,‘属性值’)
3.jQuery筛选选择器语法:
- 筛选第一个或者最后一个用first/last:$(‘li:first’) ; $(‘li:last’);
- 筛选索引号为奇数odd,为偶数even:$(‘li:odd’); $(‘li:even’)
- 筛选指定索引号:$('li:eq(index)) ; index从0 开始
parent():
找距离自己最近一级的父级元素 找亲爸爸children():
找自己的亲儿子 不会找到孙子 类似于亲儿子选择器,参数:你要查找的亲儿子find():
可以查找里面所有的后代元素 儿子孙子 类似于后代选择器siblings():
找自己的亲兄弟元素- nextAll():查找当前元素之后的所有同辈元素
- prevtAll();查找当前元素之前的所有同辈元素
eq():
参数:索引号- hasClass():判断是否拥有该类名;参数:字符串类名 返回值:boolean
排它思想:当前元素设置样式,其余的兄弟元素清除样式
得到当前元素的索引号方法:$(元素).index()
$(function(){
$('button').click(function(){
$(this).css('backgroundColor','red')
$(this).siblings('button').css('backgroundColor',' ')
})
})
三、jQuery链式编程及样式 *** 作 1.用css方法 *** 作样式
jQuery可以通过css方法来修改简单元素样式;也可以 *** 作类、修改多个样式
- 参数致谢属性名,返回的是属性值;$(this).css(‘color’)
- 参数是:属性名,属性值;则是设置一组样式
- 参数可以是对象的形式,在对象中写入多组样式,多组样式之间用逗号分隔;键值对用冒号分隔,属性可以不加引号
对要设置的元素进行样式设置时,给她一个类写在css文件中,当该元素需要这个样式的时候,为这个元素添加类即可
注意区别:元素JS中的className会覆盖元素原先里面的类 ;jQuery的类 *** 作只是对指定类进行 *** 作,不会影响原先的类名
- 增加类addClass(‘类名’)
- 移除类removeClass(‘类名’)
- 切换类toggleClass(‘类名’)
四、jQuery动画 1.显示隐藏效果
注意:一般不加参数 直接显示或者隐藏
- show ( [ speed , [ easing ] , [ fn ] ] )
三个参数都可以省略,无动画直接显示;
speed:三种速度字符串选择(‘slow’;‘normal’; ‘fast’)或者填写表示动画时长的毫秒数
easing:用来指定切换效果,默认是:’swing:由慢到快到慢‘;’linear:匀速的‘
fn:回调函数,在动画完成时执行的函数,每个元素执行一次 - hide ( [ speed , [ easing ] , [ fn ] ] )
三个参数都可以省略,无动画直接显示;
speed:三种速度字符串选择(‘slow’;‘normal’; ‘fast’)或者填写表示动画时长的毫秒数
easing:用来指定切换效果,默认是:’swing:由慢到快到慢‘;’linear:匀速的‘
fn:回调函数,在动画完成时执行的函数,每个元素执行一次 - toggle ()
三个参数都可以省略,无动画直接显示;
speed:三种速度字符串选择(‘slow’;‘normal’; ‘fast’)或者填写表示动画时长的毫秒数
easing:用来指定切换效果,默认是:’swing:由慢到快到慢‘;’linear:匀速的‘
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
注意:三个参数如上
- slideDown()
- slideUp()
- slideToggle()
注意:三个参数如上
- fadeIn():fade逐渐 in 进去 ;
- fadeOut()
- fadeToggle()
- fadeTo( [ [speed] , [ easing ] , opacity, [ fn ] ] ):修改透明度:渐进方式调整到指定的不透明度;opacity必须写,值:0-1之间
- animate( params , [ speed ] , [ easing ] ,[ fn ] )
- params:想要更改的样式属性,以对象的形式传递,必须写;复合属性采用驼峰命名
hover( [over] out )
: $(‘div’).hover(function(){},function(){}) 鼠标 经过离开的复合写法
- over:鼠标移动到某个元素上要触发的函数 相当于mouseenter/mouseover
- out:鼠标移除元素要触发的函数( 相当于mouseleave )
- 如果只有一个函数:则鼠标经过和鼠标离开都会触发这个函数
1.动画或效果队列:动画或者效果一旦触发就会执行,如果多次触发,就会造成多个动画或者效果排队执行
2.停止队列
语法:stop()
作用:用于停止动画或者效果
注意:stop要写在动画的前面,相当于停止/结束上一次的动画
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
五、jQuery事件绑定和解绑 1. jQuery事件注册 2.jQuery事件处理 on()绑定事件(常用)
- 介绍:on() 方法在匹配的元素上能够绑定一个或多个事件
- 语法:元素A.on(events,[selector],fn)
event:一个或者多个事件类型 ,多个事件通过对象以键值对的形式记录事件/多个事件还可以用空格隔开: ’‘ mouseenter mouseleave’’
// 2. 事件处理on
// (1) on可以绑定1个或者多个事件处理程序
$("div").on({
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
},
mouseleave: function() {
$(this).css("background", "blue");
}
});
selector:元素A的子元素选择器
fn:回调函数;绑定在元素身上的监听函数
- 通过on()方法可以实现事件委托
事件委托:把原来加给子元素身上的事件绑定在父元素身上,就是把事件委托给父元素
eg: $('ul').on('click','li') 给li都绑定了事件;也用到了事件冒泡的原理
- 通过on()方法可以给动态生成的元素绑定事件
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托(委派)
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// click 是绑定在ul 身上的,但是 触发的对象是 ul 里面的小li
// (3) on可以给未来动态创建的元素绑定事件
// $("ol li").click(function() {
// alert(11);
// })
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("我是后来创建的 ");
$("ol").append(li);
3.jQuery事件 off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序
- $(‘div’).off() :把div元素通过on绑定的事件全部移除
- $(‘div’).off(’click‘) :只移除on绑定的click事件
- 解除事件委托
特别的 : 元素.one() :元素绑定的事件只触发一次
$('ul').on('click','li',function(){
alert(123);
})
$('ul').off('click','li')
4.自动触发事件trigger()
- 方法一:元素.事件()
- 方法二:元素.trigger(’‘事件名’‘)
- 方式三:元素.triggerHandler(‘’ 事件名 ‘’)
方式三:此方法不会触发元素的默认行为,比如用此方法给input的text类型绑定focus事件自动触发,触发之后光标不会在input表单里面闪烁,如果用方式二进行同样的 *** 作,自动触发结束后,通过方式二的光标会在input表单内闪烁
只要事件触发 ,就会由事件对象的产生
应用:
阻止默认行为:e.preventDefault()
阻止冒泡: e.stopPropagation()
六、jQuery其他方法 1.jQuery对象的拷贝方法
把某个对象拷贝给另外一个对象使用,此时使用$.extend()方法
语法:$.extend( [deep] , target , object1 , [objectN] )
`注意:当target自己也自带一些属性,如果object1中的属性和target的属性相同,则object1会覆盖target自身的相同属性`
- deep:如果设置为true则是深拷贝、默认是false浅拷贝
- target:要拷贝的目标对象
- object1:把object1拷贝给target
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)