2017-04-07 jQuery 学习笔记

jQuery 函数整理

• show(参数)

//显示，添加参数表示动画时间，动画同时控制宽高
$("div").show(1000).html('哈哈哈')

• hide(参数)

//隐藏，添加参数表示动画时间，动画同时控制宽高
$('div').hide(1000)

• html('参数')
  没有参数为获取值

//html 添加文本，括号内是字符串，无法输入标签
$("div").show(1000).html('哈哈哈')

• text('参数') 与 html('类似')
  当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。
  没有参数为获取值，有参数为设置值，此时会覆盖原有内容

• ready()

$(document).ready(function(){})
//功能类似 
window.onload = function(){}
//前者可以多次执行，function(){}是作为参数传递进去，所以并不会覆盖；后者只能执行一次，function(){} 作为值，是赋值操作
//前者加载不包括外部资源图片，只是 DOM 树加载完成之后就执行，比后者执行快

• noConflict()
  解除绑定 $ 符号

$.noConflict();
//解除之后要使用 jQuery 对象就使用jQuery前缀
jquery.('div').hide(1000)

• addClass()
  添加类名

 $('div').addClass('current');

• removeClass()
  删除类名

 $('div').removeClass('current');

• taggleClass()
  切换类名，如果存在类名那么删除，如果不存在类名那么添加

$('div').taggleClass('current');

• css()
  所有关于样式 .style 的操作都在此方法内进行

//键值对的形式
 $div.css({
                            'width': '500px',
                            'height': '500px',
                            'background': 'red'
                        })
$div.css('width','500px');

• val()
  主要用于 input标签自带属性如：src\href\value 等属性控制，带参数代表设置，不带参数代表获取

$('input').val('1233');
$('input').val();

• 尺寸函数

var w = $("#small").width()
                var h = $("#small").height()
                var iw = $("#small").innerWidth()
                var ih = $("#small").innerHeight()
                var ow = $("#small").outerWidth()
                var oh = $("#small").outerHeight()
                var owm = $("#small").outerWidth(true)
                var ohm = $("#small").outerHeight(true)

• attr()
  获取或设置属性值

//带参数为设置
$(selector).attr(attribute,value)
$('a').attr('target','_self')
//获取规定参数的属性的值
$(selector).attr(attribute)
//使用函数来设置属性和值
$(selector).attr(attribute,function(index,oldvalue))
//键值对的方式设置多个属性和值
$(selector).attr({attribute:value, attribute:value ...})
$('a').attr({
         'href': 'http://www.baidu.com',
         'target': '_blank'
 })

• parent()
  获得父元素

$("#filter").parent().css("background-color", "blue")

• parents()
  获得父元素及所有祖先元素

$("#filter").parents().css("background-color", "blue")

• child()
  获得子元素标签

$('div').child()

• children()
  获得所有子元素标签

$('div').children()

• siblings()
  获得兄弟元素标签

$(this).css('background', 'red').siblings().css('background', 'green');

• next()
  next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器，则取回匹配该选择器的下一个同胞元素。

//.next(selector)
$("#ul1").next("div").css("background-color", "red")

• eq()
  eq() 选择器选取带有指定 index 值的元素。返回的是一个 jQuery 对象可以直接使用 jQuery 方法

$(":eq(index)")
$(".class").eq(0).css("background-color", "green")

• mouseenter()
  鼠标进入事件，从子元素进入不会再次触发事件

• mouseover()
  鼠标滑过事件，从子元素进入会再次触发事件

• mouseleave()
  鼠标离开事件，进入子元素不会再次触发事件

• mouseout()
  鼠标划出事件，进入子元素会再次触发事件

• hover(fn,fn)
  监控鼠标移入移出，功能等于 mouseenter() 和 mouserleave,带两个参数前一个表示移入，后一个表示移出；如果只有一个参数则表示移入移出做相同方法

 $('li').hover(function () {
                        $(this).children('.filmContent').addClass('current').parent().siblings().children('.filmContent').removeClass('current');
                    })

• index()
  返回指定元素相对于其他指定元素的 index 位置。返回的是相对其父元素的位置

 $('li').hover(function () {
                        console.log($(this).index());
                    })

• event.stopPropagation()
  阻止冒泡，因为是事件对象，所以要穿如 event 做参数

• toggle()
  切换动画状态，如果可见那么切换成不可见，如果不可见那么切换成可见

$(selector).toggle(speed,callback,switch);
 $('.ad').toggle(1000);

• slideToggle();
  通过使用滑动效果（高度变化）来切换元素的可见状态。
  如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素。

$(selector).slideToggle(speed,callback);
$(this).children('.secondMenue').stop().slideToggle(200);

• slideUp()
  隐藏动画，向上滑动卷起

$(this).siblings().children('.secondMenue').stop().slideUp(200);

• slideDown(参数1,fn)
  展示动画，向下滑动；参数1是执行动画时间，fn 是回调

$(this).siblings().children('.secondMenue').stop().slideDown(200);

• stop();
  结束动画,两个参数，前面是是否结束全部动画，后面是否直接跳到动画结尾(没有动画)，是布尔类型

$(selector).stop(stopAll,goToEnd)

• addBack();
  当前jQuery对象可能是通过调用其它jQuery对象的特定方法创建的，使用该函数将返回一个新的jQuery对象，该对象包含了当前jQuery对象和之前创建它的jQuery对象的所有匹配元素。

$('.box2').parent().addBack().css('background', 'cyan');

