jQuery 第二篇

其他 2018-11-01 22:31:18 阅读次数: 0

jQuery 第二篇##

操作元素样式的方式
css()设置元素的样式属性;
addClass()添加类样式,

//为dv添加cls和cls1样式属性
$('#dv').addClass('cls').addClass('cls1');
$('#dv').addClass('cls cls1');

removeClass();移除类样式,传入一个字符串,多个类名之间空格隔开

//不给参数表示移除dv的所有样式属性
$('#dv').removeClass();
//给参数表示移除dv的cls样式属性
$('#dv').removeClass('cls');

hasClass() 检测元素是否有该类属性样式

//检测是否有该类样式,返回布尔类型
var result=$('#dv').hasClass('cls');
console.log(result);

toggleClass();切换类样式,如果有就移除,没有就添加

$('#dv').toggleClass('cls');

链式编程
调用方法后,返回值依旧是当前对象自己,可以继续调
end()修复断链

$(function(){
$('#dv').click().mouseover().mouseout();
})

获取兄弟元素
next()获取下一个兄弟元素;
prev()获取上一个兄弟元素
nextAll()获取后面所有的兄弟元素
preAll()获取前面所有的兄弟元素
siblings()获取所有除了自己以外的其他兄弟元素

<ul id="uu">
    <li>红烧土豆</li>
    <li>清蒸豆腐</li>
    <li id='li'>油炸菠菜</li>
    <li>凉拌土豆丝</li>
    <li>西红柿番茄</li>
    <li>番茄西红柿</li>
</ul>
$('#li').next().css('backgroundColor','skyblue'); //获取的是凉拌土豆丝
$('#li').prev().css('backgroundColor','skyblue'); //获取的是清蒸豆腐
$('#li').prevAll().css('backgroundColor','skyblue'); //获取的是前面两个元素
$('#li').nextAll().css('backgroundColor','skyblue');//获取的是后面的三个li
$('#li').siblings().css('backgroundColor','skyblue'); //获取的是第1,2,4,5,6个li

获取兄弟元素案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }

        ul li {
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //鼠标经过让当前的元素的背景为绿色,元素前面的所有兄弟元素为pink,后面的所有兄弟元素为blue,
        //鼠标离开所有的li背景为空
        //鼠标点击当前的为黄色,前一个为blue,后一个兄弟元素为red
        $(function () {
            $('ul>li').mouseenter(function () {
                        $(this).css('backgroundColor', 'green')
                                .nextAll().css('backgroundColor', 'blue').end()
                                .prevAll().css('backgroundColor', 'pink');
                    }
            ).mouseleave(function () {
                        $(this).css('backgroundColor', '')
                                .siblings().css('backgroundColor', '');
                    }).click(function () {
                        $(this).css('backgroundColor', 'yellow')
                                .next().css('backgroundColor', 'red').end()
                                .prev().css('backgroundColor', 'blue');
                    }
            );
        });
    </script>
</head>
<body>
<ul>
    <li>青岛啤酒（TsingTao）</li>
    <li>瓦伦丁（Wurenbacher）</li>
    <li>雪花（SNOW）</li>
    <li>奥丁格教士（Franziskaner）</li>
    <li>科罗娜喜力柏龙（Paulaner）</li>
    <li>嘉士伯Kaiserdom</li>
    <li>罗斯福（Rochefort）</li>
    <li>粉象（Delirium）</li>
    <li>爱士堡（Eichbaum）</li>
    <li>哈尔滨牌蓝带</li>
</ul>
</body>
</html>

获取卷出去的距离
scrollTop() 不传入参数表示获取卷取的顶部的高度,传入参数表示设置
scrollLeft() 不传参数获取被卷去的左侧宽度,传入参数表示设置

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            width: 2000px;
            height: 6000px;
        }
    </style>
</head>
<body>
<script src="jquery-1.12.2.js"></script>
<script>
    $(function () {
        $(document).click(function () {
            console.log($(this).scrollTop());
            console.log($(this).scrollLeft());
        });
    });
</script>
</body>
</html>

