目录

jquery入门

什么是jquery

  • jquery,顾名思义,也就是js和查询,即是JavaScript开发的库。
  • jquery是一套跨浏览器的JavaScript库,简化HTML和JavaScript之间的操作。
  • 全球前10000个访问最高的网站中,有65%使用了jquery,是目前最受欢迎的JavaScript库。
  • Jquery的好处:1、极大地简化了JavaScript开发人员遍历HTML文档 2、操作DOM 3、简化处理事件 4、简化执行动画 5、开发Ajax 6、链式操作 7、隐式迭代

版本

http://img.cana.space/picStore/20210112151416.png

前者开发版本有格式化和备注,后者线上版本没有格式化和备注;

pc端:1.x;手机端:2.x

HelloWorld

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript">
   window.onload = function(){
      var btnEle = document.getElementById("btnId");
      btnEle.onclick = function(){
         alert("HelloWorld");
      }
   }
</script> -->

<!--  1jQuery是JavaScript的第三库  dbutils.jar -- java
                        jQuery  -- javascript
   2使用jquery必须先引入jquery的库文件  jquery-1.7.2.js   jquery-1.7.2.min.js
      使用script标签引入
      <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
      
-->
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
      //编写js代码
      //$():调用$方法  $():叫做jquery的核心函数
      //为$()方法传入一个  function(){}作为参数:就相当于window.onload=function(){写代码}   $(function(){ 写代码 });
      //
      $(function(){
         //使用$();查找元素    使用.click()来绑定点击响应函数   把单击响应函数作为click()的参数传入即可
         $("#btnId").click(function(){
            alert("HelloWorld2");
         });
      });
</script>
</head>
<body>

   <button id="btnId">SayHello</button>

</body>
</html>

$的本质

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../jquery-1.7.2.js"></script>
<script type="text/javascript">
//说明$  是一个function  $();称为jquery的核心函数
// Define a local copy of jQuery
/*var jQuery = function( selector, context ) {
         // The jQuery object is actually just the init constructor 'enhanced'
         return new jQuery.fn.init( selector, context, rootjQuery );
      },*/
//$ 本质就是一个方法    alert($);
// $ == jQuery
   $(function(){
      $("#btn").click(function(){
         alert("你好");
      });
   });
</script>
</head>
<body>

   <button id="btn">Button</button>

</body>
</html>

核心函数的四种用法

$是jquery的核心函数,能完成jquery的很多功能。$()就是调用$这个函数

  • 传入参数为【函数】时:$(function(){})

    文档加载完成后执行此方法,window.onload

  • 传入参数为【HTML字符串】时:$("<div>html</div>")

    根据字符串创建元素节点对象

  • 传入参数为【选择器字符串】时:$("#id")

    根据选择器查找出元素节点对象

  • 传入参数为【DOM对象】时:$(this)

    将dom对象包装为jquery对象返回,只有将js中的dom对象转为jquery的对象,才能调用jquery对象的方法。

演示

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../../jquery-1.7.2.js"></script>
    <script type="text/javascript">
        // 核心函数的4个作用
        // 1.传入参数为【函数】时:`$(function(){})`,文档加载完成后执行此方法,window.onload
        // $(function () {
        //     alert("hello")
        // });

        $(function () {
            // 2.传入参数为【HTML字符串】时:`$("<div>html</div>")`,根据字符串创建元素节点对象
            // let ele = $("<li>手机</li>")
            // ele.appendTo("#ulId");
            // appendTo方法, 将前面的元素加到后面的节点中
            $("<li>手机</li>").appendTo("#ulId");

            // 3.传入参数为【选择器字符串】时:`$("#id")`,根据选择器查找出元素节点对象
            $("#aId").click(function () {
                // alert("你好");
            })

            // 4.传入参数为【DOM对象】时:`$(this)`,将dom对象包装为jquery对象返回,只有将js中的dom对象转为jquery的对象,才能调用jquery对象的方法。
            /*
            dom对象:使用原生的js查找(创建)到的元素
            jquery对象:使用jquery查找到的元素(包装了的元素)都是jquery对象
             */
            // dom对象-jquery对象:不能相互操作彼此的方法,要相互操作彼此的方法需要相互转化
            let btn1 = document.getElementById("btn1");
            $(btn1).click(function () {
                alert("sayHello");
            })
            // jquery对象->dom对象
            let btn2 = $("#btn2");
            // jQuery查出来的都会封装成原生dom对象数组,即使只有一个元素
            let btn2Ele = btn2[0];
            btn2Ele.onclick = function (){
                alert("sayHello2");
            }

            // 会打印出btn2
            alert($("button")[1].id);
        })


    </script>
</head>
<body>
<ul id="ulId">
    <li>相机</li>
</ul>
<a id="aId" href="#">你好</a>
<button id="btn1">hello1</button>
<button id="btn2">hello2</button>
</body>
</html>

DOM对象和jQuery对象相互转化练习

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../jquery-1.7.2.js"></script>
<script type="text/javascript">

   $(function(){
      //testDiv.css("color","red")
      //testDiv.style.color = "blue";
      //点击第一个按钮,让div的文字变为红色,要求使用原生的dom操作
      var btn01 = document.getElementById("dom2dom");
      btn01.onclick = function(){
         var divEleDom = document.getElementById("testDiv");//返回的是dom对象
         divEleDom.style.color = "red";
      }
      
      //使用dom对象能不操作jquery的css()方法来改变文字颜色呢
      var btn02 = document.getElementById("dom2jQuery");
      btn02.onclick = function(){
         var divEleDom = document.getElementById("testDiv");//返回的是dom对象
         //divEleDom.css("color","red");//这样是不可以的
         //需要转化为jquery对象,才可以调用jquery  .css()方法;
         $(divEleDom).css("color","blue");
      }
      
      
      $("#jQuery2jQuery").click(function(){
         //找到jquery对象
         $("#testDiv").css("color", "green");
      });
      
      
      $("#jQuery2dom").click(function(){
         //找到jquery对象
         //$("#testDiv").style.color= "red";//这种操作是错误的
         //我们将jquery对象转为dom对象
         $("#testDiv")[0].style.color = "red";
      });
      

   });

</script>
</head>
<body>
   <!-- // style="color: red"-->
   <div id="testDiv" >Atguigu is Very Good!</div>
   
   <button id="dom2dom">使用DOM对象调用DOM方法</button>
   <button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
   <button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
   <button id="jQuery2dom">使用jQuery对象调用DOM方法</button>

</body>
</html>