JQuery基本使用

jQuery

jQuery是一个快速、简洁的JavaScript框架。

入口函数

// JQuery中的入口函数就相当于 window.onload = function(){ ... }
// 方式一
$(document).ready(function (){
    // ...
});

// 方式二
$(function (){
    // ...
});

释放$使用权

// 释放$使用权
jQuery.onConflict();

// 自定义符号
let demo = jQuery.onConflict();

常用静态方法

• each

  // each 可以对数组及伪数组进行遍历，并将遍历的数组返回
  $.each(arr, function(index, value){
      // ...
  });
  

• map

  // map 可以在回调函数中对遍历的数组进行处理，并返回一个空数组
  $.map(arr, function(index, value){
      // ...
  });
  

• trim

  // 去除字符串两端的空格，并返回一个新的字符串
  let newStr = $.trim(str);
  

• isWindow

  // 判断传入的值是否为window
  $.isWindow(window);
  

• isArray

  // 判断传入的值是否为真数组
  $.isArray(arr);
  

• isFunction

  // 判断传入的值是否为函数
  $.isFunction(func);
  

• holdReady

  // 暂停ready的执行
  $.holdReady(true);
  
  // 恢复ready的执行
  $.holdReady(false);
  

选择器

• 标签选择器

  $(tag)
  

• 类选择器

  $(.className)
  

• ID选择器

  $(#id)
  

• 属性选择器

  $(tag[attr=value])
  

• eq、get

  //eq(i) 找到当前jQuery对象中的第i个元素, 并将其包装成jQuery对象
  //get(i) 找到当前jQuery对象中的第i个元素, 不其包装成jQuery对象
  

• silibings

  // 获取当前节点的兄弟节点
  $('span').silibings()
  

内容选择器

• :empty

  // 找到即不含子元素，又不含文本内容的指定标签
  $(div:empty)
  

• :parent

  // 找到包含文本内容或是含有子元素的指定标签
  $(div:parent)
  

• :contains()

  // 找到包含指定文本内容的指定标签
  $(div:contains('text'))
  

• :has()

  // 找到包含指定子元素的指定标签
  $(div:has('span'))