侧边栏壁纸
博主头像
coydone博主等级

记录学习,分享生活的个人站点

  • 累计撰写 306 篇文章
  • 累计创建 51 个标签
  • 累计收到 0 条评论

目 录CONTENT

文章目录

JQuery属性操作

coydone
2022-02-02 / 0 评论 / 0 点赞 / 288 阅读 / 10,795 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-09,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

JQuery操作属性

jQuery属性操作(不传参数是获取,传递参数是设置)。

html():设置和获取起始标签和结束标签中的内容。 跟 dom 属性 innerHTML 一样。

text():设置和获取起始标签和结束标签中的文本。 跟 dom 属性 innerText 一样。

val():设置和获取表单项的 value 属性值。 跟 dom 属性 value 一样。val 方法同时设置多个表单项的选中状态。

<script type="text/javascript">
    $(function() {
        // 批量操作单选 $(":radio").val(["radio2"]); 
        // 批量操作筛选框的选中状态 $(":checkbox").val(["checkbox3","checkbox2"]); 
        // 批量操作多选的下拉框选中状态 $("#multiple").val(["mul2","mul3","mul4"]); 
        // 操作单选的下拉框选中状态 $("#single").val(["sin2"]); */
        $("#multiple,#single,:radio,:checkbox").val(["radio2", "checkbox1", "checkbox3", "mul1", "mul4", "sin3"]);
    });
</script>

attr():可以设置和获取属性的值,不推荐操作 checked、readOnly、selected、disabled 等。attr()方法还可以操作非标准的属性。比如自定义属性:abc、bbj。

prop():可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等。

案例:全选,全不选,反选

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            //给全选绑定单击事件
            $("#checkedAllBtn").click(function(){
                $(":checkbox").prop("checked",true);
            });
            //给全不选绑定单击事件
            $("#checkedNoBtn").click(function(){
                $(":checkbox").prop("checked",false);
            });
            //给全反选绑定单击事件
            $("#checkedRevBtn").click(function(){
                //查询所有的球类复选框
                $(":checkbox[name='items']").each(function(){
                    this.checked = !this.checked;
                });
                //检查是否满选
                //获取全部球类的个数
                var allCount = $(":checkbox[name='items']").length;
                //获取选中球类的个数
                var checkedCount = $(":checkbox[name='items']:checked").length;
                /*
                 if(allCount == checkedCount){
                     $("#checkedAllBox").prop('checked',true);
                 }else{
                     $("#checkedAllBox").prop('checked',false);
                 }*/
                $("#checkedAllBox").prop('checked',allCount == checkedCount);
            });
            //提交
            $("#sendBtn").click(function(){
                $(":checkbox[name='items']:checked").each(function(){
                    alert(this.value);
                });
            });
            //全选/全不选
            $("#checkedAllBox").click(function(){
                //在事件的function函数中,有一个this对象,这个this对象是当前正在响应事件的dom对象
                //alert(this.checked);
                $(":checkbox[name='items']").prop("checked",this.checked);
                 
            });
            //给全部球类绑定单击事件
            $(":checkbox[name='items']").click(function(){
                //检查是否满选
                //获取全部球类的个数
                var allCount = $(":checkbox[name='items']").length;
                //获取选中球类的个数
                var checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkedAllBox").prop('checked',allCount == checkedCount);
            });
        });
    </script>
</head>
<body>
    <form method="post" action=""> 
        你爱好的运动是?<input type="checkbox" id="checkedAllBox" />全选/全不选 <br /> 
        <input type="checkbox" name="items" value="足球" />足球 
        <input type="checkbox" name="items" value="篮球" />篮球 
        <input type="checkbox" name="items" value="羽毛球" />羽毛球 
        <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br /> 
        <input type="button" id="checkedAllBtn" value="全 选" /> 
        <input type="button" id="checkedNoBtn" value="全不选" /> 
        <input type="button" id="checkedRevBtn" value="反 选" /> 
        <input type="button" id="sendBtn" value="提 交" /> 
    </form>
</body>
</html>

DOM 的增删改

内部插入:

  • appendTo() a.appendTo(b) 把a插入到b子元素末尾,成为最后一个子元素。

  • prependTo() a.prependTo(b) 把a插到b所有子元素前面,成为第一个子元素。

外部插入:

  • insertAfter() a.insertAfter(b)得到 ba。

  • insertBefore() a.insertBefore(b) 得到 ab。

替换:

  • replaceWith() a.replaceWith(b) 用 b 替换掉 a。

  • replaceAll() a.replaceAll(b) 用 a 替换掉所有 b。

删除:

  • remove() a.remove(); 删除 a 标签。

  • empty() a.empty(); 清空 a 标签里的内容。

案例:从左到右,从右到左

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        select {
            width: 100px;
            height: 140px;
        }
         
        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js"></script>
    <script type="text/javascript"> 
        $(function(){
            //选中添加到右边
            $("button:eq(0)").click(function(){
                $("select[name=sel01] :selected").each(function(){
                    //alert(this);
                    $(this).appendTo("select[name=sel02]");
                });
            });
             
            //全部添加到右边
            $("button:eq(1)").click(function(){
                $("select[name=sel01] option").each(function(){
                    //alert(this);
                    $(this).appendTo("select[name=sel02]");
                });
            });
             
            //选中删除到左边
            $("button:eq(2)").click(function(){
                $("select[name=sel02] :selected").each(function(){
                    //alert(this);
                    $(this).appendTo("select[name=sel01]");
                });
            });
            //全部删除到左边
            $("button:eq(3)").click(function(){
                $("select[name=sel02] option").each(function(){
                    //alert(this);
                    $(this).appendTo("select[name=sel01]");
                });
            });
        });
    </script>
