zoukankan      html  css  js  c++  java
  • Jquery事件

    回车提交方式

    1.按钮提交方式

     1 //按钮事件
     2 $(‘#btnSumit‘).click(function() {
     3   alert(‘测试‘);
     4 });
     5  //回车提交事件
     6 $("body").keydown(function() {
     7   if (event.keyCode == "13") {//keyCode=13是回车键
     8     $(‘#btnSumit‘).click();
     9   }
    10 });
    View Code

    2.表单提交方式

    1 $("body").bind(‘keyup‘,function(event) { 
    2   if(event.keyCode==13){ 
    3     document.form.submit(); 
    4   }   
    5 }); 
    View Code

     

    jQuery名称冲突

    var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
     7         <script type="text/javascript">
     8             var jq=jQuery.noConflict();
     9             jq(function(){                
    10 //                alert(111111);
    11                 alert(jq("p").html())
    12             })
    13         </script>
    14     </head>
    15     <body>
    16         <p>ssssssssssssss</p>
    17     </body>
    18 </html>
    View Code

    jQuery toggle()

    通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

    $("button").click(function(){
      $("p").toggle();
    });

    filter()

    filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

    下面的例子返回带有类名 "intro" 的所有 <p> 元素:

     $("p").filter(".intro").css("background-color","yellow");

    补充: not() 方法与 filter() 相反

    delegate() 

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。
    使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

    $(selector).delegate(childSelector,event,data,function)//例如:为子元素设置点击事件
     1 <html>
     2 <head>
     3 <script type="text/javascript" src="/jquery/jquery.js"></script>
     4 <script type="text/javascript">
     5 $(document).ready(function(){
     6   $("div").delegate("button","click",function(){
     7     $("p").slideToggle();
     8   });
     9 });
    10 </script>
    11 </head>
    12 <body>
    13 <div style="background-color:red">
    14 <p>这是一个段落。</p>
    15 <button>请点击这里</button>
    16 </div>
    17 
    18 </body>
    19 </html>
    View Code

    position 属性规定元素的定位类型。

     

    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。

    注释:元素可拥有负的 z-index 属性值。

    注释:Z-index 仅能在定位元素上奏效(例如 position:absolute;)!(div里放一张图片和一段文字,为图片设置 z-index:-1;文字在图片上面,为正的话则覆盖了文字)

    IS()方法

    is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合,如果这些元素中至少有一个元素匹配给定的参数,则返回 true。
    语法:

    .is(selector)

    例:取消全选

    1             var checkboxJqObj = $('#j_selectall');
    2             if (checkboxJqObj.is(':checked')) {
    3                 //表示取消全选
    4                 var srcStr = "/Content/images/common/select_nor.png";
    5                 var imgJqObj = $('#j_selectall-img');
    6                 imgJqObj.attr("src", srcStr);
    7 
    8                 checkboxJqObj[0].checked = false;
    9             }
    View Code

         全选:

     1 <!DOCTYPE html>
     2 <html>
     3 
     4     <head>
     5         <meta charset="UTF-8">
     6         <title></title>
     7         <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
     8         <script type="text/javascript">
     9             $(function() {
    10                 $("#allSelect").on("click", function() {
    11                     $("input[name='uname']").each(function() {
    12                         $(this).attr("checked", true);
    13                     })
    14                     //$.each($("input[name='uname']"), function(index, element) {
    15                     //      $(element).checked = true;
    16                     //        $(this).attr("checked", true);
    17                     //})
    18                 })
    19                 $("#cancelSelect").click(function() {
    20                     $.each($("input[name='uname']"), function(index, element) {
    21                         if($(this).attr("checked") == "checked") {
    22                             $(this).attr("checked", false);
    23                         }
    24                         //alert($(this).attr("checked"))
    25                     })
    26                 })
    27 
    28             })
    29         </script>
    30     </head>
    31 
    32     <body>
    33         <button id="allSelect">全选</button>
    34         <button id="cancelSelect">取消全选</button>
    35         <input name="uname" type="checkbox">aa
    36         <input name="uname" type="checkbox">bb
    37         <input name="uname" type="checkbox">cc
    38         <input name="uname" type="checkbox">dd
    39         <input name="uname" type="checkbox">ee
    40     </body>
    41 
    42 </html>
    View Code

     hasClass() 方法

    hasClass() 方法检查被选元素是否包含指定的 class。

     1             $.each(unreadLiJqObjArr, function (index, element) {
     2                 if ($(element).hasClass("item-unread")) {
     3                     $(element).removeClass("item-unread");
     4                 }
     5 
     6                 if ($(element).hasClass("item-2")) {
     7                     var imgJqObj = $(element).find("img.img-noseen").eq(0);
     8                     imgJqObj.removeClass("img-noseen");
     9                     imgJqObj.attr("src", "/Content/images/common/email_seen.png");
    10                 }
    11             });
    View Code

     

    reverse() 方法

    用于颠倒数组中元素的顺序

    参考网址:

    1.http://www.w3school.com.cn/jquery/jquery_selectors.asp

    作者:chenze
    出处:https://www.cnblogs.com/chenze-Index/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    如果文中有什么错误,欢迎指出。以免更多的人被误导。
  • 相关阅读:
    Ajax
    PS将图标变灰
    圆角
    前端性能优化最佳实践(转)
    jquery $(document).ready() 与window.onload的区别
    js阻止冒泡及jquery阻止事件冒泡示例介绍
    CSS选择器、CSS hack及CSS执行效率
    Github快速入门手册
    Windows 系统下Git安装图解
    史上最全github使用方法:github入门到精通
  • 原文地址:https://www.cnblogs.com/chenze-Index/p/9545968.html
Copyright © 2011-2022 走看看