jQuery

jQuery对象

• jQuery其实就是js对象的一个集合，伪数组，里面存放了一大堆的js对象
• DOM对象不能能调用jqery对象的方法
• jQuery对象也不能调用DOM对象的方法

---

DOM对象和jq对象

1. DOM对象转换为jq对象

	var cloth = document.getElementById("cloth");
	//DOM对象就变成jQuery对象
	$(cloth).text("呵呵");

2. jq对象转换为DOM对象

	var $li = $("li");
	$li[0].style.backgroundColor = "red";

---

$符号的实质

$其实就是一个函数，以后用$的时候记得跟小括号$()

$的三种用法

1. 参数是一个function，入口函数
   $(function(){

   });

2. 把dom对象转换成jQuery对象

3. 参数是一个字符串$("#div"),$(“div”)

---

选择器

什么是jQuery选择器

jQuery选择器是让我们方便获取到页面中的原生。注意jQuery选择器返回的是jQuery对象。jQuery选择器有很多，基本兼容了css所有的选择器，并且还添加了更多复杂的选择器。但是我们平时真正能用的到的只是少数的最常用的选择器

---

jQuery的基本选择器

名称	用法	描述
ID选择器	$("#id");	获取指定ID的元素
类选择器	$(".class");	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

 
jQuery如何设置样式
css(name,value)
name:样式名 value：样式值
例如：$("#four").css(“backgroundColor”,“red”);

---

层次选择器

$(“s1,s2”)//并集选择器
$(“s1 s2”)//后代选择器
$(“s1>s2”)//子代选择器
$(“s1s2”)//交集选择器

---

鼠标事件

mouseover:鼠标经过事件
mouseout:鼠标离开事件
mouseenter:鼠标进入事件：只触发一次
mouseleave:鼠标离开事件

---

过滤选择器

这类选择器都带冒号

名称	用法	描述
:eq(index)	$(“li:eq(2)”).css(“color”,“red”)	获取到的li元素中，选择索引号为2的元素
:odd	$(“li:odd”).css(“color”,“red”)	获取到的li元素中，选择索引号为奇数的元素
:even	(“li:even”).css(“color”,“red”);	获取到的li元素中，选择索引号为偶数的元素

---

筛选选择器（方法）

筛选选择器的功能与过滤选择器优点类似，但是用法不同，筛选选择器主要是方法

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于*$(“ul>li”)，子代选择器
find(selector)	$(“ul”).find(“li”)	相当于$(“ul li”)后代选择器
siblings(selector)	$("#first").siblings(“li”)	查找兄弟节点，不包括自己本身
parent()	$("#first").parent	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一个兄弟

---

css操作

1.设置样式

$("li").css("backgroundColor","red").css("fontSize","25px");

2.css括号里面是一个对象

$("li").css({
background:"pink",
fontSize:"25px"
});

3.css获取样式

console.log($("li").css("background"));

 
隐式迭代：

• 设置操作的时候，会给jq内部的所有对象都设置上相同的值
• 获取的时候，只返回第一个元素对应的值

---

class操作

1.添加样式类

//addClasss(name);
$("input").eq(0).click(function(){
	$("li").addClass("basic");
});

2.移除样式类

//removeClass(name);
$("input").eq(1).click(function(){
	$("li").removeClass("basic");
});

3.判断是否有某个样式类

//hasClass(name);
$("input").eq(2).click(function(){
	console.log($("li").hasClass("basic"));
});

4.切换样式类

//toggleClass;
$("input").eq(3).click(function(){
	$("li").toggleClass("basic");
});

---

属性操作

1.单个设置属性

$("img").attr("alt",'图破了');

2.多个属性一起设置

$("img").attr({
alt:"图破了",
title:"错错错",
aa:"bb"      //也可以自定义增加属性
});

3.获取属性

console.log($("img").attr("alt"));

样式：在style里面写的，用css来操作
属性：在里面里面写的，用attr方法操作

---

prop方法

对于布尔类型的属性，不要attr方法，应该用prop方法

$(function(){
	$("input").eq(0).click(function(){
		$("#ck").prop("checked",true);
	});

	$("input").eq(1).click(function(){
		$("#ck").prop("checked",false);
	});
});

---

三组基本动画

1.show()和hide();

---

2.划入划出动画

• 划入：slideDown
• 划出：slideUp

//划入
$("input").eq(0).click(function(){
	$("div").slideDown(1000,function(){
		console.log("haha");
	});
});

