Jquery 入门

其他 2018-05-16 20:11:20 阅读次数: 2

jquery 入门

等待文档加载完毕

将获取元素的语句写到页面头部，会因为元素还没有加载而出错，jquery提供了ready方法解决这个问题，它的速度比原生的 window.onload 更快。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // alert($);
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            alert("原生js获取的div" + oDiv);
        }

        // write less and do more
        /*
        $(document).ready(function(){
            var $div = $("#div1");

            alert("jquery获取的div" + $div);
        })
        */

        // ready 简写
        $(function(){
            var $div = $("#div1");

            alert("jquery获取的div" + $div);
        })

    </script>
</head>
<body>
    <div id="div1">hello world</div>
</body>
</html>

jquery选择器

选择某个网页元素，然后对它进行某种操作

jquery选择器
jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。

$('#myId') //选择id为myId的网页元素
$('.myClass') // 选择class为myClass的元素
$('li') //选择所有的li元素
$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素
$('input[name=first]') // 选择name属性等于first的input元素

对选择集进行过滤

$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').eq(5); //选择第6个div元素

选择集转移

$('#box').prev(); //选择id是box的元素前面紧挨的同辈元素
$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素
$('#box').next(); //选择id是box的元素后面紧挨的同辈元素
$('#box').nextAll(); //选择id是box的元素后面所有的同辈元素
$('#box').parent(); //选择id是box的元素的父元素
$('#box').children(); //选择id是box的元素的所有子元素
$('#box').siblings(); //选择id是box的元素的同级元素
$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素

判断是否选择到了元素
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>

    <script>
        $(function(){
            // 选择元素
            var $div = $("#div1");
            var $div2 = $(".box");
            var $li = $("li");
            var $span = $('.box span');
            var $div3 = $("div[class='box2']");
            var $div4 = $("div").has("span");
            var $div5 = $("div").not(".box");
            var $li2 = $("li").eq(2);


            // 设置样式
            $div.css({'color':'red', 'font-size': '100px'});
            $div2.css({'color':'green', 'font-size': 40});
            $li.css({'background':'gold'});
            $span.css({"color": 'blue'});
            $div3.css({'font-size':30, 'color':'pink'});
            $div4.css({"text-indent":50});
            $div5.css({"text-decoration":"underline"});
            $li2.css({"list-style":"none", "text-indent":40});

        })
    </script>
</head>
<body>
    <div id="div1">hello world</div>
    <div class="box">绿了 变强了<span>&nbsp;要坚强</span></div>
    <div class="box">秃了 变强了</div>
    <div class="box2">打工是不可能打工的</div>


    <ul>
        <li>礼拜文字</li>
        <li>礼拜文字</li>
        <li>礼拜文字</li>
        <li>礼拜文字</li>
        <li>礼拜文字</li>
        <li>礼拜文字</li>
        <li>礼拜文字</li>
        <li>礼拜文字</li>
    </ul>
</body>
</html>

jquery选择及转移

选择及转移
prev()上一个
prevAll() 所有上一个
next() 后面的
nextALL()所有后面的
parent()父级
children()子级

siblings() 反选
find() 查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $("#div1");

            $div.prev() // 上面一个兄弟节点

            $div.prev().css({"color":'green'});

            $div.prevAll().css({"text-indent":40});

            $div.next().css({"color":'blue'});
            $div.nextAll().css({"text-decoration":"underline"});

            $div.parent().css({"background":"#add"});
            $div.children().css({"color":'red','font-size':100});

            $div.siblings().css({"background":"gold"});


            // 字体加粗
            $div.find(".sp02").css({'font-weight':10000});

        })
    </script>
</head>
<body>
    <div>
        <h2>hhhhhhhhhhhh2</h2>
        <p>ppppppppp1</p>
        <div id="div1">div1<span>span<span class="sp02">&nbsp;span2</span></div>
        <h3>hhhh3</h3>
        <p>pppppppppp2</p>
    </div>
</body>
</html>

jquery操作元素样式

