jQuery学习笔记

jQuery基础

jQuery入口函数

使用jQuery的三个步骤

1. 引入jQuery文件
2. 入口函数
3. 功能实现

jQuery的入口函数

// 第一种写法
$(document).ready(function(){
	// code
})

// 第二种写法
jQuery(document).ready(function(){
	// code
})

// 第三种写法 开发中推荐使用
$(function){
	// code
}

// 第四种写法
jQuery(function(){
	// code
})

两种解决jQuery冲突问题

1. 释放$的使用权

   jQuery.noConflict()

   注意点：释放操作必须在编写其他jQuery代码之前编写，释放之后就不能再使用$,改为使用jQuery

2. 自定义一个访问符号

   var jq = jQuery.noConflict()
   jq(function(){
   	// code
   })

jQuery核心函数

• $();

  • 调用jQuery的核心函数

  • 参数

    • 接收一个字符串
      • 接收一个字符串选择器
        • 返回一个jQuery对象，对象中报错了找到的DOM元素
      • 接收一个字符串代码片段
        • 返回一个jQuery对象，对象中保存了创建的DOM元素
    • 接收一个DOM元素
      • 会被包装成一个jQuery对象返回给我们

什么是jQuery对象

• jQuery对象是一个伪数组
  • 伪数组有0到length-1的属性，并且有length属性

静态方法和实例方法

• 怎么给类添加一个静态方法？

  • 直接添加给类就是静态方法

  // 定义一个类
  function Person(){
  
  }
  
  // 添加静态方法
  Person.showName = function(){
      alert("showName");
  }

• 怎样调用静态方法？

  • 静态方法通过类名调用

  Person.showName();

• 怎么给类添加实例方法？

  • 添加到类的原型当中

  Person.prototype.showAge = function(){
      alert('showAge');
  }

• 怎样调用实例方法？

  • 实例方法通过类的实例调用

  var p = new Person();
  p.showAge();

jQueryAPI

遍历

• 原生遍历数组的方法

  • forEach()

    • 第一个参数：遍历到的元素
    • 第二个参数：当前遍历到的索引
    • 注意点
      • 原生forEach方法只能遍历数组，不能遍历伪数组

        // 定义数组
        var arr = [1, 3, 5, 7, 9];
        // 遍历数组
        arr.forEach(function(value, index){
              	console.log(index, value);
              })

  • map()方法

    • 第一个参数：当前遍历到的元素
    • 第二个参数：当前遍历到的索引
    • 第三个参数：当前遍历的数组
    • 注意点
      • 和原生的forEach一样,不能遍历的伪数组

    var arr = [1, 3, 5, 7, 9];
    arr.map(function(value, index, array){
    	  console.log(index, value, array);
    })

