一：JQuery入口函数
js：window.onload=function(...){}
jq：$(document).ready(function(){...});
$(function(){...});
1.两者功能都一致，都可以让获取元素的行为发生在渲染元素之后；
2.JS入口只允许存在一个，书写多个的话，后面的会覆盖前面的；
3.JQ入口允许存在多个，且并行存在，都会生效；
4.JS入口需要等待页面上所有资源加载完毕，而JQ入口只需要等待页面上标签渲染完毕即可，JQ入口速度更快。

二：事件
js：js对象.onclick= function(){...}jq：jquery对象.click(function(){...})
注意：jq中的事件类型统一不要加on
1.在jq里面，通过$()返回的数组，允许开发者整体操纵
2.选择数组中的其中一个元素：js对象[下标]     jq对象.eq(下标)
举例：

[JavaScript] 纯文本查看 复制代码

<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // jQuery 书写 :
            var btns = $("input");
            // 可以整体操作, 给按钮绑定监听点击事件
            btns.click(function () {
                alert("按钮被点击了...");
            })
        })
    </script>

三：对象互转
1.JQ转JS对象

[JavaScript] 纯文本查看 复制代码

<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // jQuery 对象转为 JS 对象之后, 就可以使用 JS 语法.
            $("#btn").get(0).onclick = function () {
                alert("Hello jQuery对象转换为了 JS 对象, 方式一 ...");
            }
            $("#btn")[0].onclick = function () {
                alert("Hello jQuery对象转换为了 JS 对象, 方式一 ...");
            }
        })
    </script>

2.JS转JQ对象

[JavaScript] 纯文本查看 复制代码

<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            // JS 转成 jQuery 对象之后, 就可以使用 jQuery 的语法
            var btn = document.getElementById("btn");
            // JS -> jQuery
            $(btn).click(function () {
                alert("Hello, JS对象转换成为 jQuery 对象 ...");
            })
        })
    </script>

四：JQ中DOM操作
1.新增节点

[HTML] 纯文本查看 复制代码

$(selector).append(content)			在匹配元素内部最后面新增一个节点
$(content).appendTo(selector)		把新节点追加到匹配元素内部最后面（效果同append，只是书写上前后位置互换）
$(selector).prepend(content)			在匹配元素内部最前面新增一个节点
$(content).prependTo(selector)		把新节点追加到匹配元素内部最前面（效果同prepend，只是书写上前后位置互换）
$(selector).after(content)				在匹配元素同级之后新增一个节点
$(content).insertAfter(selector)		把新节点追加到匹配元素同级之后（效果同insertAfter，只是书写上前后位置互换）
$(selector).before(content)			在匹配元素同级之前新增一个节点
$(content).insertBefore(selector)		把新节点追加到匹配元素同级之前（效果同insertBefore，只是书写上前后位置互换）

2.删除节点

[HTML] 纯文本查看 复制代码

remove()		删除节点，斩草除根，全部删除
empty()			清空节点，斩草留根，只清空内部的东西，保留最外面的标签

3.替换节点

[HTML] 纯文本查看 复制代码

$(selector).replaceWith(content)	  100%把旧的替换掉

五：JQuery中对象方法

[HTML] 纯文本查看 复制代码

Jq对象.each（function（index，element）{
	alert（index）; 	//打印索引
	alert（element）; //打印集合对象中的每一个元素
}）
$(element).css('color','red');在使用的时候必须加选择器环境$()

JQuery中全局方法

[HTML] 纯文本查看 复制代码

$.each（jq对象，function（index,element）{
	alert(index); 		//打印索引
	alert(element); 	//打印集合对象中的每一个元素
}）

六：JQuery中常用事件

1.绑定一个事件

[JavaScript] 纯文本查看 复制代码

jq对象.bind("事件类型"，响应函数);
$("btn").bind("click", function(){
    alert();
});

2.绑定多个事件

[JavaScript] 纯文本查看 复制代码

jq对象.bind({事件类型1:function(){},事件类型2:function(){}});
$("button").bind({
click:function(){},
mouseover:function(){},  
mouseout:function(){}  
});

3.指定事件的解绑

[JavaScript] 纯文本查看 复制代码

jq对象.unbind("事件类型");
jq对象.unbind("click");

4.解绑所有事件
jq对象.unbind();
5.事件的切换
hover(over,out) == mouseover+mouseout
注意：

[JavaScript] 纯文本查看 复制代码

Jq对象.hover(function(){
	//等同于mouseover事件，鼠标移入会执行
},function(){
	//等同于mouseout事件，鼠标移出会执行
})

[JavaScript] 纯文本查看 复制代码

Jq对象.hover(function(){
	//只写一个匿名函数，代表鼠标移入和移出分别执行一次这里的js语句
})

奈斯