首页 > 其他分享> > JQuery入门学习（更新中...）

JQuery入门学习（更新中...）

2020-03-16 22:02:00 作者：互联网

概念：一个JavaScript框架。简化JS开发
- jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
- JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
快速入门
1. 步骤：
  1. 下载JQuery
    - 目前jQuery有三个大版本：
      1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
      功能不再新增。因此一般项目来说，使用1.x版本就可以了，
      最终版本：1.12.4 (2016年5月20日)
      2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
      功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
      最终版本：2.2.4 (2016年5月20日)
      3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
      一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
      目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
    - jquery-xxx.js 与 jquery-xxx.min.js区别：
      1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
      2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
  2. 导入JQuery的js文件：导入min.js文件
  3. 使用（如下）
```
			var div1 = $("#div1");
			alert(div1.html());
```
js与jQuery相互转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>

<div id="div1">dv1.....</div>
<div id="div2">dv2.....</div>

<!--JQuery对象和JS对象区别与转换
	1. JQuery对象在操作时，更加方便。
    2. JQuery对象和js对象方法不通用的.
    3. 两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)-->
<script>
    <!--js获取所有div标签对象-->
    var divs = document.getElementsByTagName("div");  //获取一个集合
    <!--jq获取所有div标签对象-->
    var $divs = $("div");

    <!--js修改所有div标签的内容-->
    for (var i = 0; i<divs.length; i++){
        divs[i].innerHTML = "aaa";
    }
    <!--j修改所有div标签的内容-->
    $divs.html("bbb");   //获取封装好的对象

    // $divs.innerHTML = "ccc";    js和jq不通用

    <!--js与jq互相转换-->
    // * js -- > jq : $(js对象)
    for (var i = 0; i<divs.length; i++){
        $(divs[i]).html("ccc");
    }
    // * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
    $divs[0].innerHTML = "ddd";
    $divs.get(1).innerHTML = "ddd";   
</script>
</body>
</html>

4.选择器：筛选具有相似特征的元素(标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <script src="js/jquery-3.3.1.min.js"></script>

    <script>
        <!--js在页面加载后执行-->
        // window.onload = function (ev) {
        //     $("#b1").click(function () {
        //         alert("window.onload");
        //     });
        // }
        <!--jq新写法-->
        $(function () {
            $("#b1").click(function () {
                alert("window.onload");
            });
        })

        /*其中window.onload 和 $(function (){});的区别
            1.window.onload :只能使用一次，如果使用多次，写在后面函数功能的将会覆盖前面的
            2.$(function (){})：可以使用多次
         */
    </script>
</head>
<body>
<div id="div1">dv1.....</div>
<div id="div2">dv2.....</div>
<input type="button" value="点我" id="b1">

<!--<script>-->
    <!--&lt;!&ndash;给button添加单击事件jq(写法更简洁)&ndash;&gt;-->
    <!--$("#b1").click(function () {-->
        <!--alert("abc");-->
    <!--});-->
    <!--&lt;!&ndash;给button添加单击事件js&ndash;&gt;-->
    <!--document.getElementById("b1").onclick = function (ev) {-->
        <!--alert("bdc");-->
    <!--}-->
<!--</script>-->


</body>
</html>

标签：JQuery,...,入门,function,JavaScript,jq,js,版本,divs
来源： https://blog.csdn.net/JAYU_37/article/details/104909387