JSON 知识梳理

心系少时言 等一不归人

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

参考源引地址:
https://baike.baidu.com/item/JSON/2462549
http://blog.csdn.net/fengyun14/article/details/8184563
http://blog.csdn.net/feicongcong/article/details/53464763
http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html
http://www.w3school.com.cn/jquery/jquery_selectors.asp

JSON 语法规则

在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型:
对象表示为键值对
数组由逗号分隔
花括号保存对象
方括号保存数组

变量定义

var a = {};  //定义一个空的json对象
var b = [];  //定义一个空的json数组
var c = "";  //定义一个空的字符串

JSON 键/值对

JSON 键值对是用来保存 JS 对象的一种方式,和 JS 对象的写法也大同小异,键/值对组合中的键名写在前面并用双引号 "" 包裹,使用冒号 : 分隔,然后紧接着值:

{"firstName": "John"}   键名不待带引号也可以正确解析,但是不推荐
推荐{"a": "Hello", "b": "World"}
不推荐 {a: 'Hello', b: 'World'}

强调 JSON键(属性)区分大小写

var a = {"name" : "John", "Name" : "Lily"};   //name,Name 是两个不同的键

单引号和双引号

JS中定义字符串变量时,用单引号或者双引号的是可以的,可根据实际情况具体选择
如果字符串值是 一串html代码,或者值里面包含比较多的双引号,那么可以使用单引号:

var html = '<div class="infobox" style="width:200px;"></div>';
var word = 'John Say:"where are you going?"';

反之可以使用双引号:

var a = "Hi,I'm going to school";

如果字符串值里面同时包含单引号和双引号,那么如果使用单引号包裹值,值里面的单引号需要用 \ 转义,如果使用双引号包裹,那么值里面的双引号需要用 \ 转义

var html = '<div class="infobox" style="width:200px;">Hi,I\'m going to school</div>';
var html2 = "<div class=\"infobox\" style=\"width:200px;\">Hi,I'm going to school</div>"

如果值里面包含\那么需要用两个\表示

var str = "这段字符串里面含有一个\\字符";
var str2 = "这段字符串里面含有两个\\\\字符";

字符串中使用变量

如果字符串使用单引号包裹,那么也使用单引号(' + 变量名称 + ')连接变量

var name="John";
var str1 = '大家好!我的名字叫:'+ name +',今天很高兴认识大家';
var str2 = '大家好!我的名字叫'+ name;

如果字符串使用双引号包裹,那么也使用双引号("+ 变量名称 +")连接变量

var name="John";
var str1 = "大家好!我的名字叫:"+ name +",今天很高兴认识大家";
var str2 = "大家好!我的名字叫"+ name;

字符串多行展示

var name="John";
//方式1
var html='<div>';
    html+=' <p>';
    html+=' <strong>大家好</strong>';
    html+=' <span>很高兴认识大家</span>';
    html+=' </p>';
    html+='</div>';
//方式2
var html1='<div>'
        +'  <p>'
        +'  <strong>大家好</strong>'
        +'  <span>很高兴认识大家</span>'
        +'  </p>'
        +'</div>';
//方式3
var html2='<div>'
        +'  <p>'
        +'  <strong>大家好</strong>'
        +'  <span>我的名字叫:'+ name +',很高兴认识大家</span>'
        +'  </p>'
        +'</div>';
//方式4
var html3='<div>\
                <p>\
                    <strong>大家好</strong>\
                    <span>很高兴认识大家</span>\
                </p>\
            </div>';
//方式5
var html4='<div>\
                <p>\
                    <strong>大家好</strong>\
                    <span>我的名字叫:'+ name +',很高兴认识大家</span>\
                </p>\
            </div>';

JSON 与 JS 对象的关系

很多人搞不清楚 JSON 和 Js 对象的关系,甚至连谁是谁都不清楚。其实,可以这么理解:

JSON 是 JS 对象的字符串表示法,它使用文本表示一个 JS 对象的信息,本质是一个字符串。如:

var obj = {a: 'Hello', b: 'World'}; //这是一个对象,注意键名也是可以使用引号包裹的
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串,本质是一个字符串

JSON 和 JS 对象互转

要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法:

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'

