$.formatMoney() 金额按千位逗号分割; 将千分位格式的字符串转换为浮点数;
 JSON.parse() JSON 通常用于与服务器端交换数据,在接收服务器数据时 一般是字符串,我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
 JSON.parse(text,[,reviver])  text:必需, 一个有效的 JSON 字符串。reviver: 可选,一个转换结果的函数, 将为对象的每个成员调用此函数。
   解析前要确保你的数据是标准的 JSON 格式,否则会解析出错
 
 
$或jQuery本质是一个函数,调用完后返回一个jQuery类型的对象
 
jQuery的入口函数
jQuery入口函数方法一
$(document).ready(function() { /* 页面中DOM树加载完后会执行,不会等待图片、文件的加载 */ })
jQuery入口函数方法二: 
$(function(){
  // 页面中DOM树加载完后会执行,不会等待图片、文件的加载
})
 
jQuery入口函数与window.onload的对比
① JavaScript的入口函数window.onload要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
② jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
③ window.onload只能注册一次,jQuery入口函数可以注册多次。
 
DOM对象转jQuery对象
  $(dom对象)
转换后就可以使用 jQuery中的属性和方法了
 

过滤器选择器

基本选择器:
名称 用法 描述
ID选择器 $('#选择器') 获取指定ID元素
类选择器 $('.选择器') 获取同一类的class元素
标签选择器 $('div') 获取同一标签的的所有元素
并集选择器 $('div,p, a') 使用逗号分隔,只要符合条件之一就可以
交集选择器 $('div.redClass') 获取class为redClass的div元素
 
层级选择器:
名称 用法 描述
子代选择器 $('ul>li') 使用 >号,获取儿子层级的元素,并不会获取孙子层级的元素
后代选择器 $('ul li') 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等

这类选择器都带冒号:

名称

用法

描述

:eq(index)

$('li:eq(2)').css('color', 'red')

获取到的li元素中,选择索引号为2的元素,

索引号index从0开始。

:odd

$('li:odd').css('color', 'red')

获取到的li元素中,选择索引号为奇数的元素

:even

$('li:even').css('color', 'red')

获取到的li元素中,选择索引号为偶数的元素

:last

 

获取最后一个子元素

 

选择器筛选方法

筛选选择器的功能与过滤选择器有点类似,但是用法不一样,筛选选择器主要是方法。

名称

用法

描述

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()

找上一次兄弟

 
jQuery中的事件注册
// 事件源.事件名(事件处理程序)
$('选择器').事件名(function() {/* 事件处理函数 */})
// 事件在jQuery中通过方法注册
// 事件方法名不加on
 
 
jquery操作css
设置单个样式
// 元素.css(name,val)
$('ul> li').css('backgroundColor','red')
设置多个样式
// 元素.css({name:val,name:val,.....name:val})同时设置多个要用花括号{} 包裹
$('li').css({
        color:'red',
        width:'100px',
        backgroundColor:'pink',
        marginTop:'10px'
    });
获取样式
// 元素.css('name')
$('div').css('width')
 
添加类名
$(元素).addClass(name) 
// 追加类名不会覆盖原有的类名
移除类名
$(元素).removeClass(name) // 删除指定类名
$(元素).removeClass() // 不传参数移除所有类名
检查类名是否存在
$(元素).hasClass(name) 
// 返回布尔值,true表示存在  false表示不存在
切换类名
$(元素).toggleClass(name)  
// 有name就移除name 没有就添加
 
 
jQuery操作标签属性
设置单个标签属性
// $(元素).attr(name,value)
<div></div>
<script src="../jquery-1.12.4.js"></script>
<script>
    $('div').attr('title','我是div');
</script>
设置多个标签属性
// 元素.attr({name:val,name:val,.....})   标签属性和自定义属性都可以设置
<div></div>
<script src="../jquery-1.12.4.js"></script>
<script>
    // 设置多个属性
    $('div').attr({
        title:'我是div',
        id:'box',
        index:'0'   // 自定义属性
    });
