前端（十八）—— jQuery高级操作：选择器、文本属性与类、事件、文档操作、动画、结构关系

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

一、选择器

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({
	 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])   // 所有的兄弟