02.Jquery语法上

最新推荐文章于 2024-09-08 12:54:53 发布

表哥说名字长比较帅

最新推荐文章于 2024-09-08 12:54:53 发布

阅读量327

点赞数

分类专栏： jq学习笔记

本文链接：https://blog.csdn.net/a478269761/article/details/78134409

版权

jq学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、jquery选择器

jquery用法思想一

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

jquery选择器

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 选择器</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $('#div1').css({color:'pink'});
            $('.box').css({fontSize:'30px'});
            $('.list li').css({background:'green',color:'#fff',fontSize:'20px'});

        });

    </script>

    <style type="text/css">

        #div1{
            color:red;
        }

        .box{
            color:green;
        }

        .list li{

            margin-bottom:10px;
        }




    </style>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <div class="box">这是第二个div元素</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
    </ul>
</body>
</html>

这里写图片描述

2、对选择集进行修饰过滤(类似CSS伪类)

$('#ul1 li:first') //选择id为ul1元素下的第一个li
$('#ul1 li:odd') //选择id为ul1元素下的li的奇数行
$('#ul1 li:eq(2)') //选择id为ul1元素下的第3个li
$('#ul1 li:gt(2)') // 选择id为ul1元素下的前三个之后的li
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素

3、对选择集进行函数过滤

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

4、选择集转移

$('div').prev('p'); //选择div元素前面的第一个p元素
$('div').next('p'); //选择div元素后面的第一个p元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            // next() 同级的下一个元素，nextAll同级的下面所有的元素

            // prev() 同级的上一个元素，prevAll同级的上面所有的元素
            $('#div1').next().css({color:'pink'});

            $('#div1').nextAll('p').css({color:'red'});

        })


    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <div>这是第二个div元素</div>
    <p>这是一个p元素</p>
</body>
</html>

这里写图片描述

$('div').closest('form'); //选择离div最近的那个form父元素

    //选择离最近的元素，元素可以是父级，可以是子集
    $('#span02').closest('div').css({width:'200px',height:'200px',background:'pink'});
    ...

    <div id="div2">
        <p>
            <a href="#" class="link1">腾讯网</a>
            <span id="span02">span元素</span>
        </p>
    </div>
    ...

这里写图片描述
$(‘div’).parent(); //选择div的父元素


    $(function(){

        //选择上一级的父元素
        $('#span01').parent()
        .css({width:'100px',height:'100px',background:'gold'});

    })

...

    <div>
        <a href="#">百度网</a>
        <span id="span01">span元素</span>
    </div>

...

这里写图片描述
$(‘div’).children(); //选择div的所有子元素

    // $('.list li')：不能回到父级
    // $('.list').children()：可以通过end() 回到父级
    $('.list').children().css({background:'gold',height:'30px',marginBottom:'10px'})
    .end().css({background:'green'});

    ...

    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    ...

这里写图片描述
$(‘div’).siblings(); //选择div的同级元素(兄弟元素，除了自己)

    $('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});

    ...

    <ul class="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    ...

这里写图片描述
$(‘div’).find(‘.myClass’); //选择div内的class等于myClass的元素

    $('#div2').find('.link1').css({color:'red'});

    ...

    <div id="div2">
        <p>
            <a href="#" class="link1">腾讯网</a>
            <span id="span02">span元素</span>
        </p>
    </div>

    ...

这里写图片描述

二、jquery样式操作

jquery用法思想二

同一个函数完成取值和赋值

操作行间样式

// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});

特别注意
选择器获取的多个元素，获取信息获取的是第一个，比如：$(“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样式

三、jquery属性操作

1、html() 取出或设置html内容

// 取出html内容

var $htm = $('#div1').html();

// 设置html内容

$('#div1').html('<span>添加文字</span>');

2、text() 取出或设置text内容

// 取出文本内容

var $htm = $('#div1').text();

// 设置文本内容

$('#div1').text('<span>添加文字</span>');

3、attr() 取出或设置某个属性的值

// 取出图片的地址

var $src = $('#img1').attr('src');

// 设置图片的地址和alt属性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

4、

// 读写checkbox的状态用prop方法

// alert($('#check').prop('checked'));

$('#check').prop({checked:true});

三、绑定click事件

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

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

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

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

})

