Collection jQuery

1. 核心

方法名	含义
$()	jQuery 的核心功能都是通过这个函数实现的
jQuery()
.size()
.index()
.dequeue()	把前面的动画移除掉，直接执行最后一次的动画

$( function(){ } ) 传 function 的意思是，当 DOMContentLoaded 触发时里面的 funciton 函数才会执行

$(function(){
  console.log('当DOMContentLoaded触发才会执行这里');
});

$(function(){
  console.log('当DOMContentLoaded触发才会执行这里');
});

2. 选择器

方法名	含义

http://ruyic.com/blog/html/view.php?id=466

选择第一个/最后一个

$('.wrapper>ul li:first').css({color:'#fff'}); // :first 选中第一个li

$('.wrapper>ul li:last').css({color:'orange'}); // :last 获取最后一个li

选择基数/偶数

$('.wrapper>ul li:odd').css({width:100, height:100, backgroundColor:'#008c8c', lineHeight:'100px',textAlign:'center'}); // :odd 选中奇数的li，计算机是从0开始排的0、2、4、6

$('.wrapper>ul li:even').css({width:100, height:100, backgroundColor:'#ff8c8c', lineHeight:'100px',textAlign:'center'}); // :even 偶数 1 3 5

:eq() 单独获取某一个

$('.wrapper>ul li:eq(0)').css({width:150, fontSize:70, color:'#fff', backgroundColor:'#ff8c8c'}); // 也是从0开始，0选中第一个 li 相当于:first

$('.wrapper>ul li:eq(4)').css({width:200, fontSize:70, color:'#fff', backgroundColor:'#ff8c8c'}); // 选的是第五个 li

$('.wrapper>ul li:eq(11)').css({width:250, fontSize:70}); // 写多了也不报错

$('.wrapper>ul li:eq(-1)').css({width:300, fontSize:70, backgroundColor:'#ff8c8c'}); // -1 选中的是倒数第一个li

根据属性过滤

 $( 'li[data="Lili"]' )

 $( 'li[data$="Lili"]' ) // li元素必须具有 "data" 属性，而且属性值必须以字符串 "Lili" 结尾的。选中第一个、第二个li

 $('li[data^="Lili"]')  // li元素必须具有 "data" 属性，而且属性值必须以 "Lili" 开头

 $('li[data!="Lili"]') // 反全被选中。选中除第二个以外所有的li

3. 筛选

方法名	含义
过滤
.eq()
.is()
查找
.siblings()
.next()	获取选中元素，下一个紧邻的兄弟元素
.nextAll()
.parent()
.children()

4. 事件

方法名
事件
.click()
.mouseover()
.mouseout()
事件切换
.hover()
.slideToggle()

5. 属性

方法
属性
.attr()	操作属性
.prop()
css类，类名相关操作及深意
.addClass()
.removeClass()
.hasClass()
HTML代码/文本/值
.html()	获取标签内容
.text()
.val()	操作input属性

jquery

http://ruyic.com/blog/html/view.php?id=471

html 表单元素

http://ruyic.com/blog/html/view.php?id=335

http://ruyic.com/blog/html/view.php?id=334

5. 样式

方法
css
.css()	设置行间样式
尺寸
.width()
.innerHeight()	只包括padding，不包括border和border
.outerHeight(true)	包括padding，border和选择性的border，参数true不包括margin

6. 文档处理

方法
内部插入
.append()

7. ajax

方法

8. 动画（效果）

方法	含义
基本
.show()
.hide()
滑动
.slideToggle()	用滑动动画显示或隐藏一个元素
.slideUp()
.slideDown()
自定义
.animate()	根据一组css属性定义动画

Collection jQuery

Leave a Reply