jQuery学习笔记一（jQuery基础知识学习）

jQuery学习笔记一

最近在课程设计的时候用到了jQuery，发现jQuery比原生的js好用太多了，在课设结束之后，专门抽出几天时间来学习了jQuery。

1，什么是jQuery

jQuery实际上是一个封装了很多方法的JavaScript库。学习jQuery就是对这些方法的学习，学会灵活地使用这些方法，学习的目的就达到了。
jQuery框架本质上是一个匿名函数，是立即执行的。
另外学习jQuery需要有一些JavaScript的基础，网上的绝大多数教程也是默认已经熟悉了JavaScript技术了，如果对JavaScript比较陌生，需要先学习一下JavaScript。

2，jQuery入口函数

jQuery的入口函数相对于原生js比较简单，下面对两者进行比较
原生js的入口函数：
window.onload = function(){};

jQuery的入口函数有：(四种,最简单也是最常用的是第一种)
$(function(){});
$(document).ready(function(){});
jquery(function(){});
jquery(document).ready(function(){});

jQuery和原生js的入口函数的差别：
1，jQuery支持多个入口函数，后面的不会覆盖前面的，而原生js后面的入口函数会覆盖前面的。
2，jQuery的入口函数和原生js的入口函数的执行时间不同，jQuery会在dom树加载完毕之后就执行入口函数，而原生js会在dom树加载完毕之后，等待页面其他的资源都加载完才执行入口函数。

3，jQuery的核心函数

• $() 就是jQuery的核心函数。
• jQuery的核心函数可以接收多种参数，他们构成了jQuery的基本使用规则。

1. 接受一个函数：$(function(){}); 它就是jQuery的入口函数。
2. 接受一个字符串选择器：$(".box"); 它返回一个jQuery对象，对象保存了查询到的dom元素。
3. 接受一个字符串代码片段：
   var $p = $("<p>我是一个段落</p>")
   返回一个jQuery对象，对象中保存了创建的dom元素
4. 接受一个dom元素：var $span = $(span);将原生的dom元素包装成jQuery对象，接着就能使用jQuery方法了。

4，jQuery对象

• 什么是jQuery对象？
  jQuery对象本质上是一个伪数组，有索引和length属性。jQuery对象实际上就是DOM对象的一个包装集。
• jQuery对象和DOM的区别：
  jQuery对象是通过jQuery选择器获取到的对象，而DOM对象是通过原生js获取到的对象。jQuery对象只能调用jQuery的方法和属性，而不能使用原生js的方法和属性。DOM对象只能使用js的方法和属性而不能使用jQuery的方法和属性。
• jQuery对象和DOM对象相互转换
  DOM—>jQuery：使用$符号将DOM对象包裹起来，就把DOM对象转换成了jQuery对象。
  jQuery—>DOM：1，使用下标取出：$(“div”)[0]。 2，使用jQuery的get()方法取出：$(“div”).get(0);

5，jQuery的几种常用的静态方法

jQuery的静态方法可以通过类名调用。

1. each();
   $.each(arr,function(index,value){console(index,value)})
   each()方法第一个参数arr为要遍历数组（可以是伪数组），其后为回调函数，回调函数传入两个参数：index和value分别是索引和值。在回调函数中可以对遍历到的索引和值进行操作。

2. map();
   $.map(arr,function(value,index){})
   map()方法和each()方法类似，但是两者回调函数有所不同，map的回调函数两个参数的顺序分别是value和index。each()方法的默认返回值是被遍历的内容，map()方法的默认返回值是空数组。

3. trim();
   var res = $.trim(str);
   该方法传入一个字符串，返回值为去除前后端的空格的字符串。

4. isWindow();
   $.isWindow(arr);
   判断传入的参数是不是一个window对象。

5. isArray();
   var res = $.isArray(arr);
   判断传入的参数是不是数组，返回true或者false 如果是伪数组也将返回false

6. isFunction();
   var res = $.isFunction(func);
   判断传入参数是不是一个方法，返回true或者false。

6，jQuery的选择器

• 基本选择器