要实现从 JSON 转换为对象,使用 JSON.parse() 方法:

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}
//jQuery.parseJSON('{"a": "Hello", "b": "World"}'); //同样效果

常用类型

在 JS 语言中,一切都是对象。因此,任何支持的类型都可以通过 JSON 来表示,例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

对象:对象在 JS 中是使用花括号包裹 {} 起来的内容,数据结构为 {key1:value1, key2:value2, ...} 的键值对结构。在面向对象的语言中,key 为对象的属性,value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。

数组:数组在 JS 中是方括号 [] 包裹起来的内容,数据结构为 ["java", "javascript", "vb", ...] 的索引结构。在 JS 中,数组是一种比较特殊的数据类型,它也可以像对象那样使用键值对,但还是索引使用得多。同样,值的类型可以是任意类型。

JSON数据的常用使用场景

对象赋值与读取

赋值:
var a = {};
a["id"] = 1;  //数字赋值
a["name"] = "John";  //字符串赋值
var _school = "北京大学";
a["school"] = _school;  //字符串变量赋值
//a={"id": 1, "name": "John" ,"school": "北京大学"};
读取:
var a = {"id": 1,"name": "John","school": "北京大学"};
//方式一
var html = "编号:"+ a.id +",姓名:"+ a.name +",就读学校:"+ a.school;
//方式二
var html2 = "编号:"+ a["id"] +",姓名:"+ a["name"] +", 就读学校:"+ a["school"];
//一个比较复杂的例子
var a = {
       "id": 1,
       "name": "John",
       "school": "北京大学",
       "schoolinfo": {
            "title": "北京大学",
            "address": "中国北京市朝阳区20号"
        }
      };
var html3 = "编号:" +a.id
        +", 姓名:"+ a.name
        +", 就读学校:"+ a.school
        +"学校地址:"+ a.schoolinfo.address;
var html4 = "编号:"+ a["id"]
        +", 姓名:"+ a["name"]
        +", 就读学校:"+ a["school"]
        +", 学校地址:"+ a["schoolinfo"]["address"];

如果一个对象里面的某个键(属性)不存在,那么会报undefined,所以在不确定键是否存在的情况下,需要作undefined验证

var a = {
  "id": 1,
  "name": "John",
  "school": "北京大学",
  "schoolinfo": {
        "title": "北京大学",
        "address": "中国北京市朝阳区20号"
    }
};
var html = "编号:"+ a["id"] +",姓名:"+ a["name"] +",就读学校:"+ a["school"];
if (a["age"] != undefined)
{
      html += ",年龄:"+ a["age"];
}
//推荐使用下面方法验证
if (a["age"] != null)
{
      html += ",年龄:"+ a["age"];
}
if (a["schoolinfo"] != null && a["schoolinfo"]["address"] != null){
    html += ",学校地址:"+ a["schoolinfo"]["address"];
}

关于null和undefined的区别请参阅下面地址:
http://blog.csdn.net/fengyun14/article/details/8184563
http://blog.csdn.net/feicongcong/article/details/53464763
http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

将一个对象添加到一个数组(push())

//示例一
var arr = [3,5];
arr.push(1);
arr.push(2);
var s = "你好";
var t = 10;
arr.push(s);
arr.push(t)
//结果:arr=[3, 5, 1, 2, "你好", 10];
​
//示例二
var arr2 = [{"id": 1,"name": "John"},{"id": 2,"name": "Lily"}];
var user = {"id": 3,"name": "Susan"};
arr2.push(user);
arr2.push({"id": 4,"name": "Zhiyi Wang"});

//结果:
arr2=[
        {"id": 1, "name": "John"},
        {"id": 2, "name": "Lily"},
        {"id": 3, "name": "Susan"},
        {"id": 4, "name": "Zhiyi Wang"}
    ]

数组过滤($.grep())

//示例一
var arr = [1, 2, 3, 4, 5];
//过滤出大于3的元素放到新的数组newarr里面
var newarr = $.grep(arr, function (v) {
    return v > 3;
});
//newarr:[4,5]

//示例二
//过滤出就读于北京大学的记录放到新数组里面
var students = [
    {"id":1,"name":"John","school":"清华大学"},
    {"id":2,"name":"Lily","school":"北京大学"},
    {"id":3,"name":"Susan","school":"上海大学"},
    {"id":4,"name":"Zhiyi Wang","school":"北京大学"}
];
var result = $.grep(students, function (v) {
    return v["school"] == "北京大学";
    //或者 return  v.school == "北京大学";
});

