jquery入门

1.jQuery的概念

• jQuery是一个快速，简洁的javaScript库，其设计的宗旨是写更少的代码，做更多的事情
• jQuery封装了javascript常用的功能，优化了DOM操作，事件处理，动画设计和Ajax交互
• 学习jQuery本质，就是学习调用这些函数的方法
  jQuery官方网址
  优点：
• 轻量级，不会影响页面加载速度
• 跨浏览器兼容，基本兼容现在主流浏览器
• 链式编程，隐式迭代
• 对事件，样式，动画支持，大大简化了DOM操作
• 支持插件扩展开发，有丰富的第三方插件，例如：轮播图，树形菜单，日期控件
• 免费，开源

1.2.jQuery的入口函数

//要等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成封装
//不同于原生js中的load事件是等着页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码
$(function(){
	//此处是页面DOM加载完成的入口
})

$(document).ready(function(){
	//此处是页面DOM加载完成的入口
})

2.jQuery对象和DOM对象

jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

// 用原生js获取来的对象就是DOM对象
var myDiv = document.querySelector('div');
myDiv.style.display = 'none';
// jQuery方法获取的元素就是jQuery对象
$('div')
$('div').hide()

注意：jQuery对象只能使用jQuery对象只能使用jQuery方法，DOM对象则使用原生的javaScript属性和方法

jQuery对象和DOM对象的转换

//DOM对象转换为jQuery对象
var myvideo = document.querySelector('video');
myvideo.play();
$(myvideo)
//Jquery对象转换成DOM对象
//1.数组形式
$('div')[index]   //index是索引号
//2.
$('div').get(index)
$('video')[0].play()
$('video').get(0).play()

3.jQuery常用API

3.1 jQuery选择器

基础选择器

名称	用法	描述
Id选择器	$（“#id”）	获得指定id元素
类选择器	$（“.class”）	获得同一类class的元素
标签选择器	$（“div”）	获得同一类标签的所有元素
…	…	…

层级选择器

名称	用法	描述
子代选择器	$（“ul>li”）	获得亲儿子层级元素
后代选择器	$（“ul li”）	获得ul下所有li元素

3.2 jQuery隐式迭代

遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代

3.3jQuery筛选选择器

语法	用法	描述
：first	$（“li:first”）	获取第一个li元素
:last	$（“li:last”）	获取最后一个li元素
: odd	$（“li:odd”）	获取到li元素中索引号为奇数的元素
:even	$（“li:even”）	获到li元素中索引号为偶数的元素
:eq(index)	$（“li:eq(2)”）	获到li元素中索引号为2的元素（索引号index从0开始）

3.4 筛选方法

语法	用法	描述
parent()	$（“li”） .parent()	查找父级
children(selector)	$（“ul”）.children(“li”)	最近一级（亲儿子）
find(selector)	$（“ul”）.find(“li”)	相当于后代选择器
siblings(selector)	$（“.first”）.siblings(“li”)	查找兄弟节点，不包括自己
nextAll([expr])	$（“.first”）.nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$（“.last”）.prevAll	查找当前元素之前所有的同辈元素
hasClass(class)	$（“div”）.hasClass(“protected”)	检查当前元素是否含有某个特定的类，如果有，则返回ftrue
eq(index)	$（“li”）.eq(2)	index从0开始

<div class = "father">
	<div class="son">儿子</div>
</div>
<div class="nav">
	<p>我是屁</P>
	<div>
		<p>我是p</p>
	</div>
</div>

$(function(){
	//1.父亲  parent()
	console.log($(".son").parent())
	//2.亲儿子  children()
	$(".nav").children('p').css("color","red")
	//3.所有孩子    find()
	$(".nav").find("p").css("color","red")
})

3.5 案例练习-- 新浪下拉菜单(jQuery隐式迭代)

<ul class = "nav">
	<li>	
		<a href = "#">微博</a>	
		<ul>	
			<li><a href = "#">私信</a></li>	
			<li><a href = "#">评论</a></li>	
			<li><a href = "#">@我</a></li>	
		</ul>
	</li>
	<li>	
		<a href = "#">微博</a>	
		<ul>	
			<li><a href = "#">私信</a></li>	
			<li><a href = "#">评论</a></li>	
			<li><a href = "#">@我</a></li>	
		</ul>
	</li>
	<li>	
		<a href = "#">微博</a>	
		<ul>	
			<li><a href = "#">私信</a></li>	
			<li><a href = "#">评论</a></li>	
			<li><a href = "#">@我</a></li>	
		</ul>
	</li>
</ul>

<script>
		$(function(){
			$(".nav > li").mouseover(function(){
				$(this).children("ul").show();
			});
			$(".nav >li").mouseout(funtion(){
				$(this).children("ul").hide();
			})
			
		})
</script>

3.6其他筛选方法

<div class= "current">有current类名</div>
<div>无类名</div>
<ol>
	<li>我是ol的li<li>
	<li>我是ol的li<li>
	<li class = "item">我是ol的li<li>
	<li>我是ol的li<li>