</script>

// 标签属性和自定义属性都可以设置
获取标签属性
// $(元素).attr(name);
<div id="box" title="我是div"></div>

$('div').attr('title');
 
移除标签属性
// $(元素).removeAttr(name)
<div id="box" title="我是div"></div>
<script>
    $('div').removeAttr('title');
</script>
 
prop操作标签属性
jQuery1.6之后,对于checked、selected、disabled这类Boolean类型的属性来说,不能用attr方法,,只能用prop方法
 
获取属性值
元素.prop(name)
// $(元素).prop(name)
足球:<input type="checkbox">
<script src="../jquery-1.12.4.js"></script>
<script>
      // attr方式获取
    //var flag = $('input').attr('checked');
    //console.log(flag);  // undefined
    
      // prop方式获取
    var flag = $('input').prop('checked');
    console.log(flag);  // false
</script>
设置属性值
元素.prop(name,value)
足球:<input type="checkbox">
<script>
    // 设置多选框为选中
    $('input').prop('checked', true);
</script>
 
操作标签内容
获取表单元素的内容
元素.val()
<input type="text"><button>按钮</button>
  <script>
    $('button').click(function() {
      console.log($('input').val());
    })
  </script>
设置表单元素内容
元素.val(value)
<input type="text"><button>按钮</button>
  <script>
    $('button').click(function() {
      console.log($('input').val('你好啊'));
    })
  </script>
 
 
获取非表单元素的内容
元素.text()
div>
    <p>我是div中的p</p>
</div>
<script>
    // 获取div中的内容
    var content = $('div').text();
    console.log(content);  // 注意:仅仅获取文本 ‘我是div中的p’
</script> 
设置非表单元素的内容
元素.text(value)
<div>
    <p>我是div中的p</p>
</div>
<script>
    // 设置div中的内容
    $('div').text('<h1>我是标题</h1>');    // 注意:所设置的标签不会被浏览器解析
</script> 
 
获取非表单的内容
元素.html()
设置非表单元素的内容
元素.html(value)
 
jQuery动画实现
基本动画1 【一般情况下 tab切换用】
动画显示
元素.show(speed ,callback)
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
     ② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
 
// 给按钮注册点击事件
 $('button').click(function(){
     // 显示div
    // $('div').show(500);
    // $('div').show('slow');
    $('div').show(500,function(){
        alert('动画结束')
        });
 });
动画隐藏
元素.hide(speed,callback)
  • 参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
  • ② callback,可选,表示动画执行完后要执行的程序,用函数 表示
  // 给按钮注册点击事件
  $('button').click(function () {
    // 隐藏div
    // $('div').hide(600);
    // $('div').hide('slow');
    $('div').hide(500, function () {
      alert('动画结束')
    });
  });
动画切换
元素.toggle(speed,callback)
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
  ② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
// 给按钮注册点击事件
  $('button').click(function () {
    // $('div').toggle(600);
    // $('div').toggle('slow');
    $('div').toggle(500, function () {
      alert('动画结束')
    });
  })
基本动画2 【淡入淡出】
动画显示
元素.slideDown(speed,callback)
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
   ② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
 
  // 给按钮注册点击事件
  $('button').click(function () {
    // 显示div
    // $('div').slideDown(500);
    // $('div').slideDown('slow');
    $('div').slideDown(500, function () {
      alert('动画结束')
    });
  });
动画隐藏
元素.slideUp(speed,callback)
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
  ② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
 
动画切换
元素.slideToggle(speed,callback)
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
  ② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
 
 
 
基本动画3 【向上出 向下入】
动画显示
元素.fadeIn(speed],[callback])
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
  ② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
 
动画隐藏
元素.fadeOut(speed],[callback])
① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
 