//结果:
result = [
  {"id": 2, "name": "Lily", "school": "北京大学"},
  {"id": 4, "name": "Zhiyi Wang", "school": "北京大学"}
]

清空一个数组

var arr = [1,2,3];
//清空方式一
arr = []; //推荐使用
//清空方式二
arr.length = 0;
//清空方式三
arr.splice(0,arr.length); 

查找(indexOf(), lastIndexOf(), $.inArray())

字符串查找
indexOf(): 第一次出现
lastIndexOf(): 最后一次出现

var str = "hello,my name is susan";
//查找 o 第一次出现的位置
var index1 = str.indexOf('o');
//index1 = 4;
//查找 s 最有一次出现的位置
var index2 = str.lastIndexOf("s");
//index2 = 19;

//如果没有找到,则返回-1;

数组查找
$.inArray()

var names  =["John", "Lily", "Susan"];
var index = $.inArray("Lily", names);
//index = 1;
var index2 = $.inArray("John", names);
//index2 = 0;//找到了 角标0
var index3 = $.inArray("Zhang", names);
//index3 = -1; 注意:如果没有找到返回-1,而非0

数组合并去重(concat,jQuery.merge,jQuery.unique)

var names1=["John","Lily","Susan"];
var names2=["Zhangli","Lily","Taidi"];

//方式一
var names3=names1.concat(names2);

//方式二
var names4=$.merge(names1,names2); //将names2合并到names1里面
//names4 和 names1 集合是一样的

//方式三
var names5=[];
for(var i=0;i<names1.length;i++)
{
    names5.push(names1[i]);  
}
for(var i=0;i<names2.length;i++)
{
    names5.push(names2[i]);  
}

//或者
$.each(names1,function(i,v){
    names5.push(v)
});
$.each(names2,function(i,v){
    names5.push(v)
});

//去重
$.unique(names3);  //此时的names3已经去重复了,无需赋值给某个变量

数组转化为字符串(join)

var student = [1,2,3,4];
var str = student.join(",");
//str = "1, 2, 3, 4";

注意:一般此方法用于数字数组转字符串,如果是字符串数组有逗号,可能会有问题

将数组数据输出到html表格(for, $.each())

html代码:
<html>
<body>
    <div id="dataview"></div>
</body>
</html>
json数据:
var students=[
    {"id":1,"name":"John","school":"清华大学"},
    {"id":2,"name":"Lily","school":"北京大学"},
    {"id":3,"name":"Susan","school":"上海大学"},
    {"id":4,"name":"Zhiyi Wang","school":"北京大学"}
];
将stucents里面的数据显示到div[id='dataview']里面
js代码:
方法一
var html = '<table>';
html += '<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>学校</td>\
        </tr>';
for(var i = 0; i < students.length; i++)
{
    var item = students[i];
    html += '<tr>'
            +'<td>'+ item["id"] +'</td>'
            +'<td>'+ item["name"] +'</td>'
            +'<td>'+ item["school"] +'</td>'
        +'</tr>';
}
html += '</table>';
$("#dataview").html(html);

//或者
var html2 = '<table>';
html2 += '<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>学校</td>\
        </tr>';
$.each(students,function(index,item){
    html2 += '<tr>'
            +'<td>'+ item["id"] +'</td>'
            +'<td>'+ item["name"] +'</td>'
            +'<td>'+ item["school"] +'</td>'
        +'</tr>';
});
html2 += '</table>';
$("#dataview").html(html2);
方法二
var table=$('<table></table>');
var header=$('<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>学校</td>\
        </tr>');
table.append(header);
for(var i=0;i<students.length;i++)
{
  var item = students[i];
  var tr=$('<tr>'
            +'<td>'+item["id"]+'</td>'
            +'<td>'+item["name"]+'</td>'
            +'<td>'+item["school"]+'</td>'
        +'</tr>');
    table.append(tr);
}
$("#dataview").append(table);//此段代码也可以放置再第1行后面

//或者
var table2=$('<table></table>');
var header2=$('<tr>\
            <td>ID</td>\
            <td>姓名</td>\
            <td>学校</td>\
        </tr>');
