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();//阻止事件冒泡

jQuery编程基础精华03(RadioButton操作,事件,鼠标)的更多相关文章

  1. jQuery编程基础精华02(属性、表单过滤器,元素的each,表单选择器,子元素过滤器(*),追加方法,节点,样式操作)

    属性.表单过滤器 属性过滤选择器: $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为 ...

  2. JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  3. jQuery编程基础精华01(jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器)

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  4. 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  5. JavaScript DOM编程基础精华01(DOM入门,DOM模型和获取页面元素,事件,window对象的方法)

    DOM入门 DOM就是Html页面的模型,将每个标签都做为一个对象,JavaScript通过调用DOM中的属性.方法就可以对网页中的文本框.层等元素进行编程控制.比如通过操作文本框的DOM对象,就可以 ...

  6. day14—JQuery编程基础

    JQuery 1.什么是jQuery jQuery是一个优秀的JavaScript框架.一个轻量级的JavaScript类库.jQuery的核心理念是Write less.Do more. 使用jQu ...

  7. JavaScript DOM编程基础精华02(window对象的属性,事件中的this,动态创建DOM,innerText和innerHTML)

    window对象的属性1 window.location对象: window.location.href=‘’;//重新导航到新页面,可以取值,也可以赋值. window.location.reloa ...

  8. web前端基础——jQuery编程基础

    1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...

  9. C#基础精华07(委托事件,委托的使用,匿名方法)

    1.委托概述 委托是一种数据类型,像类一样(可以声明委托类型变量).方法参数可以是int.string.类类型 void M1(int n){  } √ void M2(string s){  } √ ...

随机推荐

  1. Python学习笔记1——人人都爱列表

    一些BIF函数在列表中的应用: Python 3.3.4 (v3.3.4:7ff62415e426, Feb 10 2014, 18:13:51) [MSC v.1600 64 bit (AMD64) ...

  2. hdu 5769 Substring 后缀数组 + KMP

    http://acm.hdu.edu.cn/showproblem.php?pid=5769 题意:在S串中找出X串出现的不同子串的数目? 其中1 <= |S| < $10^5$ 官方题解 ...

  3. 第一个C#应用 【搜索软件】

    搜索软件V1.0 [附软件截图][http://pan.baidu.com/s/1mihEbe4] 设备搜索:支持广播搜索[local search],指定ip[range search]搜索,直接w ...

  4. Java eclipse export jar包 包括第三方引入的jar

    1.安装fatjar插件 2.export jar 说明:安装后,操作说明以官网为准,不同的版本会有不同的右键菜单,我的版本(Eclipse Java EE IDE for Web Developer ...

  5. 小兵眼中的Java Struts2

        老魏终于可以回园子了,但是这次要慢慢的回来,不能一下子回来,这段时间除了要照顾刚出生的小女儿,还要做项目.说实在的老魏时间真是有限,不能照顾到园子的文章了,所以只能慢慢的回来写文章了.抱歉! ...

  6. AJAX请求遭遇未登录和Session失效的解决方案

    使用技术:HTML + Servlet + Filter + jQuery 一般来说我们的项目都有登录过滤器,一般请求足以搞定.但是AJAX却是例外的,所以解决方法是设置响应为session失效. 一 ...

  7. .net datatable 添加一列

    dt.Columns.Add("image", Type.GetType("System.String")); foreach (DataRow dr in d ...

  8. SQLServer2005:在执行批处理时出现错误。错误消息为: 目录名无效

    删除数据时忘了想delete删除的话会记录日志,更何况是我删除百万条数据,结果还没删完服务器内存就占慢了,一切数据都进不来了,估计这种情况导致我的数据库有问题了,右键打开表提示:目录名无效,执行SQL ...

  9. python 安装 easy_intall 和 pip python无root权限安装

    http://www.cnblogs.com/haython/p/3970426.html easy_install和pip都是用来下载安装Python一个公共资源库PyPI的相关资源包的 首先安装e ...

  10. redis window环境下的安装地址

    https://github-cloud.s3.amazonaws.com/releases/3402186/25358446-c083-11e5-89cb-61582694855e.zip?X-Am ...