JAVA-26.1-jQuery基础、派发事件、效果、选择器

最新推荐文章于 2022-05-16 14:41:09 发布
最新推荐文章于 2022-05-16 14:41:09 发布
阅读量456 收藏 2
点赞数
分类专栏： JAVA学习笔记 文章标签： jquery 派发事件 效果 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30718113/article/details/74367037
版权
一：jQuery的引入

jQuery本质上就是一个是js类库,对常用的方法和对象进行封装,方便我们使用。
　　1.我们之前DOM编程:var obj = Document.getElementById(id); 此处获取的obj是什么对象—dom对象
　　2.我们如果想使用Jquery中里面已经封装好的一些方法和属性的的话,首先获取变迁的jQuery对象,然后通过里面封装的一些方法和属性对jQuery对象进行操作

二：jquery入门

2.1 jquery和html的整合
　　jquery是单独的js文件，通过script标签的src属性导入即可
2.2 获取一个jquery对象
$(“选择器”) 或者 jQuery(“选择器”)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script src="../js/jquery-1.11.0.min.js"></script>
<body>
    <input type="text" id="username" value="jack"/>
</body>
<script>
    //1.使用原生js代码获取我们上面的input标签
    var username = document.getElementById("username");
    //alert(username.value);


    //2.使用jQuery的方式获取我们上面的input标签对象,注意,此时我们获取的是jQuery对象
    //var $jQuery =  $("选择器");//这是最常用的方法
    var $username = $("#username");
    //alert($username.val());//调用jQuery对象的val()方法获取value属性值


    //3.使用另一种方式获取jQuery对象
    var $username2 = jQuery("#username");
    alert($username2.val());

</script>
</html>

2.3 dom对象和jquery对象之间的转换
dom对象===>jquery对象
$(dom对象)
jquery对象===>dom对象
方式1:
jquery对象[index]
方式2:
jquery对象.get(index)

<script>
    //dom-->>jQuery对象   ,转换方式$(dom对象)
    var username = document.getElementById("username");
    var $username = $(username);
    //alert($username.val());

    //jQury对象--->>dom对象
    //方式1: jQuery对象.get(index);
    var username2 = $username.get(0);
    //alert(username2.value);

    //jQury对象--->>dom对象
    //方式2: jQuery对象[index]
    var username3 = $username[0];
    alert(username3.value);

</script>

2.4页面加载:
　　js中的操作: window.οnlοad=function(){}//在一个页面中只能使用一次，写多了只会执行最后的一个
　　jquery 在一个页面中可以使用多次，从上到下一次执行
　　　　方式1:（常用）　$(function(){...})
　　　　方式2:（不常用）　$(document).ready(function(){})

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        //使用原生的js,当页面加载完毕之后,我执行一些操作
        //在整个html页面加载成功之后,我弹出一句话,"页面加载成功啦"
/*      window.onload=function(){
            //这里面的代码所有都是在html页面加载成功之后才执行的
            //alert("页面加载成功了");

            //给一个标签施加事件的另一种方式(派发事件)
            //格式:dom对象.事件名称=fucntion(){....}
            /*var bt1 = document.getElementById("bt1");
            bt1.onclick=function(){
                alert("我被点击了");
            }*/

            /*alert("今天天气真热");

        }
        */


        //页面加载成功的事件,
        //原生的js代码,当页面加载成功之后,整个页面只能写一个window.onload
/*      window.onload=function(){
            alert("中午真的很困,能不能给个躺椅");
        }*/


        //使用jQuery中的代码,实现页面加载成功的事件
        //方式1:
        $(function(){
            //这里面的所有的代码都是当整个html页面家在成功之后才执行的
            //alert("天气凉快");
        })



        //第二个页面家在成功之后要执行的事件
        //注意:当我们使用jQuery中的方式执行页面加载成功之后的事件的时候,可以执行多个
        $(function(){
            //alert("恭喜你获得一个空调扇");
        })


        //使用jQuery方式执行页面加载成功之后的事件
        //方式2:
        $(document).ready(function(){
            //页面加载成功之后要执行的代码
            alert("方式2执行成功");           
        })


        </script>
    </head>
    <body>
    <input type="button" id="bt1" value="按钮"/>  
    </body>