动画切换
元素.fadeToggle([speed],[callback])
参数:① speed ,可选,表示动画执行时长,数字 表示毫秒。 也可用字符串 slow(600)、normal(400)、fast(200)。
    ② callback,可选,表示动画执行完后要执行的程序,用函数 表示。
 
自定义动画
元素.animate({params},[speed],[easing],[callback])
(注意:不支持颜色动画[这个都可以用 jQuery.color.js 插件来解决],也不支持css3属性动画)
参数:① params ,必选。 表示运动的哪些样式属性,用对象 表示。
  ②[speed] ,可选,表示动画执行时长,数字 表示毫秒。
  ③[easing] ,可选,表示运动的方式,默认为swing(缓动)慢快慢 可以是linear(匀速)。
  ④ callback,可选,表示动画执行完后要执行的程序,用函数 表示。
例如:
  $('button').click(function () {
    $('div').animate(
      {  // 要运动的样式属性
        width: 400,
        height: 400,
        top: 200,
        left: 300,
        opacity: 1
      },
      3000, // 运动时长
      'linear', // 运动方式匀速
      function () { // 运动结束后要执行的代码
        console.log('动画结束');
      });
  });
 
 
动画的队列和动画停止
元素.stop([clearQueue], [jumpToEnd]);
参数:
clearQueue ,可选,表示是否清空动画队列。
   默认为false。 若是false 时,会停止当前这一个动画,开始队列中的下一个动画。
  若是true 时,停止动画并清空所有的动画队列。
jupmToEnd ,可选,表示是否让当前动画直接达到目标值。
  默认为false若是false 时,会直接停止当前动画,不会达到目标值。
  若是true 时,则会停止当前动画,直接达到目标值。
 
<script>
  // 给按钮注册点击事件
  $('button:eq(0)').click(function () {
    $('div').slideDown(2000);
  });

  // 给按钮注册点击事件
  $('button:eq(1)').click(function () {
    $('div').stop();  // 停止当前动画的执行
  });
</script>
 
 
 
jQuery操作节点
创建节点
$(htmlStr)  // 参数: htmlStr, html格式的字符串
<script>
  // 创建好一个元素  jQuery对象
  var $li = $('<li>我是新来的</li>');
  // 追加到ul中
  $('ul').append($li);
</script>
添加节点
把一个子元素追加到父元素的最后面
父元素.append(子元素) 
<ul>
  <li>我是li</li>
</ul>
<script>
  // 创建好一个元素  jQuery对象
  var $li = $('<li>我是新来的</li>');
  // 追加到ul中
  $('ul').append($li);
</script>
子元素.appendTo(父元素)
<ul>
  <li>我是li</li>
</ul>
<script>
  // 创建好一个元素  jQuery对象
  var $li = $('<li>我是新来的</li>');
  // 把新创建好li追加到ul中
  $li.appendTo($('ul'));
</script>
 把一个子元素追加到父元素的最前面
父元素.perpend(子元素)
 
<ul>
  <li>我是li</li>
</ul>
<script>
  // 创建好一个元素  jQuery对象
  var $li = $('<li>我是新来的</li>');
  // 把新创建好li追加到ul中
  $li.perpend($('ul'));
</script>
子元素.prependTo(父元素)
 
把一个元素追加到一个同级兄弟元素前面
兄弟元素.before(新元素)
<ul>
  <li class="zs">我是兄弟张三</li>
</ul>
<script src="../jquery-1.12.4.js"></script>
<script>
  // 创建好一个元素  jQuery对象
  var $li = $('<li>我是新来的李四</li>');
  // 把新的li元素追加到张三的前面
  $('.zs').before($li);
</script>
把一个元素追加到一个同级兄弟元素后面 
兄弟元素.after(新元素) 
 
<ul>
  <li class="zs">我是兄弟张三</li>
