jQuery的2把利器

2018-07-26 12:14:00

<!--

$是一个函数，首先是给window添加$，然后该值是一个函数，函数返回的值是对象。

1. jQuery核心函数

* 简称: jQuery函数($/jQuery)

* jQuery库向外直接暴露的就是$/jQuery

* 引入jQuery库后, 直接使用$即可

* 当函数用: $(xxx)

* 当对象用: $.xxx()

2. jQuery核心对象

* 简称: jQuery对象

* 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象

* 使用jQuery对象: $obj.xxx()

-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>01_初始jQuery</title>
        <script type="text/javascript">
            window.onload = function(){
                btn1 = document.getElementById("btn1");
                btn1.onclick = function(){
                    var username = document.getElementById("username").value;
                    alert(username)
                    
                }
            }
        </script>
        <!--使用jQuery实现-->
        <script type="text/javascript" src="../../js/jquery-1.10.1.js"></script>
        <script type="text/javascript">
            //1\使用jQuery核心函数（$,jQuery）
            //绑定文档加载完成的监听，就是跟window.onload的效果一样辣$(function(){})
                
            $(function(){
                $("#btn2").click(function(){
                    var username = $("#username").val();//给btn2绑定监听
                    alert(username)
                })
                
            })
            /*
             * jquery核心对象
             * 执行$（）返回的对象
             * jQuery对象都会在前面加一个$
             */
        </script>
    </head>
    <body>
        <!--需求：点击”确定“按钮，提示输入的值-->
        用户名：
        <input type="text" id="username" >
        <button id="btn1">确定（原生版）</button>
        <button id="btn2">确定（jQuery版）</button>
    </body>
</html>