</html>

2.5派发事件:
　　$("选择器").click(function(){...});　等价于 原生js中　dom对象.onclick=function(){....}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>常见事件</title>
        <style type="text/css">
            #e02{
                border: 1px solid #000000;
                height: 200px;
                width: 200px;
            }

        </style>
        <script src="../js/jquery-1.11.0.min.js"></script>
        <script type="text/javascript">
            $(function(){
             //需求：给e01加上失去焦点和获取焦点事件，键盘按下和键盘弹起的事件
                $("#e01").blur(function(){
                    $("#textMsg").html("失去焦点");
                }).focus(function(){
                    $("#textMsg").html("获取焦点");
                }).keydown(function(){
                    $("#textMsg").html("键盘被按下");
                }).keyup(function(){
                    $("#textMsg").html("键盘弹起");
                })




            //需求：给e02加上鼠标移入和移除的事件，
            $("#e02").mouseover(function(){
                $("#divMsg").html("鼠标移入了");
            }).mouseout(function(){
                $("#divMsg").html("鼠标移出了");
            })


            //需求：给e03加上单击和双双击的事件
            $("#e03").click(function(){
                $("#buttonMsg").html("我被单击了");
            }).dblclick(function(){
                $("#buttonMsg").html("我被双击了");
            })


            })

        </script>

    </head>
    <body>
        <input id="e01" type="text" /><span id="textMsg"></span> <br/>
        <hr/>
        <div id="e02" ></div><span id="divMsg"></span> <br/>
        <hr/>
        <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span> <br/>
    </body>
</html>
三： jquery中的效果:

　3.1 jquery中的效果
　　隐藏或展示
　　　　show(毫秒数)
　　　　hide(毫秒数)
　　滑入或滑出
　　　　slideDown(毫秒数):向下滑入
　　　　slideUp(毫秒数):向上滑出
　　淡入或淡出
　　　　fadeIn(毫秒数):淡入
　　　　fadeOut(毫秒数):淡出
注意：以上的 毫秒数 均表示准备利用多长时间完成改效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">

        div{
            border:1px solid #000;
            width:100px;
            height:100px;
        }
    </style>
    <!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
    <script src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            //给b1加上一个单击事件
            //<input type="button" id="b1" value="显示/隐藏 b1Div" />
            $("#b1").click(function(){
                //获取id="b1Div",jQuery对象
                //show(毫秒数):通过多少时间显示
                //hide(毫秒数):通过多少时间隐藏
                //toggle(毫秒数):如果隐藏则显示,如果显示则隐藏

                //$("#b1Div").hide(2000);
                $("#b1Div").toggle(2000);
            })

            //<input type="button" id="b2" value="滑出/滑入b2Div"/>
            $("#b2").click(function(){
                //slideDown(毫秒数):通过多少时间从上到下划入
                //slideUp(毫秒数):通过多少时间,从下往上划出
                //slideToggle(毫秒数):如果划入则划出,如果划出则划入

                $("#b2Div").slideToggle(3000);
            })

            //<input type="button" id="b3" value="淡出/淡入b3Div" />
            $("#b3").click(function(){
                //fadeIn(毫秒数):通过多少时间单入
                //fadeOut(毫秒数):通过多少时间淡出
                //fadeToggle(毫秒数):如果淡入则淡出如果淡出则淡入
                //$("#b3Div").fadeOut(2000);
                $("#b3Div").fadeToggle(2000);
            })

        });

    </script>
</head>
<body>
    <input type="button" id="b1" value="显示/隐藏 b1Div" />
    <div id="b1Div"></div> <br/>
    <input type="button" id="b2" value="滑出/滑入b2Div"/>
    <div id="b2Div"></div> <br/>
    <input type="button" id="b3" value="淡出/淡入b3Div" />
    <div id="b3Div"></div>

</body>
</html>
四：案例1-弹出广告

　　步骤分析
　　　　1.页面加载成功之后$(function(){…}) 开始一个定时器 setTimeout();
　　　　2.编写展示广告方法
　　　　　　获取div,然后调用效果方法
　　　　　　设置另一个定时器　隐藏
　　　　3.编写隐藏广告的方法
　　　　　　获取div,然后调用效果方法

