简介
jQuery是一款优秀的javaScript库.jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。它可以用最少的代码, 完成更多复杂而困难的功能：
jQuery的主旨:write less, do more. 写的更少, 干的更多。以更少的代码,实现更多的功能
John Resig 2006年8月发布jQuery (22岁)
JQ特点
1、轻量级 2、强大的选择器 3、出色的dom封装 4、可靠的事件处理 5、浏览器兼容性强、
6、链式操作方式 (相同的对象直接进行操作 通过.) 7、隐式迭代（for循环）
jQuery代码风格
在jQuery程序中,不管是页面元素的选择、内置的功能函数,都是美元符号“$”来起 始的。而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象
jQuery与javaScript加载模式对比
js window.onload必须等页面全部加载（图片，连接等）完，才能执行js代码
jq $(document).ready()只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码 简写$(function () {});
为了解决冲突 var jq = $.noConflict(); jq(function () { alert(1); });
便不会因为$被替换冲突
jQ与js之间的转化
var box_js = document.getElementById('box');
$(box_js).html()；jQ方法
box_js.innerHTML)： js方法
js—jQ $('#box')[0].innerHTML 或者 $('#box').get(0).innerHTML = box_js.innerHTML
jQ--js $(box_js)
操作css
$('#box').css({
width:100,
height:200,
background:'red'
}).css('height',100).css('background','red')链式操作;
操作类名
$('.box').addClass('red fs50'); 添加类名（class=red, class=fs50）
$('.box').removeClass('red fs50'); 移除class属性
$('.box').toggleClass('red fs50'); 切换class属性 前面两个相互转化
操作标签内容
$('#box').text('<h1>我是一个大标题</h1>'); 原样输出 h1不会解析
$('#box').html('<h1>我是一个大标题</h1>'); 会解析内部的html标签
基础选择器；
$('#box') id选择器
$('box').css() class选择器
$('p').css() 标签选择器
$('h1，p') 多个标签选择器（并集）
属性选择器
$('a[href]') 获取所有具有href的标签
$('a[href = "www.baidu.com"]')； 获取href ='www.baidu.com'd的元素
$('a[href != "www.baidu.com"]')；获取href =不是'www.baidu.com'd的元素
$('a[href^="www"]')；获取属性值以www开头的对象
$('a[href$="cn"]')；获取属性值以cn结尾的对象
$('a[href*="520"]')；获取属性值包涵520的对象
$('a[href*="www"][title*="是"]')；获取属性值包涵www的对象并且title包含"是"的对象
筛选选择器
$('li:first')；$('li:not(:eq(0))')==$('li:not(:first)')
$('li:last')； $('li:not(:last)')
$('li:even') 所有基数
$('li:odd') 所有偶数
$('li:gt(4)')； $('li:lt(4)'); $('li:eq(4)')
$(':header') 选择所有标题 <h>标签
父子选择器
$('li').parent()； 父亲
$('.box').children()；孩子
$('.box').find('span') 孩子找到指定的元素
$('.liItem').siblings()；兄弟 所有()里面可以添加特定的属性
动画
$('div').hide(） 隐藏
$('div').show(）展现
$('div').toggle() 切换 注意点所有（）里可以输入2个参数 第一个时间（可以只有第一个），第二个函数（时间结束调用的方法）
$('div').hide(2000,function () {
//当动画完成时自动调用;
alert('隐藏完成');
});
展示收起动画
$('div').sildeUp(） 隐藏
$('div').slidedown(）展现
$('div').slideToggle() 切换 注意点所有（）里可以输入2个参数 第一个时间（可以只有第一个），第二个函数（时间结束调用的方法）
$('div').slideToggle(2000,function () {
alert('1');
});
slideUp（）与show（）区别
slideUp动画从上面一条边拉下来，（）没有参数也有一种渐变效果
show动画从角慢慢张开；（）没有参数时立马出现；没有渐变效果
动画排队：当执行多个动画的时候，会产生排队效果。会把多个动画，添加到一个动画队列中。动画队列中，只要添加进去，就会等待完成。
stop（）用来停止当前的动画执行后面的动画
$('.first>li').hover(function () {
//动画排除
//每一次动画都会添加到一个队列当中
//同时执行多个动画时，可能会造成动画排列。
//想要停止，使用stop
$(this).children('ul').stop().slideToggle();
// var index = $(this).index();//获取索引
});
淡入淡出动画
$('div').fadeIn（）淡入
$('div').fadeOut（） 淡出
$('div').fadeToggle() 注意点所有（）里可以输入2个参数 第一个时间（可以只有第一个），第二个函数（时间结束调用的方法）
$('div').fadeTo(1000,0.3); **第一个参数时间；第二个是opacity
$(function () {
//弹出广告
$('.ad').slideDown().fadeOut().fadeIn().delay(3000).slideUp();
//关闭广告
$('.close').click(function () {
//开始动画时， 要先停止动画队列。
$(this).parent().stop().slideUp();
});
$('.ad').slideDown.hide().show().delay(2000).slideUp
});
自定义动画animate
$('div').animate({width:300 },1000,function () { alert('finish') });;
$('div').animate({width:'+=300' },1000,function () { alert('finish') });;
$('div').animate({width:'toggle' },1000,function () { alert('finish') });; 宽度有无切换
第一个参数 目标值（对象）；第二个参数；时间，第三个参数函数
each
var obj = [
{name:'gxq',age:'20'},
{name:'zs',age:'18'},
{name:'wc',age:'21'},
];
$.each(obj,function (key,value) {
console.log(value.name,value.age);
console.log($(value).text()); ach迭代出来的value 它是一个原生js对象，没有办法直接使用jQuery；想要使用必须得要转成jQuery对象
}); each遍历();第一个参数为对象（数组），后面function里面的参数第一个key;第二个为vaule；（数组的第一个索引；第二个值）
添加节点
ul内部添加
var tag = '<li>我是新的li</li>'
$(tag).prependTo($('ul')); 父子关系( tag是ul的子元素)
$('ul').prepend(tag); 内部添加第一个li之前； 父子关系( ul是tag的父元素元素)
区别：作用无区别； 仅仅是位置放置不同
$('ul').append(tag); 内部添加最后一个li之后
$(tag).appendTo('ul'); 添加节点到某个固定的节点之前
外部添加
var tag='<li>我是添加</li>'
$(tag).insertBefore('ul') = $('ul').before(tag) 添加ul之前
$(tag).insertAfter('ul')：= $('ul').after(tag) 添加ul之后
添加节点到某个固定的节点之后
两者无区别;仅仅是位置不同而已
删除节点
- $('li:last').remove(); 删除节点；节点不在
- $('li).empty(); 清空节点；内容清空 节点还在
复制节点
- var newTag = $('h1').clone(true)； //当为true,代表复制所有，包括它注册的事件；//不传参为false 只复制标签。事件不会复制
- $('.box').append(newTag);
替换节点
- var tag = <div>我是一个div</div>;
- $('h1').replaceWith($(tag));
事件对象； 事件冒泡
- $('button').on('click',{name:'gxq',age:'23'},function (event) {
event.stopPropagation(); //阻止时间冒泡
console.log(event.type); //click
console.log(event.target); // button标签
console.log(event.data.name); 、// gxq
console.log(event); // 整个
});
默认行为 ； 自动触发
- $('inpu[type=submit]').on('click',function (e) {
e.preventDefault(); // //阻止事件的默认行为。
return false // 也可以
});
- $(':submit').trigger('click'); //自动触发但是有冒泡事件
- $(':submit').triggerHandler('click'); // //自动触发但是有冒泡事件
事件委托
> $('button').click(function () {
var tag = '<div class="box1">1111</div> ';
var tag1 = '<div class="box2">1111</div> ';
$('.box').append(tag);
$('.box').append(tag1);
});
$('.box1').on('click',function (){
alert('1'); //不会触发；代码解析到这 ；box1还没生成
});
> $('.box').on('click','.box1,.box2',function () {
alert('点了1'); //成功
})
>$('.box').click('.box1,.box2',function(){
alert('3') // 这个点击box的任何位置都会跳出3
})
trigger自动触发事件
<form action="03-删除结点.html">
<input type="submit">
</form>
/*触发事件
程序一执行就开始执行对应的事件
1.使用trigger会解发事件的默认行为. 2.使用trigger触发事件时, 不能阻止事件冒泡
$(':submit').on('click',function () {
alert('提交');
});
$(':submit').trigger('click'); 一进页面就触发了点击，而且跳转
// $(':submit').triggerHandler('click'); 触发点击，但是清除默认事件不跳转
链式操作
$(this).children('.sec').slideToggle().end().siblings().children('.sec').slideUp()
end() 可以结束前一段链式操作，又回到原始$(thiis)这个状态操作