header2.append(header2);
$.each(students,function(index,item){
     var tr=$('<tr>'
            +'<td>'+item["id"]+'</td>'
            +'<td>'+item["name"]+'</td>'
            +'<td>'+item["school"]+'</td>'
        +'</tr>');
    table2.append(tr);
})
$("#dataview").append(table2); 

遍历JSON对象所有键值(所有属性和值)

var a = {Id: 0, Title: "kuujia soft", AddDate: "2017-08-05"};
var str = "";
for(var key in a){
    str += key + ":" + a[key] + "<br />";
}

将JSON对象值输出到form表单

json数据:
var data={"id":1,"name":"John","school":"清华大学","sex":"男"}

普通用法

html代码:
<form>
  <div>
    <label>编号</label>
    <input type="text" id="userid" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" id="username" />
  </div>
  <div>
    <label>性别</label>
    <select id="usersex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就读学校</label>
    <input type="text" id="gotoschool" />
  </div>
</form>


表单赋值:
$("#userid").val(data.id);
//或者$("#userid").val(data["id"]);
$("#username").val(data.name);
//或者$("#username").val(data["name"]);
$("#usersex").val(data.sex);
//或者$("#usersex").val(data["sex"]);
$("#gotoschool").val(data.school);
//或者$("#gotoschool").val(data["school"]);

进阶用法

html代码:
<!--为需要赋值的DOM增加一个自定义属性 field,值为json对象的键(属性)名-->
<form>
  <div>
    <label>编号</label>
    <input type="text" field="id" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" field="name" />
  </div>
  <div>
    <label>性别</label>
    <select field="sex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就读学校</label>
    <input type="text" field="school" />
  </div>
</form>


表单赋值:
//方式一
for(var key in data)
{
    $("input[field='"+key+"'],select[field='"+key+"']").val(data[key]);      
}
//方式二
$("input[field],select[field]").each(function(){
    var field=$(this).attr("field");
    if(field!=null&&data[field]!=null)
    {
        $(this).val(data[field]);
    }
});

从form表单获取值到JSON对象

普通用法

html代码:
<form>
  <div>
    <label>编号</label>
    <input type="text" id="userid" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" id="username" />
  </div>
  <div>
    <label>性别</label>
    <select id="usersex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就读学校</label>
    <input type="text" id="gotoschool" />
  </div>
</form>


js获取表单值到json对象里面:
var data={};
data["id"]=$("#userid").val();
data["name"]=$("#username").val();
data["sex"]=$("#usersex").val();
data["school"]=$("#gotoschool").val();

进阶用法

html代码:
<!--为需要赋值的DOM增加一个自定义属性 field,值为json对象的键(属性)名-->
<form>
  <div>
    <label>编号</label>
    <input type="text" field="id" />
  </div>
  <div>
    <label>姓名</label>
    <input type="text" field="name" />
  </div>
  <div>
    <label>性别</label>
    <select field="sex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
  </div>
  <div>
    <label>就读学校</label>
    <input type="text" field="school" />
  </div>
</form>


js获取表单值到json对象里面:
var data={};
$("input[field],select[field]").each(function(){
  var field=$(this).attr("field");
  data[field]=$(this).val();
});

从一个table表单获取数据到JSON数组

比如批量录入学员信息后需要获取数据到json数组

html代码:
<form>
  <table>
    <tr>
        <td>ID:<input type="text" field="id" /></td>
        <td>姓名:<input type="text" field="name" /></td>
        <td>性别:<select field="sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select></td>
        <td>学校:<input type="text" field="school" /></td>
    </tr>
    <tr>
        <td>ID:<input type="text" field="id" /></td>
        <td>姓名:<input type="text" field="name" /></td>
        <td>性别:<select field="sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select></td>
        <td>学校:<input type="text" field="school" /></td>
    </tr>
    <tr>
        <td>ID:<input type="text" field="id" /></td>
        <td>姓名:<input type="text" field="name" /></td>
        <td>性别:<select field="sex">
            <option value="男">男</option>
            <option value="女">女</option>
          </select></td>
        <td>学校:<input type="text" field="school" /></td>
    </tr>
  </table>
</form>


