(1) 初识jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初识jQuery</title>
    <script type="text/javascript">

        //使用原生JS
        window.onload=function () {
            document.getElementById("btn1").onclick=function () {//代表btn1节点，访问其属性
                var username=document.getElementById('username').value;//代表username节点，访问其属性
                alert(username);
            }
        }
    </script>

    <!--使用jQuery版-->
    <!--下面这行代码只负责引入jQuery，不能写JS代码，即使写了也无效-->
    <script type="text/javascript" src="../js/jquery.js"></script>
    <!--jQuery代码-->
    <script type="text/javascript">
        //执行顺序：当页面中所有元素都加载完成后，才会执行jquery代码，也就是$(function (){})
        alert(1)
        //绑定文档加载完成的监听
        $(
            function () {
                $('#btn2').click(function () {//给btn2绑定点击监听
                    var username=$('#username').val()
                    alert(username)
                })
            }
        )
        alert(2)
    </script>
</head>
<body>
<!--需求：点击确定按钮，提示输入值-->
    用户名：<input type="text" id="username"/>
    <input type="button" value="确定(JS原生版)" id="btn1"/>
    <button id="btn2"/>确定(jQuery版)
</body>
</html>

(2) 引入jQuery的三种方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三种方式等效</title>
</head>
<body>
    <!--引入jquery-->
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        /*
        * 当页面中所有元素都加载完成后，才会执行jquery代码,
        * 类似JS代码中window.onload(){}
        *
        * 1.启动jquery的等效方式：3种；
        * 2. $ 等价于jQuery,$就是jQuery库中定义的一个全局变量，用于表示jQuery这个对象。
        * */
        $(function () {
            alert("我的jquery1");
        })

        jQuery(function () {
            alert("我的jquery2")
        })

        window.jQuery(function () {
            alert("我的jquery3")
        })
    </script>
</body>
</html>

(3) jQuery和DOM对象的转化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery和DOM对象的转化</title>
</head>
<body>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            //获取DOM对象
            var v_dom=document.getElementById("name");
            //alert(v_dom.value);//张胜男 alert弹框

            //一：将DOM对象转换成jQuery对象,在DOM前加个$
            var v_jquery=$(v_dom);
            //jquery对象不能使用DOM中的属性value
            alert(v_jquery.value);//undefined
            alert(v_jquery.val())//张胜男

            //二：将jQuery对象转换成DOM对象
            //根据id获取jQuery对象,jQuery对象是一个DOM数组，数组长度取决于jQuery获取页面元素的个数，
            //这些数组元素中都存放着DOM对象
            var vJquery=$("#mingzi")
            alert(vJquery.val())//张三
            //将jQuery对象转换成DOM对象,加数组，数组存放的是DOM
            var vDom=vJquery[0];//jquery数组就1个元素，张三
            alert(vDom.val)//undefined
            alert(vDom.value)//张三
        })
    </script>
    <input type="text" value="张胜男" id="name"/>
    <input type="text" value="张三" id="mingzi"/>
</body>
</html>

灰色头像JH

发布了42 篇原创文章 · 获赞 8 · 访问量 2424

私信关注

jQuery:基础

文章目录

(1) 初识jQuery

(2) 引入jQuery的三种方式：

(3) jQuery和DOM对象的转化

猜你喜欢