JQ CSS选择器和效果

		<style type="text/css">
			.web>p {
				font-size: 16px;
			}
			/*
			 *选择到所有类名中具有col-标识的元素
			 * 
			 * */
			
			li[class*="col-"] {
				height: 100px;
			}
		</style>

		<div class="web">
			<p>我是p标签</p>
			<ul>
				<li class="col-1">1</li>
				<li class="col-2">2哦哦哦</li>
				<li class="col-3">3</li>
				<li class="col-4">4</li>
			</ul>
			<div id="test">我是id为testdiv</div>
			<a href="#test">我是a标签</a>
			<div><em>9687</em></div>
		</div>
		<div class="step" style="background: greenyellow;">看我</div>
		<img style="width: 200px;" class="img" src="img/1.jpg" />
		<div><i>1234</i></div>
		<button>点我</button>
		<div class="show">我要进行渐变效果</div>
		<div class="ani">点我变大</div>

	
		<script type="text/javascript">
			$("p,li").css("color", "red");
			/*$("p,li").css({
				"fontSize":"25px",
				"opacity":"0.5"
			});
			console.log($("p:animated"));*/

#选择器

1、:animated。获取正在运动的元素

注意：这里需要用jq提供动画才能获取到

2、:eq(index)匹配集合中选择索引值为index的元素（index下标值）

index值从0开始计算

3、:even:选择到下标值为偶数的元素

4、:odd：选择到下标值为奇数的元素

5、:gt(index)选择到下标值大于index值的所有元素

6、:lt(index)选择到下标值小于index值的所有元素

7、:not(sel)

sel代表一个选择器，用来选择到所有除了sel选择到的元素之外的元素。

8、:contains(text)选择到包含文本为text的元素

9、:has(sel)

sel:代表选择器

用来选择到所有包含sel选择到的元素的标签

			$("p").animate({
				"font-size": "25px"
			}, 1000)
			$("p").on("click", function() {
				$(":animated").css("color", "#000000");
			})
			$("li:eq(1)").css("color", "#000000");

			$("li:even").css("color", "gray");
			$("li:odd").css("color", "gold");
			$("li:first").css("color", "green");

			$("li:gt(0)").css("background", "greenyellow");
			$("li:not(:nth-child(2)").css("font-size", "26px");

			$("a").on("click", function() {
				$(":target").css("font-size", "35px");
			});

			$("li:contains('2')").css("font-size", "50px");

			$("div:has(i)").css("background", "skyblue");

#效果

1、hide(duration,easing,complete)

duration：可选，动画持续的时间

easing，可选，代表动画的时间函数，只有两个值

默认值：swing

linear

complete：可选，动画结束后的回调函数

隐藏元素

2、show(duration，complete)

duration：可选，动画持续的时间

complete：可选，动画结束后的回调函数

显示元素

3、toggle：显示或隐藏匹配元素

自定义动画(不支持所以属性，比如颜色类型，变换)

1、animate(property,duration,timeFunction,complete)

property:需要变换的属性，是一个对象

duration：变换的持续时间

timeFunction：时间函数

complete：动画结束后的回调函数

			$("p").on("click", function() {
				$("li:first").hide(1000, function() {
					/**
					 * text()不传入参数，就是获取到元素内容
					 * 传入参数，就是设置元素内容
					 * */
					$("li:nth-child(2)").text();
					$("li:nth-child(2)").text("2一大把黄金！");
				});
			});
			$("li:nth-child(2)").on("click", function() {
				$("li:first").show(2000, "swing", function() {
					$("li:nth-child(2)").text("钱还给你了！");
				});
			});
			$("li:nth-child(3)").on("click", function() {
				$("li:last").toggle(1000);
			})

#滑动效果：

4、slideUp()收起

5、slideDown()展开

6、slideToggle()，收起或展开

$("div:has(i)").on("click", function() {
	$(".img").slideToggle(1000);
});

#渐变效果：

7、fadeOut()渐渐消失

8、fadeIn()渐渐显示

9、fadeToggle()渐渐显示或消失

10、fadeTo(duration,opacity,commplete)

可以指定元素渐变到某个透明度

			$("button").on("click", function() {
				$(".show").fadeToggle(1000);
			});
			$("button").on("click", function() {
				$(this).fadeTo(1000, 0.5, function() {
					console.log("我变为半透明了");
				});
			});
			/*	$(".ani").on("click",function(){
					$(".ani").animate({
						"width":"200px",
						"height":"200px",
					},1000,"swing",function(){
						console.log("这是我变化后的效果！");
					});
				});*/
			$(".ani").on("click", function() {
				$(".ani").animate({
					"width": "200px",
					"height": "200px",
				}, 1000, "linear", function() {
					console.log("这是我变化后的效果！");
				});
			});

step()方法，可以传入两个参数

第一个参数代表当前的动画的变换值

第二个参数获取到所有元素动画的参数，

比如：可以获取到进行动画变换的属性，获取到变换的元素自身等

			$('.step').animate({
				opacity: .5,
				height: '50%'
			}, {
				step: function(now, fx) {
					console.log(now,fx);
					var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
					$('body').append('<div>' + data + '</div>');
				}
			});