开发者社区> 我巴巴> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jQuery基本用法一

简介: 简介和下载 1、简介 jQuery是一个轻量级的“写得少,做得多”的JavaScript函数库,并且它兼容所有主流浏览器。 2、下载 下载地址: http://jquery.com 英文网站中下载jQuery库文件。
+关注继续查看

简介和下载

1、简介

jQuery是一个轻量级的“写得少,做得多”的JavaScript函数库,并且它兼容所有主流浏览器。

2、下载

下载地址: http://jquery.com 英文网站中下载jQuery库文件。中文网站:http://www.jquery123.com/
下载版本:

  • Production version 用于实际的网站中,已被精简和压缩。
  • Development version 用于测试和开发(未压缩,是可读的代码)。
    示例:jQuery 库是一个 JavaScript 文件,可使用 HTML 的<script> 标签引用它。

常用方法

一、获取元素类型

1、$(css选择器)

    // css(参数) 1个参数 获取  2个参数 设置  {key:value,key,val}
$('.div span').css('background','red');

$()里面可以写css选择器,写法和在 <style></style> 里面的写法一样,都可以选择元素。

2、独有的表达式 even odd first last eq()

()has()children()filter()next()prev()find()eq()index()attr()()里面,也可以写在外面。

$('.myclass:eq(1)').css('background','red');
$('.myclass').eq(1).css('background','red');

都是获取第1个(下标从0开始)添加class属性myclass的元素。

$('div').find('h2').eq(1).css('background','red');

获取div下的第1个h2元素,并把该元素背景设置为红色。

3、筛选 filter和not

filter用于筛选出特定的元素,not用于排除符合特定属性的元素

 $('div').filter('[title="123"]').css('background','red');
$('div').not('.box').css('background','red');//div下除了class含有.box的所有元素。

获取div元素中属性title值为‘123’的元素。

二、操作属性

jQuery的一切都函数化了,无论是获取和设置元素、属性,还是触发事件都是通过方法来操作的,并且往往根据传给方法参数个数来表示获取或者设置属性。
eg:

$('#div1').html(123) //赋值
$('#div1').html()  //取值
css('width','200px') //赋值
alert($('#div1').css('width')) //取值

属性设置方式:

$('#div1').css('width','200px');
$('#div1').css('height','200px');
//一次设置多个属性
$('#div1').css({  // 对象形式 里面可以写多条样式
    'width':'200px',
    'height':'200px',
    'border':'1px solid red'
})

1、attr方法
attr方法可以用于获取和设置属性,而且操作的属性可以是原生的,也可以是自定义的。

$(function(){
    $('div').attr('title','box'); // 赋值
    alert($('div').attr('title')); // 取值
    $('div').attr('class','div1') // 给元素添加属性
})

2、addClass和removeClass
addClass添加class属性,removeClass移除class属性。

$('div').addClass('box2 box4');
$('div').removeClass('box1');

3、val()
相当于原生js里的value属性,用于获取元素的value。
4、length
length是原生js和jQuery都有的属性,用于获取集合的长度,这在jQuery是比较特殊的,一般获取属性jQuery都是封装成方法的,只有这个length特殊。
5、html()
没有参数时表示获取元素里面的所有节点(被该元素标签包围的所有HTML代码),传了参数表示给该元素设置子节点。
6、scrollTop()
获取滚动距离,获取页面滚动距离:$(window).scrollTop();

三、节点操作

<body>
    <div>div</div>
    <span>span</span>
</body>

1、insertBefore 被插入在某个元素的前面(操作同级之间的元素)

span被插入在div前面:

$('span').insertBefore($('div'))

span在前,div在后。

2、before 在元素的前面插入某个元素(操作同级之间的元素)

在div前面插入span:

$('div').before($('span'))

span在前,div在后。

3、insertAfter 被插入在某个元素的后面(操作同级之间的元素)

div被插入在span的后面

$('div').insertAfter($('span'))

span在前,div在后。

4、after 在元素的后面插入某个元素(操作同级之间的元素)

在span的后面插入div:

$('span').after($('div'))

span在前,div在后。
**注意:**insertBefore 和before 的区别是后续操作的主体变了:

$('div').before($('span')).css('background','red');//再div前面插入span,然后改变div的背景颜色为红色。
$('span').insertBefore($('div')).css('background','red');//span被插入到div的前面

两行代码都是把span放在前面,div放在后面,区别就是后面改变背景颜色的元素变了。

5、prependTo 被插入在某个元素的内部前面(操作父子级之间的元素),做为某个元素的第一个子元素。

$('div').prependTo($('span'));

审查元素,变为:

<span>
    <div>div</div>
    span
</span>

6、appendTo 被插入在某个元素的内部后面(操作父子级之间的元素),做为某个元素的最后一个子元素。

$('div').appendTo($('span'));

审查元素,变为:

<span>
    span
    <div>div</div>
</span>

7、prepend 在元素的内部前面面插入某个元素(操作父子级之间的元素)。

$('span').prepend($('div'));

审查元素,变为:

<span>
    <div>div</div>
    span
</span>

8、append 在元素的内部后面插入某个元素(操作父子级之间的元素)。

$('span').append($('div'));

审查元素,变为:

