JQ选择器、文本属性与类、事件、文档操作、动画、结构关系

可参考jQuery的API文档

一、选择器

1、css语法匹配

标签 | 类 | id | 交集

群组 | 后代 | 兄弟

伪类 | 属性

$(':input')    // : 在表单中找到所有的标签

$('.div')

$('div')

$('div:first-child')

$('div:not(:last-child)')

$('body .div')

var $lis = $('.ul>li');

2、索引匹配

:eq(index)    // 从0开始，匹配一个给定索引值（index）的元素

:gt(index)     // 从0开始，匹配所有大于给定索引值（>index）的元素

:lt(index)		// 从0，匹配所有小于给定索引值（<index）的元素

:even       // 匹配所有索引值为偶数的元素，如索引为0, 2, 4, 6

:odd        // 匹配所有索引值为奇数的元素，如索引为1, 3, 5, 7

// 伪类获取最中间一列

$('li:nth-child(3n-1)').on('click', function () {

	console.log("中间列");

})

// 找到索引大于5的li

$('li:gt(5)').on('click', function () {

	console.log("最后一4排");

})

// 伪类取反

$('li:not(:nth-child(2n))').on('click', function () {

	console.log("对角线");

})

二、文本、属性与类

1、文本

// 无参表示获取文本

$('div').text()       // 获取div中的文本

// 有参表示对文本的修改

html([val|fn])      // html(function(index,old){return '新的值'})

text([val|fn])

val([val|fn|arr])   // 表单元素获取内容

var $div = $('div');

// 在原有内容后面追加新的内容

$div.text(function (index, old) {

	var target = '上山打老虎';

	return old + target;

})

// 所有input失去焦点时，打印他们的内容

// $(this) 在jQuery中表示this

$(':input').on('blur', function () {

	console.log($(this).val());

})

2、属性

attr(name|pro|key,val|fn)   // attr('href','www.baidu.com'),添加属性

removeAttr(name)

prop(n|p|k,v|f)

removeProp(name)

3、类

addClass(class|fn)   // 追加新的类名，不用考虑字符串拼接

removeClass([class|fn])   // 删除指定类名

toggleClass(class|fn[,sw])  // 切换，有指定类名则删除，没有则添加

$('div').on("mouseover", function () {

	console.log(123);

	$(this).addClass("active");  // 追加一个新类名

})

$('div').on("mouseout", function () {

	$(this).removeClass("active");  // 删除指定类名

})

$('div').on("click", function () {

	$(this).toggleClass("active");  // 切换类名，鼠标点击后有指定类名则删除，没有则添加

})

4、样式

// 1. 链式对样式进行赋值

$('div').css("width", "200px").css("height", "200px");

// 2. 通过对象赋值，单位JQ会自动加

$('div').css({

	width: 300,  // 默认添加单位

	height: "300px",

	"background-color": "pink",  // key为css连接语法,js不支持这样的标识符,用字符串形式表示

	borderRadius: '50%'  // 小驼峰命名

})

// 整体样式操作

var $lis = $('.ul>li');

$lis.css({

	'background-color': 'cyan'

})

三、事件

1、on绑定

// on('事件名', 参数, 回调函数){}

$('.box').on('click', {num: 10}, function(ev) {

    console.log(ev.data.num)   // ev.data.num 访问参数

})

// 数据由ev.data存储

// 可以绑定多个事件

2、非on事件绑定

// 事件名(参数, 回调函数)

$('.box').click({num: 10}, function(ev) {

    console.log(ev.data.num)

})

// 数据由ev.data存储

3、解绑

$('.box').off()    // 解绑box的所有事件

4、冒泡和默认事件

阻止冒泡：ev.stopPropagation()    // js和jq只兼容stopPropagation

阻止默认事件：ev.preventDefault() | return false   // 两种方法js和jq都兼容

四、文档操作(不建议使用)

1、内部插入

append(content|fn)   // $('body').append($('div'))

appendTo(content)    // $('div').appendTo($('body'))

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

// 文档操作

$(function () {

	// 1.创建

	var $div = $("<div></div>");

	// 2.设置

	$div.addClass("div");

	$div.on('click', function () {

		console.log('div click');

	})

	// 3.添加

	// $('body').append($div);

	$div.appendTo($('body'));

})

五、动画

1、基本

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]])   // 淡入淡出切换

// 隐藏

$('.b1').on('click', function () {

	$('.box').hide()

})

// 显示

$('.b2').on('click', function () {

	$('.box').show()

})

// 显隐切换

$('.b3').on('click', function () {

	$('.box').toggle()

})

// 上下滑动切换

$('.b4').on('click', function () {

	$('.box').slideToggle()

})

// 淡入淡出切换

$('.b5').on('click', function () {

	$('.box').fadeToggle(1000, "linear", function () {

		console.log("动画完成");

	})

4、自定义

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

应用于轮播图

<div>

	<input type="button" value="图1" />

	<input type="button" value="图2" />

	<input type="button" value="图3" />

	<input type="button" value="图4" />

</div>

$('input').click(function () {

	// ul做动画

	$('ul').animate({

		// 定位left状态改变

		// 点击第几个 $(this).index() 按钮就往左移动几个宽度$('li').width()

		left: -$(this).index() * $('li').width()

	}, 300)

})

六、结构关系

children([expr])   // 所有子级

parent([expr])    // 父级

parents([expr])   // 所有父级

next([expr])      // 下一个兄弟

nextAll([expr])    // 后面的所有兄弟

prev([expr])     // 前面的兄弟

prevAll([expr])    // 前面的所有兄弟

siblings([expr])   // 所有的兄弟