<script>
            $(function(){
                /**
                 * 1.当页面加载成功之后,隔上3秒展示广告(定时器)
                 * 2.展示广告的方法
                 * 3.还需要设定一个定时器,隔多少秒隐藏
                 * 
                 * 如何让一个标签隐藏:
                 * 1.display:none
                 * 2.style=hidden
                 */
                window.setTimeout("showAd()",3000);

            })

            function showAd(){
                //显示广告
                $("#ad").slideDown(1000);

                //开起一个定时器
                window.setTimeout("hideAd()",2000);
                }

            //隐藏广告
            function hideAd(){
                $("#ad").slideUp(1000);    
            }

        </script>
    </head>

    <body>
        <div id="ad" style="width:100%;display: none;">
            <img src="../img/ad_.jpg" width="100%" />
        </div>
    </body>
五：选择器总结

5.1 基本选择器★

$("#id值")  $(".class值")  $("标签名")  了解:$("*")

　　理解:获取多个选择器 用逗号隔开　$("#id值,.class值")

<!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=utf-8" />
 <title>01-基本选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
/*  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>*/

    //当页面加载成功之后派发时间
    //<input type="button" value="选择 id为 one 的元素." id="btn1"/> 
    $(function(){
    //当页面加载成功之后派发时间
    //<input type="button" value="选择 id为 one 的元素." id="btn1"/> 
        $("#btn1").click(function(){
            $("#one").css("background-color","red")
        })

    //<input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
    $("#btn2").click(function(){
        $(".mini").css("background-color","green");
    })


    //input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
    $("#btn3").click(function(){
        $("div").css("background-color","green");
    })

    //<input type="button" value="选择 所有的元素." id="btn4"/>
    $("#btn4").click(function(){
        $("*").css("background-color","green");
    })


    //<input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
    $("#btn5").click(function(){
        $("span,#two").    css("background-color","green");
    })


    })

 </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 <h3>基本选择器.</h3>

 <!-- 控制按钮 -->
  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>

  <br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的di
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

5.2 层次选择器 ★
　　a b—-a的所有b后代
　　a>b—-a的所有b孩子(不包括孙子)
　　a+b—-a的下一个兄弟(大兄弟)
　　a~b—-a的所有弟弟们

<!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=utf-8" />
 <title>02-层次选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
    //当页面加载成功之后,我们需要给每一个按钮派发事件
    $(function(){
  //<input type="button" value="选择 body内的所有div元素." id="btn1"/>
    $("#btn1").click(function(){
        //a b:a的所有b后代
        $("body div").css("background-color","red");
    })

  //<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
  //a>b:a的所有b孩子(不包括孙子)
  $("#btn2").click(function(){
    $("body>div").css("background-color","red");
  })

  //<input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
  //a+b:a的下一个兄弟(大兄弟)
  $("#btn3").click(function(){
    $("#one+div").css("background-color","red");
  })

  //<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
  //a~b:a的所有弟弟们
    $("#btn4").click(function(){
        $("#two~div").css("background-color","red");  
    })

    })

 </script>
</head>
<body>
  <h3>层次选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
  <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
  <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>

  <br />
  <br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

5.3 基本过滤选择器:★
　　:frist 　第一个
　　:last 　最后一个
　　:odd 　 索引奇数
　　:even 　索引偶数
　　:eq(index)　 指定索引
　　:gt(index) 　索引大于哪一个值
　　:lt(index) 　索引小于哪一个值

<!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=utf-8" />
 <title>03-基本过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
    $(function(){
  //<input type="button" value="选择第一个div元素." id="btn1"/>
  $("#btn1").click(function(){
    $("div:first").css("background-color","red");
  })

  //<input type="button" value="选择最后一个div元素." id="btn2"/>
   $("#btn2").click(function(){
    $("div:last").css("background-color","red");
  })

  //<input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>
  $("#btn3").click(function(){
    $("div:even").css("background-color","red");
  })

  //<input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>
   $("#btn4").click(function(){
    $("div:odd").css("background-color","red");
  })

  //<input type="button" value="选择索引值等于3的div元素." id="btn5"/>
  $("#btn5").click(function(){
    $("div:eq(3)").css("background-color","red");
  })

  //<input type="button" value="选择索引值大于3的div元素." id="btn6"/>
  $("#btn6").click(function(){
    $("div:gt(3)").css("background-color","red");
  })

    });
 </script>