• jQuery遍历数组的方法

  • each()

  • 第一个参数：当前遍历到的索引

  • 第二个参数：遍历到的元素

  • 注意点

    • jQuery的each方法是可以遍历伪数组的

      // 真数组
      var arr = [1, 3, 5, 7, 9];
      var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
      // 伪数组
      $.each(arr, function(index, value){
      	 console.log(index, value);
      
      $.each(obj, function(index, value){
      	console.log(index, value);
      });

  • map()

    • 第一个参数：要遍历的数组
    • 第二个参数：要遍历一个原生之后执行的回调函数
      • 回调函数的参数：
        • 第一个参数：要遍历到的元素
        • 第二个参数：遍历到的索引
    • 注意点
      • jQuery种each静态方法一样，map静态方法也可以遍历

        var arr = [1, 3, 5, 7, 9];
        var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
        $.map(arr, function(value, index){
        	 console.log(index, value);

    区别

    jQuery中的each静态方法和map静态方法的区别：
    each静态方法默认的返回值就是，遍历谁就返回谁
    map静态方法则是默认返回值是一个空数组

    each静态方法不支持再回调函数中对遍历的数组进行处理
    map静态方法可以再回调函数中通过return对遍历的数组进行处理，然后生成一个新数组返回

其他方法

• $.trim()

  • 作用：去除字符串两端空格
    • 参数：需要去除空格的字符串
      • 返回值：去除空格之后的字符串

• $.isWindow()

  • 作用：判断传入的对象是否是window对象
  • 返回值：true/false

• $.isArray();

  • 作用：判断传入的对象是否是真数组
  • 返回值：true/false

• $.isFunction();

  • 作用：判断传入的对象是否是一个函数
  • 返回值：true/false
  • 注意点：
  • jQuery框架本质上是一个函数

(function( window, undefined ) {
 })( window );

选择器

jQuery内容选择器

<div></div>
<div>我是div</div>
<div>我是div123我是div123</div>
<div><span></span></div>
<div><p></p></div>

• :empty

  • 作用：找到既没有文本内容也没有子元素的指定元素

    var $div = $('div:empty');

• :parent

  • 作用：找到文本内容或有子元素的指定元素

    var $div = $('div:parent');

• :contains(text)

  • 作用：找到包含指定文本内容的指定元素

    var $div = $('div:contains(div)');

• :has(selector)

  • 作用：找到包含指定子元素的指定元素

    var $div = $('div:has("span")');

属性和属性节点

• 原生操作属性节点的方法

  • setAttribute()
    • 作用：设置属性节点
      DOM元素.setAttribute('属性名称', '值');
  • getAttribute()
    • 作用：获取属性节点
      DOM元素.getAttribute('属性名称');

• jQuery操作属性节点的方法

  • attr(name|pro|key, val|fn)

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

      • 第二个参数可选

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

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

        var res = $(".sp1").attr('name', 'span');

  • removeAttr(name)

    • 作用：删除属性节点

    • 注意点

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

        $('.sp2').removeAttr('name class');

  • prop()

    • 作用和attr方法一致

      console.log($('input').attr('checked')); 
      //选中返回 checked 未选中返回undefined

  • removeProp()

    • 作用和removeAttr一致

      console.log($('input').prop('checked')); 
      // 选中返回 true 未选中返回false

注意点

prop方法不仅能够操作属性，还能操作属性节点
attr和prop既然作用一致，那开发中究竟用谁?
官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

操作类

• jQuery操作类方法

  • addClass(class|fn)

    • 作用：添加一个类；如果要添加多个，多个类名之间用空格隔开即可

      $('div').addClass('class1 class2');

  • removeClass([class]|fn[, sw])

    • 作用：删除一个类；如果想删除多个，多个类名之间用空格隔开即可

      $('div').removeClass('class1 class2');

  • toggleClass(class|fn[, sw])

    • 作用：切换类；有就删除，没有就添加

`$('div').toggleClass('class1 class2');`

操作文本值

• jQuery操作文本值

  • html

    • 和原生JS中的innerHTML一样

      $('div').html('<p>我是p标签<span>我是span</span></p>');

  • text

    • 和原生JS中的innerText一样

      $('div').text('<p>我是p标签<span>我是span</span></p>')

  • val

    • 设置或获取输入框值

      $('input').val('请输入内容');

操作CSS样式

• jQuery设置css样式
  • css(name|pro|[, val|fn])

// 1. 逐个设置
$('div').css('width', '100px');
$('div').css('height', '100px');
$('div').css('background', 'red');

// 2. 链式设置
// 注意点：链式操作如果大于3步，建议分开
$('div').css('width', '100px').css('height', '100px').css('background', 'green');

// 3. 批量设置
$('div').css({
	width: '100px',
	height: '100px',
	background: 'blue'
})

// 4. 获取CSS样式值
console.log($('div').css('background'));

操作位置和尺寸

<div class="father">
       <div class="son"></div>
   </div>
   <button>获取</button>
   <button>设置</button>

• jQuery操作位置和尺寸的方法

  • width([val|fn])

    • 作用：获取元素宽度

      console.log($('.father').width());

  • height([val|fn])

    • 作用：获取元素高度

      console.log($('.father').height());

  • offset([coordinates])

    • 作用：获取元素距离窗口的偏移位

      console.log($('.son').offset().left);

  • position()

    • 作用：获取元素距离定位

      console.log($('.son').position().left);

  • scrollTop([val])

    • 作用：获取和设置滚动偏移位
      获取
      console.log($('.scroll').scrollTop());
      设置
      $('.scroll').scrollTop(300);

  • scrollLeft([val])

    • 作用同上；设置方向不同

事件

事件的绑定

绑定事件的两个步骤

1. 获取对象
2. 绑定事件

• 两种绑定事件方式

  • Element.eventName(fn)

    • 编码效率略高/部分事件jQuery没有事件，所以不能添加

      $('button').clcik(function(){
      	alert('hello event');
      });

  • on(eventName, fn)

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

      $('button').on('click', function(){
      	alert('hello event');
      });

注意点

    可以添加多个相同或者不同类型的事件，不会覆盖

事件的移出

• off([eventName])

  • 不传递参数，会移出所有的事件

    $("button").off();

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

    $("button").off("click");

  • 传递两个参数，会移除所有指定类型的指定事件

    $("button").off("click", callBack);

事件冒泡和默行为

1. 什么是事件冒泡?

   • 是一种机制；父元素father和子元素son都绑定了click事件，子元素触发click事件后，也会触发father的click事件。

     阻止事件冒泡
     第一种方式
     return false
     第二种方式
     event.stopPropagation()

2. 什么是默认行为?

   • 也是一种机制;a标签触发单击事件后默认会打开另一个窗口,这就是默认行为

     阻止默认行为
     第一种方式
     return false
     第二种方式
     event.preventDefault()

事件自动触发

• trigger()

  • 如果利用trigger自动触发事件，会触发事件冒泡和默认行为

    $(".father").trigger("click");

• triggerHandler()

  • 如果利用triggerHandler自动触发事件，不会触发事件冒泡和默认行为

    $(".son").triggerHandler("click");

自定义事件

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

1. 事件必须是通过on绑定的
2. 事件必须通过trigger和triggerHandler来触发

$(".son").on("myClick", function () {
   	alert("son");
   });
   $(".son").triggerHandler("myClick");

事件命名空间

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

1. 事件是通过on来绑定的
2. 通过trigger和triggerHandler触发事件

$(".son").on("click.zs", function () {
	alert("click1");
});
$(".son").on("click.ls", function () {
	alert("click2");
});
// $(".son").trigger("click.zs");
$(".son").triggerHandler("click.zs");

注意点

利用trigger触发子元素带命名空间的事件, 那么父元素带相同命名空间的事件也会被触发. 而父元素没有命名空间的事件不会被触发

利用trigger触发子元素不带命名空间的事件,那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发

事件的委托

1. 什么是事件委托?
   • 请别人帮忙做事情，然后将做完的结果反馈给我们

• delegate()

  $("button").click(function () {
     	$("ul").append("<li>我是新增的li</li>");
     });
  
  $("ul").delegate("li", "click", function () {
     	console.log($(this).html());
   	 });

鼠标移入移出

• mouseover/mouseout

  • 子元素被移入移出也会触发父元素的事件

    $(".father").mouseover(function () {
    	console.log("father被移入了");
    });
    
    $(".father").mouseout(function () {
    	console.log("father被移出了");
    });

• mouseenter/mouseleave

  • 子元素被移入移出不会触发父元素的事件

    $(".father").mouseenter(function () {
    	console.log("father被移入了");
    });
    
    $(".father").mouseleave(function () {
    	console.log("father被移出了");
    });

• hover

  • 移入移出都会触发事件

    $(".father").hover(function () {
    	console.log("father被移入了");
    },function () {
    	console.log("father被移出了");
    });

jQuery原理

Ajax