同一个函数完成取值和赋值
特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如： $(“div”).css(“width”)，获取的是第一个div的width。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $div = $("#div1");

            // 读取样式属性值
            var sSize = $div.css('font-size');

            alert(sSize);

            // 元素方法获取文字大小
            // var div1 = document.getElementById("div1");

            // alert(div1.style.fontSize);

            // 写样式属性 也叫做设置 修改样式属性
            $div.css({'color':'red'});
            $div.css({"font-size":30, 'background':'gold'});


            // 获取多个元素的属性值 得到的是第一个样式
            var $div2 = $("div");
            var sSize3 = $div2.css('font-size');

            alert(sSize3);

        })
    </script>
</head>
<body>
    <div id="div1" style="font-size: 16px">妈卖批</div>
    <div>second</div>
</body>
</html>

jquery 操作样式类名

选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。

操作样式类名

$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .big{
            font-size: 30px;
        }

        .red{
            color: red;
        }

        .online{
            text-decoration: none;
        }

    </style>
    <script src="./js/jquery-1.12.4.min.js"></script>

    <script>
        $(function(){
            var $a = $("#link01");

            $a.addClass("big");
            $a.addClass("red");
            $a.addClass("online");


            $a.remove("big");

          })
    </script>
</head>
<body>
    <a href="#" id="link01">这是一个链接</a>
</body>
</html>

绑定click事件

给元素绑定click事件，可以用如下方法：

$('#btn1').click(function(){

    // 内部的this指的是原生对象

    // 使用jquery对象用 $(this)

})

获取元素的索引值
有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            var $li = $(".list li");
            var $p = $('p');

            // 绑定click事件
            $li.click(function () { 
                // this 指的是当前发生点击事件的那个对象;
                // this 它是原生对象

                this.style.background = 'gold';

                // $(this) 指的是当前发生点击事件的jquery对象
                $(this).css({"background":"red"});
                // alert("ok");

                // 获取元素的索引值
                alert($(this).index());
             })
             $p.click(function () { 
                 alert($(this).index())
              })
        })
    </script>
</head>
<body>
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>

        <div>
            <p>这是第二个p标签</p>
        </div>
    </ul>
</body>
</html>

jqury制作动画

通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。

/*
    animate参数：
    参数一：要改变的样式属性值，写成字典的形式
    参数二：动画持续的时间，单位为毫秒，一般不写单位
    参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动
    参数四：动画回调函数，动画完成后执行的匿名函数

*/

$('#div1').animate({
    width:300,
    height:300
},1000,'swing',function(){
    alert('done!');
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background: gold;
        }
    </style>

    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () { 
            var $btn = $("#btn");
            var $div = $(".box");


            // 绑定点击事件
            $btn.click(function(){
                // $div.css({'width':1000})
                $div.animate({"width":1000}, 1000, function(){
                    $div.animate({"margin-top":300}, 1000, function () { 
                        $div.animate({"width":200, "margin-top":0}, 1000)
                     })
                })
            })
         })
    </script>
</head>
<body>
    <input type="button" value="动画" id="btn">
    <div class="box">

    </div>
</body>
</html>

练习 选项卡制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .tab_con{
            width:500px;
            height:350px;
            margin:50px auto 0;
        }
        .tab_btns{
            height:50px;
        }
        .tab_btns input{
            width:100px;
            height:50px;
            background:#ddd;
            border:0px;
            outline:none;
        }

        .tab_btns .active{
            background:gold;
        }

        .tab_cons{
            height:300px;
            background:gold;
        }

        .tab_cons div{
            height:300px;
            line-height:300px;
            text-align:center;
            display:none;
            font-size:30px;
        }

        .tab_cons .current{
            display:block;
        }
    </style>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () { 
            var $btn = $(".tab_btns input");
            var $div = $(".tab_cons div");

            $btn.click(function () { 
                $(this).addClass('active').siblings().removeClass("active");


                // alert($(this).index());



                $div.eq($(this).index()).addClass("current").siblings().removeClass("current");
             })
         })
    </script>
</head>

<body>
    <div class="tab_con">
        <div class="tab_btns">
            <input type="button" value="按钮一" class="active">
            <input type="button" value="按钮二">
            <input type="button" value="按钮三">
        </div>
        <div class="tab_cons">
            <div class="current">按钮一对应的内容</div>
            <div>按钮二对应的内容</div>
            <div>按钮三对应的内容</div>
        </div>
    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/troysps/article/details/80318014
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022