</head>
<body>
  <h3>基本过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择第一个div元素." id="btn1"/>
  <input type="button" value="选择最后一个div元素." id="btn2"/>
  <input type="button" value="选择索引值为偶数 的div元素." id="btn3"/>
  <input type="button" value="选择索引值为奇数 的div元素." id="btn4"/>
  <input type="button" value="选择索引值等于3的div元素." id="btn5"/>
  <input type="button" value="选择索引值大于3的div元素." id="btn6"/>


<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

5.4 内容过滤:
　　:has(“选择器”)—-包含指定选择器的元素

<!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=utf-8" />
 <title>04-内容过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
    $(function(){
        //<input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/>
        $("#btn1").click(function(){
            //:has("选择器"):包含指定选择器的元素
            $("div:has('.mini')").css("background-color","red");
        })

    });
 </script>
</head>
<body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选取含有class为mini元素 的div元素." id="btn1"/>

<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>


  <span id="mover">正在执行动画的span元素.</span>

</body>
</html>

5.5 可见过滤:
　　:hidden—-在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
　　:visible—-在页面展示元素

<!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=utf-8" />
 <title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
    $(function(){
  //<input type="button" value=" 选取所有可见的div元素"  id="b1"/>
  $("#b1").click(function(){
    //:visible 
    $("div:visible").css("background-color","red");
  })


  //<input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
    $("#b2").click(function(){
        //:hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
        $("div:hidden").css("background-color","red").show(1000);
    })

    });
 </script>
</head>
<body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  <br/><br/>
  <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
  <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>

  <br /><br />


  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>


</body>
</html>

5.6 属性过滤器:★
　　[属性名]
　　[属性名=”值”]

<!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=utf-8" />
 <title>06-属性选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
    $(function(){
  //<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
  $("#btn1").click(function(){
    $("[title]").css("background-color","red");
  })

  //<input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
  $("#btn2").click(function(){
    $("[title='test']").css("background-color","red");
  })

    });
 </script>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    
  <h3> 属性选择器.</h3>


  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>

    <br /><br />
   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
     id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
      <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>

  <div class="hide">class为"hide"的div</div>

  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

</body>
</html>

5.7 表单过滤:
　　:input 所有的表单子标签 input、select、textarea、button
　　input 仅仅获取input标签

<!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=utf-8" />
 <title>09-表单选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.11.0.min.js"></script>
 <script src="../js/assist.js"></script>
 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 
 <script type="text/javascript">
    $(function(){
        //1.获取form标签中的所有的子标签
        alert($("#form1 :input").size());
        //这种获取方式,不仅可以获取到form标签中的input标签,还可以获取到其中的button,textarea

        //2.仅仅获取input标签
        //alert($("#form1 input").size());

    });
 </script>
</head>
<body>
  <input type="button" value="选取所有的表单子元素" id="btn1"/><br />

  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><br/>
    <input type="image" src="1.jpg"/><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>

  <div></div>
