jQuery（1）

1、原生js和jQuery入口函数的加载模式不同

　　1）原生js 会等到DOM元素加载完毕，并且图片也加载完毕才会执行；

　　2）jQuery会等到DOM元素加载完毕，但不会等到图片加载完成就会执行。

     　　//写在head标签里

              原生javascript的固定写法

　　　　window.onload = function() {

　　　　　　var img = document.getElementsByTagName('img')[0];

　　　　　　console.log(img);

 　　　　　  var width = window.getComputedStyle(img).width;

　　　　　　console.log("原生js",width);

　　　　}　　

　　　　jquery的固定写法

　　　　$(document).ready(function() {

　　　　　　var $img = $("img");

　　　　　　console.log($img);

 　　　　　　var $width = $img.width();

　　　　　　console.log("jq",$width);

　　　　});

 

 

2、原生js如果编写了多个入口函数，后面编写的会覆盖前面编写的，且只执行一遍

jQuery如果编写了多个入口函数，后面编写的不会覆盖前面编写的，有多少个入口函数，就执行多少遍

   

3、jQuery入口函数的四种写法

　　 第一种：

　　　　$(document).ready(function() {

　　　　　　alert('hello');

 　　　  })

　　第二种 ：

  　　　　 jQuery(document).ready(function() {

   　　　　　　alert('hello');

  　　　　 })

　　第三种：（推荐）

  　　　　 $(function() {

   　　　　　　alert('hello');

 　　　　  })

 　　第四种：

  　　　　 jQuery(function() {

   　　　　　　alert('hello');

  　　　　 })

  

   

4、jQuery冲突问题

   如果引入的其他js文件中也存在 $  符号，就会与jQuery的 $ 符号产生冲突，谁引入在后，就用谁的：

　　如：

　　　　<script src="./js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>

　　　　<script src="./js/test.js" type="text/javascript" charset="utf-8"></script>

            　　   test.js里 : var $ = 'aa'; console.log($);

 　　　　$(function() {           //这里会报错

　　　　　　console.log('bb');   

 　　　　})

 　　　　  最后打印的是 aa

                  

 

 

解决方法：

1）释放 $ 的使用权

    jQuery.noConflict();

    注意点：释放操作必须在编写其他jQuery代码之前编写

                   释放之后就不能再使用$,改为使用 jQuery

           jQuery.noConflict();

           jQuery(function() {

console.log('bb');   

})；

 

2）自定义一个访问符号

var nj = jQuery.noConflict();

nj(function() {

console.log('bb');   

})；

 

5、jQuery核心函数

$();  就代表调用jQuery核心函数

  1）接收一个函数

    $(function() {

console.log('aa');

})

  2）接收一个字符串

  2.1接收一个字符串选择器

      返回一个jQuery对象，对象中保存了找到的DOM 元素

  $(function() {

  var $box1 = $('.box1');

          var $box2 = $('#box2');

  console.log($box1);

  console.log($box2);

  })

        

  2.2接收一个代码片段

           返回一个jQuery对象，对象中保存了创建的DOM元素

$(function() {

  var $p = $("<p>我是p元素</p>")

  console.log($p);

  var $box1 = $('.box1');

  $box1.append($p);       //<div class=”box1”><p>我是p元素</p></div>

  })

   2.3接收一个DOM元素      

                会把原生的DOM元素包装成一个jQuery对象

                <span></span>

$(function() {

var span = document.getElementsByTagName('span')[0];

console.log(span);

var $span = $(span);

console.log($span);

})

               

 

6、jQuery对象

jQuery对象是一个伪数组

 

什么是伪数组：有0到length-1的属性，并且具有length属性

 

7、静态方法和实例方法

function AClass() {}

1）给类添加一个静态方法（直接添加给类的就是静态方法）

AClass.staticMethod = function() {

alert('staticMethod');

}

静态方法通过类名调用

AClass.staticMethod();

 

 2）给这个类添加一个实例方法：

