jQuery 10 其它的一些用法

  1. $("input[name=gender]:checked ")  标签为input且name为gender,属性为checked的元素
  2. $(":radio[name=gender]:checked")相当于$("div:radio[name=gender]:checked").  :radio代表type=radio

如下代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn").click(function () {
                alert($("input[name=gender]:checked").val());
            });

            $("input[name=gender]").click(
              function () {
                  $("input[name=gender]").val("你点我了");
                  alert($(this).val());
              });


              $(":radio[name=gender]:checked").click(
              function () {
                 // $("input[name=gender]").val("你点我了");
                  alert($(this).val());
             });
        });


    </script>
</head>
<body>
<input type="button" id="btn" value="GetCheckedValue"/>
<input type="radio" name="gender" value="男" checked="checked" />男
<input type="radio" name="gender" value="女" checked="checked" />女
<input type="radio" name="gender" value="未知" checked="checked" />未知
</body>
</html>

jQuery还有一个hover(fn1,fn2)函数，fn1表示鼠标进入的事件，fn2标示鼠标离开的事件。

可以用如下的形式写：

$("#id").hover(function(){},function(){});

另我们在用匿名函数时，可以在function()的括号中输入参数e. 这会传递一个事件的副本，可用来控制事件方向。

如在div中有p,p中有button,分别为div.p.button写click事件，则button的click事件先执行，然后到p的 click事件，再到div事件。这就是我们所说的冒泡事件，为了让p和div不执行click事件，则可以执行stopPropagation()即可。即
$("#btn").click(function(e){alert("点击我了."); e.stopPropagation();});  事件参数e就是事件对象。

还有一个就是阻止默认行为 $("a").click(function(e){e.preventDefault();})  ，preventDefault代表不再执行，即终止，相当于event.returnvalue=false;

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#link1").click(function (e) {
                alert(e.toString());
                e.preventDefault();
            })

            $("#btn").click(function (e) {
                e.preventDefault();
            });

        });
      
    </script>
</head>
<body>
<a href="http://www.sina.com" id="link1">sina</a>
<input type="submit" id="btn" />
</body>
</html>

其它的一些属性：pageX,pageY,tagart:分别相当于clientX,clientY,this。

如让图片随着鼠标跑：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(document).mousemove(function (e) {
                $("#div1").css("left", e.pageX).css("top", e.pageY);
               
            });
        });
      
    </script>
</head>
<body>
<div id="div1" style="position:absolute">
  <img src="imgs/dragon_fly.ico"/>
</div>
</body>
</html>

 

另whick表示鼠标的哪个键，分别为左，中，右键.

altKey,ctrlKey,shiftKey分别代表键盘上的alt\ctrl\shift键.  

keyCode:代表键盘上的别名. charCode代表的是ASC码.

bind()代表绑定事件，如$("#btn").bind("click",function(){}); 给btn的click帮定一事件。

unbind()移除事件, 如$("#btn").unbind("click");

one():只用一次的事件，以后就没再用。

show(),hide()方法用于显示或隐藏一个元素，它后面可以加上显示的时间，是动画的，默认有fast,normal,low三种，定义为200毫秒。如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        $(function () {
            $(":button[value=show]").click(function () {
                $("#div1").show(2000);
            });

            $(":button[value=hide]").click(function () {
                $("#div1").hide(1000);
            });
        });
    </script>
</head>
<body>
<div id="div1">
中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试
中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试
中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试
中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试
中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试
中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试
中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试中文测试
</div>
<input type="button" id="show" value="show" />
<input type="button" id="hide" value="hide" />
</body>
</html>

 

 

 

 

posted on 2013-05-25 16:12  天上星  阅读(225)  评论(0)  编辑  收藏  举报

导航