1. id选择器 $("#div");
2. 类选择器 $(".div")
3. 标签选择器 $(“div”)

• 层级选择器

4. 子代选择器：$(“ul>li”); //只获取子元素
5. 后代选择器：$(“ul li”); //会获取所有符合条件的后代元素。

• 过滤选择器

6. :eq(index); 例如：$(“li:eq(2).css(‘color’,‘red’)”);//获取到li元素群中的索引为2的元素。
7. :odd 索引为奇数的元素
8. :even 索引为偶数的元素

• 筛选选择器（筛选选择器主要是方法）

9. children(); 获取孩子节点，可以包含参数，若含参数，则获取到符合条件的孩子节点。
10. find(); 获取被选元素后代的元素，和children()相似，但是children()只沿着dom树向下遍历一层。
11. siblings(); 获取到除了自己以外的全部的兄弟节点。
12. parent(); 获取到父元素。
13. eq(); 获取到元素群中相应索引的元素。
14. next(); 获取到下一个兄弟节点 ，nextAll()获取所有的下面的兄弟节点。
15. prev(); 获取到上一个兄弟节点 ，prevAll()获取到所有的上面的兄弟节点。

7，jQuery的设置文本值的相关方法

以下三种方法都可以用来设置值或者获取值，设置值的时候，参入参数；获取值的时候，不传参数。

1. text()
   和原生js的inner方法一样，设置操作时，只能设置文本，不能设置元素。
   获取：会获取到这个标签中所有的文本，包括后代元素中的文本
   包含多个dom元素的jQuery对象会把所有的dom元素的文本获取到

   $("div").text("<p>我是段落<span>我是span</span></p>");//设置值
   $("div").text();//获取值
   

2. html()
   和原生js的innerHTML方法一样，可以设置元素。

   $("div").html("<p>我是段落<span>我是span</span></p>");//设置值
   $("div").html();//获取值
   

3. val()
   和原生js的value方法相似，主要用于获取input表单的输入值。

   $("input").val("请输入内容");//设置值
   $("input").val();//获取值
   

8，CSS样式设置和获取

css()方法可以用来设置或者获取css属性。
设置的方法有三种：

1. 逐个设置

$("div").css("width","100px");
$("div").css("height","100px");
$("div").css("background","red");

2. 链式设置

$("div").css("width","100px").css("height","100px").css("background","red");

3. 批量设置

$("div").css({
width:"100px",
height:"100px",
background:"red"
});

更加推荐使用批量设置，和css的设置方法很相似，此外链式设置不宜太长，否则增加阅读难度。

获取css值：（传入参数，获取哪个属性，传哪个属性的名称）
$(“div”).css(“width”);

9，jQuery操作属性节点和属性

• 属性节点和属性
  只有DOM对象包含属性节点，任何对象都有属性。
• jQuery操作属性和属性节点
  下面两种方法，传两个参数就是设置，传一个参数就是获取。

1. attr() 方法。操作属性节点
   获取：无论返回多少个元素，都会返回第一个元素指定的属性节点的值。
   设置：找到多少个，就会设置多少个，如果没有就会新增一个。如果设置的属性节点不存在，系统会自动新增。
   删除：removeAttr()，会删除掉找到的所有元素的指定的属性节点。接收一个参数，删除指定的属性节点 ，如果删除多个，可用逗号隔开。
2. prop()方法。操作属性。不仅能够操作属性节点，还能操作属性。
   和attr()基本一致。但是在涉及 selected checked disabled 这三种属性的时候要使用 prop()方法，此时如果使用attr()方法，会出错，因为当使用prop返回的是false的时候 attr对应的返回的是undefined。
   因此在涉及上述的三种属性的时候用prop() 在其他的情况下使用attr()。

10，jQuery对类的操作

1. addClass()
   添加。添加一个或多个class，添加多个类使用空格隔开。
2. removeClass()
   删除。传参数，删除一个或多个class，删除多个使用空格隔开；如果不传参数会移除所有的类。
3. toggleClass()
   切换。有该class就删除，没有就添加，这个很好用。