jQuery基本知识点

jQuery 优点

• 可以实现兼容
• 可以实现链式编程
• 不用循环，内部有隐式迭代
• 先加载内容，最后加载图片，等文档加载，不会等图片加载
• 没有事件，函数的覆盖

jQuery 和 DOM 转换

• DOM 对象转为 jQuery 对象
  • 加钱就可以了 $
  • ul 转为 jq 对象

    $('ul')
    

• jQuery 对象转为 DOM 对象
  • 从内部拿出来
  • $(‘ul’) 转为 DOM 对象

    $('ul')[0]
    $('ul').get(0)
    

$ 符号

• $ 符号本质是一个函数，所有后面要跟 ()
• jQuery === $
• 入口函数

  $(document).ready(function(){
  	console.log(''哈哈);
  }); 
   $(function () {
  	console.log('哈哈');
  });
  

• 转为 jQuery 对象，放 DOM 对象
• 查找元素，放选择器

选择器

• 基本选择器

  • id 选择器
  • 类 class 选择器
  • 标签选择器
  • 并级选择器

    $('div,p,ul')
    

  • 交级选择器

    $('s1s2')
    $('s1.s2')
    

• 层次选择器

  • 子代选择器

    $('ul>li')
    

  • 后代选择器

    $('ul li')
    

• 过滤选择器

  • 找第几个 :eq()

    $('ul:eq(2)')
    

  • 找奇数

    $('ul:odd')
    

  • 找大于的

    $('ul:gt(2)')
    

• 筛选选择器

  • 筛选选择器是方法
  • 一些方法
    • next() ------- 找下一个兄弟
    • prev() ---------- 找上一个兄弟
    • siblings() ---------------- 找所有的兄弟除了自身
    • parent() ----------------- 找父亲元素
    • eq() ---------------------- 找下标，返回 jQuery 对象
    • get() ---------------------- 找下标，放回 DOM 对象
    • find() ----------------------- 具体的找，找后代
    • index() --------------------- 会返回当前元素在所有兄弟元素里面的索引
  • 找孩子，子代的 children

    $('ul').children()
    

  • 找具体的 find

    $('ul').find(2)
    

  • 找兄弟

    $('ul').siblings()
    

样式

• 设置单个样式

  • css(name,value)
    • name -------- 样式名
    • value -------- 样式值

    $('li').css('backgroundColor','pink')
    

• 设置多个样式

  • css(obj)
    • obj ---------- 对象

    $('li').css({
    	background: 'blue',
    	fontSize: '23px',
    	color: 'red'
    })
    

• 获取样式

  • css(name)
    • name --------- 想要获取的样式

    $('li').css('fontSize')
    

• class 操作样式

  • 添加一个类 -------- addClass()

    $('li').addClass('basic')
    

  • 移除一个类 -------- removeClass()

    $('li').removeClass('basic')
    

  • 判断有没有某个类，返回值是 boolean ------------------ hasClass()
  • 切换类 ---------------------- toggleClass()

隐式迭代

• 设置样式的时候：会给 jQuery 内部的所有对象都设置上相同的值
• 获取的时候：只会返回第一个元素对应的值

jQuery 操作属性

• attr属性

  • 设置单个属性 ----------------- attr(name,value)
  • 设置多个属性 ----------------- attr(obj) ------ obj 对象
  • 获取属性 ----------------------- attr(name)
  • 移除属性 ----------------------- removeAttr(name)

• prop 方法

  • 对于布尔类型的属性，不要 attr 方法，应该用 prop 方法
    • checked 、selected、disabled

动画

• 三组基本动画

  • show() 和 hide() --------- 显示和隐藏
    • 可以传两个参数 show([speed,callback])
    • speed 动画的持续时间，可以是毫秒，也可以是固定的字符串
    • fast: 200ms ----- normal: 400ms ----- slow: 600ms

    $('div').show(1000,function(){
    	console.log('这是show动画');
    });
    

  • slideDown() 和 slideUp() 和 slideToggle() --------- 滑入和滑出，切换
    • slideToggle() 切换动画
  • fadeIn 和 fadeOut 和 fadeToggle ----------------- 淡入和淡出,切换

• 自定义动画

  • animate({},[speed],[swing],[callback])
    • 第一个参数必填：对象，里面传需要动画的样式
    • 第二个参数：speed 动画的执行时间
    • 第三个参数：动画的执行效果，默认 swing 秋千，-------- linear 匀速
    • 第四个参数：回调函数

    $('div').animate({left: 800},1000,linear,function({
    	console.log('这是animate动画')；
    }));
    

  • 动画队列
    • 好处，动画都会执行；坏处，需要时间
    • stop() 停止当前正在执行的动画，有两个参数
    • clearQueue:是否清除动画队列 -------- true 或 false
    • jumpToEnd:是否跳转到当前动画的最终效果 ----- true 或 false
    • stop() 方法解决 ------- 在动画前面加

    $('div').stop().animate({left: 800});
    
    $('div').stop(false,false);
    

  • 音乐播放的方法是 DOM 对象的，jQuery 没有对其封装
    • load() 重新加载，没加载完也重新加载
    • play() 加载
  • delay() 方法，延时动画

    $('div').fadeIn(1000).delay(2000).fadeOut(1000);
    

节点操作

• 创建节点

  • 直接使用 html 标签创建

  $('div').append('<a href="#">产品详情</a>');
  
  var $li = $('<a href="#">产品详情</a>');
  $('div').append($li);
  