//划出
$("input").eq(1).click(function(){
	$("div").slideUp(1000,funciton(){
		console.log("haha");
	});
});

//切换
$("input").eq(2).click(function(){
	$('div').slideToggle();
});

---

3.fadeIn()和fadeOut();
和slideXXX()一样

---

自定义动画animate

第一个参数：对象，里面可以传需要动画的样式
第二个参数，speed动画的执行时间
第三个参数，动画的执行效果
第四个参数：回调函数

$("#box").animate({left:800},8000,"swing/linear",function(){
	console.log("hahaha");
});

---

stop的使用

在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画就会被房东动画队列中，等前面的动画执行完了才会执行
例如：

//stop:停止当前正在执行的动画
$("#box li").mouseenter(function(){
	$(this).stop().animate({width:800}).sibling().stop.animate({width:100});	
}).mouseleave(function(){
	$("#box li").stop().animate({width:240px});
});

---

创建节点与添加节点

1.将子元素添加到最后

$("div").append($("p"));
$("p").appendTo($("div");

2.将子元素添加到最前面

$("div").prepend($("p");
$("p").prependTo($("div");

3.将元素添加到自己后面或者前面（同一级）

$('div').after($("p"));
$('div').before($('p'));

---

清空与删除节点

清空：empty();

$("div").html("");

删除：remove();

$("div").remove();

赋值：clone()

//false：不传参数也是深度赋值，不会赋值事件
//true：也是深复制，会复制事件
$(".des").clone(true).appendTo("div");

---

val()方法

$("input").eq(0).val("haha");

---

html()和text()方法

• html:innerHTML
• text:innerText

//获取
console.log($("div").html());//<h3>我是标题</h3>
console.log($("div").text());//我是标题

//同样可以替换掉里面的内容
$("div").text("<p>我是文本</p>");

---

width()和height()方法

//获取div的宽度
console.log($("div").css("width"));//400px

//直接获取的是数字
console.log($("div").width());//400

设置：
$("div").width(400);

需要获取页面可视区的宽度和高度

$(window).resize(function(){
	console.log($(window).width());
	console.log($(window).height());
});

---

scrollTop与scrollLeft方法

设置或者获取垂直滚动条的位置

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();

例如：

$(funciton(){
	$(window).scroll(function(){
		console.log($(window).scrollTop());
		console.log($(window).scrollLeft());
	});
});

---

offset()和position()方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置，返回值为对象：{left:100,top:100}
$(selector).offset();
 
//获取相对与其最近的有定位的父元素的位置
$(selector).position();

---

委托事件

事件发展历程：
简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定（推荐）
 
delegate：代理，委托
第一个参数：selector：事件最终由谁来执行
第二个参数：事件的类型
第三个参数：函数，要做什么

$("div").delegate("p","click",function(){
	alert("haha");
});

• 简单事件

$("#btn").on("click",function(){
	$("<p>我是新建的p元素</p>").appendTo("div");
});

• 委托事件

$("div").on("click","p",function(){
	alert("haha");
});

---

移除事件绑定

off方式

$("p").off("mouseenter");

---

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性

screenX和screenY 对应屏幕最左上角的值
clientX和clientY 距离页面左上角的位置（忽略滚动条的距离）
pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
event.keyCode 按下的键盘代码
event.data 存储绑定事件时传递的附加数据
event.stopPropagation()防止事件冒泡行为
event.preventDefault()防止浏览器默认行为
return false：既能阻止事件冒泡，又能阻止浏览器默认行为

例如：
//使用on方法的时候，可以给data参数传一个值，可以在事件里面通过e.data获取到

$("div").on("click",money,function(e){
	console.log(e);
	console.log(e.data);
});

---

阻止冒泡和阻止浏览器的默认行为

$("#link").on("click",function(){
	alert("haha");
	//e.preventDefault();阻止浏览器的默认行为
	//e.stopPropagation();阻止冒泡
	return false;//既能阻止事件冒泡，也能阻止浏览器的默认行为
});

---

each方法

jQuery遍历除了for还可以使用each方法

$("li").each(function(index,element){
	$(element).css("opacity",(index+1)/10);
});

---

$冲突的解决方案

<script src="itcast.js"></script>
<script src="jquery-1.12.4.js"></script>

//jQuery释放$的控制权
var $$=$.noConflict();

$$(function(){

});