Web前端——JQuery的进阶（动态的显示某个div控件,选择器的构建）

最新推荐文章于 2021-06-11 11:54:09 发布
最新推荐文章于 2021-06-11 11:54:09 发布
阅读量642 收藏
点赞数
分类专栏： web前端 文章标签： jquery web前端 控件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuye520com/article/details/48311571
版权

     案例1：

     预备知识：

     display：block, none, table-row   隐藏以后不占空间

     visibility:  visible, hidden                隐藏以后还占空间

     需求描述：动态的显示某个div控件。相关代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style type="text/css">

    #info{

    width:500px;

    height:500px;

    background-color:red;

    display:none;

}

</style>

<script type="text/javascript" src="../jslib/jquery-1.11.1.min.js"></script>

<script type="text/javascript">

    $(function(){

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

            $("#info").show(2000);

        });

    });

</script>

<title>无标题文档</title>

</head>

<body>

    <input type="button" id="btn" value="测试"/>

    <div id="info" ></div>

</body>

</html>

      案例2： 

      需求描述：多选框的详细分析。相关代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>jQuerydemo</title>

    <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#checkedall").click(function () {

                var flag = this.checked;

                $(":checkbox[name='items']").attr("checked", flag);

            });



            $(":checkbox[name='items']").click(function () {

                $("#checkedall").attr(

                "checked", $(":checkbox[name='items']").length == $(":checkbox[name='items']:checked").length)

            });

        });

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <input type="checkbox" id="checkedall" />全选/全不选

        <br /><input type="checkbox" name="items" value="football" />足球

        <input type="checkbox" name="items" value="basketball" />篮球

        <input type="checkbox" name="items" value="badminton" />羽毛球

    </div>

    </form>

</body>

</html>

     案例3：

     需求描述：JQuery对象与Dom对象的区别和联系。相关代码：

<!DOCTYPE html>



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>

    <script type="text/javascript">

        //$(function () {}) 相当于window.onload

        $(function () {

            $("button").click(function () {

                alert("hello world");

                var $btn = $("button");   //jquery是一个数组对象，把所有button控件构造数组

                alert($btn.length);       //弹框为2，说明有两个button

                alert($btn[0].firstChild.nodeValue);    //第一个的value   ，$btn[0].innerText方法不止一种

                var btn = document.getElementById("btn2");  //Dom对象

                alert("--" + $(btn).text());          //Dom对象转为JQuery对象只需加$()

            });

        });

</script>

    <title>默认页面02</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <button>ClickMe</button>

        <br />

        <button id="btn2">CLickMe2</button>

    </div>

    </form>

</body>

</html>

     案例4：

     需求描述：JQuery选择器的应用。相关代码：

<script type="text/javascript">

    $(function () {

    //1. 使用 id 选择器选择 id=btn1 的元素: $("#btn1")

    //2. 为选择的 jQuery 对象添加 onclick 响应函数:

    // $("#btn1").click(function(){}), 响应函数的代码

    //写在 function(){} 的中括号中.

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

             $("#one").css("background", "#ffbbaa");

         });



         $("#btn2").click(function () {

             $(".mini").css("background", "#ffbbaa");

         });

         $("#btn3").click(function () {

             $("div").css("background", "#ffbbaa");

         });

         $("#btn4").click(function () {

             $("*").css("background", "#ffbbaa");

         });

         $("#btn5").click(function () {

             $("span,#two").css("background", "#ffbbaa");

         });

    })

</script>

 案例5：

 需求描述：JQuery选择器的应用。相关代码：

<script type="text/javascript">

    $(function () {

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

            $("body div").css("background", "#ffbbaa");   //选择 body 内的所有 div 元素

        });

        $("#btn2").click(function () {

            $("body > div").css("background", "#ffbbaa"); //在 body 内, 选择子元素是 div 的

        });

        $("#btn3").click(function () {

            $("#one + div").css("background", "#ffbbaa"); //选择 id 为 one 的下一个 div 元素

        });



        $("#btn4").click(function () {

            $("#two ~ div").css("background", "#ffbbaa"); //选择 id 为 two 的元素后面的所有 div 兄弟元素

        });

        $("#btn5").click(function () {

            $("#two").siblings("div").css("background", "#ffbbaa");//选择 id 为 two 的元素所有 div 兄弟元素

        });

        $("#btn6").click(function () {

            //以下选择器选择的是近邻 #one 的 span 元素, 若该span

            //和 #one 不相邻, 选择器无效.

            //$("#one + span").css("background", "#ffbbaa");

            $("#one").nextAll("span:first").css("background", "#ffbbaa");//选择 id 为 one 的下一个 span 元素

        });

        $("#btn7").click(function () {

            $("#two").prevAll("div").css("background", "#ffbbaa");//选择 id 为 two 的元素前边的所有的 div 兄弟元素

        });

    }) 