<span>
    span
    <div>div</div>
</span>

**注意:**prepend和prependTo的区别是后续操作的主体变了;和insertBefore与before的区别同理。

9、remove删除元素。

把div元素删:

$('div').remove()

10、parent()获取父级。

11、offsetParent()获取定位父级,如果所有的祖先都没定位,则获取到的是document。

12、hide() 隐藏元素,可传入毫秒数,设置渐变时间。

13、fadeOut()淡出;fadeIn()淡入。

14、slideUp() 往上卷起;slideDown 往下卷出。

15、hover() 鼠标移入移出的合体。hover(function(){},function(){})

$(function(){
    $('#div1').hover(function(){
        $('#div2').slideUp();
    },function(){
        $('#div2').slideDown();
    })
})

四、事件

1、点击事件的参数:

$('div').click(function(ev){
    //ev 事件对象 {}
    // 原生 获取鼠标的坐标 ev.clientX(相对于可视区) ev.clientY(相对于可视区)
    // jq  ev.pageX(相对文档的)  ev.pageY (相对文档的)
    console.log(ev)
})

2、off()

没有参数时:关闭事件,也就是让事件后面的函数为null;(事件的写法在下面会介绍到)

$('div').on('mouseover',function(){
    console.log("mouseover");
})

$('div').on('click',function(){
    console.log("click");
    $('div').off();
})

由于div的点击事件写了$('div').off(); 所有点了一次div后,div的点击和鼠标移动事件都会失效。
有参数时: 指定具体关闭哪个事件函数。

$('div').on('click mouseover',function(){
    console.log(123);
    $('div').off('mouseover')
})

点击或移动鼠标到div上一次之后,div的鼠标mouseover会失效,其他方法不影响。

3、元素事件写法

a. 直接元素.方法名

$('div').click(function(){
    alert(click)
})

b. 元素.on(“方法名”,方法):

$('div').on('mouseover',function(){
    console.log("mouseover")
})

c. 元素.on(“方法名1 方法名2”,方法);不同方法名用空格隔开即可,适合多个事件执行同个方法:

$('div').on('click mouseover',function(){
    console.log(123);
    $('div').off('mouseover')
})

d. 当同一元素不同事件的不同时,简写如下:

$('div').on({
    'click':function(){
        console.log(123);
    },
    'mouseover':function(){
        console.log(456);
    }
})

补充:
在jQuery循环遍历有一种特殊的写法:

$('li').each(function(i,elem){  // 一参 下标  二参 :每一个元素 $(this) 也可以表示成每一个元素
    //$(elem).html(i)
    $(this).html(i)
})

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Dynatable – 基于 HTML5 & jQuery 的交互表格插件
  Dynatable 一款有趣的,语义化,交互式的表格插件,使用 jQuery,HTML5 和 JSON 实现。Dynatable 的目的是提供一种简单的、可扩展的 API,能够轻松的浏览和操作大规模的数据集。
1227 0
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
  《Web 开发最有用的50款 jQuery 插件集锦》系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。
1038 0
Lazy Load, 延迟加载图片的 jQuery 插件【备忘】
http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/   jQuery Unveil – 另一款非常轻量的延迟加载插件 http://luis-almeida.github.io/unveil/
727 0
43个多图片轮转jquery插件
在网页设计中,在一个有限的空间中让用户可以通过左右滚动的方式来浏览多张图片,是我们常用到的一种控件。下面我们将为您介绍43个多图片轮换播放jQuery教程和插件。 1. rCarousel 2.
1120 0
jQuery Unveil – 另一款非常轻量的延迟加载插件
  jQuery Unveil 是一款轻量的延迟加载插件,支持提供用于视网膜显示设备的高分辨率图像。这个插件非常有用,它能提高长网页中图像的加载性能,因为视口以外的图像(可见部分网页)将不会被加载,直到用户滚动到它们所在的区域。
695 0
星级评分jquery插件
星级评分jquery插件 分享几个星型评级插件   1)jRating 是一个非常灵活的jQuery插件用于快速创建一个Ajax星型投票系统。
748 0
【精心挑选】10款基于 jQuery 的图片360度旋转插件
  之前的文章向大家分享了实现网站功能的各种优秀的 jQuery 插件,今天这篇文章向大家推荐10款基于 jQuery 的图片360度旋转插件,同时还有非常详细的制作教程可以学习和参考。图片旋转展示是一种非常有趣的技术,通过把多张图片合并在一起让你可以实现360度浏览,这种效果常用于旅游网站或者酒店网站,用于展示风景或者房间的内景。
1062 0
jquery插件整理篇(七)表格插件
(1)Flexigrid Flexigrid是一个类似于Ext Gird,但基于jQuery开发的Grid。它具有的功能包括:可以调整列宽,合并列标题,分页,排序,显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。
899 0
推荐18款非常棒的 jQuery 表格插件
  我们一般都是用HTML表格来显示结构化数据,如今有很多的 jQuery 表格插件可以帮助我们更好的组织和控制表格数据,增强表格的功能和操作。今天要与大家分享的是18个非常优秀的 jQuery 表格插件,有用到朋友可以参考一下。
1344 0
+关注
我巴巴
编程语言 架构 相关技术专家
86
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载