1、radio
  1)不选中任何值
  2)获取选中的值
  3)让某个选项选中
  4)发生改变时的事件
  5)让某个选项不能选
2、CheckBox
  1)选中  2)取消
3、select
  1)获取下拉框选中项的显示字
4、ul li
  1)点击选中改变样式
  2)删除所有选中的li
  3)遍历li
  4)遍历li,获取li的文本
5、JS与样式
  1)添加样式
  2)删除样式
  3)判断是否有某个样式
  4)tab改变样式 6、设置不可编辑
7、div滚动到最底部
8、replace All

1、radio

<div id="phoneSign">
<input type="radio" name="sign" id="dfVal" value="0" />
<input type="radio" name="sign" value="1" />
<input type="radio" name="sign" value="2" />
</div> 1、不选中任何值:$("#phoneSign").val(""); 2、获取选中的值:$("#phoneSign input:checked").val();
或 :$("input[name='sign']:checked").val(); 3、让某个选项选中:$("#dfVal").attr("checked",true); 4、发生改变时的事件:
$(function (){
$('input[type=radio][name=impType]').change(function() {
if (this.value == 'ImportHouse') {
$("#addOpr").attr("checked",true);
document.getElementById("overOpr").disabled = true;
document.getElementById("noOpr").disabled = true;
} else {
document.getElementById("overOpr").disabled = false;
document.getElementById("noOpr").disabled = false;
}
});
}); 5、让某个选项不能选 : document.getElementById("noOpr").disabled = true;

2、CheckBox

1、选中: $("#usable").attr("checked",true);

2、取消: $("#usable").attr("checked",false);

3、select

1.获取下拉框选中项的显示字:
var filterType = $("#filterType option:selected").text();

4、ul li

(注:selected 是样式的名称className)

1.点击选中改变样式
$(function(){ $("#test li").click(function() { // 为id为test的ul绑定每个选项的点击事件 $(this).siblings('li').removeClass('selected'); // 删除其他兄弟元素的样式 $(this).addClass('selected'); // 添加当前元素的样式
}); }); 2.删除所有选中的li.
$("#test .selected").remove(); 3.遍历li.
$("#test li").each(function(){
$(this).removeClass('selected');
}); 4.遍历li,获取li的文本
$("#test li").each(function(){
alert($(this).text());
});

5、JS与样式

1.添加样式:$("#test").addClass("aaa");

2.删除样式:$("#test").siblings('li').removeClass('aaa'); 

3.判断是否有某个样式:$("#test").hasClass('aaa');

4.tab改变样式
function showtab(btnid,tabid,tabnumber)
{
for (i = 1;i<=tabnumber;i++)
{
document.getElementById(tabid+"_btn"+i).className = "";
document.getElementById(tabid+"_sub"+i).style.display = "none";
}
document.getElementById(tabid+"_btn"+btnid).className = "selected";
document.getElementById(tabid+"_sub"+btnid).style.display = "block";
}

6、设置不可编辑

按钮:
document.getElementById("savebtn").disabled = true; input:
$("input[type='text']").attr("disabled",true);

7、div滚动到最底部

var div = document.getElementById('flowDiv');
div.scrollTop = div.scrollHeight;

8、replace All

html = html.replace(/BSS/g,"CBSS");

JS及相关控件的更多相关文章

  1. 百度地图API示例之添加定位相关控件

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  2. JS数量输入控件

    JS数量输入控件 很早看到kissy首页 有数量输入控件,就随便看了下功能 感觉也不怎么难 所以也就试着自己也做了一个, 当然基本的功能和他们的一样,只是用了自己的编码思想来解决这么一个问题.特此给大 ...

  3. 用js给html控件赋值

      用js给html控件赋值 <script> window.onload=function setValue()//在页面加载时赋值 { document.getElementById( ...

  4. Android开发工程师文集-相关控件的讲解,五大布局

    前言 大家好,给大家带来Android开发工程师文集-相关控件的讲解,五大布局的概述,希望你们喜欢 TextView控件 TextView控件有哪些属性: android:id->控件的id a ...

  5. 2.23 js处理日历控件(修改readonly属性)

    2.23 js处理日历控件(修改readonly属性) 前言    日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如 ...

  6. ADF控件ID变化引发JS无法定位控件的解决方法

    原文地址:ADF控件ID变化引发JS无法定位控件的解决方法作者:Nicholas JSFF定义的控件ID到了客户端时往往会改变.例如在JSFF中的一个的ID为"ot1",但是当这个 ...

  7. vs2010开发activex(MFC)控件/ie插件(三),js调用ocx控件的接口函数

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50802280   js调用ocx控件的接口函数,先看demo效果:      简单测试过程 ...

  8. 利用来JS控制页面控件显示和隐藏有两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一:  1 2 document.getEle ...

  9. JS给html控件赋值

    <html> <head> <title> JS给html控件赋值 </title> <script language="javascr ...

随机推荐

  1. if(a)

    let a = undefined; let b = null; let c = ''; let d = ; let e = {}; let f = []; if (a) { console.log( ...

  2. box-sizing:border-boxing的使用

    <div class="box"></div> .box { margin-top: 200px; margin-left: 200px; backgrou ...

  3. webstorm 2018 Eslint修复 快捷键设置

    首先确保eslint插件已安装 已勾选

  4. python之单例模式

    #单例模式:有时需要写出高性能的类,那么会采用单例模式.通俗的解释就是类只创建一次实例,贯穿整个生命周期,实现了高性能. #1.模块化单例#所谓的模块化就是一个单独的.py文件来存储类,这样就是单例模 ...

  5. 60.Vue:将px转化为rem,适配移动端

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  6. phpstorm----------phpstorm设置自动更新的ssh信息如何修改--后续增加如何设置自动更新

    1.如何设置phpstorm将本地代码时时同步到远程服务器 注意下面一定要打勾 点击下一步,然后还有一个页面,然后不用做任何操作,直接点击完成.中途有个页面是输入远程服务器ip账号密码链接方式的,那个 ...

  7. JDK1.8 HashMap--treeifyBin()方法

    /*树形化*/ final void treeifyBin(Node<K,V>[] tab, int hash) { int n, index; Node<K,V> e;// ...

  8. flask框架中,利用数据库增删查改

    # 配置数据库app.config['SQLALCHEMY_DATABASE_URI'] = "mysql://root:mysql@127.0.0.1:3306/booktest" ...

  9. postman+newman+jenkins 接口自动化问题

    声明:个人原创,转载请注明 1.安装postman工具 下载地址:https://www.getpostman.com/点击下载,选择自己的系统,我的是windows系统,64位 2.postman ...

  10. Flask实战-留言板-使用Bootstrap-Flask简化页面编写

    使用Bootstrap-Flask简化页面编写 扩展Bootstrap-Flask内置了可以快速渲染Bootstrap样式HTML组件的宏,并提供了内置的Bootstap资源,方便快速开发,使用它可以 ...