AClass.prototype.instanceMethod = function() {

alert('instanceMethod');

}

通过实例调用实例方法

var aclass = new AClass();

aclass.instanceMethod();

 

8、静态方法each()

    var arr = [1,3,5,7,9];

var obj = {0:1, 1: 3, 2: 5, 3: 7, 4:9, lenght:5};

(1) 原生的forEach方法只能遍历数组，不能遍历伪数组

arr.forEach(function(value, index) {

console.log(index, value);

})

obj.forEach(function(value, index) {    //报错，obj.forEach is not a function

console.log(index, value);

})

(2) 利用jQuery的each静态方法遍历数组和伪数组

$.each(arr, function(index, value) {

console.log(index, value);

})

$.each(obj, function(index, value) {

console.log(index, value);

})

9、静态方法map()

    var arr = [1, 3, 5, 7, 9];

var obj = {

0: 1,

1: 3,

2: 5,

3: 7,

4: 9,

lenght: 5,

"push": Array.prototype.push,

"splice": Array.prototype.splice,

};

原生的map方法只能遍历数组，不能遍历伪数组

/*array为当前被遍历的数组*/

arr.map(function(value, index, array) {

 console.log(index, value, array);

})

 

利用jQuery的map静态方法遍历数组和伪数组

$.map(arr, function(index, value) {

console.log(index, value);

})

    $.map(obj, function(index, value) {

console.log(index, value);

})

 

10、 jQuery中的each静态方法和map静态方法的区别：

each静态方法默认的返回值就是，遍历谁就返回谁

    map静态方法默认的返回值是一个空数组

如下：

var $map = $.map(arr, function(index, value) {

})

console.log($map)

var $map1 = $.map(obj, function(index, value) {

})

console.log($map1)

 

 

each静态方法不支持在回调函数中对数组进行处理

map静态方法可以在回调函数中通过return 对遍历的数组进行处理

    然后生成一个新的数组

var $map = $.map(arr, function(index, value) {

return index + value;

})

console.log($map)

var $map1 = $.map(obj, function(index, value) {

return index + value;

})

console.log($map1)

 

 

 

 

 

 

 

 

11、jQuery其他静态方法

（1）$.trim();

作用：去除字符串两端的空格

参数：需要去除两端空格的字符串

返回值：去除空格后的字符串，不改变原来的字符串

var str = '    hjy   ';

var res = $.trim(str);

（2）$.isWindow();

        作用：判断传入的对象是否是window对象

返回值：true/false

var w = window;

var res = $.isWindow(w);

console.log(res);   true

（3）$.isWindow();

        作用：判断传入的对象是否是真数组（伪数组为false）

返回值：true/false

（4）$.isFunction();

        作用：判断传入的对象是否是函数

返回值：true/false

注意点：jQuery框架本质上是一个函数

        var res = $.isFunction(jQuery);

        console.log(res);     //true

 

 

（5）$.holdReady(true/false)

     作用：暂停ready执行

 

 

 12、jQuery内容选择器

（1）:empty

          作用：找到既没有文本内容也没有子元素的指定元素（没有任何子节点）

        $(“div:empty”);

（2）:parent

作用：选取所有包含子节点或文本节点的父元素。

:parent 与 :empty 相反。

需要注意的一件重要的事情是 :parent (和 :empty) 所涉及的子元素，包括文本节点。

（3） :contains(text): 找到包含指定文本内容的元素

$("div:contains('ffff')")

（4） :has(selector): 找到包含指定子元素的元素

 $("div:has('p')");

 

13、属性和属性节点

1）什么是属性

   对象身上保存的变量就是属性

2）如何操作属性

   对象.属性名称 = 值；

对象.属性名称;

对象[“属性名称”] = 值；

对象[“属性名称”]；

 

3）什么是属性节点

<span name=”it666”></span>

在编写HTML代码时，在HTML标签中添加的属性就是属性节点

