jQuery初始

jQuery是一个优秀的JavaScript库，封装JavaScript，直接调用。

是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要包括核心库、UI、插件和jQuery Mobile等开发人员以及推广和网站设计、维护人员。
jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发ajax的操作。总之，无论是网页设计师、后台开发者、业余爱好者还是项目管理者，也无论是JavaScript初学者还是JavaScript高手，都有足够多的理由去学习jQuery。

语法简洁：$（选择器）.方法（），兼容
兼容性（2.0以后不兼容ie） 开发用2.0以下版本
强大的选择器功能： $(“选择器”) KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲box") 语法简介：(“选择器”).click()

特点：
jQuery强调的理念是写得少，做得多（write less, do more），jQuery独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他库望尘莫及的。概括起来，jQuery有以下优势。
● 轻量级。
● 强大的选择器。
● 出色的DOM操作的封装。
● 可靠的事件处理机制。
● 完善的ajax。
● 不污染顶级变量。
● 出色的浏览器兼容性。
● 链式操作方式。
● 隐式迭代。
● 行为层和结构层分离。
● 丰富的插件支持。
● 完善的文档。
● 开源。

1.jQuery引入
官方网站下载：http://jquery.com/
去CDN下载：https://www.bootcdn.cn/jquery/
2.版本
最新版本3.4.1
jQuery从2.0版本以后不再兼容IE，公司开发中使用2.0以下版本

压缩版本：用于项目开发
未压缩版本：用于学习，研究
3.$与jquery的关系//window.jQuery=window.$ = jQuery 别名
$(“button”);
jQuery(“button”).click(function () {
alert(“Fd”);
});

4.页面加载
$(document).ready(function () {
alert(“1”);
});
$().ready(function () {
alert(“2”);
});
$(function () {
alert(“3”);
});

Window.onload与ready的区别
window.onload : 等文档和资源都加载完成后调用
如果写多个，后面的会覆盖前面的

$().ready : 等文档加载完成后调用
如果写多个，后面不会覆盖前面

5.jQuery对象与DOM对象的关系

6.jQuery与其他库冲突问题
$的冲突

1.jquery在其他库文件之后引入 jquery覆盖move.js
JQuery.noConflict（）：将$的控制权移交给别的库jQuery.noConflict();(function($) { //var $ = jQuery
console.log(KaTeX parse error: Expected 'EOF', got '}' at position 4: ); }̲)(jQuery); cons…);

2.jquery在其他库之前引入 move.js覆盖jquery
Move使用$
Jquery使用jQuery

7.选择器
基本选择器
#box 获取标签中id名为box的标签
.box 获取所有class名为box的标签
$(“标签名”) 获取所有对应标签名的标签

层次选择器
$(“ul li”) 获取ul标签中的所有li标签
$(“ul>li”) 获取ul标签中的直接子元素li
$(“div+span”) 获取div标签的下一个兄弟span元素
$(“div~span”) 获取div标签后面的所有兄弟span元素
过滤选择器
基本过滤
$(“ul li:first”) 获取ul中第一个li元素
$(“ul li:last”) 获取ul中最后一个li元素
$(“li:not(‘.box’)”) 获取除.box元素外的所有li元素
$(“li:even”) 获取下标为偶数的li元素
$(“li:odd”) 获取下标为奇数的li元素
$(“li:eq(下标)”) 获取li中对应下标的元素， $(“li”).eq(下标)
$(“li:gt(2)”) 获取下标大于2的li元素
$(“li:lt(2)”) 获取下标小于2的li元素
内容过滤
E：contains() 获取包含特定内容的E元素，不考虑层级
E：empty 获取不包含任何内容的E元素
E：has(span) 获取包含特定标签的E元素
E：parent 获取包含内容的E元素

可见性过滤
$(“li:hidden”) 获取不可见元素，不包含display:none的元素
$(“li:visible”)获取可见元素属性过滤E[attr]获取属性为attr的E元素E[attr=value]获取属性为attr并且值为value的E元素E[attr!=value]获取属性为attr并且值不为value的E元素E[att{r}^{=}value]获取属性为attr并且以value开头的E元素E[attr$=value] 获取属性为attr并且以value结尾的E元素
E[attr*=value] 获取属性为attr并且值中包含value的E元素
子元素过滤
:nth-child（） 获取对应下标的元素 number，even odd 3n+1
:first-child（） 获取父元素中的第一个子元素
:last-child（） 获取父元素中的最后一个子元素
表单选择器
:enabled 获取所有可用元素
:disabled 获取所有不可用元素
option:selected 获取select选中项
：checked 获取选择框中被选中的项 单选 多选

8.jquery中的循环
//1. $.each(遍历的对象，callback(回调函数))
//1. $.each(遍历的对象，function(index,value){})

var arr = [1,2,3];
$.each(arr,function (index,value) {
console.log(value);
});

$.each($(“li”),function (index,elem) {
console.log(elem); //

• 1
• 
  console.log($(elem)); //
• 1
• 
  });

  var obj = {
  “name”:“web”,
  “age”:18
  }

  $.each(obj,function (key,value) {
  console.log(key,value);
  })

  //2. $.map: 有返回值,返回一个数组 $.map(遍历的对象，callback(回调函数))
  //2. $.map: 有返回值 $.map(遍历的对象，function(value,index){})
  var arr2 = $.map(arr,function (value,index) {
  return value*value;
  });
  console.log(arr2);

  var arr3 = $.map($(“li”),function (elem,index) {
  return elem;
  });
  console.log(arr3);