</ul>
<script src="../jquery-1.12.4.js"></script>
<script>
  // 创建好一个元素  jQuery对象
  var $li = $('<li>我是新来的李四</li>');
  // 把新的li元素追加到张三的后面
  $('.zs').after($li);
</script>
删除节点
节点.remove( )
 
清空节点
元素.empty()不用添内容
元素.html(‘’) 直接为空就可以了
 
元素.clone(boolean);
默认false
若是true时,则会克隆和元素相关的事件。 深拷贝(拷贝的包括事件)
若是false时,则不会克隆和元素相关的事件。浅拷贝。(拷贝的不包括事件)
<button>克隆</button>
<div>
    <ul>
        <li>我是li1</li>
        <li>我是li2</li>
        <li>我是li3</li>
        <li>我是li4</li>
        <li>我是li5</li>
    </ul>
</div>
<script src="../jquery-1.12.4.js"></script>
<script>
    // 给li注册事件
    $('li').click(function(){
        alert('触发了');
    });
    // 点击按钮克隆ul元素
    $('button').click(function(){
        // 复制ul
        //var $ul = $('ul').clone(); // 浅拷贝
        var $ul = $('ul').clone(true); // 深拷贝
        // 把拷贝的元素追加到div中
        $('div').append($ul);
    });
</script>
 
 
jQuery操作元素的尺寸
获取设置方式:
① width 和 height方法操作元素的大小,不包含内边距、边框 外边距。
获取:元素.width();​ 元素.height();​
设置:元素.width(value);​ 元素.height(value);
 
② innerWidth和innerHeight 
操作元素的大小,包含内边距 ,不包含边框 外边距。
获取:元素.innerWidth();​ 元素.innerHeight();​
设置:元素.innerWidth(value);​ 元素.innerHeight(value);
 
③ outerWidth 和 outerHeight 
操作元素的大小,包含内边距和边框 ,不包含外边距。
获取:元素.outerWidth ();​ 元素.outerHeight();​
设置:元素.outerWidth (value);​ 元素.outerHeight(value);
 
 

jQuery操作元素的位置

获取元素距离文档的位置
元素.offset()  返回一个对象,对象中包含left和top 分别表示距离文档左侧和文档顶部的位置
 
获取元素距离就近上级定位元素的位置
元素.position() 返回一个对象,对象中包含left和top分别表示距离就近上级定位的左侧和顶部的位置
 
操作页面卷去的距离
获取
元素.scrollTop()常用
元素.scrollLeft();
设置
 元素.scrollTop(value); 常用​
 元素.scrollLeft(value);
 
scroll()事件
当用户滚动指定的元素时,会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口)。
scroll() 方法触发 scroll 事件,或规定当发生 scroll 事件时运行的函数。
 
 
 
jQuery注册事件分为: 简单事件绑定 ---->bind事件绑定 ---> delegate事件绑定 ----> on 事件绑定
on方法注册事件
语法:
// 第一个参数:events,绑定事件的名称可以是由空格分隔的多个事件(标准事件或者自定义事件)
// 第二个参数:selector, 执行事件的后代元素(可选),如果没有后代元素,那么事件将有自己执行。
// 第三个参数:data,传递给处理函数的数据(可选),事件触发的时候通过event.data来使用(不常使用)
// 第四个参数:handler,事件处理函数
$(selector).on(events[,selector][,data],handler);
on事件多个事件注册
// 方式1:
$('button').on('click mouseover mouseout', function() {
    console.log('on');
});

// 方式2:推荐使用
$('button').on(
    {
        click:function() {
            console.log('click'),
        },
        mouseover:function() {
            console.log('mouseover'),
        },
        mouseout:function() {
            console.log('mouseout'),
        }    
    }
);
on实现事件委托
<div class="box">
    <div class="son">子元素</div>
  </div>
  <script>
    // 把父元素的点击事件 委托给 子元素
    $('.box').on('click', '.son', function() {
      console.log($(this));
    })
  </script>
 
 
