jquery基础笔记

1.jquery网址:

http://libs.baidu.com/jquery/2.0.0/jquery.js

2.animate方法

.animate({里面是变化的东西});

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。

只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如    "background-color:red")。

3.等待加载

$(document).ready(function(){})

简写为:$(function(){}),也就是选择器

4.获得原生DOM对象

alert(document.getElementById(‘box’));

alert($('#box').get(0));

alert($(document.getElementById(‘box’)));//对象互换

5.库之间冲突

jquery在其他库之前,库权是其他库的 ,在其他库之后,是自己的库权;

jquery.noConflict();自行了断,剔除$符

var $$=jquery;

6.群组选择器

$(div,p,strong) 获取多个选择器的DOM对象

7.通配符选择器

$('*') 获取所有DOM节点,浪费资源,不建议在全局使用

$('ul li *') 获取指定DOM对象下的所有节点,所以适合运用在局部环境内

8.获取DOM节点

$(function(){

$('#box').css(''.'');

$('.box').css('','');

$('div').css('','');

})

9.返回节点数

$(function(){

$('#box').size()/.length;

alert($('*')[0].nodeName);获取DOM节点的第一个节点名

})

10.后代选择器

$('#box p').css('color','blue');

相当于:

$('#box').find('p').css('color','blue');

11.子选择器

$('#box>p').css('color','blue');

相当于:

$('#box').children('p').css('color','blue');选择节点的子节点

12.next选择器

$('div+p')相当于$('div').next('p'):只获取某节点后一个同级DOM对象

13.nextAll选择器

$('div~p')相当于$('div').nextAll('p'):获取某节点后一个同级所有DOM对象

14.prev选择器

$('div').prev('p').css('color','blue');只获取某节点前一个同级DOM对象

15.prevAll选择器

$('div').prevAll('p').css('color','blue');获取某节点前一个同级所有DOM对象

16.上下同级所有

$('div').siblings('p').css('color','blue');

17.nextUntill()

$('div').nextUntill('p').css('color','blue');上下遇到的DOM遇到p停止

18.scrolltop()  鼠标滚动的距离

backbutton.on('click',function(){

$('html,body').animate({

scrollTop:0

},800)

})

19.slideToggle() 方法

jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动,则 slideToggle() 可向上滑动它们。

如果元素向上滑动,则 slideToggle() 可向下滑动它们。

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

20.trigger()  方法触发被选元素的指定事件类型

$(selector).trigger(event,[param1,param2,...])

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一.什么是jQuery jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整...
    love2013阅读 3,677评论 0 4
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 8,863评论 0 44
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 3,897评论 0 3
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    前端进阶之旅阅读 16,838评论 18 503
  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 3,398评论 0 1

友情链接更多精彩内容