在浏览器中找到span这个DOM元素之后，展开看到的都是属性

在attributes属性中的所有内容都是属性节点

4）如何操作属性节点

Dom元素.setAttribute(“属性名称”,”值”)

Dom元素.getAttribute(“属性名称”);

5）属性和属性节点有什么区别

   任何对象都有属性，但是只有DOm对象才有属性节点

 

14、attr、removeAttr、prop、removeProp方法

1、attr(name|pro|key, val|fn)

 $('p').attr('name','woaini')

作用：获取或者设置属性节点的值

可以传递一个参数，也可以传递两个参数

如果 传递一个参数，代表获取属性节点的值

如果传递两个参数，代表设置属性节点的值

 

注意点：

如果是获取：无论找到多少个元素 ，都只会返回第一个元素指定的属性节点的值。

如果是设置：找到多少个元素就会设置多少个元素。

如果是设置：如果设置的属性节点不存在，那么系统会自动新增

 

2、removeAttr()：删除属性节点

删除一个：$('p').removeAttr('name')

删除多个：$('div').removeAttr('name class')

注意点：

会删除所有找到元素指定的属性节点

3、prop 和 attr一样

4、removeProp 和 removeAttr 一样

       区别：removeProp 去除属性节点时并不是真的去除，而是把属性节点=‘undefined’

             removeAttr 去除 class  是真的去除

5、prop 和 attr 何时使用

       console.log($('input').prop('checked'))   //true / false

 console.log($('input').attr('checked'))  // checked /  undefined

         官方推荐：在操作属性节点时，具有true 和 false 两个属性的属性节点，如 checked、selected、

                   disabled，使用prop, 其他使用attr

15、操作class相关的方法

1、addClass(‘class’):添加一个类，如果要添加多个，多个类名之间用空格隔开即可

2、removeClass(‘class’):删除一个类，如果要删除多个，多个类名之间用空格隔开即可

3、toggleClass(‘class’): 有就删除，没有就添加

 

16、文本值得相关操作

     （1）设置HTML：$('div').html('<p>我是p元素<span>我是span元素</span></p>');

（2）获取HTML：$('div').html();

（3）设置TEXT：$('div').text('<p>我是p元素<span>我是span元素</span></p>')

（4）获取TEXT：$('div').text();

（5）设置input的value：$('input').val('请输入内容');

（6）获取input的value：$('input').val();

17、操作css样式的方法

（1）逐个设置

  $('div').css('width','100px');

$('div').css('height','200px');

$('div').css('background-color', '#ff0000');

（2）链式设置

  $('div').css('width','100px').css('height','200px').css('background-color', '#00ff00');

  注意点：如果超过三个，建议采用批量设置

（3）批量设置
  $('div').css({

   width : '100px',

   height : '200px',

   backgroundColor : '#0000ff'

  });

 注意点：对象里的样式名采用的是小驼峰写法

（4）获取css样式

     $('div').css('background-color');

 

18、尺寸和位置的操作

（1）$('div').width()：获取元素的宽度，width值

     $('div').width(200)：设置元素的宽度

（2）$('div').height()：获取元素的高度，height值

     $('div').height(200)：设置元素的高度

（3）$('div').offset().left/right/top/bottom：获取元素距离窗口的偏移位

$('div').offset({                    ：设置元素距离窗口的偏移位

left : 10

})

$('div').offset() 获取到的是一个对象 {top:8, left:8}

（5）$('div').position().left/right/top/bottom：获取元素距离定位元素的偏移位

     $('div').position() 获取到的是一个对象 {top:8, left:8}

 不可以设置值

 

 

19、scrollTop方法

$('div').scrollTop()：获取滚动的偏移位

$('div').scrollTop(300) ：设置滚动的偏移位

获取网页滚动的偏移位：

$('html').scrollTop() 非IE

$('html').scrollTop()  IE

