【JQuery】

---

一、Jquery基础核心

1.代码风格

• $(function(){}) 匿名函数的执行
• $(“#header”) 选取元素节点
• $(“.now”).css(‘color’,‘red’) 添加内联样式
• $ == jQuery js封装好的一个对象

2.加载模式

-1.window.onload

• 全部资源加载完毕后执行
• 只能执行一次，会覆盖前边的
• 不能简写

-2.redy

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

• document结构加载完毕执行
• 可以执行多次
• 可以简写为$(function(){})

3.对象互换

指的是DOM对象与Jquery对象互换

-1.Jquery对象转DOM对象

Jquery本身是一个类数组，需要用for循环遍历

var $cr = $('#cr');
//转成DOM对象，索引从0开始，选取对应节点
var  cr = $cr[0];  //或者var cr = $cr.get(0);
alert(cr.checked);  //DOM方法检测这个checkBOx是否被选中

-2.DOM对象转Jquery对象

var cr = document.getElementById('cr');   //DOM对象
var $cr = $(cr);    //Jquery对象

二、选择器

最核心选择器引擎，继承了CSS的语法，可以对DOM元素的标签名，属性名，状态等进行快速准确的选择

选择器	举例
id选择器	$(“#id”)
tag	$(“tagName”)
class	$(“.className”)
后代选择器	$(“header div”)
子代选择器	$(“header>div”)
第一个	:first
最后一个	:last
所有偶数	:even
所有奇数	:odd
根据下标进行选择	:eq(n)
根据属性进行选择	[title]

[1]注意选择器越复杂，字符串解析越慢
[2]Jquery的容错性很强，在书写的时候要特别注意规范书写和空格

三、属性

代码	操作
attr(‘title’)	获取属性值
attr(‘title’,‘hahaha’)	设置属性值
attr({‘title’:‘hahaha’,‘style’:‘xuxuxu’})	同时设置多个属性值
removeAttr(‘title’)	移除属性值
addClass(''checked")	添加class值
removeClass(“checked”)	移出class值
toggleClass(“checked”)	添加或者移除class值

四、CSS

代码	操作
css(‘color’)	获取样式值
css(‘color’,‘red’)	设置样式值
css({‘color’:‘red’,‘fontSize’:‘16px’})	设置多个样式值
offset()	相对于窗口，获取top和left值
position()	相对于父级，获取top和left值
scrollTpp(),scrollLeft()	获取滚动的值
scrollTop(30).scrollLeft(30)	设置滚动的值
width(),height()	获取宽度，高度
innerHeight(),innerWidth()	宽或高+padding左右或上下
outerHeight(),outerWidth()	宽高+（padding+border）左右或上下

五、筛选

非破坏性操作：this指向原来饿JQ对象
破坏性操作：this指向新的JQ对象

筛选会改变this的指向，属于破坏性操作

代码	含义
first()	第一个
last()	最后一个
find()	寻找子级
eq(n)	第N个
not(x）	没有X描述的
filter()	过滤
slice()	剪裁
has()	过滤，检索的是DOM的后代
children()	子级，不包含子级的后代
parent()	直接父级
parents()	所有父级
parentUntil(x)	知道找到x描述的父级停止
offsetParent()	第一个定位的父级
next()	下一个
nextAll()	后边所有
nextUntil(x)	下一个到X描述前
silblings()	匹配元素的所有兄弟元素
addBack()	当前的再添加上一个
end()	返回上一个jq对象

六、DOM

代码	含义
div.html()	获取div的html内容
div.text()	获取div的文本内容
inp.val()	获取inp的value值
$(“<></>”)	创建元素
div.append§	拼接元素放到div中
p.appendTo(div)	同上
a.prepend(b)	插入到最前边，a是子级，b是父级
a.after(b)	b插入到a后边
a.before(b)	把b插入到a前边
a.insertAfter(b)	把b插入到a后边
a.insertBefore(b)	把a插入到b前边
a.replaceWith(b)	用b替换a元素
a.remove()	删除a元素
a.empty()	清空a的子元素

七、事件

代码	事件
$(#div1’).click(function(){})	单击事件
$(‘#div1’).mousemove(function(){})	鼠标移动事件
$(‘#div1’).on(‘click’,function(){});	绑定事件
$('#div1).on({a.fun1,b.fn2})	绑定多个事件
$('#div1).off()	删除事件（群不删除）

JQ不支持滚轮事件

阻止默认与阻止冒泡

冒泡：e.stoppropagation()
默认：e.preventDefault()
return false :即阻止默认又阻止冒泡

八、动画

1.简单动画

代码	动画效果
show()	显示
hide()	隐藏
toggle()	显示或隐藏
slideDown()	向下展开
slideUp()	向上收起
sliToggle()	展开或收起
fadeIn()	淡入
fadeOut()	淡出
fadeTo()	渐变到一定程度
fadeToggle()	淡入或者淡出

以上两个小括号都可以传递两个参数
1.时间：
（1）毫秒的形式
（2）默认值：slow(600),nomal(400),fast(200)

2.任意动画

d.animate({
	left:'50px',
	top:'50px'
},2000)

原生JQ动画不支持颜色
具有累加累减功能 left:'+=50'

3.列队动画

-1.回调动画

d.animate({},fn(){})

-2.连缀动画

d.animate().animate().animate()

4.动画控制

• stop()暂停
• delay()延迟
• finish（）结束

5.JQuery动画库

jQuery.easing