您的位置：首页 > Web前端 > JQuery

jQuery基本用法一

2017-11-17 11:31 204 查看

简介和下载

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)
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航