jQuery基本用法一
来源:互联网 发布:广东元擎网络培训骗局 编辑:程序博客网 时间:2024/06/04 19:58
简介和下载
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()
$('.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)})
- jquery基本用法一
- jQuery基本用法一
- jQuery插件jQuery-validation的基本用法(一)
- Jquery(进阶一) 日期控件My97DatePicker的基本用法
- jQuery一些基本用法
- jQuery基本用法
- Jquery之基本用法
- 【JQuery】基本用法
- jQuery的基本用法
- jquery基本用法
- jquery基本用法总结
- jquery常用基本用法
- Jquery基本用法总结
- Jquery的基本用法
- jquery基本用法
- jquery的基本用法
- jQuery Tmpl 基本用法
- jQuery(基本用法)
- 点击效果drawable
- C语言实验——求阶乘(循环结构)
- 音乐的动力
- Python:python中math模块中提供的基本数学函数
- 华为余承东给新员工的讲话
- jQuery基本用法一
- php导出excel格式的数据(不利于插件)
- springmvc国际化+上传+下载
- Glide 网络请求
- webpack/webpack+bundle-loader/webpack+redux code splitting(按需加载)
- Ubuntu上出现无法获得锁“Could not get lock /var/lib/apt/lists/lock”问题的解决
- .project文件
- Max Script 入门教程
- 从2013到2017 CGU 草根战队的电竞梦