jQuery基础知识笔记（四）

其他 2020-04-07 18:13:18 阅读次数: 0

1.jQuery中创建元素及追加元素
DOM中可以动态创建元素：document.createElemet(“标签的名字”)；
jQuery中同样可以创建元素标签，并且返回的就是jQuery对象，可以直接调用方法进行使用。

案例1

  • append方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾（儿子）
  • prepend，在元素的开始添加元素（第一个子节点）。增加元素开始（儿子）
  • afte，在元素之后添加元素（添加兄弟）增加元素后面（兄弟）
  • before，在元素之前添加元素（添加兄弟）增加元素前面
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
（div）

<input type="button" value="创建元素" id="btn"/>
<div id="dv"></div>

(jq)

$(function () {
            var i=0;
            $("#btn").click(function () {
                i++;
                //创建元素
                var aObj=$("<a href='http://www.baidu.com'>百度"+i+"</a>");
                //把元素添加到div中
                //1.把超链接追加到div中
                $("#dv").append(aObj);
                //2.把元素插入到某个元素的前面
                $("#dv").prepend(aObj);
                //3.把元素添加到当前元素的后面(兄弟元素来添加)
                $("#dv").after(aObj);
                //4.把元素添加到当前元素的前面(兄弟元素来添加)
                $("#dv").before(aObj);

            });
        });

案例2

点击按钮把第一个div中的元素添加到第二个div中
在这里插入图片描述在这里插入图片描述
（div）

<input type="button" value="显示效果" id="btn"/>
<div id="dv1">
    <p>这是一个p</p>
</div>
<div id="dv2"></div>

(jq)

 $(function () {
            $("#btn").click(function () {
                //append方法把元素添加到另一个元素中的时候,有点剪切的效果
               $("#dv2").append($("#dv1>p"));
            });
        });

案例3

权限选择（把两个div的元素来回移动）
在这里插入图片描述
（div）
multiple的理解参考input标签multiple属性用法简介

<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>

（jq）
selected 属性规定在页面加载时预先选定该选项。

$(function () {
            //第一个按钮:获取按钮添加点击事件,获取第一个下拉框中被选中的option添加到第二个下拉框
            $("#toRight").click(function () {
                $("#se2").append($("#se1>option:selected"));
            });
            //第二个按钮
            $("#toLeft").click(function () {
                $("#se1").append($("#se2>option:selected"));
            });
            //第三个按钮
            $("#toAllRight").click(function () {
                $("#se2").append($("#se1>option"));
            });
            //第四个按钮
            $("#toAllLeft").click(function () {
                $("#se1").append($("#se2>option"));
            });
        });

2…html方法

  • .html方法设置内容，返回的是当前的对象，如果不传入参数，获取的是标签中的内容
  • .text方法同上
  • 创建元素的方式：
    .html方法可以创建元素
    $(“html标签”)可以创建元素

案例1

点击按钮把一个p标签添加到一个div中
在这里插入图片描述
（div）

<input type="button" value="创建元素" id="btn"/>
<div id="dv"></div>

(jq)

        $(function () {
            $("#btn").click(function () {
                var pObj= $("<p></p>");
                pObj.text("哈哈哈");
                pObj.appendTo($("#dv"));
            });
        });

●●●●●●●●●●●案例2●●●●●●●●●●●●●

点击按钮动态创建表格
在这里插入图片描述
在这里插入图片描述
(css)

* {padding:0;margin:0;}
div {margin-left:100px;margin-top:50px;}
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;}

(div)

<input type="button" value="获取数据" id="btnCreate"/>
<div>
    <table>
        <thead>
        <tr>
            <th>名称</th>
            <th>说明</th>
        </tr>
        </thead>
        <tbody id="tbd">
        </tbody>
    </table>
</div>

(jq)
模拟从后台拿到的数据

        var datas = [
            {
                name: "1111",
                url: "#",
                type: "one"
            },
            {
                name: "2222",
                url: "#",
                type: "two"
            },
            {
                name: "3333",
                url: "#",
                type: "three"
            }];