js代码:
var students=[];
$("form table tr").each(function(){
    var _s=$(this);
    var item={};
    $("input[field],select[field]",_s).each(function(){   //注意此行代码的$(a, b)两个参数的用途:
      var field=$(this).attr("field");//注意此行的this和第3行代码的this
      item[field]=$(this).val();
    });
    students.push(item);
});

Jquery常用方法

$.trim()    左右两边去空格
$.each()    遍历函数,如:遍历一个数组,遍历一个页面的所有链接/图片等等
$.inArray() 查找
$(a,b)  获取元素
$(a,b).val()    设置或获取一个节点(input,textarea,select)的值
$(a,b).html()   设置或获取一个节点的html
$(a,b).text()   设置或获取一个节点的text
$(a,b).show()   显示一个元素
$(a,b).hide()   隐藏一个元素
$(a,b).toggle() 切换显示/隐藏匹配的元素(如果显示就隐藏,如果隐藏就显示),并可选附带过渡动画效果。
$(a,b).attr()   设置或获取某个属性
$(a,b).prop()   设置或获取某个属性
$(a,b).is() 重用于判断一个元素是否隐藏,一个复选框是否选中
$(a,b).remove() 移除一个元素
$(a,b).append(c)    往一个元素内(末尾)追加一个子元素
$(a,b).prepend(c)   往一个元素内(开始)追加一个子元素
$(a,b).before(c)    在一个元素(外部)前面插入一个元素
$(a,b).after(c) 在一个元素(外部)后面插入一个元素
$(a,b).empty()  清空一个元素里面的所有子节点
$(a,b).addClass(c)  增加一个样式(css类名)
$(a,b).toggleClass(c)   切换当前对象所匹配的每一个元素上指定的css类名。
$(a,b).removeClass(c)   移除一个样式(css类名)
$(a,b).css()    设置或返回元素的CSS属性
$(a,b).offset() 获取鼠标相对于当前文档的坐标。
$(a,b).position()   获取当前元素相对于离它最近的拥有定位的祖辈元素的坐标。

jQuery 选择器

选择器
实例
选取

基本选择器——根据多个选择器的组合筛选元素

[s1,s2,sN]
$("p, div, #abc")
所有的p元素、div元素和 id="abc"的元素

[s1s2sN]
$(":radio[name=uid]:checked")
所有被选中的name="uid"的radio元素

[ancestor escendant]
$("p span")
p标签内的所有span元素

[parent > child]
$("p > span")
所有作为p标签的直接子元素的span元素

[prev + next]
$("label + input")
所有紧跟在label元素后面的那个同辈input元素

[prev ~ sibings]
$("tr#L2 ~ tr")
在id="L2"的tr元素之后的所有同辈tr元素

基本选择器——根据id、class类名、标签名等筛选元素

[\*]
$("*")
所有元素

