前端系列之必须掌握的Jquery知识点(1) !

1. Jquery介绍

1.1. 什么是Jquery?

顾名思义，它的全称就是Javascript+Query的化身，它是辅助Javascript开发的js类库。

1.2. Jquery的核心思想

简而言之，就是write less,do more! 即写的更少，做的更多，同时它解决了浏览器对不同的 js 操作的兼容问题！

1.3. Jquery的流行程度和好处

jquery是免费、开源的，它的语法设计更加简洁，主要是对一些js操作dom的封装，以及在一些事件处理、ajax操作具有很好的封装效果！

2.Jquery的初体验

2.1关于Jquery的入口函数$(function(){逻辑代码})

说明： Jquery的入口函数的作用和原生js的window.onload=function(){逻辑代码}作用类似，均表示当页面元素加载完后，然后再执行里面的逻辑代码！但是又有些许区别。
区别在于：

• 加载模式不同：
  原生的 js会等到页面所有Dom元素均加载完毕后，才执行逻辑代码，包含图片加载。
  Jquery会等到DOM元素加载完毕，但不会等到图片也加载完毕就会执行
• 是否存在覆盖问题：
  原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的。
  Jquery中编写的多个入口函数，后面的不会覆盖前面的。

2.2 关于Jquery中的$函数的常见4个作用

$函数是jquery的核心函数，里面传递的参数不同，会有不同的作用！

1. 当传入的参数为函数 时：
   表示入口函数，前面有介绍！
2. 当传入的参数为 Html 字符串时：
   会根据该传入的字符串创建元素节点对象，类似于js中的createElement(标签名)+appendChild功能。