方法一

 //页面加载后,点击按钮,遍历数组,获取数组中的元素内容,创建行和列,加入到表格中的tbody中
       $(function () {
           $("#btnCreate").click(function () {
               //遍历数组
               for(var i=0;i<datas.length;i++){
                   var obj=datas[i];//数组中的每一个对象
                   //创建行和列,加入到tbody中
                   $("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>"+
                     "<td>"+obj.type+"</td></tr>").appendTo($("#tbd"));
               }
           });
       });

方法二

$(function () {
            $("#btnCreate").click(function () {
                var arr=[];
                //遍历数组
                for(var i=0;i<datas.length;i++){
                    var obj=datas[i];//数组中的每一个对象
                    //创建行和列,加入到tbody中
                    arr.push("<tr><td><a href="+obj.url+">"+obj.name+"</a></td>      <td>"+obj.type+"</td></tr>");
                }
                $("#tbd").html(arr);
            });
        });

案例3

html;//清空元素中的内容,(括号内只有一对双引号时)
empty;//清空元素中的内容
remove;//移除元素自身—自杀,
clone;//克隆,复制了这个元素
在这里插入图片描述
（div）

<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果" id="btn2"/>
<div id="dv">
    <span>1234567890....</span>
</div>
<div id="dv2"></div>

(jq)

$(function () {
            //点击按钮清空div中内容
            $("#btn").click(function () {
                $("#dv").html("");//span消失
                $("#dv").empty();//span消失
                $("#dv").remove();//dv1都消失
            });
            $("#btn2").click(function () {
                var spanObj=$("#dv>span").clone();
                spanObj.css("fontSize","50px");
                $("#dv2").append(spanObj);
            });
        });

3.设置和获取表单的value
input标签：文本框，radio,select,textarea(文本域)，checkbox…常见的表单标签。都可以通过val方法获取和设置value的值

案例1

在这里插入图片描述
在这里插入图片描述
（div）

<input type="button" value="显示效果" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<input type="radio" value="man" name="sex" id="rad" />男
<input type="checkbox" value="1" id="ck" />吃饭
<input type="submit" value="提交" id="sm" />
<!--表单元素-->
<textarea name="" id="tt" cols="30" rows="10">
    哈哈....
</textarea>
<select id="se">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
    <option value="4">重庆</option>
    <option value="5">东京</option>
</select>

(jq)

$(function () {
            //点击按钮把所有的表单的value属性值全部显示出来
            $("#btn").click(function () {
                console.log($(this).val());//显示按钮的value属性值
                console.log($("#txt").val());//显示文本框的value属性值
                console.log($("#rad").val());//显示的单选框的value属性值
                console.log($("#ck").val());//显示的是复选框的value属性值
                console.log($("#sm").val());//显示的是提交按钮的value属性值
                //设置表单元素的value属性值
                $(this).val("这是一个按钮妞");
                $("#txt").val("我是一个开心的按钮");
                $("#rad").val("这是单选");
                $("#ck").val("兴趣来了");
                $("#sm").val("这是sm按钮");
                //获取文本域中的内容:1. .text()方法  2  .val()方法--推荐
                alert($("#tt").text());
                //点击按钮让下拉框中的 重庆选中
                $("#se").val(4);//可以改变某一项选中*****
            });
        });

案例2

点击按钮,在div中添加一个超链接,设置超链接的title属性和热点文字,地址
设置和获取系统属性值或者自定义属性
attr可以设置属性值，两个参数：1.属性名字，2.属性值
attr可以获取属性值，一个参数：1，属性名字
在这里插入图片描述

 $(function () {
            $("#btn").click(function () {
                //获取div,创建超链接
                var aObj=$("<a></a>");
                aObj.attr("title","wwwwwww");//鼠标停留在xxx上时显示
                aObj.attr("href","http://www.baidu.cn");
                aObj.text("xxxxxxx");
                $("#dv").append(aObj);
                console.log(aObj.attr("href"));//控制台打印出网址

            });
        });

案例3

全选和反选案例

  • prop可以真正的获取元素是否选中的状态prop(“checked”,false)；prop(“checked”)
  • 用.attr(“checked”)也可以

初级
在这里插入图片描述
(div)

<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>

（jq）

        $(function () {
            $("#btnAll").click(function () {
                $("#dv :checkbox").prop("checked",true);
            });
            $("#btnNoAll").click(function () {
                $("#dv :checkbox").prop("checked",false);
            });
        });

高级一点的

带全选的表格