</ol>
<ul>
	<li>我是ul的li</li>
	<li>我是ul的li</li>
	<li>我是ul的li</li>
	<li>我是ul的li</li>
</ul>

<script>
	$(function(){
		//1.兄弟元素  所有除了自身元素之外的亲兄弟
		$("ol .item").siblings("li").css("color","red");
		//2.第n个元素	
		//(1)选择器方式
		$("ul li:eq(2)").css("color","red")
		//(2)选择方法方式
		$("ul li").eq(2).css("color","blue")
		//3.判断是否有某个类名
		console.log($("div:first").hasClass("current"));
		console.log($("div:last").hasClass("current"));
	})
</script>

<button>快速</button>
<button>快速</button>
<button>快速</button>
<button>快速</button>

<script>
	$(function(){
		//1.隐式迭代   给所有的按钮绑定点击事件
		$("button").click(function(){
			//2.当前元素变化背景颜色
			$(this).css("background","pink");
			//3.隐式迭代	其余的兄弟去掉背景颜色
			$(this).siblings("button").css("background","")
		})	
	})
</script>

3.7淘宝服饰精品案例

//核心原理：鼠标经过左侧盒子某个li,就让内容区盒子相对应图片显示，其余的图片隐藏
//1.需要当前小li索引号，就可以显示对应索引号的图片
//2.jQuery得到当前元素索引号$(this).index()
//3.对应的图片，可以通过eq(index)方法选择
//4.显示元素show()   隐藏元素hide()
<div class="wrapper">
	<ul id= "left">
		<li><a href= "#">女靴</a></li>
		<li><a href= "#">雪地靴</a></li>	
		<li><a href= "#">冬裙</a></li>	
		<li><a href= "#">呢大衣</a></li>		
	</ul>
</div>
<div id="content">
	<div><a href="#"><img src = ""  width= ""  height=""></a></div>
	<div><a href="#"><img src = ""  width= ""  height=""></a></div>
	<div><a href="#"><img src = ""  width= ""  height=""></a></div>
</div>

<script>
	$(function(){
		//1.鼠标经过左侧的小li
		$("#left li").mouseover(function(){
			//2.得到当前小li索引号
			var index = $(this).index();	
			//3.让右侧盒子相应的索引号的图片显示出来
			$("#content div").eq(index).show();
			//4.让其余的图片隐藏起来
			$("#content div").eq(index).siblings().hide()
		});
	})
</script>

3.8链式编程

<script>
	//3.让右侧盒子相应的索引号的图片显示出来
			$("#content div").eq(index).show();
			//4.让其余的图片隐藏起来
			$("#content div").eq(index).siblings().hide()
	//链式编程
	$("#content div").eq(index).show().siblings().hide()

</script>

4 jQuery修改样式css方法

1. 参数名只写属性，则返回属性值
2. 参数名是属性名，属性值，逗号分隔；属性必须加引号，值如果是数字可以不用跟单位和引号
3. .参数可以是对象形式，可以设置多组样式，属性名和属性值用冒号隔开，属性可以不加引号

<script>
	操作样式
	$(function(){	
		console.log($("div").css("width"));
		$("div").css("width","300px");
		$("div").css("width",300);
		$("div").css({width:400,height:400})
	})
</script>

4.1 设置类样式方法

作用等同于以前的classList,可以操作类样式

1. 添加类

$(“div”).addClass(“current”)

2. 删除类

$(“div”).removeClass(“current”)

3. 切换类

$(“div”).toggleClass(“current”)

5.jQuery效果

最为常见的如下：
显示隐藏：

show（[speed,[easing],[fn]]）
hide（）
toggle（）

滑动：

sildeDown()
slideUp()
slideToggle()

淡入淡出:

fadeln()
fadeOut()
fadeToggle()
fadeTO()

自定义动画:

animate()

事件切换
hover([over,]out)

$(".nav>li").hover(function(){
	$(this).children("ul").slideToggle();
})

5.1动画队列以及停止排队方法

• 动画或效果一旦触发，就会造成多个动画或者效果排队执行
• 停止排队 stop()
• 注意：stop（）写到动画或效果的前面

<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换效果</button>
<button>修改透明度</button>

$(function(){
	$("button").eq(0).click(function(){	
		//1.淡入效果
		$("div").fadeIn(1000)
	})
	$("button").eq(1).click(function(){	
		//2.淡入效果
		$("div").fadeOut(1000)

	})
	$("button").eq(2).click(function(){	
		//3.淡入淡出切换效果
		$("div").fadeToggle(1000)

	})
	$("button").eq(3).click(function(){	
		//4.修改透明度
		$("div").fadeTo(1000,0.5)
	})
})


//王者案例
$(function(){
	//鼠标进入的时候，其他的li标签透明度0.5
	$(".wrap li").siblings().stop().fadeTO(400,0.5);
	//鼠标离开，其他li透明度改为1
	$(this).siblings().stop().fadeTo(400,1);
})

5.2自定义动画

animate(params,[speed],[easing],[fn])