• fadeIn(参数1，参数2); fadeOut()
  淡入淡出动画,参数1是动画时间单位毫秒，参数2是透明度范围0~

$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);

• delay();
  延迟动画,参数是时间单位毫秒

$('.ad').delay(1000).fadeIn(1000).delay(5000).fadeOut(1000);

• fadeToggle();
  切换，原来是淡入切换成淡出，原来是淡出切换成淡入

  $('.ad').fadeToggle(1000);

• animate(prop,speed,easing,callback);
  自定义动画,prop 是属性， speed 是速度（可以填时间），easing 是动画方式（渐快、渐慢、先慢后快等等，一些特殊的动画方式需要引入插件使用）；动画是队列形式执行，先进先出

 $('div').animate({
                   'width': '1000px'
               }, 1000, function () {
                   console.log('动画结束');
               });

• each();
  each() 方法规定为每个匹配元素规定运行的函数

$(selector).each(function(index,element));
  $('li').each(function () {

//               this  == DOM对象
               $(this).slideUp(2000);

//               console.log(index + value);
           })

• jQuery 动态创建标签节点

var $newTag = $('<li>新增的节点</li>');

• a.append(b);
  把 b 添加到 a里， a 是 b 的父标签节点
• b.appendTo(a);
  这对方法是将节点添加到父节点中的最后位置

$('.red').append($newTag);
$newTag.appendTo($('.red'))

• a.prepend(b);
• b.prependTo(a);
  这对标签是将 b 添加到 a 标签的第一个位置

$newTag.prependTo($('.red'));
$('.red').prepend($newTag);

• a.before(b);
• b.innerBefore(a);
  兄弟关系添加，将 b 添加到 a 前面

$('.red').before($newTag);
$newTag.innerBefore($('.red'));

• a.after(b);
• b.innerAfter(a);
  兄弟关系添加节点，将 b 添加到 a 节点后面

$('.red').after($newTag);
$newTag.innerAfter($('.red'));

• remove();
  删除节点，参数是指向节点的 className id tag 等等

$('.red>li:first').remove();

• empty();
  清空节点中的内容，也可以用 html('');

$('.red>li:first').empty();
$('.red>li:first').html('');

注意要清空自带属性要使用 val('')

• trim()
  去除空格、tab

$.trim(content).length <= 0

• focus();
  获得焦点

$('.content').focus();

• blur();
  失去焦点

$('.content').blur();

• clone(参数)；
  复制节点，参数是布尔类型，默认是 false 浅赋值，仅仅赋值这个节点，不赋值事件；clone(true);时为深赋值,会赋值这个事件

var $cloneTag = $pTag.clone(true);

• a.replaceWith(b)
  用 b 节点来替换 a 节点

var $pTag = $('p');
var $newTag = $('<h1>0000</h1>');
$pTag.replaceWith($newTag)

• 事件对象的一些属性方法
• event.target
  获得调用此方法的具体对象

function test(event){
        console.log(event.target);
}

• event.type
  获得调用此方法的事件行为（onclick\mouseover）

function test(event){
        console.log(event.type)
}

• event.data
  获得调用此方法同时传入的参数

        function 事件data() {
            $('ul').click({'name': 'sz'}, exec);
            function exec(event) {
                console.log(event.data);
            }
        }

• event.result
  获得项链函数的返回值

var num = 0;
function test(){
        $('p').click(function(event){
                return num++;
        })
        $('p').click(function(event){
                alert(event.result);
        })
}

• on()
• 事件绑定

//绑定单个事件
$('p').on('click',function(){
        console.log('xxxx');
})

//绑定多个事件，同一个回调函数,中间用空格隔开
$('p').on('click mouseenter',function(event){
        console.log('xxx' + event.type)
})

//绑定多个事件，多个回调函数，用键值对的方式
$('p').on({
        'click':cE,
        'mouseenter':function(){
                console.log('鼠标移入');
        }
})
function cE(){
        console.log('单击事件')
}

• 事件委托
  on(type,selector,data,fn)

//body被点击，小king执行 function
$('body').on('click','.king', function () {
             console.log('我是小king, 处理事件');
         })

• off();
  解除事件绑定

$('p').off('click', cE);

• one();
  一次性事件，只执行一次

$('p').one({
        'click':function(){
                console.log('xxxx');
        }
})

//内部实现原理就是结尾解除绑定
$('p').click(function(){
        console.log('xxxx');
})

• 阻止事件默认行为
  一些事件会有默认行为，比如a 标签点击会跳转、form中 Input 标签会提交
  event.preventDefault

$(':submit').click(function (event) {
               console.log('xxxx');
               event.preventDefault();
           })

• trigger();
  手动触发事件，会触发默认事件，会触发冒泡事件(a标签存疑，老师示例时候出现问题)

$(':submit').trigger('click');

• triggerHandle();
  手动触发事件，不会触发默认事件，不会触发冒泡事件

$('.box3').triggerHandler('click');

• 命名空间

       $('.box').on('click.xx', function () {
            console.log('click.xx');
      })
       $('.box').on('mouseenter.xx', function () {
          console.log('mouseenter.xx');
      })

      $('.box').on('click.lisi', function () {
          console.log('click.lisi');
      })


         function haha() {
             console.log('1');
         }

         $('.box').click(haha)
         $('.box').click(function () {
             console.log('2');
         })



         $('.box').on('click.one', function () {
             console.log('1');
         })
         $('.box').on('click.two', function () {
             console.log('2');
         })


         $('.box').off('.one');



 $('.box').trigger('click.lisi');