Jquery 02

最新推荐文章于 2022-05-31 17:21:19 发布

Aary1990

最新推荐文章于 2022-05-31 17:21:19 发布

阅读量292

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Aary1990/article/details/81025341

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

筛选选择器

在一个选择器的结果中 , 筛选出我们需要的元素 !

基本筛选选择器熟悉

:first  :   匹配第一个元素
:last   :   匹配最后一个元素
:not(条件选择器) : 排除符合条件选择器的元素
:even   :   匹配偶数下标
:odd    :   匹配奇数下标
:eq(下标):    取出指定下标的对象
:gt(下标):    取出大于指定下标的元素 
:lt(下标):    取出小于指定下标的元素 


案例:
    //取出所有div元素的 第一个元素,更改文字的大小为 40px
    $("div:first").css({"font-size":"40px"});
    //取出所有div元素的 最会一个元素,更改文字的大小为 40px
    $("div:last").css({"font-size":"40px"});
    //取出所有的div元素, 排除class值为div1的元素, 修改文本颜色为#be3131
    $("div:not(.div1)").css({"color":"#be3131"});
    //取出所有的div元素, 偶数下标的更改边框颜色为红色,奇数下标的更改边框颜色为绿色
    $("div:even").css({"border":"1px solid #f00"});
    $("div:odd").css({"border":"1px solid #0f0"});  
    //取出所有的div元素, 并对下标为2的元素, 修改边框圆角3px
    $("div:eq(2)").css({"border-radius":"3px"});
    //取出所有的div元素, 下标大于3的,添加文本阴影效果, 阴影颜色为浅灰色 , 下标大于3的添加文本阴影效果, 阴影颜色为深灰色
    $("div:gt(3)").css({"text-shadow":"1px 1px 1px #ddd"});
    $("div:lt(3)").css({"text-shadow":"1px 1px 1px #666"});

内容筛选选择器了解

1.  筛选内容包含指定文字
    格式:
        :contains('包含的文本');
    案例:
        修改p元素中 包含'山'文字的元素,文本颜色为红色

        <p>从前有座山</p>
        <p>山上有座庙</p>
        <p>庙里有个老和尚</p>
        <p>老和尚对小和尚说</p>
        <p>从前有座山...</p>
        <script>
            $("p:contains('山')").css({"color":"red"});
        </script>

2.  筛选内容为空
    格式:
        :empty

    案例:
        修改p元素中, 文本内容为空的元素的文本内容为: 哈哈哈哈哈哈

        $("p:empty").html("哈哈哈哈哈哈");

可见性筛选选择器了解

:visible    :   筛选出可见的元素
:hidden     :   筛选出不可见的元素

        不可见元素:
            -   宽度/高度为0
            -   display:none
            -   input的type属性为hidden

案例(修改昵称):
    <style type="text/css">
        .nickname{
            display: inline-block;
            width:200px;
        }
    </style>
    <script type="text/javascript">
        function x1(){
            //取出span中的内容
            var text = $("span.nickname").get(0).innerHTML;
            //将span 中的内容, 设置给input标签
            $("input.nickname").get(0).value=text;
            show();
        }
        function x2(){
            //取出输入框中的内容
            var text = $("input.nickname").get(0).value;
            //将输入框中的内容 设置到span上
            $("span.nickname").get(0).innerHTML = text;

            show();
        }
        //将显示的隐藏掉, 将隐藏的显示出来
        function show(){
            var $visible = $("tr:visible");
            var $hidden = $("tr:hidden");
            $visible.css({"display":"none"});
            $hidden.css({"display":"block"});
        }

        /* function show(){
            $("tr:visible").css({"display":"none"});
            $("tr:hidden").css({"display":"block"});
        } */
    </script>
    </head>
    <body>
        <table id="content">
            <tr><td><span class="nickname">哈哈哈哈哈</span></td><td><button onclick="x1()">修改昵称</button></td></tr>
            <tr style="display:none"><td><input class="nickname"></td><td><button onclick="x2()">保存昵称</button></td></tr>
        </table>

表单筛选选择器了解

筛选input标签的 type属性:

格式:
    :type属性值

例如:
    筛选所有的密码框: 
        $(":password")

    筛选所有的单选框:
        $(":radio");