获取元素的位置
offset() 不传入参数表示获取,返回值是一个对象
通过offset().top可以获取top值;
通过offset().left 可以获取left值
offset({‘left’:100,‘top’:100}); 表示设置left值为100 top值为100
获取元素的宽高
width() 不传参数表示获取宽度,传参表示设置宽度,不带单位number类型
height() 不传参数表示获取高度,传入表示设置高度,不带单位number类型
综合案例,固定导航栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>防腾讯固定导航栏</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1000px;
            margin: 0 auto;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(window).scroll(function () {
                if ($(document).scrollTop() >= $('.nav').height()) {
                    $('.nav').css({'position': 'fixed', 'top': 0});
                    $('.main').css('marginTop', 0);
                } else {
                    $('.nav').css('position', 'static');
                    $('.main').css('marginTop', 0);
                }
            });
        });
    </script>
</head>
<body>
<div class="top">
    <img src="images/top.png"/>
</div>
<div class="nav">
    <img src="images/nav.png"/>
</div>
<div class="main">
    <img src="images/main.png"/>
</div>
</body>
</html>

选择器
$(’:selected’) 获取所有被选择的元素.selected为true的元素
$(’:checked’) 获取所有被勾选的元素,checked为true的元素
$(’:disabled’) 获取所有被禁用的元素,disabled为true的元素
$(’:enabled’) 获取所有激活的元素,enabled为true的元素
$(’:checkbox’) 获取所有类型为checkbox的input元素
$(’:text’) 获取所有text的input元素
$(’:radio’) 获取所有类型为radio的input元素
操作元素的方法
创建元素对象
$(‘html代码’) html代码相当于在页面中添加了一个元素
添加元素对象
append() 在当前元素内部追加
prepend() 在当前元素从最前面插入
after() 作为兄弟元素添加到当前元素后面
before() 作为兄弟元素添加到当前元素前面
appendTo() 将自己追加到某个元素内部
empty() 清除元素内部的所有元素
html("") 清除元素内部的html内容
remove() 删除元素对象
clone() 克隆元素对象
val() 操作元素的value值,不传参表示获取,传入参数表示设置
attr() 操作元素自定义属性,不传参数表示获取,传参表示设置
prop() 操作元素固有属性 传参表示设置,不传参数表示获取
arguments.cellee() 当函数执行时,内部有一个arguments对象,封装了
一些线束的信息,其中cellee属性表示当前函数自身,如果想递归arguments.callee()

操作元素的代码篇

<!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>
        #dv{
          width: 400px;
          height: 400px;
          background-color:red;  
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function(){
            var i=0;
            $("#btn").click(function () {
                i++;
                //创建元素
                var btm=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
                // $('#dv').append(btm);  //将元素追加到dv的内部
                // $('#dv').prepend(btm);  //在当前元素最前面追加 (内部)
                // $('#dv').after(btm); //作为兄弟元素追加到元素的最前面
                $('#dv').before(btm); //作为兄弟元素添加到当前元素的最前面
            });
        });
    </script>
</head>
<body>
    <input type="button" value="添加" id="btn">
    <div id="dv"></div>
</body>
</html>

权限选择案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //给四个按钮分别注册鼠标点击事件
        $(function(){
            //点击第一个按钮让选中的option添加se2中
            $('#toRight').click(function(){
                $('#se2').append($('#se1>option:selected'));
            });
            //点击第二个按钮让选中的option添加到se1中
            $('#toLeft').click(function(){
                $('#se1').append($('#se2>option:selected'));
            });
            //点击第三个按钮让se1中的option全部添加se2中
            $('#toAllRight').click(function(){
                $('#se2').append($('#se1>option'));
            });
            //点击第四个按钮让se2中的option全部添加se1中
            $('#toAllLeft').click(function(){
                $('#se1').append($('#se2>option'));
            });
        });    
    </script>
</head>
<body>
<div style="margin-left: 500px; margin-top: 20px; background-color: #999999">
    <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se1">
        <option>添加</option>
        <option>删除</option>
        <option>修改</option>
        <option>查询</option>
        <option>打印</option>
    </select>
    <div style="width: 50px; float: left;">
        <input type="button" name="name" value=">" style="width: 50px;" id="toRight" />
        <input type="button" name="name" value="<" style="width: 50px;" id="toLeft" />
        <input type="button" name="name" value=">>" style="width: 50px;" id="toAllRight" />
        <input type="button" name="name" value="<<" style="width: 50px;" id="toAllLeft" />
    </div>
    <select multiple="multiple" style="float: left; width: 60px; height: 100px;" id="se2">
    </select>
</div>

</body>
</html>

