• jQuery编程基础精华03(RadioButton操作,事件,鼠标)


    RadioButton操作
    取得RadioButton的选中值,被选中的radio只有一个值,所以直接用val()
     $('#btn1').click(function () {
                    $(':radio:checked').each(function () {//遍历,因为只能获取一个
                        alert($(this).val());
                    });
                });
                $('#btn2').click(function () {
                    //$(':radio[value=f]').attr('checked',true);
                    $(':radio').val(['m','a']);//checkbox select都可以这么做
                });



    设置RadioButton的选中值:.attr(‘checked’,true);
    $("input[name=gender]").val(["女"]);
    或者
    $(":radio[name=gender]").val(["女"]);

    注意val中参数的[]不能省略,val()的参数必须是一个数组。


    RadioButton操作2

    对RadioButton的选择技巧对于CheckBox和Select列表框也适用
    除了可以使用val批量设置RadioButton、CheckBox等的选中以外,还可以设定checked属性来单独设置控件的选中状态
    $(‘#selOne’).val([‘1’,’2’,’3’]);//同时设置多个下拉菜单选中
    $("#btn1").attr("checked",true)


    =======================练习:CheckBox的全选、全不选、反选======================
     $('#b1').click(function () {
                    $('div :checkbox').attr('checked', true);
                });
                $('#b2').click(function () {
                    $('div :checkbox').attr('checked', false);
                });
                $('#b3').click(function () {
                    $('div :checkbox').each(function () {
                        $(this).attr('checked', !$(this).attr('checked'));
                    });
                });


    事件
    jQuery中的事件绑定:$("#btn").bind("click",function(){}),每次都这么调用太麻烦,所以jQuery可以用$("#btn").click(function(){})来进行简化


    事件冒泡
    事件冒泡:jQuery中也像JavaScript一样是事件冒泡window.event.cancelBubble = true,ie取消
    如果想获得事件相关的信息,只要给响应的匿名函数增加一个参数:e,e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。e. stopPropagation(); 
    标准js方式:e.stopPropagation();
    IE下:e.cancelBubble = true;
    $("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e


    阻止事件
    阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新链接、提交按钮默认会提交表单,如果想阻止默认行为只要调用事件对象的preventDefault()方法和window.event.returnValue=false效果一样。
     $(“a”).click(function(e) { alert(“所有超链接暂时全部禁止点击”); e.preventDefault(); });//jQuery中封装的。
    (*)
    jQuery在注册事件的时候如何传递参数?event.data获取参数。
    .click({‘k’:1,’v’:2},fn);然后通过evt.data.k或evt.data.v
    .bind(‘click’,data,fn);//同上


    事件其他(*)
    jQuery的事件对象:event对象。
    属性:pageX、pageY、target获得触发事件的元素(冒泡的起始,和this不一样,相当于window.event.srcElement)、which如果是鼠标事件获得按键(1左键,2中键,3右键),如果是键盘事件keydown则获取的是keyCode。
    $(this).offset()//获取当前元素相对于页面的坐标。
    $(this).offset().left、$(this).offset().top
     event.originalEvent;//获取原生的event对象。


    鼠标

    动画
    show()、hide()方法会显示、隐藏元素。用toggle(speed)方法在显示、隐藏之间切换
        $(":button[value=show]").click(function() { $("div").show(); });
        $(":button[value=hide]").click(function() { $("div").hide(); });
    如果show、hide方法不带参数则是立即显示、立即隐藏,如果指定速度参数则会用指定时间进行动态显示、隐藏,单位为毫秒,也可以使用三个内置的速度:fast(200毫秒)、normal(400毫秒)、slow(600毫秒),jQuery动画函数中需要速度的地方一般也可以使用这个三个值。


    获得发生事件时鼠标的位置
    $(document).mousemove(function(e) {
                document.title = e.pageX + "," + e.pageY;
            });
    在mousemove、click等事件的匿名响应函数中如果指定一个参数e,那么就可以从e读取发生事件时的一些信息,比如对mousemove等鼠标事件来说,就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。
    练习2:跟着鼠标走的文字(小天使)
        <script type="text/javascript">
            $(document).mousemove(function(e) {
                $("#tips1").css("top",e.pageY+20).css("left",e.pageX);
            });
        </script>
        <div id="tips1" style="position:fixed">跟着你</div>

        
        $(document)表示整个浏览器页面窗口,$(body)仅表示可用范围。

    滑动效果
    slideDown()、slideUp()、slideToggle()隐藏就显示,显示就隐藏
    淡入淡出(透明)
    fadeIn()、fadeOut()、fadeToggle()同上、fadeTo()到达透明度多少2000,0.1


    注意
    id和jQuery对象的区别。动态创建出来的对象在append之前是不能通过$("#id")来引用的。
    js中单引号与双引号

    $(‘body’).append($(‘<table></table>’)).append($(‘<a></a>’));//a在body中,不在table中。
    stopPropagation();//阻止事件冒泡



  • 相关阅读:
    OpenGL完整实例
    OpenGL
    Socket(2)
    Socket(1)
    Stream,Reader/Writer,Buffered的区别(2)
    Stream,Reader/Writer,Buffered的区别(1)
    SQLite数据库与Contentprovider(2)
    SQLite数据库与Contentprovider(1)
    数据存储和访问
    AIDL与service
  • 原文地址:https://www.cnblogs.com/CSharpLover/p/5193658.html
Copyright © 2020-2023  润新知