解决兼容性：$('html').scrollTop() + $('html').scrollTop()

设置网页滚动的偏移位：

兼容的：$('html, body').scrollTop(300)

 

20、事件绑定

（1）eventName(fn):

 $('button').click(function() {})

编码效率略高/部分事件jQuery没有实现

（2）on(eventName, fn):

$('button').on('click', function() {})

编码效率略低/ 所有js 事件都可以添加

注意点：可以添加多个相同或者不同的事件，而且不会覆盖

 

（3）.off() : 移除事件

 如果不传递参数，会移除所有的事件

如果传递一个参数，会移除所有指定类型的事件

$('button').off('click'); // 会移除所有click事件

 

21、事件冒泡和默认行为

事件冒泡：点击子元素会冒泡到父元素

阻止事件冒泡：

在子元素事件中添加：

return false；或者 event.stopPropagation();

$('son').click(function(event) {

return false;

event.stopPropagation();

})

 

默认事件：a标签跳转，form表单提交跳转等

阻止默认事件：

$('a').click(function(event) {

return false;

event.preventDefault();

})

22、事件自动触发

（1）$(‘son’).trigger(‘click’);

（2）$(‘son’).triggerHandler(‘click’);

trigger：如果利用trigger自动触发事件，会触发事件冒泡

triggerHandler ：如果利用triggerHandler自动触发事件，不会触发事件冒泡

 

（3）$(‘input[type=’submit’]’).trigger(‘click’);          //会触发默认行为

（4）$(‘input[type=’submit’]’).triggerHandler(‘click’);  //不会触发默认行为

 

（5）用trigger自动触发a的事件，且触发默认行为

$(document).ready(function() {

$('span').click(function(){

console.log('aa');

})

$('span').trigger('click');

});

<a href="https://www.baidu.com/"><span>百度</span></a>

 

23、自定义事件

想要自定义事件，必须满足两个条件

1、事件必须是通过on绑定的

2、事件必须通过trigger来触发

$('.aa').on('myClick',function(){

console.log('aa');

})

$('.aa').trigger('myClick');

24、事件命名空间

想要事件的命名空间有效，必须满足两个条件

1、事件必须是通过on绑定的

2、事件必须通过trigger来触发

$('.aa').on('click.la',function(){

console.log('aa');

})

$('.aa').on('click.lb',function(){

console.log('bb');

})

$('.aa').trigger('click.la');

           自动触发 click.la 事件，点击aa元素时，两个事件会触发

3、利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会被触发，

   而父元素没有命名空间的事件不会被触发

$('.father').on('click.la',function(){

console.log('father.la');

})

$('.father').on('click',function(){

console.log('father');

})

$('.son').on('click.la', function() {

console.log('son.la')

})

$('.son').trigger('click.la');

      自动打印：son.la  father.la   

4、利用trigger触发子元素不带命名空间的事件，那么子元素所有相同类型的事件和

   父元素所有相同类型的事件都会被触发

$('.father').on('click.la',function(){

console.log('father.la');

})

$('.father').on('click',function(){

console.log('father');

})

$('.son').on('click.la', function() {

console.log('son.la')

})

$('.son').trigger('click');

 

25、事件委托

 

jQuery中，如果通过核心函数找到的元素不止一个。那么在添加事件的时候，会给所有元素添加事件。

因为jQuery入口函数是在DOM元素加载完成后就执行，通过button事件新增的li 就不会有事件

 

解决方法：

 .delegate()

$('ul').delegate('li', 'click',function() {

console.log($(this).html());

})

 

 

 

 

 

 

 

例子：点击a 标签，弹出一个框，点击关闭，框关闭

$(function() {

 

$('a').click(function() {

var $mask = $(`<div class="mask">

<div class="login">

<span></span>

</div>

</div>`);

$('body').append($mask);

$('body').delegate('.login>span','click',function() {

$mask.remove();

})

return false;

})

 

});

26、移入移出事件

