2017.11.21 在Radio选中后改变Radio的样式、$location、移除元素的绑定事件、给checkbox 或者radio选择项赋值、嵌套table居中

第一组: 杨昊 在Radio选中后改变Radio的样式

之前遇到这样一个需求:在Radio选中后改变Radio的样式。

比如这样的:

<div class="box">
<p><input type="radio" name="fruit" checked="checked" />苹果</p>
<p><input type="radio" name="fruit" />香蕉</p>
<p><input type="radio" name="fruit" />葡萄</p>
</div>

以上三个单选框,第一个是默认选中的,问题:如何让选中的radio给<p>添加样式?比如,我选中香蕉,香蕉那行的<p>就加个 class="cur"。就变成了这样:<p class="cur"><input type="radio" name="fruit" />香蕉</p>还有就是只要被选中的就给<p>加class="cur"。

那么解决方案是:JQuery!!!

是贼好用!!!

不多说看代码:

$(function(){
    $(".box input").change(function(){
        $(":checked").parent().addClass("cur").siblings().removeClass("cur");
    });
});

PS:siblings()用于在单选框属性为checked时,遍历整个单选Box,将之前选中的radio样式给移除掉。


第二组: 冯佳丽 $location

1. $location用法:

$loction服务用于服务器端的URL,为apps提供URL。

$loction服务:
对于当前brower地址栏中的URL,可进行watch、observe、change

与browser的URL同步,当user 进行如下操作:改变browsers的地址,单击browser中的back或forward按钮,单击页面上的某一个link时</p><p>将URL对象当作一系列的方法(protocol、host、port、search、hash)

当需要对当前的URL的改变作出反应或更改当前的URL时,用到$location
$location service configuration
$locationProvide

2. Getter and setter methods

$location服务:对于getter方法,可用于URL中的只读部分(absUrl,protocol,host,port)
getter /setter方法用于url、path、search、hash

eg:

1.// get the current path  
2.$location.path();  
3.  
4.// change the path  
5.$location.path('/newValue')  

所有的setter方法返回的是$location相同的对象来获得链接
eg:

1.$location.path('/newValue').search({key: value});  
3. Replace method

改变当前的URL而不创建新的browser history record
[html] view plain copy

1.$location.path('/someNewPath');  
2.  $location.replace();  
3.  // or you can chain these as: $location.path('/someNewPath').replace();  
4. Setters and character encoding

依据RFC 3986中的规则,进行编码
传值给$location的setter 方法:path()、search()、hash()
getters返回的值用于path()、search()、hash()
当调用 absUrl()方法时,返回的值经部分编码的的全部url
当调用url()方法时,返回的是path和hash,以这种形式:/path?search=a&b=c#hash

5. Dependencies

$rootElement

6. Methods

absUrl():getter
url():getter/setter 取得url或重新设定url
protocol(): getter 返回当前url的protocol
host(): getter 返回当前url的host
port():getter 返回当前url的port
path():getter/setter 返回或设定路径
search():getter/setter
hash():getter/setter 带参数的时候是用参数改变hash部分,返回$location

7. Events

$locationChangeStart:在URL改变前进行broadcasted,可调用该事件中的preventDefault方法,事件成功改变后释放$locationChangeSuccess
$locationChangeSuccess:在URL改变后进行broadcasted


第三组: 黄华英 移除元素的绑定事件

1. 移除元素的绑定事件

Bind()可以为一个元素绑定多个事件,可以为多个元素绑定一个事件。

Unbind()可以移除元素上所有事件或者移除元素上某个指定的事件。

1.1 移除button元素上以前注册的所有Click事件

例如按下btnA则移除btnB上所有click事件:

$(‘#btnA’).click(function(){

$(‘#btnB’).unbind(“click”);

// btnB绑定的都是click事件,可以简写为$(‘#btnB’).unbind();

});

unbind方法的语法结构:unbind([type],[data]);

(1)如果没有参数,删除所有绑定事件

(2)提供事件类型参数,只删除该类型的绑定事件

(3)如果把在绑定时传递的处理函数作为第2个参数,则只有这个特定的事件处理函数会被删除

1.2 移除button元素中的某一个事件:

$(‘#btn’).unbind(“click”,delfunction);//删除delfunction事件

2. 对于只需要触发一次且触发后立即解绑的情况,可以用one()方法实现

one()方法与bind()使用方法相同:

$(‘#btnA’).one(function(){
alter(“只会执行一次”);
});
3. Load()方法
3.1 载入远程HTML代码并插入DOM中

$(“#TestId”).load(“test.html”);
将test.html的内容追加到ID为“TestId”的元素里

3.2 筛选载入的HTML文档

$(“#TestId”).load(“test.html .selectorClass”);
将test.html中class为selectorClass的内容追加到ID为“TestId”的元素里

用load()方法实现页面局部刷新:
$(".divClass").load(location.href + " .divClass");
将本页面中class为divClass的内容载入class为divClass的元素中(刷新)


第四组:傅云 给checkbox 或者radio选择项赋值

若为普通的checkbox取值可以直接采用.val的方法,但是对于checkbox 或者radio的选择项属性并赋值该如何操作?

答:


image.png
image.png
 <script>
        var selectone = "";
        $(function () {
            $('#ctl00_ContentPlaceHolder1_EO_APP_SOURCE_MODEL').find("input").attr("style", "vertical-align:middle");
            if ('<%=Request["modelno"]%>' != "") {
                selectone = '<%=Request["modelno"]%>';
            }
            $('#ctl00_ContentPlaceHolder1_EO_APP_SOURCE_MODEL').find("input").each(function () {
                if ($(this).val() == selectone) {
                    $(this).attr("checked", true);
                }
            })
        })
      </script>

第五组:姜葳 嵌套table居中

1. 问题(what):

在<th>里面嵌套table的时候,使用style="text-align: center;来居中是不起作用的


image.png

在网上找了一下,终于解决:


image.png
2. 解决方法(how):

在table里加上:display: inline-table;


image.png
3. 原因(why):

text-align不能作用与block level的元素,所以对table不起作用
附:http://zhangyaochun.iteye.com/blog/1303840

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容