• 添加节点

  • 添加到子元素的最后面 ------------- append()
  • 添加到子元素的最前面 ------------- prepend()
  • 子元素添加到父元素 --------------- appendTo()

    /// p 添加到 div 中
    $('p').appendTo($('div'));
    

  • 子元素添加到父元素最前面 ------------ prependTo()
  • 添加到自己后面作为兄弟元素 ---------- after()
  • 添加到自己前面作为兄弟元素 ---------- before()

    $('div').after($('p'));
    

  • append() 括号里只能写 jQuery 对象
  • appendTo() 括号里可以直接写选择器

• 清空节点与删除节点

  • 清空节点
    • html(’’) 方法 --------- 一般不建议用 ------ 会发生内存泄漏 ----- 如果有事件，事件不会清除
    • empty()
  • 删除节点
    • remove() -------- 删除自身

    $('div').remove();  
    

• 克隆节点

  • clone()
  • false: 不传参数也是深度复制 ----- 默认 false ------ 不会复制事件
  • true: 也是深复制，会复制事件

    $('div').clone();
    

链式编程

• 设置性操作：可以链式编程
• 获取式操作：不能链式了，因为获取式操作，可能会返回 数值，字符串
• 返回值是不是一个 jQuery 对象
• val() 返回的是字符串，后面不能再链式编程了
• end() 方法，可以返回上一次的状态，然后可以再进行链式编程 ---- 链式编程对象不符的问题

jQuery 特殊属性操作（不传参数是获取，传参数是设置）

• val()方法
  • 操作表单里的元素的 value 属性，可以获取值，改变值
• text() 和 html()
  • html 相当于 innerHTML，text 相当于 innerText

• 三大家族

  • offset ，scroll ，client
• width() 方法与 height() 方法
  • 直接获取到的是数字

    /// 获取
    $('div').width();
    /// 设置
    $('div').width(200);
    

  • resize(function() {})
    • 获取页面可视区的宽度和高度

    $(window).resize(function() {
    	console.log($(window).width());
    	console.log($(window).height());
    });
    

  • width() 获取的就是 width 的值
  • innerWidth() 获取的是 padding + width 的值
  • outerWidth() 获取的是 padding + width + border 的值
  • outerWidth(true) 获取的是 padding + width + border + margin 的值
• scrollTop() 方法和 scrollLeft() 方法
  • scroll(function() {})

    $(window).scroll(function() {
    	console.log($(window).scrollTop());
    	console.log($(window).scrollLeft());
    });
    

  • pageXOffset 和 pageYOffset 是只读属性
• offset() 方法和 position() 方法 ---------- position() 是只读属性
  • offset() 获取元素相对于 document 的位置 --------- left 和 top
  • position() 获取元素相对于有定位的父元素的位置

jQuery 事件机制

• jQuery 事件发展历程

  • 简单事件 ------- 委托事件 delegate
  • 注册简单事件 =====》 bind 方式 =====》delegate 委托 =====》on 事件绑定

    $('p').bind({
    	click: function() {
    		alert('呵呵');
    	},
    	mouseenter: function() {
    		alert('哈哈');
    	}
    });
    

  • delegate 代理，委托事件，给触发事件的父级注册事件
    • 委托事件不是自己执行的，给子元素执行的
    • 不给子元素注册，给父元素注册
    • 好处：动态创建的也能有事件
    • 缺点：只能注册委托事件
    • 第一个参数：事件最终由谁执行
    • 第二个参数：事件的类型
    • 第三个参数：函数，要做什么
    • 给 div 注册事件，但是最终不是由 div 执行，而是由 p 执行

    /// 点击 div 下的 p 触发事件
    $('div').delegate('p','click',function() {
    	alert('呵呵');
    });
    
    

• on 注册事件

  • on 统一了所有事件的处理方法
  • bind + delegate
  • on(types,selector,data,callback) ------ 有四个参数
  • on 注册事件的两种方式
    • 注册简单事件

      $('p').on('click',function() {
      	alert('呵呵');
      });
      

    • 注册委托事件

      $('div').on('click','p',function() {
      	alert('呵呵');
      });
      

  • 事件执行顺序：先执行委托事件，再执行自身的事件

• 事件解绑

  • off() 方法
    • 不传参数是所有事件都移除了

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

• 触发事件

  • trigger() 方法

    $('p').trigger('click');
    
    /// 另一种触发事件方法，直接调用
    $('p').click();
    

• jQuery 事件对象

  • 事件对象

    $(document).on('click',function(e) {
    	console.log(e);
    });
    

  • data 属性 ------------- e.data

  • keyCode -------------- e.keyCode

  • 使用 on 方法的时候，可以给 data 参数传一个值，可以在事件里面通过 e.data 获取到

    $('div').on('click',100,function(e) {
    	console.log(e.data);   /// e.data == 100
    });
    
    

  • 阻止冒泡和阻止浏览器的默认行为

    $('#link').on('click',function(e) {
    	alert('呵呵');
    	e.preventDefault();   /// 阻止浏览器默认行为
    	e.stopPropagation();   /// 阻止冒泡
    	return false;  /// 既能阻止事件冒泡，也能阻止浏览器的默认行为
    });
    

• 节流阀

  • 节流阀：按下的时候触发，如果没弹起，不让触发下一次
    • 定义一个flag

• each() 方法，遍历的作用

  $('li').each(function(index,element) {    /// element 是 DOM 对象
  	$(element).css('opacity',(index+1)/10);     
  });
  	/// jQuery 遍历还可以用 for 循环
  
  

$ 冲突

• jQuery 中的 $ 不可用时，可以用备胎 jQuery ------ $ === jQuery

  $.noConflict()  /// $ 释放控制权
  
  /// $ 有控制权的前提下可以这样干
  var $$ = $.noConflict();   /// 可以用 $$ 代替 $ 了
  
  

补充

• prevAll() 方法 ------------ 获取前面所有的
• nextAll() 方法 ------------ 获取后面所有的