[#id]
$("#abc")
id="abc"的元素

[.className]
$(".post")
所有包含类名"post"的元素

[tagName]
$("p")
所有p元素

伪类选择器——根据元素在匹配到的所有元素中的特定次序筛选元素

[:first]
$("p:first")
第一个p标签

[:last]
$("p:last")
最后一个p标签

[:even]
$("tr:even")
所有偶数tr标签

[:odd]
$("tr:odd")
所有奇数tr标签

[:eq(index)]
$("li:eq(3)")
第4个li标签(index从0开始算起)

[:gt(index)]
$("li:gt(2)")
所有index大于2的 li 标签(第4、5、6……个li标签)

[:lt(index)]
$("li:lt(2)")
所有index小于2的li标签(第1、2个li标签)

伪类选择器——根据元素在父元素的子元素中的特定次序筛选元素


[:first-child]
$("span:first-child")
所有作为父元素的第一个子元素的span元素

[:last-child]
$("span:last-child")
所有作为父元素的最后一个子元素的span元素

[:only-child]
$("span:only-child")
所有作为父元素的唯一子元素的span元素

[:nth-child(n)]
$("li:nth-child(2)")
所有作为父元素的第2个子元素的li标签(n从1开始算起)

[:nth-last-child(n)]
$("li:nth-last-child(2)")
所有作为父元素的倒数第2个子元素的li标签

[:first-of-type]
$("p:first-of-type")
所有作为父元素的第一个p类型的子元素

[:last-of-type]
$("p:last-of-type")
所有作为父元素的最后一个p类型的子元素

[:only-of-type]
$("p:only-of-type")
所有作为父元素的唯一一个p类型的子元素

[:nth-of-type(n)]
$("li:nth-of-type(2)")
所有作为父元素的第2个li类型的子元素(n从1开始算起)

[:nth-last-of-type(n)]
$("li:nth-last-child(2)")
所有作为父元素的倒数第2个li类型的子元素

伪类选择器——根据包含、排除、可见、动画或其他关系筛选元素

[:has(selector)]
$("ul:has(li.abc)")
所有包含类名为"abc"的li标签的ul元素

[:not(selector)]
$("input:not(:text)")所有不是文本框的input元素

[:contains(text)]
$(":contains(abc)")
所有包含文本"abc"的元素

[:parent]
$(":parent")
所有包含子元素或文本内容(哪怕是空格或换行)的元素

[:empty]
$(":empty")
所有没有子元素和文本内容(哪怕是空格或换行)的元素

[:visible]
$(":visible")
所有可见的元素

[:hidden]
$(":hidden")
所有不可见的元素(包括type="hidden"的input元素)

[:header]
$(":header")
所有标题标签:h1~h6

[:animated]
$(":animated")
所有正在执行动画效果的元素

[:focus]
$(":focus")
当前获得焦点的元素

[:root]
$(":root")
当前文档的根元素(html元素)

[:target]
$(":target")
id属性等于当前页面URI中的hash码值的元素

[:lang(language)]
$(":lang(en)")
所有lang属性以"en"为前缀的元素

属性相关选择器

[[attribute]]
$("[href]")
所有带有href属性的元素

[[attribute=value]]
$("[name=uid]")
所有name="uid"的元素

[[attribute!=value]]
$("[name!=uid]")
所有name属性的值不等于"uid"的元素

[[attribute^=value]]
$("[name^=uid]")
所有name属性的值以"uid"开头的元素

[[attribute$=value]]
$("[src$='.gif']")
所有src属性以".gif"结尾的元素

[[attribute|=value]]
$("[name|=uid]")
name属性的值等于"uid",或以"uid-"开头的所有元素

[[attribute~=value]]
$("[name~='uid']")
name属性的值包含给定的单词"uid"的所有元素("uid"与其他词以空格分隔)

[[attribute*=value]]
$("[name*=uid]")
所有name属性的值包含"uid"的元素

伪类选择器——表单相关


[:input]
$(":input")
所有input、select、textarea和button标签

[:text]
$(":text")
所有type="text"的input元素

[:password]
$(":password")
所有type="password"的input元素

[:radio]
$(":radio")
所有type="radio"的input元素

[:checkbox]
$(":checkbox")
所有type="checkbox"的input元素

[:submit]
$(":submit")
所有type="submit"的input和button元素

[:reset]
$(":reset")
所有type="reset"的input元素和button元素

[:button]
$(":button")
所有button标签(不区分type)和type="button"的input元素

[:image]
$(":image")
所有type="image"的input元素

[:file]
$(":file")
所有type="file"的input元素

伪类选择器——表单状态相关(表单控件是指input、select、textarea、button、option元素)

[:enabled]
$(":enabled")
所有可用(没有disabled属性)的表单控件元素

[:disabled]
$(":disabled")
所有禁用(带有disabled属性)的表单控件元素

[:selected]
$(":selected")所有被选中的option元素

[:checked]
$(":checked")
所有被选中的radio、checkbox和option元素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,757评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,478评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,540评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,593评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,903评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,329评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,659评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,383评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,055评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,337评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,864评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,227评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,820评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,999评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,750评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,365评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,260评论 2 258

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,087评论 18 139
  • FreeCodeCamp - Basic JavaScript 写在前面: 我曾经在进谷前刷过这一套题,不过当时只...
    付林恒阅读 16,299评论 5 28
  • 站在2016年的当下,创业已不再是少数人的行为,这已然是一个“万众创业”的时代,每个人身边都不乏各种创业者,小至微...
    凡修何阅读 484评论 0 2
  • 很想知道你近况,我听人说 还不如你对我讲 ----《我最亲爱的》 还记得阿妹的这首歌,还记得,这是我最感同身受的...
    法图麦李阅读 278评论 0 0