</head>
<body>
    <div id="left">
        <select multiple="multiple" name="sel01">
            <option value="opt01">选项1</option>
            <option value="opt02">选项2</option>
            <option value="opt03">选项3</option>
            <option value="opt04">选项4</option>
            <option value="opt05">选项5</option>
            <option value="opt06">选项6</option>
            <option value="opt07">选项7</option>
            <option value="opt08">选项8</option>
        </select>
         
        <button>选中添加到右边</button>
        <button>全部添加到右边</button>
    </div>
    <div id="rigth">
        <select multiple="multiple" name="sel02">
        </select>
        <button>选中删除到左边</button>
        <button>全部删除到左边</button>
    </div>
</body>
</html>

案例:动态添加、删除表格记录

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>动态添加、删除表格记录</title>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(function(){
        //删除用户的方法
        function delA(){
            //获取要删除员工的名字
            var name = $(this).parents("tr").find("td:eq(0)").text();
            //弹出一个确认框
            var flag = confirm("确认删除"+name+"吗?");
            if(flag){
                //删除当前a所在的tr
                $(this).parents("tr").remove();
            }
            //取消默认行为
            return false;
        }
        //删除用户
        //$("a").click(delA);
        $("a").live("click" , delA);
         
        //添加员工
        $("#addEmpButton").click(function(){
            //获取用户填写的内容
            var name = $("#empName").val();
            var email = $("#email").val();
            var salary = $("#salary").val();
            //创建tr
            /*
                 <tr>
                     <td>Tom</td>
                     <td>tom@tom.com</td>
                     <td>5000</td>
                     <td><a href="#">删除</a></td>
                 </tr>
            */
            $("<tr></tr>").append("<td>"+name+"</td>")
                          .append("<td>"+email+"</td>")
                          .append("<td>"+salary+"</td>")
                          .append("<td><a href='#'>删除</a></td>")
                          .appendTo("#employeeTable");
        });
    });
</script>
</head>
<body>
    <table id="employeeTable" border="1" cellpadding="1">
        <tr>
            <th>姓名</th>
            <th>邮箱</th>
            <th>工资</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="#">删除</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="#">删除</a></td>
        </tr>
    </table>
    <div id="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">姓名: </td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">邮箱: </td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">工资: </td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">提交</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

CSS 样式操作

  • addClass() 添加样式

  • removeClass() 删除样式

  • toggleClass() 有就删除,没有就添加样式。

  • offset() 获取和设置元素的坐标。

JQuery 动画

基本动画

  • show() 将隐藏的元素显示。

  • hide() 将可见的元素隐藏。

  • toggle() 可见就隐藏,不可见就显示。

以上动画方法都可以添加参数。 1、第一个参数是动画执行的时长,以毫秒为单位 2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)

淡入淡出动画

  • fadeIn() 淡入(慢慢可见)。

  • fadeOut() 淡出(慢慢消失)。

  • fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明,1 完成可见,0.5 半透明。

  • fadeToggle() 淡入/淡出 切换。

JQuery 事件操作

$( function(){} );window.onload = function(){} 的区别

触发时间

  • JQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。

  • 原生 js 的页面加载完成之后,除了要等浏览器内核解析完标签创建好 DOM 对象,还要等标签显示时需要的内容加载完成。

触发顺序

  • JQuery页面加载完成之后先执行

  • 原生JS的页面加载完成之后

执行次数

  • 原生JS的页面加载完成之后,只会执行最后一次的赋值函数。

  • JQuery的页面加载完成之后是全部把注册的 function 函数,依次顺序全部执行。

jQuery中其他的事件处理方法

  • click() 它可以绑定单击事件,以及触发单击事件

  • mouseover() 鼠标移入事件

  • mouseout() 鼠标移出事件

  • bind() 可以给元素一次性绑定一个或多个事件。

  • one() 使用上跟 bind 一样。但是 one 方法绑定的事件只会响应一次。

  • unbind() 跟 bind 方法相反的操作,解除事件的绑定。

  • live()也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出 来的也有效。

事件的冒泡

事件的冒泡:父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。

阻止事件冒泡:在子元素事件函数体内,return false; 可以阻止事件的冒泡传递。

JavaScript事件对象

事件对象,是封装有触发的事件信息的一个JavaScript对象。 我们重点关心的是怎么拿到这个 JavaScript的事件对象。以及使用。

获取JavaScript事件对象:

在给元素绑定事件的时候,在事件的function( event )参数列表中添加一个参数,这个参数名,我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。

1、原生JavaScript获取事件对象

window.onload = function () { 
    document.getElementById("areaDiv").onclick = function (event) { 
        console.log(event); 
    } 
}

2、JQuery 代码获取事件对象

$(function () { 
    $("#areaDiv").click(function (event) { 
        console.log(event); 
    }); 
});

3、使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。

$("#areaDiv").bind("mouseover mouseout",function (event) { 
    if (event.type == "mouseover") { 
        console.log("鼠标移入"); 
    } else if (event.type == "mouseout") { 
        console.log("鼠标移出"); 
    } 
});
0

评论区