jquery中给body创建一个父盒子div+其两个子盒子span+其子盒子中内容+将其添加到body中
				$("<div>
					<span>span1</span>
					<span>span2</span>
				</div>").appendTo("body");
js中的做法：
			var divObj=document.createElement("div");
			var spanObj1=document.createElement("span");
			var spanObj2=document.createElement("span");
			spanObj1.innerHTML="span1";
			spanObj2.innerHTML="span2";
			divObj.appendChild(spanObj1);
			divObj.appendChild(spanObj2);
			document.body.appendChild(divObj);

3. 当传入的参数为 Dom 对象时：
   将js对象转换为jquery对象。

4. 当传入的参数为 选择器对象时：
   会根据传入的不同选择器类型，找到不同的dom对象，只不过此时的对象为jquery对象！
   例如：$("#id名")、$("标签名")、$(".class名")，他们分别类似于js中的getElementById、getElementsByTagName、getElementsByClassName等。相关介绍参见我的 Javascript之Dom和Bom操作！

2.3关于Dom对象和Jquery对象

• Dom对象的常见获取方法：
  通过document.getElementById、document.getElementsByTagName、document.getElementsByName、document.createElment等只要是通过原生js操作dom获取的对象均为Dom对象。

  DOM对象alet出来的是[object Html标签名Element]

• Jquery对象的常见获取方法：
  通过Jquery提供的api创建的对象，即为jquery对象，例如上面的案例。
  通过Jquery提供的api获取的页面对象，页尾Jquery对象。
  通过传入一个dom对象到$()核心函数中的也是一个Jquery对象。

  Jquery对象alert出来的是[object Object]

2.4 Jquery对象的本质

Jquery对象的本质就是一个dom对象数组+jquery提供的一系列方法！

2.5 Jquery对象和Dom对象的关系和相互转换

前面已经讲到，jquery对象的本质就是一个dom对象数组，因此它们之间就存在联系。

虽然存在上述关系，但是他们之间的属性和方法是互不相通的，即其中一个的api在另一个中有不同的api与之对应。

1. Jquery对象转为dom对象 (重点)
   由于jquery对象就是dom对象数组，因此可以直接调用其下标值，取出dom对象！
2. dom对象转为Jquery对象
   直接将得到的dom对象放入到jquery的入口函数$()中！

2.6 关于jquery中的事件函数中的$(this)和this的区别：

在jquery事件函数中，我们可以同时使用 this和 $ (this)，那么它们有什么区别？
区别在于：
前面我们已经讲过，关于js对象和jquery对象的互相转换操作。

jquery对象 $ (this)[0]等同于JS里的元素this，这里的this是一样的，相信你应该看出来了，JS里的元素只要包上$()就是jquery对象了，而jquery的对象只要加上[0]或者.get(0)，就是js元素了。

因此在jquery的事件绑定函数中，如果直接使用this的话就代表它是一个普通的Js对象，可以使用原生js操作该元素的样式等，但是如果使用$(this)的话就代表它是一个jquery对象，因此操作元素样式就要使用jquery提供的独立的api
例如：

$("#desktop a img").each(function(index){

      alert($(this)); //弹出的结果是[object Object ] 为jquery对象

      alert(this);   //弹出来的是[object HTMLImageElement] 为dom对象

}

//正确写法：
$("#textbox").hover(
     function() {
              this.title = "Test";
     },
    fucntion() {
              this.title = "OK”;
    }
);
//错误写法：jquery对象没有提供该title属性！！！
$("#textbox").hover(
     function() {
          $(this).title ＝ "Test";
     },
     function() {
          $(this).title = "OK";
     }
);
//jquery正确写法：JQuery拥有attr()方法可以get/set DOM对象的属性，
$("#textbox").hover(
     function() {
          $(this).attr(’title’, ‘Test’);
     },
     function() {
          $(this).attr(’title’, ‘OK’);
     }
);

3. Jquery的相关操作

3.1 Jquery的选择器

3.1.1 基本选择器

基本选择器是jquery中最常用的选择器，也是最简单的选择器，通过id、class、标签名等来查找DOM元素。

选择器	描述	返回	示例
#id	根据给定id值选择一个元素	单个元素	$("#test")选取id为test的元素
.class	根据给定的类名选择一个元素	集合元素	$(".test")选取类名为test的元素
element	根据给定元素名选择一个元素	集合元素	$(“p”)选取所有p元素
*	匹配所有元素	集合元素	$("*")选取所有的元素
selector1,selector2,…selector n	将每一个选择器匹配到的元素合并后一起返回	集合元素	$(“div,span,p”)选取所有的div、span、p元素

3.1.2 层次选择器

通过DOM元素之间的层次关系来获取特定元素，比如后代元素、子元素、相邻元素、同辈元素等的获取。

选择器	描述	返回	示例
$(“祖先元素 后代元素”)	选取祖先元素的所有后代元素	集合元素	$(“div span”)选取div中的所有span后代元素
$(“parent>child”)	选取parent元素下的子元素，注意是子元素	集合元素	$(“div>span”)选取div元素下的所有元素名为span的子元素
$(“prev+next”)	选取紧邻在prev元素后面的next兄弟元素	集合元素	$(".one+div")选取class为one的下一个div兄弟元素
$(“prev~siblings”)	选取prev元素后的所有兄弟元素	集合元素	$("#two~div")选取id为two的后面的所有为div的兄弟元素

在jquery中前面两个层次选择器用的频率较高，而后面两个的使用频率相对较低，如果使用，可以使用更加简单的方法来代替：

1. 可以使用next(选择器)方法来代替 $(“prev+next”) 选择器
2. 可以使用nextAll(选择器)方法来代替 $(“prev~siblings”) 选择器

3.1.3 过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需要的DOM元素，过滤规则与css中的伪类选择器 语法相同，即选择器都以一个冒号开头。按照不同的规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤选择器。

1. 基本过滤选择器

选择器	描述	返回	示例
:first	选取第一个元素	单个元素	$(“div:first”)选取所有div元素的第一个div元素
:last	选取最后一个元素	集合元素	$(“div:last”)选取所有div元素的最后一个div元素
:not(selector)	去除所有与给定选择器匹配的元素	集合元素	$(“input:not(.myClass)”)选取class不是myClass的input元素
:even	选取索引为偶数的元素，索引从0开始！	集合元素	$(“input:even”)选取所有索引为偶数的input元素
:odd	选取索引为奇数的元素，索引从0开始！	集合元素	$(“input:odd”)选取所有索引为奇数的input元素
:eq(index))	选取索引值等于index的元素	单个元素	$(“input:eq(1)”)选取索引值为1的一input元素
:lt(index)	选取索引值小于index的元素	集合元素	$(“input:lt(2)”)选取所有索引值小于2的input元素
:gt(index)	选取索引值大于index的元素	集合元素	$(“input:gt(3)”)选取所有索引值大于3的input元素
:header	选取所有标题元素，如h1,h2,h3	集合元素	$(":header")选取网页中所有的h1,h2,h3标签
:animated	选取当前正在执行动画的所有元素	集合元素	$(“div:animated”)选取正在执行动画的animated元素
:focus	选取当前获取焦点的元素	集合元素	$(":focus")选取当前获取焦点的元素

2. 内容过滤选择器

内容过滤选择器主要体现在它所包含的子元素或文本内容上。

选择器	描述	返回	示例
:contains(text)	选取含有文本内容为"text" 的元素	集合元素	$(“div:contains(‘calar’)”)选取含有文本为’calar’的div元素
:empty	选取不包含子元素或者文本的空元素	集合元素	$(“div:empty”)选取不包含子元素和文本元素的div空元素
:has(selector)	选取含有选择器所匹配的元素的元素	集合元素	$(“div:has§”)选取含有p元素的div元素
:parent	选取含有子元素或者文本元素的元素	集合元素	$(“div:parent)”)选取含有子元素或者文本元素的div元素

