jQuery

一、选择器

1、css语法匹配

标签 | 类 | id | 交集
群组 | 后代 | 兄弟
伪类 | 属性

<ul class="ul">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

//1.css选择器
	var $lis = $('li');
	// console.log($lis);	
	//2.整体操作
	$lis.css({
		'background-color':'cyan'
	})	
	$lis.click(function(){
		//获得索引
		var index = $(this).index();
		console.log(index);
		var width = $(this).width();
		console.log(width);
	})
	//获取最中间的一列
	$('li:nth-child(3n-1)').click(function(){
		var ind = $(this).index();
		console.log(ind+'zhongjianlie');
	})

2、索引匹配

:eq(index) | :gt(index) | :lt(index)

//第五个之后的索引
$('li:gt(5)').click(function(){
		console.log('最后一排!')
	})

//对角线
	$('li:even').click(function(){
		console.log('对角线!')
	})

二、文本、属性与类(以下都是对方法的操作)

1、文本

.html([val|fn])
.text([val|fn])
.val([val|fn|arr])

//.text操作
var $div= $('div');
	//文本操作
	$div.text();//无参就是获取原有的文本
	$div.text('你好'); //有参就是修改
	//追加文本
	$div.text(function(index,old){
		var msg = '我好';
		return old+msg;
	})

//html操作
	$div.html('<hr>哈哈哈!')
//var操作
	//不填表示获取值
	//添加值表示修改值
	$('input').val('你好!');

2、属性

attr(name|pro|key,val|fn)//添加属性
removeAttr(name)//移除属性
prop(n|p|k,v|f)
removeProp(name)

3、类

addClass(class|fn) //添加css类
removeClass([class|fn])//移除
toggleClass(class|fn[,sw])//切换类名

三、事件

1、on绑定

$('.box').on('click', {num: 10}, function(ev) {
    console.log(ev.data.num)
})
//鼠标点击点
ev.clientX,ev.clientY
// 数据由ev.data存储

2、非on事件

$('.box').click({num: 10}, function(ev) {
    console.log(ev.data.num)
})
// 数据由ev.data存储

3、解绑

$('.box').off()

4.阻止冒泡

ev.stopPropagation();

5.解除默认事件

return false;

四、文档操作

1、内部插入

append(content|fn)
appendTo(content)
prepend(content|fn)
prependTo(content)

2、外部插入

after(content|fn)
before(content|fn)
insertAfter(content)
insertBefore(content)

3、包裹

wrap(html|ele|fn)
unwrap()
wrapAll(html|ele)
wrapInner(html|ele|fn)

4、替换

replaceWith(content|fn)
replaceAll(selector)

5、删除

empty()
remove([expr])
detach([expr])

6、复制

clone([Even[,deepEven]])

五、动画

1、基本

//参数:时间,运动曲线,动画结束后的回调函数

$('div') = fadeToggle(1000,'linear',function(){
    console.log('你好')
})

show([s,[e],[fn]])//显示
hide([s,[e],[fn]])//隐藏
toggle([s],[e],[fn])//显示隐藏

2、滑动

slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])

3、淡入淡出

fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])

4、自定义

animate(p,[s],[e],[fn])

六、结构关系

children([expr])
parent([expr])
parents([expr])
next([expr])
nextAll([expr])
prev([expr])
prevAll([expr])
siblings([expr])

七.页面加载问题

在页面的最后加上

<script>
	$(function(){
		$('body').removeAttr('hidden')
	})
</script>

在闪烁的标签上加 hidden