Jquery 入门

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>
阅读更多
文章标签: jquery 前端
想对作者说点什么? 我来说一句

jQuery开发从入门到精通

2017年07月31日 134.87MB 下载

jquery入门到精通

2018年01月06日 2.9MB 下载

jQuery与JavaScript入门经典

2015年05月20日 5.6MB 下载

jQuery与JavaScript入门经典.pdf

2018年03月12日 5.48MB 下载

jquery入门jquery入门jquery入门

2011年05月14日 337KB 下载

jQuery入门jQuery入门

2011年04月26日 1.18MB 下载

没有更多推荐了,返回首页

不良信息举报

Jquery 入门

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