先获取j_cbAll的这个复选框,注册点击事件,点击的时候让下面tbody中所有的复选框选中和不全选。让tbody中所有的复选框的选中状态和当前的这个全选的复选框的选中状态一致
在这里插入图片描述
（css）

* {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;}

(div)

<div class="wrap">
    <table>
        <thead>
        <tr>
            <th><input type="checkbox" id="j_cbAll" /></th>
            <th>name</th>
            <th>age</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td><input type="checkbox" /></td>
            <td>xx</td>
            <td>12</td>
        </tr>
        <tr>
            <td><input type="checkbox" /></td>
            <td>ss</td>
            <td>45</td>
        </tr>
        ...
        </tbody>
    </table>
</div>

(jq)

$(function () {
            $("#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);
                }
            });
        });

4.设置和获取元素的宽和高

  • 通过.css()方法写一个属性可以获取宽或者高，是字符串类型。如果获取后重新设置需要转换，麻烦
  • 用.width()和.height()获取的时候直接就是数字类型，直接设置数字或者“100px”就可以

案例1

点击放大
点击按钮,获取当前元素的宽和高,再次设置元素的宽和高,设置后元素的宽和高分别是原来的宽和高2倍
在这里插入图片描述
在这里插入图片描述
方法一
通过元素的css()方法可以获取元素的宽和高,但是都是字符串类型, parseInt字符串转整数类型

$(function () {
            $("#btn").click(function () {
                //获取元素的宽和高
                var width=parseInt($("#dv").css("width"))*2;
                var height=parseInt($("#dv").css("height"))*2;     
                //设置样式
               $("#dv").css("width",width+"px");
               $("#dv").css("height",height+"px");
            })
        });

方法二：
width();方法返回或设置匹配元素的宽度。
height();方法返回或设置匹配元素的高度。

$(function () {
            $("#btn").click(function () {
                //获取宽和高的属性值---->数字类型
                var width=$("#dv").width()*2;
                var height=$("#dv").height()*2;
                //设置元素的宽和高--->参数可以是数字也可以是字符串
                $("#dv").width(width);
                $("#dv").height(height);
            })
        });

案例2

位置操作
offset方法返回的是对象，并且，对象中有一个left和一个top,并且值是数字类型
设置的时候也可以没有px
设置的时候元素在设置前如果没有脱离文档流，设置的时候会自动进行脱离文档流，默认为relative
如果设置前有脱离文档流，那么设置的时候直接改变位置
点击图形改变位置
(css）

*{margin: 0;padding: 0;}
div{width: 200px;height: 100px;background-color: green;position: absolute;left:100px;top:50px;}

(div)

<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>

(jq)

 $(function () {
            $("#btn").click(function () {
                //获取left和top的值--->都是数字类型
                console.log($("#dv").offset().left);
                console.log($("#dv").offset().top);
                $("#dv").offset({"left":200,"top":200});//设置值
            });
        });

案例3

拖动滑动条，再点击屏幕显示卷曲出去的距离

  • scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。
    滚动条的水平位置指的是从其左侧滚动过的像素数。当滚动条位于最左侧时，位置是 0
  • scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
    scroll top offset 指的是滚动条相对于其顶部的偏移。
    如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。

在这里插入图片描述
在这里插入图片描述

<style>
        div{
            width: 2000px;
            height: 2000px;
        }
    </style>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $(document).click(function () {console.log($(this).scrollLeft()+"===="+$(this).scrollTop());
            });
        });
    </script>
</head>
<body>
<div></div>
</body>

☆☆☆☆案例4固定导航栏