案例:
    修改所有的文本输入框的颜色为: 绿色
    $(":text").css({"color":"#0f0"});

属性筛选选择器了解

-   属性是否存在
    格式:   
        $("选择器[属性名]");
    例如:
        查找所有拥有title属性的div:
        $("div[title]");

-   选择属性匹配指定值的元素
    格式:   
        $("选择器[属性名='值']");
    例如:
        查找src属性为images/1.jpg的img标签
        $("img[src='images/1.jpg']");

-   选择属性不匹配指定值的元素
    格式:   
        $("选择器[属性名!='值']");
    例如:
        查找src属性不为images/1.jpg的img标签
        $("img[src!='images/1.jpg']");

Jquery常用函数

样式函数 *****

CSS函数, 用于修改元素的style属性 , 

格式1.    
    用于指定单个样式
    $obj.css("key","value");
格式2.
    用于指定一组样式
    $obj.css(json对象);//在JSON对象中, 使用键值对描述样式

元素内容 *

在JS中, 我们可以通过dom对象的innerHTML属性, 来设置与获取元素的文本内容 !

在Jquery中, 可以通过如下两个方法,  来获取内容: 

    -   方式1.    var text = $obj.html();//获取元素文档内容
    -   方式2.    var text = $obj.text();//获取元素文本内容

通过如下方式, 设置文本内容:
    $obj.html(要设置的内容);

案例:
    <div>
        <h3>静夜思</h3>
        <p>床前明月光</p>
    </div>
    结果:
    html函数:<h3>静夜思</h3>
            <p>床前明月光</p>

    text函数:静夜思
            床前明月光

属性值的获取|修改 *****

在js中, 我们通过(dom对象.属性名 = 值)的方式,来给属性赋值

在Jquery中, 可以通过如下方式获取与修改属性值:

    格式1.    设置与获取单个属性值
        设置属性:   $obj.attr("属性名","属性值")
        获取属性:   var 变量名 = $obj.attr("属性名");

    格式2.
        设置一组属性:
        $obj.attr(JSON对象);//在JSON对象中, 通过键值对描述一个个的属性名与值!

案例(音乐播放器):
        <style type="text/css">
            #title{
            }
            #title,#content{
                width:600px;
                text-align: center;
                margin: 0 auto;
            }
            .btn{
                display: inline-block;
                padding: 20px 10px;
                border-radius: 3px;
                margin: 20px;
            }
            .btn:hover{
                color:#f00;
                cursor: pointer;
            }

            .img{
                background-image: url("images/5.gif");
                width:300px;
                height:300px;
                background-size:100% 100%;
                margin: 50px auto;
            }
            .controls{
                background-color: #f1f3f4;
            }
        </style>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript">
            var arrPath =["mp3/wdw.mp3","mp3/thz.mp3","mp3/xhqg.mp3","mp3/xardg.mp3","mp3/fxsn.mp3","mp3/qfl.mp3",
                "mp3/neq.mp3","mp3/yssa.mp3","mp3/zdqc.mp3","mp3/zmdqd.mp3"]; 
            var arrName =["蔡依林 - 我对我","陈一发儿 - 童话镇","刀郎 - 西海情歌","范炜与程渤智 - 西安人的歌",
                "冯提莫 - 佛系少女","买辣椒也用券 - 起风了","特曼 - 女儿情（Cover：林俊杰）",
                "杨子 - 一生所爱","叶洛洛 - 纸短情长","周笔畅 - 最美的期待"]; 
            var index = 0;
            function change(i){
                index+=i;
                if(index==-1){
                    index=arrPath.length-1;
                }else if(index==arrPath.length){
                    index=0;
                }
                $("#title").html(arrName[index]);
                $("audio").attr("src",arrPath[index]);

            }
        </script>
        </head>
        <body>
            <div id="title">
                蔡依林 - 我对我 
            </div>
            <div id="content">
                <div class="img"></div>
                <div class="controls">
                    <span class="btn" onclick="change(-1)">上一首</span>
                    <audio src="mp3/wdw.mp3" controls="controls" autoplay="autoplay"></audio>
                    <span class="btn" onclick="change(1)">下一首</span>
                </div>
            </div>
        </body>