（1）mouseover、mouseout

 当子元素移入移出，会触发父元素的事件           移入父元素、移入子元素、移出子元素、移出父元素

$('.container').mouseover(function() {

console.log('移入');

})

$('.container').mouseout(function() {

console.log('移出');

})

 

 

 

（2）mouseenter、mouseleave

 当子元素移入移出，不会触发父元素的事件

$('.container').mouseenter(function() {

console.log('移入');

})

$('.container').mouseleave(function() {

console.log('移出');

})

 

（3)  hover

当只有一个回调函数时，移入移出触发的是同一个事件（不会冒泡）：

$('.container').hover(function() {

console.log('移入');

})

当有两个回调函数时，分别是移入移出两个事件（不会冒泡）：

$('.container').hover(function() {

console.log('移入');

}, function() {

console.log('移出')

})

 

27、siblings() 、eq()

$('.tabImg>li').eq(index).siblings().removeClass('show');

 

28、显示隐藏动画

（1）show(time, fn);   time为动画显示时间， fn 动画结束后执行

（2）hide(time, fn);  time为动画隐藏时间， fn 动画结束后执行

（3）toggle(time, fn); 若显示，则隐藏，若隐藏，则显示。time为动画切换时间， fn 动画结束后执行

$('button').eq(0).click(function() {

$('.box').show(1000,function() {

alert('显示');

})

})

$('button').eq(1).click(function() {

$('.box').hide(1000,function() {

alert('隐藏');

})

})

$('button').eq(2).click(function() {

$('.box').toggle(1000,function() {

alert('ohyeah');

})

})

 

29、对联广告

            $(function() {

$(window).scroll(function() {

var $space = $('html, body').scrollTop();

if($space >= 500) {

$('div').show(1000);

}else {

$('div').hide(1000);

}

 

})

})

 

30、滚动条、滚动条滚动距离