在这里插入图片描述
在这里插入图片描述
(css）

* {margin: 0;padding: 0;}

(div)

<div class="top" style="height: 50px;background-color: #aaff69"></div>
<div class="nav" style="height: 100px;width: 1500px;background-color: #ff312e">滚动时这条到顶端就不动了</div>
<div class="main" style="height: 1000px;width: 1000px;background-color: #95a5ff;margin: 0 auto;">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    ...
</div>

(jq)
function文档加载后执行，所以有可能获取不到图片的高度
解决这一问题用$(window).load();
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

$(function () {
        $(window).scroll(function () {//滚动事件
            //如果滚动条滚上去的距离大于或者等于top的高度，就让nav停在顶端
            if($(document).scrollTop()>=$(".top").height()){
                //让nav停留在顶端就要让其脱离文档流
                //现在对nav进行设置
               // $(".nav").css("position","fixed","top",0);注意这里不能这样写，这样写的top值是相对于名为“top”的div的
                $(".nav").css("position","fixed").css("top",0);//要用链式编程
                //写到这里如果只写上面的部分，滚动条回滚的时候"top"div就不显示了
                $(".main").css("marginTop",$(".nav").height());//仔细看main中p标签中的数字，直接从1跳到6，解决这个bug
            }else{
                $(".nav").css("position","static");//解除脱离
                $(".main").css("marginTop",0);//如果不设置滚回的时候“main"上会有一个”nav“高度的空白
            }

        })
    })

5.事件绑定

元素绑定多个事件

案例1

鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框
在这里插入图片描述

  • 链式编程
$(function(){
           $("#btn").mouseover(function () {
               $(this).css("backgroundColor","red");
           }).mouseout(function () {
               $(this).css("backgroundColor","");
           }).click(function () {
               alert("我被点了");
           });
});
  • bind()方法可以为元素同时绑定多个事件
    bind()方法:第一个参数是事件名字,第二个参数是事件处理函数-匿名函数
    .bind({“事件”:function(){},“事件”:function(){}}）
$(function () {
            $("#btn").bind({"click":function(){
                alert("我被点了");
            },"mouseover":function(){
                $(this).css("backgroundColor","red");
            },"mouseout":function(){
                $(this).css("backgroundColor","");
            }});
        });

案例2

在这里插入图片描述
点1次
在这里插入图片描述
点n次
在这里插入图片描述
点p标签效果（之前有多少个p标签，弹出框弹出几次就）在这里插入图片描述

  • delegate: 参数:3个；1.要绑定事件的元素—p；
    2.要绑定的事件的名字—click；3.绑定事件的处理函数—匿名函数
 $(function () {
            //点击按钮通过bind方式为div中添加一个元素
            $("#btn").bind("click",function () {
                //创建一个p标签,添加到div中
                $("<p>这是一个p</p>").appendTo($("#dv"));
                //点击p标签弹出对话框用delegate--->绑定事件
                $("#dv").delegate("p","click",function () {
                    alert("我被点了");
                });
            });
        });

为按钮注册鼠标进入和离开的事件–绑定–bind

 $(function () {
           var i=0;
           $("#btn").bind("mouseover mouseout",function () {
               i++;
               console.log(i);
           });
       });

案例3

通过on为按钮绑定点击的事件,创建一个p标签加入到div中,通过on的方式为div中的p绑定点击事件

  • on方法： 两个参数:1事件的名字,2事件处理函数
    三个参数: 1,事件的名字, 2.要绑定事件的元素–p,3事件处理函数
    on是父级元素调用,目的:为子级元素去绑定事件
        $(function () {
            $("#btn").on("click",function () {
                //创建p添加到div中
                $("#dv").append($("<p>这是一个p</p>"));
                //为div中的p标签绑定事件
                $("#dv").on("click","p",function () {
                    alert("我被点了");
                });
            });
        });

jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别

❀绑定事件:

  • bind:
    绑定多个事件
    参数:{“事件的类型”:事件处理函数,…}

  • delegate
    参数:父级元素.delegate(“子级元素”,“事件类型”,事件处理函数)
    delegate方法内部也是调用的on方法来绑定事件的

  • on
    参数:父级元素.on(“事件类型”,“子级元素”,事件处理函数);

青椒切小块
发布了38 篇原创文章 · 获赞 1 · 访问量 5154
私信 关注

猜你喜欢

转载自blog.csdn.net/ShangMY97/article/details/104946078
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
记一下去大梅沙的准备（2018-05-26）
Spring 注解 事务
基于HTTP协议的客户端缓存
阿里云rds 备份和还原
[PHP] 几个拖慢 PHP 程序/API 运行速度的点
python 代码风格------------PEP8规则
js控制json生成菜单——自制菜单（一）
将字符串: 'k:1|k1:2|k2:3|k3:4 ' ,处理成 python 字典: {'k':1, 'k1':2, ...}
微信小程序转支付宝小程序
Qt551.窗口滚动条
每日归档
更多
2024-05-13(18)
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)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022