</script>

 案例6：

 需求描述：JQuery表单选择器的应用。相关代码：  这个部分比较重要

<script type="text/javascript" src="../scripts/jquery-1.7.2.js"></script>

<script type="text/javascript">

    $(function () {

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

            //使所有的可用的单行文本框的 value 值变为晨晨

            alert($(":text:enabled").val());            //弹出框是符合条件第一个文本框中的值  

            // $(":text:enabled").each(function () {

            //         alert(this.value);                 //这样是全部显示，都会弹出框的

            // });

            $(":text:enabled").val("晨晨");            //改变的是符合条件所有文本框中的值

        });

        $("#btn2").click(function () {

            alert($(":text:disabled").val());            //弹出框是符合条件第一个文本框中的值

            $(":text:disabled").val("www.baidu.com");        //改变的是符合条件所有文本框中的值

        });

        $("#btn3").click(function () {

            var num =

            $(":checkbox[name='newsletter']:checked").length;

            alert(num);

        });



        $("#btn5").click(function () {

            //实际被选择的不是 select, 而是 select 的 option 子节点

            //所以要加一个空格.

            //var len = $("select :selected").length

            //alert(len);



            //因为 $("select :selected") 选择的是一个数组

            //当该数组中有多个元素时, 通过 .val() 方法就只能获取第一个被选择的值了.

            //alert($("select :selected").val());



            //jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在

            //得到的 DOM 对象, 而不是一个 jQuery 对象

            $("select :selected").each(function () {

                alert(this.value);

            });

        });



        $("#btn4").click(function () {

            $(":checkbox[name='newsletter']:checked").each(function () {

                alert(this.value);

            });

        });

    })

</script>

             

</head>

<body>

     <h3>表单对象属性过滤选择器</h3>

     <button id="btn1">对表单内可用input 赋值操作.</button>

     <button id="btn2">对表单内不可用input 赋值操作.</button><br /><br />

     <button id="btn3">获取多选框选中的个数.</button>

     <button id="btn4">获取多选框选中的内容.</button><br /><br />

     <button id="btn5">获取下拉框选中的内容.</button><br /><br />

               

     <form id="form1" action="#">                 

     可用元素: <input name="add" value="可用文本框1"/><br/>
     
     不可用元素: <input name="email" disabled="disabled" value="不可用文本框"/><br/>
     
     可用元素: <input name="che" value="可用文本框2"/><br/>
     
     不可用元素: <input name="name" disabled="disabled" value="不可用文本框"/><br/>

     <br/>

                    

     多选框: <br/>
     
     <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     
     <input type="checkbox" name="newsletter" value="test2" />test2
     
     <input type="checkbox" name="newsletter" value="test3" />test3
     
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     
     <input type="checkbox" name="newsletter" value="test5" />test5
     
                     
     
     <br/><br/>
     
     下拉列表1: <br/>
     
     <select name="test" multiple="multiple" style="height: 100px">
     
     <option>浙江</option>
     
     <option selected="selected">辽宁</option>
     
     <option>北京</option>
     
     <option selected="selected">天津</option>
     
     <option>广州</option>
     
     <option>湖北</option>
     
     </select>
     
                     
     
     <br/><br/>
     
     下拉列表2: <br/>
     
     <select name="test2">
     
     <option>浙江</option>
     
     <option>辽宁</option>
     
     <option selected="selected">北京</option>
     
     <option>天津</option>
     
     <option>广州</option>
     
     <option>湖北</option>
     
     </select>
     
     <textarea rows="" cols=""></textarea>
     
     </form>        

</body>

  共同进步。

