Jquery

一、什么是jquery

jQuery是一个快速、简洁的JavaScript框架，类似：node.js 和angular.js。

二、jquery有什么用

 HTML 元素选取
 HTML 元素操作
 CSS 操作
 HTML 事件函数
 JavaScript 特效和动画

三、jquery怎么使用

jQuery 版本 2 .0以上不支持 IE6，7，8 浏览器，所以一般选用jquery1.8等版本。
案例：获取图片的路径，并弹出提示

$(function(){
				var img1 = $("#img1");
				alert(img1.attr("src"));
		})

通过该案例学习以下知识点：
1、jquery的引入方式分为二种：
（1）本地引入

<script type="text/javascript" src="jquery.js"></script>

（2）从网络引用
百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery。

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> 

2、页面加载完成后执行
（1）完整写法

$(document).ready(function(){ 
});

（2）简写后

$(function(){
		//jquery代码
})

  与window.onload方法的区别与联系。

3、$:jQuery对象的别名(jQuery对象)
4、jquery选择器
（1）基本选择器
*选择器 $(“*”)
类选择器 $(“.div1”)
Id选择器 $(“#div1”)
元素选择器 $(“p”)
juqery选择器选取的内容为js对象数组，不是jquery对象数组。

var imgs = $("img");
alert(imgs[0].src);

而不是如下取值：

alert(imgs[0].attr("src"));

（2）层级选择器
parent > child：定位某一个元素的内部元素
parent child

$(function(){
var imgs = $("#div1>img");
imgs.attr("src","imgs/cc.png");
})

Frist第一个元素 ------last 最后一个元素

$(function(){
var img = $("img:first");
alert(img.attr("src"));
})

:even 所有索引为偶数的元素(从0开始)
:odd 所有索引为奇数的元素(从0开始)

$(function(){
//返回的值为js对象
var img = $("img:odd");
alert(img[0].src);
})

$(this)选取当前元素
5、使用jquery获取/设置元素属性
（1）text() -->innerText
（2）html() -->innerHTML
（3）val() -->value
（4）属性:attr(“属性名称”,属性对应的值)
（5）判断/设置单选及复选属性prop
6、操作css
（1）操作具体属性
$(选择器).css(“样式属性”,“属性值”)
$(选择器).css({“样式属性”:“属性值”,…})
（2）操作类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
6、文档操作
（1）内部插入
$(A).append(B):在A元素末尾添加子元素B

$(document).ready(function(){
var p1 = $("#p1");
p1.append("<a href='aa.html'>aa链接</a>");
})

$(A).appendTo($(B)):把元素a添加到元素b中,a和b都为jquery对象,如果移动到一个对象后面则为移动，移动到多个对象后面则为复制

//把图片添加到a标签
$(document).ready(function(){
var img1 = $("imgb");
var a1 = $("a1");
img1.appendTo(a1);
})

$(A). prepend(B):在A元素开头添加子元素B

（2）外部插入
before:前面加 $(A). before(B) 在A元素之前添加元素B
after:后面加 $(A). after(B) 在A元素之后添加元素B
（3）删除元素
$(A).remove() 删除被选元素及其子元素。（同时删除）
$(A).empty() 删除被选元素的子元素。（只删子元素）

（4）替换
replaceAll(选择器)

$("<b>黑体替换所有p元素</b>").replaceAll("p");

replaceWith(内容)

$("p").replaceWith("<b>黑体替换所有p元素</b>");

8、jquery事件
$(选择器).事件名称(函数)
常见dom事件

$("p").click();
$("p").click(function(){ // 动作触发后执行的代码!! });

Mouserleave与Mouseout区别：
（1）Mouseover与Mouseout在鼠标移入移出时调用，在移入移出其子元素时也被调用。
（2）Mouseleave与Mouseenter在鼠标移入移出时调用，在移入移出其子元素时不被调用。

9、jquery效果
（1）隐藏和显示
$(“p”).hide() 隐藏
$(“p”).show() 显示
$(“p”).toggle() 隐藏和显示
可带参数(speed,callback)
Speed速度单位毫秒
可以取以下值：“slow”、“fast” 或毫秒 $(“p”).hide(1000)
Callback：回调函数
（2）淡入淡出
fadeIn() 用于淡入已隐藏的元素(speed,callback)
fadeOut() 方法用于淡出可见元素(speed,callback)
fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,0.7,callback);

（3）滑动
jQuery slideDown() (speed,callback)
演示 jQuery slideDown() 方法。
jQuery slideUp()
演示 jQuery slideUp() 方法。
jQuery slideToggle()
（4）动画
jQuery animate() 方法允许我们创建自定义的动画。
语法：

$(selector).animate({params},speed,callback);

案例：

$("div").animate({ left:'250px', opacity:'0.5', height:'150px',width:'150px' });

（5）结束动画

$("选择器").stop();

10、jQuery与js对象转换
jQuery对象转为js对象(Dom对象)
jQuery是一个数据对象，
（1）可以通过[index]的方法，来得到相应的DOM对象。
如：

var aa =$("#a") ; //jQuery对象 
var bb=aa[0]; //DOM对象 

（2）jQuery本身提供，通过.get(index)方法，得到相应的DOM对象。
如：

var aa =$("#a") ; //jQuery对象 
var bb=aa.get(0); //DOM对象 

DOM对象转成jQuery对象:
对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。
如：

$("<a href='#'>百度百度</a>")；

11、jQuery链
直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示： 这样的话，浏览器就不必多次查找相同的元素。
如需链接一个动作，您只需简单地把该动作追加到之前的动作上。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“div1” 元素首先会变为红色，然后向上滑动，再然后向下滑动。
十二、工具函数:
each

$("li").each(function(){
			alert($(this).text())
		});

Filter
filter:定位符合条件的当前元素:$(“p”).filter(“.p1”)；
find
find定位的是符合条件的子元素 : $(“.div1”).find(“p”);