JQuery 学习纪录(1)

各位好，小弟为前端初学者，最近刚学完JQuery的一些基础，想要将自己所理解的知识，转化为文章
分享出来，以日后忘记时，还能在文章中查找，釐清自己当时的想法，而有什么错误，欢迎指正!希望大家多多包涵，谢谢!

JQ简述:

JQ和JS的关係
JS是什么? JS是一门程式语言
而JQ仅仅是基于JS的一个函式库，JQ可理解为就是开发JS的一个工具。
为什么要学JQuery?简单，粗暴 没有兼容性问题

使用JQuery的步骤：

1.下载JQuery文档 通常会有包含两种

一种为jquery.1.12.4.min.js(压缩版)

一种为jquery.1.12.4.js

功能基本上一样，都能引入用，差别在于，压缩版将注释、换行、空格等删除，而未压缩版则无，较易阅读。
开发环境用，未压缩版，因为易阅读，且不受流量大影响，而生产环境(对客户)用，压缩版，因为越小越省流量。

2. 引入JQuery文件

3. 入口函数 功能实现

入口函数写法：

        window.onload = function () {            console.log('js入口函数写法');        }        $(document).ready(function () {            console.log('jq入口函数第一种写法');        });        $(function () {            console.log('jq入口函数第二种写法');        });

当其他文档也有$符号的数据，且后引入的话jq的$就会被覆盖 如果想要同时写jq，但又想引用其他文档$的数据，可用jq的jQuery替代$来引入jquery

jQuery(function () {    console.log('jq入口函数第三种写法'); });

jQuery物件与DOM物件

区别：方法不能混用

js物件不能呼叫jq物件的方法?

不行，只有jq物件能呼叫自己的方法

jq物件能不能呼叫JS物件的方法?

不行，只有DOM物件能呼叫自己的方法，如同衣服不能自己产生洗衣机的功能。

DOM物件的缺点

1.需要一个个操作且需要遍历较为麻烦
2.有兼容性问题
3.事件会被覆盖等等

什么是DOM物件(JS物件):

使用JS的方式获取到的元素就是JS物件（DOM物件）

var cloth = document.getElementById("cloth");cloth.style.backgroundColor = "pink";

什么是JQ物件：

使用jq的方式获取到的元素就是JQ物件，且JQ物件包含DOM物件

JQ物件就是，里面放了一堆DOM(JS)物件，及一堆方法，而我们不用去遍历那些对象，他们自己会遍历，然后需要什么操作，在呼叫自身的方法去处理。

   var $li = $("li"); // 设置一个名称为$li的变数,并以JQ方式获取所有li标籤元素,也就是将其设为JQ物件   console.log($li); // 获取到伪阵列   // jQuery.fn.init(4) [li#cloth, li, li, li, prevObject: jQuery.fn.init(1), context:      // document, selector: "li"]   // 0: li#cloth   // 1: li   // 2: li   // 3: li   // length: 4    // 以上为一个标準的伪阵列物件

DOM无法呼叫jQuery物件的方法：为什么?

因为是两个不同物件，方法自然也不同

DOM物件呼叫jQuery物件的方法。需要把DOM物件转换成jQuery物件。DOM物件转变成jQuery物件(把变数放进$())，即可呼叫JQ物件的方法

var cloth = document.getElementById("cloth"); $(cloth).text("我转化成JQ物件,我呼叫JQ方法");

jQuery物件怎么转换成DOM物件（从JQ物件取DOM物件出来）

第一种方法 [index]

var $li = $("li");$li[1].style.backgroundColor = "red";

第二种方法,get(index)功能同等第一种,推荐使用第一种即可

$li.get(1).style.backgroundColor = "yellow";

$的本质

$其实就是一个函数,用$时记得加小括号()，参数不同,功能不同

第一种参数为function，就为入口函数

   $(function () {   });

第二种参数为DOM物件，可将其转成JQ物件

$(DOMOnject)

举入口函数为例,ready为JQ的方法,而document为JS的物件,基本上是不能引用ready方法
但由于document包在$里面,将其转成JQ物件,所以才可引用

  $(document).ready(function () {  });

第三种参数为字符串,用来找元素,物件

$('div') $('#bt') $('.bt')

第一次排版这种学习分享文章，还有许多进步的空间，也谢谢各位的观看！