shuye520com
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现各种动态显示隐藏div效果
01-10
JS实现各种动态显示隐藏div效果，包括卷动显示隐藏效果，渐变显示隐藏效果，大小缩放显示隐藏效果
jquery calendar.js日历选择控件带节日日历选择器
11-10
`jQuery Calendar.js`利用`jQuery`的这些特性，构建了一个高效且易于使用的日历选择器。开发者可以通过简单的API调用来集成此控件到他们的网页项目中，节省开发时间和精力。 在使用`jQuery Calendar.js`时，首先...
前端显示其他html,div在其他控件前端显示_html/css_WEB-ITnose
weixin_32012539的博客
06-11 147
教师查找后面搜索到的信息在div里面，下面的那个框是listbox控件，如何让div在listbox控件前端显示回复讨论(解决方案)你设置下2个的Z-INDEX试试。修改z-index不行啊，还有没有别的方法啊！你这是IE6？用 iframe 有点麻烦，用 jquery.bgiframe吧， 具体百度搜索下wan[img=http://wpa.qq.com/pa?p=1:79608028:1][/...
jQuery怎么输出选择器选择出来的$对象的html代码，包括自己
Ideality_hunter的专栏
05-11 5173
class="test">hello，你好！ $(".test").prop("outerHTML");
如何：在ASP.NET中使用动态控件
IT与开发人员的地盘
05-23 274
介绍 有时，在开发Web应用程序时，我们需要能够根据用户选择动态加载控件。 本文介绍了一个简单的场景，其中需要根据用户输入动态加载TextBox控件。 可以进一步扩展此简单示例，以动态加载自定义Web用户控件。 背景 请熟悉ASP.NET页面生命周期 。 至关重要的是，要理解这一周期以避免混乱的问题。 场景 为用户提供一个DropDownList，以便让他们选择要显示的TextBox的...
jQuery选择器的应用——控制特定DIV中的控件
weixin_30680385的博客
05-18 123
<div class="row"> <label for="FName" class="control-label col-sm-4">设备名称</label> <div class="col-sm-8"> <input type="tex...
jQuery实现判断控件是否显示的方法
10-20
在这个话题中，我们将深入探讨如何使用 jQuery 判断控件（如 div、按钮等页面元素）是否显示。这在动态网页中尤其重要，因为我们需要根据用户交互或特定条件来控制元素的可见性。 首先，jQuery 提供了一个方便的 `...
jquery网页日历显示控件calendar3.1使用详解
10-21
**jQuery网页日历显示控件Calendar 3.1详解** jQuery网页日历控件Calendar 3.1是一款轻量级且易于使用的插件，适用于在网页中添加日期选择功能或作为装饰性的日历展示。其设计目标是通过简洁的代码实现高效的功能，...
JQuery里面的几种选择器 查找满足条件的元素$(#控件ID)
12-08
jQuery完全支持CSS选择器，这意味着你可以使用类（class）选择器、属性选择器、伪类等来选取元素。例如，`$(".warning")`会选取所有类名为`warning`的元素。在提供的例子中，所有具有`.warning`类的元素（包括`<div...
jQuery使用选择器获取HTML元素
weixin_34324081的博客
06-12 536
<script>$(document).ready(function() {$("button").addClass("animated bounce");//例如，要让所有的button元素有弹回效果，只要把这段代码写在document ready});</script> <!-- Only change code above this line. --> ...
jQuery动态显示和隐藏div
zh0lian的博客
11-20 5705
html内容<div class="row form-group" id="user"> 你想展示的内容（） </div> <div class="row form-group" id="item"> 你想展示的内容 </div> <div class="row form-group" id="userd"> 单击div时显
前端显示音频控件
静如雪的博客
05-30 2675
<audio src="{$list_q.audio_url}" width=300 height=45 type=audio/mpeg controls volume="0"></audio> controls 显示控件
jquery 常用选择器和方法以及遍历（超详细）
zzvar的博客
05-29 3664
JavaScript入门学习总结一、JQuery 介绍1. 什么是 jQuery2. jQuery 版本介绍3. jQuery 文件介绍二、jQuery 对象1. jQuery 和 DOM 的区别2. jQuery 对象与 DOM 对象之间转换3. 自执行函数（三种）三、jQuery 对象常用方法1. 常用方法2. jQuery 常用 DOM 操作的方法5. jQuery 选择器3. 函数的定义函数语法函数的调用4.面向对象构造函数(类)定义创建对象和操作成员5.内置对象DateString6.数组数组的定
【前端】JS实现控件动态页面居中
bk120的博客
01-03 988
js代码如下： <script> // 初始触发 loadCenter($("#div_head")); // 弹窗位置改变触发 window.οnresize=function(){ loadCenter($("#div_head")); }; function loadCenter(el) { // 可...
网页中的动态控件和静态控件
Big Smile
07-31 2025
这个事件源于一个偶然，在小编开发一个网页上的类似计算器的网页的时候，出现了问题，就是想要做出来一个扩展键盘的效果，但是用asp.net的控件加上了Jqurey的动态效果之后，没有什么反应，用FireBug单步调试才出现了结果，原来就是因为ASP.net控件是可以向后台发消息的控件，发送消息了之后会刷新界面，所以用Jqurey做的效果就被掩盖了。 一、开始的思路
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值