bind()方法注册事件
语法:
$(selector).bind(event,data,function,map)
参数:
  event 必须, 规定添加到元素的一个或多个事件。由空格分隔多个事件值
  data: 规定传递到函数的额外数据
  function: 必须, 规定当事件发生时运行的函数
  map: 规定事件映射 ({event:function, event:function, ...}),包含要添加到元素的一个或多个事件,以及当事件发生时运行的函数。
<button>按钮</button>
  <script>
    // 第一个参数:事件类型
    // 第二个参数:事件处理程序
    // 第一种方法
    $('button').bind('click mouseenter', function () {
      console.log('触发了');
    });
    // 第二种方法 传入对象 {事件名: 事件处理程序, 事件名: 事件处理程序, .......}
    $('button').bind({
      click: function () {
        console.log('我是点击事件');
      },
      mouseover: function () {
        console.log('我是鼠标进入事件');
      }
    })
  </script>
缺点: 不支持动态事件绑定
 
delegate注册委托事件
delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
语法:
$(selector).delegate(childSelector,event,function)
 参数:
  childSelector: 必需, 规定要附加事件处理程序的一个或多个子元素
  event: 规定附加到元素的一个或者多个事件, 多个事件有 空格分隔
   function: 处理函数
 
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").delegate("p","click",function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    $("<p>这是一个新段落。</p>").insertAfter("button");
  });
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
</html>
 
jQuery触发事件
元素.事件名()  记得不加on 如:
div.colick(function(){});点击事件
 
元素.trigger(‘event name’)
event: 事件名称
<button id="btn">点我啊</button>
<script src="../jquery-1.12.4.js"></script>
<script>
    $('#btn').click(function(){
        alert('触发了');
    });
    // 触发方式1
    $('#btn').click();
    // 触发方式2:
    $('#btn').trigger('click');
</script>
 
解除绑定事件
选择器.unbind() // 解除所有的事件
选择器.unbind(事件名) // 解除指定事件
 
选择器.undelegate()  // 解除所有事件
选择器.undelegate(事件名) //解除指定事件
 
选择器.off()解除匹配元素的所有事件
选择器.off(事件名) 解除匹配元素的所有该事件
 
获取事件对象
通过事件处理程序事件处理函数的第一个形参 获取到事件对象
选择器.事件名(function(e){}) // e就是 我们的  事件对象
 
事件对象常用的属性和方法
// screenX和screenY 对应屏幕最左上角的值
// clientX和clientY 距离页面左上角的位置(忽视滚动条)
// pageX和pageY 距离页面最顶部的左上角的位置(会计算滚动条的距离)
// event.keyCode 按下的键盘代码
// event.data 存储绑定事件时传递的附加数据
// event.stopPropagation() 阻止事件冒泡行为
// event.preventDefault() 阻止浏览器默认行为
// return false 既能阻止事件冒泡,又能阻止浏览器默认行为
 
 
 
什么是链式编程?
jQuery中,在通过调用jQuery中的方法设置完一个操作时,还可以继续通过点的方式设置其他操作,这个现象就是链式编程
在通常情况下,只有设置操作才能把链式编程延续下去,因为获取操作的时候,会返回获取到的相应的值,无法返回 jQuery对象。
 
链式编程原理:
在通过调用方法设置完一个操作时,该方法内部会返回当前的jQuery元素对象
 
jQuery链式编程的过程中,通过end方法可以返回当前jQuery元素对象之前的上一个使用jQuery元素对象
 
each方法:(记得要有jQuery插件)
选择器.each(function(index,element){})
参数index:表示当前元素所在匹配元素中的索引
参数element:表示当前元素(DOM对象)
 
多库共存问题
jQuery使用$ 作为标识符 但是如果与其他框架的$冲突时,jQuery可是释放$符的控制权
释放方法: var c = $.coConflict() // 释放$的控制权,并且把$的能力给c