设置元素的class属性值 *

在JS中, 我们无法通过 dom对象.class 的方式 修改与获取元素的class属性值 !

在Jquery中, 操作class属性, 也不可以通过调用attr函数, 传入class来完成,  需要通过如下函数:

    -   添加class
        -   $obj.addClass("值");
    -   删除class
        -   $obj.removeClass("值");
    -   切换class
            (多次执行相同代码 指的是, 在原有class属性值与新的值之间进行切换)
        -   $obj.toggleClass("新的值");


案例 (夜间模式)

    function x1(){
        if(!flag){
            $("#ximg").attr({
                "src":"images/2.png",
                "title":"开灯"
            });
        }else{
            $("#ximg").attr({
                "src":"images/1.png",
                "title":"关灯"
            });
        }
        flag = !flag;
        $("body").toggleClass("content2");
    }

设置元素的宽度和元素的高度 ***

-   设置宽度
    $obj.width(数值);
-   获取宽度
    var width = $obj.width();

-   设置高度
    $obj.height(数值);
-   获取高度
    var height = $obj.height();

获取元素宽度和高度 (盒模型) 了解

获取宽度:
    var width = $obj.width();
获取宽度+左右内边距宽度:
    var width = $obj.innerWidth();
获取宽度+左右内边距宽度+左右边框宽度:
    var width = $obj.outerWidth();
获取宽度+左右内边距宽度+左右边框宽度+左右外边距宽度:    
    var width = $obj.outerWidth(true);

获取高度:
    var height = $obj.height();
获取高度+上下内边距高度:
    var height = $obj.innerHeight();
获取高度+上下内边距高度+上下边框高度:
    var height = $obj.outerHeight();
获取高度+上下内边距高度+上下边框高度+上下外边距高度:    
    var height = $obj.outerHeight(true);

显示隐藏函数 *

-   基本显示隐藏效果
    显示: $obj.show();
    隐藏: $obj.hide();
    切换: $obj.toggle();

-   左上折叠显示隐藏效果
    显示: $obj.show(持续时长 毫秒);
    隐藏: $obj.hide(持续时长 毫秒);
    切换: $obj.toggle(持续时长 毫秒);

-   上下折叠显示隐藏效果
    显示: $obj.slidDown(持续时长 毫秒);
    隐藏: $obj.slideUp(持续时长 毫秒);
    切换: $obj.slideToggle(持续时长 毫秒);

-   淡入淡出显示隐藏效果
    显示: $obj.fadeIn(持续时长 毫秒);
    隐藏: $obj.fadeOut(持续时长 毫秒);


案例:

    <script type="text/javascript">
        function showx(){
            $("img").show();
        }
        function hidex(){
            $("img").hide();
        }
        function togglex(){
            $("img").toggle();
        }
    </script>
    </head>
    <body>
        <p><button onclick="showx()">显示</button><button onclick="hidex()">隐藏</button><button onclick="togglex()">切换</button></p>
        <img src="images/3.jpg">
    </body>

动画函数熟悉

格式:

    $obj.animate(参数1,参数2,[参数3]);

        参数1.    JSON对象, 用来描述动画执行完毕样式 !
        参数2.    从当前样式,到参数1样式的时长(毫秒)
        参数3.    可选参数, function类型 , 当动画执行完毕后 自动调用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content{
position: fixed;
left: -200px;
top:300px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
$("#content").animate({"left":"584px"},2000,x1);

});
var x1 = function(){
$("#content").animate({"left":"333px","font-size":"100px"},
1000,x2);
}
var x2 = function(){
$("#content").animate({"left":"584px","font-size":"16px"},
1000,x1);
}
</script>

</head>
<body>

<div id="content">
FUCK A DJ!
</div>
</body>
</html>

Aary1990

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 02

筛选选择器在一个选择器的结果中 , 筛选出我们需要的元素 !基本筛选选择器熟悉:first : 匹配第一个元素:last : 匹配最后一个元素:not(条件选择器) : 排除符合条件选择器的元素:even : 匹配偶数下标:odd : 匹配奇数下标:eq(下标): 取出指定下标的对象:gt(下标): 取出大于指定下标的元素 :lt(下...
复制链接

扫一扫