jQuery入门-蒲公英云

jQuery入门

蔚落 2023-10-10 20:45 148阅读 0赞

一、正确使用jQuery

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery入门</title>
        <style type="text/css">
            #d1{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            #d2{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            body{
                margin: 0;
                padding: 0;
            }
        </style>
        <!-- 1.引入jQuery的类库 -->
        <script src="js/jquery.min.js"></script>
        <!-- 2.书写jQuery的代码 -->
        <script type="text/javascript">
            //jQuery加载文档
            $(function(){
                //1)如何获取id为d1的元素
                var d1=document.getElementById("d1");        //js的做法
                d1.innerText="<span>abd</span>"    //不能识别html属性<span>直接输出
            //    d1.innerHTML="<span>abd</span>"    //可以识别html属性 <span>
                //jQuery的做法
                var d2= $("#d2");
                d2.text("xyz");
            });
        </script>
    </head>
    <body>
        <div id="d1">
        </div>
        <div id="d2">
        </div>
    </body>
</html>

运行效果图如下：

二、对象间的转换

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery对象和DOM对象转换</title>
        <!-- 1.引入jQuery的类库 -->
        <script src="js/jquery.min.js"></script>
        <!-- 2.书写jQuery的代码 -->
        <script type="text/javascript">
            //jQuery加载文档
            $(function(){
                //1)js 获取的是DOM对象
                var dom=document.getElementById("d1");
                //2)jQuery 获取的是jQuery对象
                var jq=$("#d1");
                dom.innerText="abc";
                jq.text("xyz");
                //JQ对象转换成DOM对象
                jq[0].innerText="xyz";
                //DOM对象转换成JQ对象
                $(dom).text("111");
            });
        </script>
    </head>
    <body>
        <div id="d1">
        </div>
        <div id="d2">
        </div>
    </body>
</html>

运行效果如下：

三、jQuery选择器的使用

选择器分为：ID选择器、class选择器、元素选择器、层级选择器等。

选择器的使用：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery对象和DOM对象转换</title>
        <!-- 1.引入jQuery的类库 -->
        <script src="js/jquery.min.js"></script>
        <!-- 2.书写jQuery的代码 -->
        <script type="text/javascript">
            //jQuery加载文档
            $(function(){
                //jQuery的ID选择器获取元素
                var a1=$("#d1");
                console.log(a1);
                //JQ的class选择器获取元素
                var a2=$(".c1");
                console.log(a2);
                //JQ的元素选择器获取元素
                var a3=$("p");
                console.log(a3);
                //JQ的层级选择器获取元素
                var a4=$("ul li");
                console.log(a4);
                for(var i=0;i<a4.length;i++){
                    alert(a4[i].innerText);
                }
                var a5=$("ul>li");
                console.log(a5);
                for(var i=0;i<a5.length;i++){
                    alert(a5[i].innerText);
                }
            });
        </script>
    </head>
    <body>
        <h2>jQuery选择器</h2>
        <div id="d1">id选择器</div>
        <div class="c1">class选择器</div>
        <div class="c1">class选择器</div>
        <p>标签选择器1</p>
        <p>标签选择器2</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <ol>
                <li>5.1</li>
                <li>5.2</li>
            </ol>
        </ul>
    </body>
</html>