3. 可见性过滤选择器

可见性过滤选择器根据元素的可见状态和不可见状态来选择相应的元素。关于不可见有两个点：
1.设置为visibility:hidden的元素 元素不显示，但是仍然占据文档位置
2.设置display:none的元素 元素不显示，不占用文档位置

选择器	描述	返回	示例
:hidden	选取所有不可见元素	集合元素	$(":hidden")选取所有不可见元素，其中包括上面所讲的两种情况
:visible	选取所有可见的元素	集合元素	$(“div:visible”)选取所有可见的div元素

5. 属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。
几种常用的属性过滤选择器：

选择器	描述	返回	示例
[attribute]	选取拥有此属性的元素	集合元素	$(“div[id]”)选取拥有id属性的元素
[attribute=value]	选取拥有属性值为value的元素	集合元素	$(“div[title=‘test’]”)选取拥有title属性且属性值为test的元素
[attribute!=value]	选取属性值不等于value的元素	集合元素	$(“div[title!=‘test’]”)选取拥有title属性且title值不为test的元素
[attribute^=value]	选取属性值以value开头元素	集合元素	$(“div[title^=‘test’]”)选取拥有title属性且以test开头的元素
[attribute$=value]	选取属性值以value结尾元素	集合元素	$ (“div[title$=‘test’]”)选取拥有title属性且以test结尾的元素
[attribute1] [attribute2] [attribute3] [attributen]	属性选择器合并为一个复合属性选择器，满足多个条件，没选择一次，缩小一次范围	集合元素	$(“div[id][title^=‘test’]”)选取拥有id属性且title属性以test开头的元素

6. 子元素过滤选择器

区分子元素过滤选择器和基本过滤选择器！它里面涉及到的索引都是从1开始，而基本过滤选择器都是从0开始

选择器	描述	返回	示例
:nth-child(index/even/odd/equation)	选取每个父元素下的第index个元素或者奇偶元素，	集合元素	:eq(index)只是选取一个元素，而:nth-child(index)则是匹配每一个父元素的子元素，并且前者索引从0开始，后者索引从1开始
:first-child	选取每个父元素下的第1个子元素	集合元素	:first只是返回单个元素，而:first-child则是返回每个父元素的第一个子元素，例如$(“ul li:first-child”)选取每个ul中第一个li子元素
:last-child	选取每个父元素下的最后一个子元素	集合元素	:last只是返回单个元素，而:last-child则是返回每个父元素的最后一个子元素，例如$(“ul li:last-child”)选取每个ul中最后一个li子元素
:only-child	若某个元素是它父元素的唯一一个子元素，那么它将会被匹配，如果父元素中含有其它元素，则不会被匹配	集合元素	$(“ul li:only-child”)在ul中选取是唯一子元素的li元素

8. 表单对象过滤选择器

主要用于对表单元素进行过滤，例如选择被选中的下拉框，多选框等元素。

选择器	描述	返回	示例
:enabled	选取所有可用元素	集合元素	$("#input:enabled")选取id为input的所有可用表单元素
:disabled	选取所有不可用元素	集合元素	$("#input:disabled")选取id为input的所有不可用表单元素
:checked	选取所有被选中的元素（单选框，复选框）	集合元素	$(“input:checked”)选取所有被选中的input的表单元素
:selected	选取所有被选中元素（下拉列表）	集合元素	$(“select option:selected”)选取下拉列表中被选中的表单元素

3.1.4 表单选择器

为了使用户能够更加灵活的操作表单，jquery引入了表单选择器。利用该选择器可以方便的选择相关表单元素。

选择器	描述	返回	示例
:input	选取所有的input/textarea/select/button元素	集合元素	$(":input")选取所有的input/textarea/select/button元素
:text	选取所有的单行文本框	集合元素	$(":text")选取所有的单行文本框
:password	选取所有的密码框	集合元素	$(":password")选取所有的密码框
:radio	选取所有的单选框	集合元素	$(":radio")选取所有的单选框
:checkbox	选取所有的多选框	集合元素	$(":checkbox")选取所有的多选框
:submit	选取所有的提交按钮	集合元素	$(":submit")选取所有的提交按钮
:reset	选取所有的重置按钮	集合元素	$(":reset")选取所有的重置按钮
:button	选取所有的按钮	集合元素	$(":button")选取所有的按钮
:password	选取所有的密码框	集合元素	$(":password")选取所有的密码框

关于Jquery的Dom操作、事件和动画操作等下次讲解~~~