$(window).scroll(function() {}） ： 滚动条一滚动就会触发事件

$('html, body').scrollTop();   ：获取滚动条滚动距离

 

 

31、展开、收起动画

$('button').eq(0).click(function() {

$('.div').slideDown(1000);

})

$('button').eq(1).click(function() {

$('.div').slideUp(1000);

})

$('button').eq(2).click(function() {

$('.div').slideToggle(1000);

})

 

32、折叠菜单

     siblings() ：兄弟节点

     children() : 儿子节点

$(function() {

$('.navOne>li').click(function() {

$(this).children('.navTwo').slideDown(1000);

$(this).siblings().children('.navTwo').slideUp(1000);

$(this).children('span').addClass('rotate');

$(this).siblings().children('span').removeClass('rotate');

})

})

 

33、下拉菜单

stop()  停止当前正在运行的动画

$(function() {

$('.navOne>li').mouseenter(function() {

var navTwo = $(this).children('.navTwo');

navTwo.stop();

navTwo.slideDown(1000);

})

$('.navOne>li').mouseleave(function() {

var navTwo = $(this).children('.navTwo');

navTwo.stop();

navTwo.slideUp(1000);

})

})

 

34、淡入淡出

fadeIn(time, fn);   淡入

fadeOut(time, fn);  淡出

fadeToggle(time, fn); 切换淡入淡出

fadeTo(time, opacity, fn);    淡入到opacity的透明度就会停止

 

 

 

35、$(selector).animate(styles, speed, easing, callback)

第一个参数：接收一个对象，可以在对象里修改属性

第二个参数：指定动画时长

第三个参数：指定动画节奏，"swing" - 在开头/结尾移动慢，在中间移动快     "linear" - 匀速移动

第四个参数：动画执行完后的回调函数

$('.ad').animate({

width : '400px',

height: '500px',

opacity : 0

}, 1000, 'swing', function() {

console.log('完成')；

})

累加属性：

$('.ad').animate({

width : '+=200',

}, 1000, 'swing', function() {

console.log('完成')；

})

关键字属性：

                $('.ad').animate({

width : 'hide',            //toggle

}, 1000, 'swing', function() {

console.log('完成');

})

链式调用，先执行前面再执行后面：

$('.ad').animate({

width: '400'

}, 1000, 'swing').animate({

height: '400'

}, 1000, 'swing')

 

36、stop()   和  delay() 方法

（1）delay(time) ： $('.ad').animate({

     width: '400'

   }, 1000, 'swing').delay(3000).animate({        //延迟3秒后再执行下一个动画

    height: '400'

   }, 1000, 'swing')

（2）stop()

1）立即停止当前动画，继续执行后续动画

$('.ad').stop();

$('.ad').stop(false);

$('.ad').stop(false,false);

 

2）立即停止当前的和后续所有的动画

$('.ad').stop(true,false);

$('.ad').stop(true);

 

3）立即完成当前动画，继续执行后续动画

$('.ad').stop(false,true);

 

4）立即完成当前动画, 停止后续所有的动画

$('.ad').stop(true,true);

 

35、添加节点方法

var $li = $('<li>我是新li</li>');

· 插入到ul 内部最后

$('ul').append($li);

    $li.appendTo('ul');

 

· 插入到 ul 内部前面

$('ul').prepend($li);

$li.prependTo('ul');

 

· 插入到ul外部后面

$('ul').after($li);

$li.insertAfter('ul');

 

· 插入到ul 外部前面

$('ul').before($li);

$li.insertBefore('ul');

 

36、删除节点的方法

       remove(ele)、detach(ele)

删除指定节点

$('ul').remove();

$('li').remove('.aa');    //删除li 里类名为aa的li

$('ul').detach();

$('li').detach('.aa');     //删除li 里类名为aa的li

 

empty()

删除指定元素的内容和子元素，自身不会被删除

$('ul').empty();

 

 

37、替换节点的方法

replaceWith(content)

replaceAll(content)

var $h6 = $('<h6>我是h6</h6>');

$('h1').replaceWith($h6);

$h6.replaceAll('h1');

 

38、复制节点方法

（1）浅复制：clone(false)  只复制元素，不会复制元素的事件（前提是，元素的事件定义在复制前面，如果是在后面，复制的元素也会有事件）

（2）深复制：clone(true) 会复制元素和元素的事件

$('h1').click(function() {

alert('11');

})

$('ul').append($('h1').clone(false));

$('ul').append($('h1').clone(true));

 

 

 

1、jQuery基本结构

(function(window, undefined){

var jQuery = function() {

return new jQuery.prototype.init();

}

jQuery.prototype = {

constructor: jQuery,

Init:function() {},

}

jQuery.prototype.init.prototype = jQuery.prototype;

window.jQuery = window.$ = jQuery;

}(window))

（1） jQuery的本质是一个闭包

（2） jQuery为什么要使用闭包来实现

为了避免多个框架的冲突

（3）jQuery如何让外界访问内部定义的局部变量

（4）jQuery 为什么要给自己传递一个window canshu

为了方便后期压缩代码

为了提升查找的效率

（5）jQuery为什么要给自己接收一个undefined参数？

为了方便后期压缩代码

IE9以下的浏览器undefined可以被修改，为了保证内部使用的undefined不被修改，所以需要接收一个正确的

Undefined

 

2、入口函数

（1）传 ‘’null undefined NaN  0  false  :  会返回一个空的jQuery对象

（2）传入 html 片段 ： 会将创建好的DOM元素存储到jQuery对象中返回

（3）传入选择器：会将找到的所有元素存储到jQuery对象中返回

（4）传入数组 \ 伪数组：会将数组中存储的元素依次存储到jQuery对象中返回

（5）传入对象：会将对象存储到jQuery对象中返回

（6）传入DOM元素：会将DOM元素存储到jQuery对象中返回

（7）传入基本数据类型：会将传入基本数据类型存储到jQuery对象中返回