JQuery
JQuery
入口函数：
$()---选择函数（查找功能内）
完整写法： $(document).ready(匿名函数)
化简写法： $(匿名函数) $(function(){}
结论：jq入口函数可以使用多个，按顺序执行；原生js只能一个页面使用一个入口函数，万一使用多个，只执行最后一个
$\(\).hide\(500\) 隐藏
$\(\).show\(500\) 显示
$\(\).toggle\(500\) 反义词：切换显示和隐藏
JQ控制css:
$('div').css('width','500px'); //单属性设置
alert( $('div').css('width') ); //单属性访问
$('div').css({k:v,k:v}) 多属性设置语法，多属性没有访问
$('div').css({'height':'300px','background-color':'red'}) 多属性设置
JQ控制内容：
$('div').html('ppp'); //设置内容 对应js的innerHTML
alert( $('div').html() ) //访问内容
JQ控制类名：
$('div').addClass('box'); //添加类名
$('div').removeClass('box') //如果不写类名，表示删除所有
$('div').toggleClass('box'); //切换类 反义
JQ选择器：
1、常用选择器：
//jq中有一部分选择器和css完全相同，且含义写法都相同
// $('.box').css('background','green');
// eq == equal 等于
// $('li:eq(1)').css('background','green'); //li索引为1的标贴
// $('li').eq(0).css('background','green'); //li索引为0的标贴
// $('.box').next().css('background','green'); //下一个
//$('li').not('.box').css('background','green'); //排除某个人
// has()父级， find()子级
$('.one').has('p').css('background','green'); //选中父级
$('.two').find('p').css('background','green'); // 选中子级
2、父级选择器：
//关闭自己(事件源)的父级
$(this).parent().hide(500); //这个500是事件毫秒
3、子级选择器：
//鼠标滑过和离开，子级显示和隐藏
$(this).children('ul').toggle();
4、兄弟选择器
$(this).css('background','green');
$(this).siblings().css('background','')
链式编程
$\(this\).css\('background','green'\).siblings\(\).css\('background',''\)
// 排他思想：只许州官放火，不许百姓点灯
JQtab栏选项卡：
$('.tab li').mouseover(function(){
// $(this).addClass('active');
// $(this).siblings().removeClass();
$(this).addClass('active').siblings().removeClass();
// alert($(this).index());
//能能够让li和div对应起来的就只有下标，得到事件源li的索引值，用这个索引值去选择目标div
$('.tab .con div').eq($(this).index()).addClass('current').siblings().removeClass();
})
JQ的索引值：
$(this).index()
JQ自定义动画：
/ $('div').animate(动画过程,花费时间,运动曲线,回调函数);
//动画过程：{k:v,k:v} -- 里面写css键值对 -- 语法和css多属性是一样的css({k:v,k:v})
//运动曲线：swing linear
//回调函数：作用是当动画完成之后要执行的命令 -- function(){}
$('div').eq(0).animate({'width':'500px'},2000,'swing');
$('div').eq(1).animate({'width':'500px','height':'300px','background':'red'},2000,'linear',function(){
alert('linear运懂完成');
// animate不支持变色动画
css透明度：
` opacity: 0.6;
`
JQ透明度：
// $('div').fadeOut(500); 透明消失
//$('div').fadeIn(500); //透明显示
// $('div').fadeToggle(500) //透明综合体
// $('div').fadeTo(动画时间,透明度);透明度取值是0-1
// $('div').fadeTo(500,0.5)
JQ side—向下/向上
// $('div').slideDown(500); 向下展开显示
//$('div').slideUp(500); 向上卷起隐藏
$('div').stop().slideToggle('slow'); 'fast'
// 清除动画排队机制：在形成动画函数之前加stop（）滞停动画
JQ控制html属性：
jq控制html属性是用jq方法 prop() -- 和css(k,v)单属性用法完全相同
//单属性设置和访问
$('a').prop('href','http://www.baidu.com')
alert( $('a').prop('href') );
$('a').prop('title','xxxx');
$('#who').val() 获取属性值 和 prop 一样都可以获取属性值
/清空默认文字 -- 设置val值为空 val() prop()
JQ循环，遍历： each
$('li').each(function(event){
//each中自带的一个形参表示的是选中的这些标签索引值
$(this).html(event) html是控制内容
})
获得焦点和失去焦点：
$('input').focus(function(){
// alert('ok')
//清空默认文字 -- 设置val值为空 val() prop() -- 条件：如果val值是请输入内容的时候才清空
if($(this).val() == '请输入内容'){
$(this).val('');
}
});
$('input').blur(function(){
// alert('失去焦点')
//还回默认文字内容 -- 条件：用户输入的内容是空
if($(this).val() == ''){
$(this).val('请输入内容');
}
});
JQ窗口尺寸改变
$(window).resize(function(){
// alert('ok');
//当窗口尺寸改变的时候，获取到窗口的宽度和高度
// css('width')css('height')
// width() height()
console.log($(this).width());
console.log($(this).height());
})
鼠标事件冒泡：
$('div').mouseenter(function(){
alert(1)
});
$('div').mouseleave(function(){
alert(2)
});
// 事件冒泡
// hover -- mouseenter和mouseleave
事件冒泡现象：就是点击一个会出现好几个，不是自己想要的；
解决方法：return false;
jq submit事件：
$('#forms').submit(function(){
alert('ok')
})
jq 事件委托：
语法：$('ul').delegate(真实事件源,事件类型,function(){//命令});
作用：1、提高代码执行效率；2、delegate可以给未来元素（将来通过程序写入到页面的元素）绑定命令
另一种：绑定未来元素 on ,没有效率；
('li').on(事件类型,function(){
//命令
});
jq 节点控制：
// 追加节点步骤：1、声明变量保存节点数据 2、使用追加节点函数，将变量追加到页面中
var newLi = $('<li>2222</li>');
// newLi.appendTo($('ul')); //子级追加 追加到结尾
// $('ul').append(newLi) //子级结尾追加
// newLi.prependTo($('ul')) //子级追加，追加到开头处
// $('ul').prepend(newLi) //子级追加
var newDiv = $('<div>div</div>');
// 同级追加 after before insertAfter insertBefore
// newDiv.insertAfter($('ul')); //追加到 后面
// $('ul').after(newDiv) // 追加到 后面
// newDiv.insertBefore($('ul')); //追加到 前面
// $('ul').before(newDiv) //追加到前面
// $('ul').remove() 删除
// $('ul').empty() 清空
jq 正则表达式：
/js中怎么样声明一个正则表达式
// var reg = new RegExp(规则,参数)
// var reg = /规则/参数
var reg = /a/i;
var str = 'Abc'
alert(reg.test(str))
// test()检测，如果通过是true，不通过就是false
例子：var reg = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i
验证Email地址：“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证InternetURL：“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码：“^((d{3,4})|d{3,4}-)?d{7,8}$”
匹配Email地址的正则表达式：w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
ajax 使用：
overflow: hidden