</body>
</html>
元_帅
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
OBS-Studio-26.1-Full-Installer-x64.exe
12-27
适用于windows系统
【jquery常见事件】Jquery常见事件应用汇总【附应用场景】
赏樱看雪撸代码
05-29 1279
jquery双击事件、jquery单击事件、jquery派发事件、阻止冒泡、jquery绑定与解绑事件、jquery鼠标移动事件等。
jQuery 事件方法
qq_38173718的博客
06-01 139
事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。 触发实例： $("button#demo").click() 上面的例子将触发 id="demo" 的 button 元素的 click 事件。 绑定实例： $("button#demo").click(function(){$("img").hide()}) 上面的例子会在点击 id="demo" 的按钮时隐藏所有
jQuery页面加载与派发事件
Those who achieve great thing do not stick to trifles
01-27 929
jQuery页面加载与派发事件 一、页面加载 JS中页面加载window.onload=function(){}//在一个页面中只能使用一次。 JQ中页面加载有两种方式.可以使用多次 1、$(function(){....}) ...
根据jquery自定义事件写一个事件订阅派发demo
章鱼小丸子
08-04 1908
1.未绑定dom对象的观察者模式demo var scope = { on:function(name,callback){ this.arr = this.arr || []; this.arr[name] = { callback: callback
绑定事件（js）与派发事件(jquery)
BigData
06-21 1011
绑定事件（js）: 绑定事件，是相对于原生js来说的。做一个简单的绑定事件，便于理解。 ​ function Bd(){//写在按钮的上面下面都可以 alert("我是绑定事件"); } input type="button" value="绑定事件" id="btn" onclick="Bd()"> ​ 派发事件(jquery)： 事件派发，是相对于jquery来说的。...
geotools-26.1-bin.zip
11-23
这个压缩包“geotools-26.1-bin.zip”包含了GeoTools的26.1版本，是开发者进行GIS应用开发的重要资源。在本文中，我们将深入探讨GeoTools的核心特性、主要功能以及如何利用它进行地理空间数据的处理和展示。 1. **...
emacs-26.1.tar.gz
03-03
Emacs是一款强大的文本编辑器，历史悠久且深受程序员和高级用户喜爱。版本26.1是Emacs的一个稳定发行版，提供了许多改进和新特性。它不仅是一个编辑工具，还可以作为一个平台来扩展其功能，通过使用各种插件和配置，...
emacs-26.1.tar.xz
03-03
py依赖包
Docker-26.1.4.dmg.zip
最新发布
06-27
Docker-26.1.4.dmg.zip
js，jq 两种方式派发事件，demo：上传图片
PrimaryColor
01-14 410
原生js通过dom的dispatchEvent函数，传入事件对象并派发事件。 jquery封装好了部分逻辑，直接通过trigger方法，传入事件类型就行。 所有派发的事件支持所有类型的事件。 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
两张图让你看懂事件派发机制
sutao1994
02-28 1655
首先是ViewGroup的事件派发 下面是View的事件派发机制
jQuery事件委派
A0940的博客
05-16 588
事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能，这就是JavaScript里面的事件委派，jQuery里面的delegate()也能实现同样的效果 首先先看JS代码是如何实现的，获取到li标签的父元素ul标签，设置点击事件，判断目标的事件对象是否是LI标签，如果是就设置li标签的文本颜色，点击li标签就能改变颜色。 动态添加li标签，获取到按钮，给按钮绑定点击事件，声明新的变量接收新创建的li标签，设置新里标签的文本内容，父元素插入新li标签，这样就能实现出JS事件委派 再看J..
派发事件
jenniferyayun的博客
09-24 506
定义一个事件 /* 增加事件，第一个参数为事件名称，第二个参数为方法，第三个参数为当前的model */ justep.Shell.on("onOwnerContactsChanged", this.onClassChanged, this);   /*发生变化时怎么处理事件*/ Model.prototype.onClassChanged= function(classData
jQuery选择器案例
java_zhaoyanli的专栏
03-29 809
div{ width:200px; height: 200px; border:1px solid red; margin: 2px; } .mini{ width: 30px; height: 30px; background: green; }
【js与jquery】html中onsubmit事件的用法
PHP在线开发笔记
09-03 1万+
onsubmit可以理解为一个函数的名称，而onsubmit等号右边的字符串可以理解为一个函数体，在web开发中，onsubmit函数要求必须有返回值：如果返回值为true，则代表允许提交表单；如果返回值为false，则代表不允许提交表单，如果你的表单提交有问题，则需要查看onsubmit=“” 等号右边引号中返回的值是false还是true 众所周知，在表单中加上onsubmit="ret
jQuery 之 选择器与事件类型（二）
稚枭天卓
07-08 897
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。 元素选择器 jQuery 元素选择器基于元素名选取元素。 在页面中选取所有
JQuery 触发Click事件
热门推荐
志远有18CM
10-13 1万+
trigger() 方法触发被选元素的指定事件类型 $("#cancel").on("click", function () { $('.cd-popup3').trigger("click"); });
c++ 3158练26.1 输出偶数
07-14
要输出偶数，你可以使用循环来遍历一系列数字，并通过判断是否为偶数来输出。 以下是一个示例程序，可以输出从1到3158之间的所有偶数： ```cpp #include int main() { int n = 3158; for (int i = 1;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值