点击切换样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>click 事件</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

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

                $('.box').toggleClass('sty');
            });

        })
    </script>
    <style type="text/css">
        .box{
            width:200px;
            height:200px;
            background-color:gold;
        }

        .sty{
            background-color:green;
        }


    </style>
</head>
<body>
    <input type="button" name="" value="切换" id="btn">
    <div class="box"></div>
</body>
</html>

点击获取索引

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            $('.list li').click(function() {

                //alert(this.innerHTML);

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

            });

        })



    </script>
</head>
<style type="text/css">
    .list li{
        height:30px;
        margin-bottom:20px;
        background-color: gold;

    }
</style>
<body>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

这里写图片描述

四、jquery特殊效果

fadeIn() 淡入

$btn.click(function(){

    $('#div1').fadeIn(1000,'swing',function(){
        alert('done!');
    });

});

fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">

        .box{
            width:200px;
            height:200px;
            background-color: gold;
        }

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

        $(function(){

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

                //淡入淡出

                $('.box').fadeToggle();

                // 显示和隐藏
                // $('.box').toggle();
                //依次展开或卷起某个元素
                // $('.box').slideToggle();

            });




        })

    </script>
</head>
<body>
    <input type="button" name="" value="效果" id="btn">
    <div class="box"></div>
</body>
</html>

五、jquery动画

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

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

参数可以写成数字表达式：

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery 动画</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            /*
             参数：
            1、属性设置{param1: value1, param2: value2}
            2、speed 时间 ms
            3、swing 默认值 开始和结束慢速，中间快速   linear 匀速
            4、回调函数
            */
            //长和宽在1秒内变成200后，1秒内向右移动500，然后1秒内向下移动500
            $('#div1').animate({width:200,height:200},1000,function(){
                //alert('动画完了！');
                $(this).animate({marginLeft:500},1000,function(){

                    $(this).animate({marginTop:500},1000);
                });             
            });



        })




    </script>
    <style type="text/css">
        .box{
            width:100px;
            height:100px;
            background-color: gold;
        }

    </style>
</head>
<body>
    <div id="div1" class="box"></div>
</body>
</html>

六、jquery循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            //$('.list li').html('111');
            //$('.list li').css({background:'gold'});
            //总共执行了8次，分被为每一个li做赋值
            $('.list li').each(function(index){
                //index 是索引值
                $(this).html(index);
            })
        })




    </script>
</head>
<body>
    <ul class="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

七、尺寸相关、滚动事件

1、获取和设置元素的尺寸

width()、height()    获取元素width和height  
innerWidth()、innerHeight()  包括padding的width和height  
outerWidth()、outerHeight()  包括padding和border的width和height  
outerWidth(true)、outerHeight(true)   包括padding和border以及margin的width和height

2、获取元素相对页面的绝对位置

offse()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素绝对位置</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){

            var $pos = $('.pos');
            var pos =$pos.offset();
            console.log(pos);//返回的是一个json,pos.left左边绝对距离。
            var w = $pos.outerWidth();
            var h = $pos.outerHeight();

            $('.pop').css({left:pos.left+w,top:pos.top});
            //鼠标移上去显示
            $pos.mouseover(function(){
                $('.pop').show();
            })

            $pos.mouseout(function(){
                $('.pop').hide();
            })

        })



    </script>
    <style type="text/css">


        .box{
            width:100px;
            height:100px;
            background-color:gold;
            margin-bottom:10px;
        }

        .pos{
            margin-left:500px;
        }

        .pop{
            width:100px;
            height:100px;
            background-color:red;
            position:fixed;
            left:0;
            top:0;
            display:none;

        }
    </style>
</head>
<body>

    <div class="box pos"></div>
    <div class="pop">
        提示信息！
    </div>

</body>
</html>

这里写图片描述
3、获取可视区高度

$(window).height();

4、获取页面高度

$(document).height();

5、获取页面滚动距离

$(document).scrollTop();  
$(document).scrollLeft();

6、页面滚动事件

$(window).scroll(function(){  
    ......  
})

表哥说名字长比较帅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录