动态添加表格

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {
            margin-left: 300px;
            margin-top: 100px;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        // 模拟从后台拿到的数据
        var datas = [
            {
                name: "百度知道",
                url: "http://www.baidu.com",
                type: "史上最强大的搜索引擎"
            },
            {
                name: "百度新闻",
                url: "http://www.baidu.com",
                type: "在家就可以看到世界"
            },
            {
                name: "百度地图",
                url: "http://www.baidu.com",
                type: "出行就用百度地图"
            }];
        $(function () {
            //动态创建列表,给按钮注册点击事件
            $('#btnCreate').click(function () {
                //创建一个空数组将新建的tr和td添加到数组中
                var arr = [];
                for (var i = 0; i < datas.length; i++) {
                    var obj = datas[i];
                    // console.log(obj); 
                    arr.push("<tr><td><a herf=" + obj.url + ">" + obj.name + "</a></td><td>" + obj.type + "</td></tr>")
                };
                // console.log(arr);
                // 将数组添加到tbody中
                $('#tbd').html(arr);
            });
        });
    </script>
</head>
<body>
    <input type="button" value="获取数据" id="btnCreate" />
    <div>
        <table>
            <thead>
                <tr>
                    <th>名称</th>
                    <th>说明</th>
                </tr>
            </thead>
            <tbody id="tbd">
            </tbody>
        </table>
    </div>
</body>
</html>

attr() text() 方法的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
            $("#btn").click(function () {
                //获取div,创建超链接
                var aObj=$("<a></a>");
                // attr();//可以写两个参数:1参数；属性,2属性值
                //attr();只写了一个参数,获取该元素的这个属性的值
                aObj.attr("title","最强百度");
                aObj.attr("href","http://www.baidu.com");
                aObj.text("百度");
                $("#dv").append(aObj);
                // console.log(aObj.attr("href"));
            });
        });
    </script>
</head>
<body>
<input type="button" value="设置超链接" id="btn"/>
<div id="dv"></div>
</body>
</html>

操作元素的固有属性 prop()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
       $(function(){
           //获取第一个按钮让所有的input为全选状态
            $("#btnAll").click(function () {
                $("#dv :checkbox").prop("checked",true);
            });
            //获取第二个按钮让所有的input为全不选状态
            $("#btnNoAll").click(function () {
                $("#dv :checkbox").prop("checked",false);
            });
        });
    </script>
</head>
<body>
<input type="button" value="全选" id="btnAll"/>
<input type="button" value="全不选" id="btnNoAll"/>
<div id="dv">
    <input type="checkbox" value="1"/>吃饭
    <input type="checkbox" value="2"/>睡觉
    <input type="checkbox" value="3"/>打豆豆
    <input type="checkbox" value="4"/>打篮球
    <input type="checkbox" value="5"/>打足球
    <input type="checkbox" value="6"/>打铅球
    <input type="checkbox" value="7"/>打桌球
</div>
</body>
</html>

全选反选案例 find() prpo()

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中和不全选
            //让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
            $("#j_cbAll").click(function () {
                var cked=$(this).prop("checked");//保存当前复选框的选中状态
                //获取tbody中所有的复选框
                $("#j_tb").find(":checkbox").prop("checked",cked);
            });
            //获取tbody中所有的复选框
            $("#j_tb").find(":checkbox").click(function () {
               //先获取tbody中所有的复选框的个数
                var length1=$("#j_tb").find(":checkbox").length;
                //再获取tbody中所有选中的复选框的个数
                var length2=$("#j_tb").find(":checked").length;
                //二者比较,如果相同,让最上面的复选框选中,否则不选中
                if(length1==length2){
                    //都选中了
                    $("#j_cbAll").prop("checked",true);
                }else{
                    //有没选中
                    $("#j_cbAll").prop("checked",false);
                }
            });
        });
    </script>
</head>

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll" />
            </th>
            <th>课程名称</th>
            <th>所属学院</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>JavaScript</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>css</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>html</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" />
            </td>
            <td>jQuery</td>
            <td>前端与移动开发学院</td>
        </tr>
        <!--<tr>
            <td><input type="checkbox"/></td>
            <td>HTML5</td>
            <td>前端与移动开发学院</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>CSS3</td>
            <td>前端与移动开发学院</td>
        </tr>-->
        </tbody>
    </table>
</div>
</body>

</html>

猜你喜欢

转载自blog.csdn.net/weixin_43072453/article/details/82343535
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022