Edit in JSFiddle

$(function () {
    $("#btn1").click(function () {
        $("input[type='text'][size]").css("backgroundColor", "red");
    });
    $("#btn2").click(function () {
        $("input[type='text'][size='10']").css("backgroundColor", "yellow");
    });
    $("#btn3").click(function () {
        $("input[type='text'][value^='bar']").css("backgroundColor", "red");
    });
    $("#btn4").click(function () {
        $("input[type='text'][value$='bar']").css("backgroundColor", "yellow");
    });
    $("#btn5").click(function () {
        $("input[type='text'][value*='bar']").css("backgroundColor", "blue");
    });
    $("#btn6").click(function () {
        $("input[type='text'][value!='bar']").css("backgroundColor", "gray");
    });
    $("#btn7").click(function () {
        $("input[type='text'][lang|='zh']").css("backgroundColor", "red");
    });
    $("#btn8").click(function () {
        $("input[type='text'][class~='c1']").css("backgroundColor", "yellow");
    });
});

<div>
    <input id="btn1" type="button" value="E[A]" />
    <input id="btn2" type="button" value="E[A='V']" /><br />
    <input id="tbx1" type="text" value="tbx1" size="10" /><br />
    <input id="tbx2" type="text" value="tbx2" size="20" /><br />
</div>
<br />
<div>
    <input id="btn3" type="button" value="E[A^='V']" />
    <input id="btn4" type="button" value="E[A$='V']" />
    <input id="btn5" type="button" value="E[A*='V']" />
    <input id="btn6" type="button" value="E[A!='V']" /><br />
    <input id="tbx3" type="text" value="b1foo" /><br />
    <input id="tbx4" type="text" value="ba2foo" /><br />
    <input id="tbx5" type="text" value="bar3foo" /><br />
    <input id="tbx6" type="text" value="foo4bar" /><br />
</div>
<br />
<div>
    <input id="btn7" type="button" value="E[A|='V']" />
    <input id="btn8" type="button" value="E[A~='V']" /><br />
    <input id="tbx7" type="text" value="tbx7" lang="zh-tw" class="c1 c2" /><br />
    <input id="tbx8" type="text" value="tbx8" lang="zh-cn" class="c1 c3" /><br />
</div>