jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素，返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass") 层叠选择器： $("form input") 选择所有的form元素中的input元素 $("#main > *") 选择id值为main的所有的子元素 $("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素 $("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签 基本过滤选择器： $("tr:first") 选择所有tr元素的第一个 $("tr:last") 选择所有tr元素的最后一个 $("input:not(:checked) + span") 过滤掉：checked的选择器的所有的input元素 $("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） $("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素 $("td:eq(2)") 选择所有的td元素中序号为2的那个td元素 $("td:gt(4)") 选择td元素中序号大于4的所有td元素 $("td:ll(4)") 选择td元素中序号小于4的所有的td元素 $(":header") $("div:animated") 内容过滤选择器： $("div:contains('John')") 选择所有div中含有John文本的元素 $("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组 $("div:has(p)") 选择所有含有p标签的div元素 $("td:parent") 选择所有的以td为父节点的元素数组 可视化过滤选择器： $("div:hidden") 选择所有的被hidden的div元素 $("div:visible") 选择所有的可视化的div元素 属性过滤选择器： $("div[id]") 选择所有含有id属性的div元素 $("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素 $("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素 $("input[name^='news']") 选择所有的name属性以'news'开头的input元素 $("input[name$='news']") 选择所有的name属性以'news'结尾的input元素 $("input[name*='man']") 选择所有的name属性包含'news'的input元素 $("input[id][name$='man']") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 子元素过滤选择器： $("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") $("div span:first-child") 返回所有的div元素的第一个子节点的数组 $("div span:last-child") 返回所有的div元素的最后一个节点的数组 $("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组 表单元素选择器： $(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button $(":text") 选择所有的text input元素 $(":password") 选择所有的password input元素 $(":radio") 选择所有的radio input元素 $(":checkbox") 选择所有的checkbox input元素 $(":submit") 选择所有的submit input元素 $(":image") 选择所有的image input元素 $(":reset") 选择所有的reset input元素 $(":button") 选择所有的button input元素 $(":file") 选择所有的file input元素 $(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域 表单元素过滤选择器： $(":enabled") 选择所有的可操作的表单元素 $(":disabled") 选择所有的不可操作的表单元素 $(":checked") 选择所有的被checked的表单元素 $("select option:selected") 选择所有的select 的子元素中被selected的元素 选取一个 name 为”S_03_22″的input text框的上一个td的text值 $(”input[@ name =S_03_22]“).parent().prev().text() 名字以”S_”开始，并且不是以”_R”结尾的 $(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 一个名为 radio_01的radio所选的值 $(”input[@ name =radio_01][@checked]“).val(); $("A B") 查找A元素下面的所有子节点，包括非直接子节点 $("A>B") 查找A元素下面的直接子节点 $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点 例子：找到表单中所有的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form input") 结果: [ <input name="name" />, <input name="newsletter" /> ] 2. $("A>B") 查找A元素下面的直接子节点 例子：匹配表单中所有的子级input元素。 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form > input") 结果: [ <input name="name" /> ] 3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点 例子：匹配所有跟在 label 后面的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("label + input") 结果: [ <input name="name" />, <input name="newsletter" /> ] 4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点 例子：找到所有与表单同辈的 input 元素 HTML 代码: <form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" /> jQuery 代码: $("form ~ input") 结果: [ <input name="none" /> ]

:checked input:checked 选择所有选中的表单元素:disabled input:disabled 选择所有禁用的表单元素:empty p:empty 选择所有没有子元素的p元素:enabled input:enabled 选择所有启用的表单元素:first-of-type p:first-of-type 选择每个父元素是p元素的第一个p子元素:in-range input:in-range 选择元素指定范围内的值:invalid input:invalid 选择所有无效的元素:last-child p:last-child 选择所有p元素的最后一个子元素:last-of-type p:last-of-type 选择每个p元素是其母元素的最后一个p元素:not(selector) :not(p) 选择所有p以外的元素:nth-child(n) p:nth-child(2) 选择所有 p 元素的父元素的第二个子元素:nth-last-child(n) p:nth-last-child(2) 选择所有p元素倒数的第二个子元素:nth-last-of-type(n) p:nth-last-of-type(2) 选择所有p元素倒数的第二个为p的子元素:nth-of-type(n) p:nth-of-type(2) 选择所有p元素第二个为p的子元素:only-of-type p:only-of-type 选择所有仅有一个子元素为p的元素:only-child p:only-child 选择所有仅有一个子元素的p元素:optional input:optional 选择没有"required"的元素属性:out-of-range input:out-of-range 选择指定范围以外的值的元素属性:read-only input:read-only 选择只读属性的元素属性:read-write input:read-write 选择没有只读属性的元素属性:required input:required 选择有"required"属性指定的元素属性:root root 选择文档的根元素:target #news:target 选择当前活动#news元素(点击URL包含锚的名字):valid input:valid 选择所有有效值的属性:link a:link 选择所有未访问链接:visited a:visited 选择所有访问过的链接:active a:active 选择正在活动链接:hover a:hover 把鼠标放在链接上的状态:focus input:focus 选择元素输入后具有焦点:first-letter p:first-letter 选择每个 元素的第一个字母:first-line p:first-line 选择每个 元素的第一行:first-child p:first-child 选择器匹配属于任意元素的第一个子元素的 元素:before p:before 在每个 元素之前插入内容:after p:after 在每个 元素之后插入内容:lang(language) p:lang(it) 为 元素的lang属性选择一个开始值

我是这样做的：1.获取需要变成该输入框的input框的实际宽度。2.获取输入框的maxlength参数。（设置最大为8，最小为3）3.获取原始框的父元素，在父元素里插入一个div，将input框隐藏并插入到该div里。4.实例化maxlength个input框插入div，每个input框中间插一个i标签。input无左右边框，i只有虚线右边框。美化样式。5.设置一个计数器active，初始化指向当前的第一个input框下标。6.给每个input框添加click事件，触发时强制光标focus到第active框，及当前的第一个空白框。7.给每个input框添加focus事件，触发时添加监听keyup事件。8.给每个input框添加blur事件，触发时移除元素的keyup事件。9.keyup事件触发时，获取键盘键值，键盘键值为数字的则写入并且计数器active加1，否则不写入，当为退格时删除当前元素的值并且计数器active减1。10.keyup执行之后触发一个回调函数，获取所有input的值写入隐藏的input框，判断active的值是否超出边界，超出边界则置为边界值，手动触发当前计数器指向的input的click事件。

你可以参考一下原文中给出的关于css3通用兄弟元素选择器的文章 http://www.w3cplus.com/css3/basic-selectors通用兄弟元素选择器是CSS3新增加一种选择器，这种选择器将选择某元素后面的所有兄弟元素，他们也和相邻兄弟元素类似，需要在同一个父元素之中，换句话说，E和F元素是属于同一父元素之内，并且F元素在Ｅ元素之后，那么E ~ F 选择器将选择中所有Ｅ元素后面的Ｆ元素。 回到原文内容中的html代码结构 <div class="container"> <!-- 必须保证input和label匹配 --> <input type="radio" id="men" name="clothing " /> <label for="men">男装</label> <input type="radio" id="women" name="clothing "/> <label for="women">女装</label> <input type="radio" id="children" name="clothing "/> <label for="children">童装</label> <input type="radio" id="reset" name="clothing "/> <label for="reset">重置</label> <!-- 要被过滤的内容元素需要与input元素是兄弟元素 --> <div class="tile men"> <img src="" alt=""> </div> <div class="tile women"> <img src="" alt=""> </div> <div class="tile children"> <img src="" alt=""> </div> <!-- 此处省略N个.men、.women和.children元素 --> </div> 再结合其css代码 ~ .women, ~ .children 意思就是选择选中.container类下与men类同级的women和children类，*表示所有的label元素被选中

Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄。我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM 树中的句柄，该值会作为回调函数的第一个参数返回： class CustomForm extends Component { handleSubmit = () => { console.log("Input Value: ", this.input.value); }; render() { return ( <form onSubmit={this.handleSubmit}> <input type="text" ref={input => (this.input = input)} /> <button type="submit">Submit</button> </form> ); } } 上述代码中的 input 域包含了一个 ref 属性，该属性声明的回调函数会接收 input 对应的 DOM 元素，我们将其绑定到 this 指针以便在其他的类函数中使用。另外值得一提的是，refs 并不是类组件的专属，函数式组件同样能够利用闭包暂存其值： function CustomForm({ handleSubmit }) { let inputElement; return ( <form onSubmit={() => handleSubmit(inputElement.value)}> <input type="text" ref={input => (inputElement = input)} /> <button type="submit">Submit</button> </form> ); }

name：定义 input 元素的名称• value: 规定 input 元素的值只有name相同的input才是同一个单选。即同name下，男性和女性为互斥选项。value为提交表单后后取得该name的值。这个鸽子中选择男性后提交则Sex=male参考：http://www.w3school.com.cn/tags/tag_input.asp

简单点的做法，就是写一个监听事件，当input输入完时触发，将input的value写入input的某个属性，比如： input.attr("ov",oldValue); 这样就把input输入的内容暂存在了页面DOM元素中，如果使用则： var nv = input.attr("ov");

其实你用审查元素orFireBug看的话你会发现其实input[2]（姑且让我这么称呼它）的实际width是100%的，而不是你所谓的默认宽度。这里就要问了，为什么明明width:50px设置在后面，反而得到的是前面的width:100%这个值呢？这里需要注意的是类似权重（原谅我，我也不太清楚这个应该怎么称呼）的东西CSS选择器的优先级。仔细看你的CSS你会看到你设置width:100%的标签用了input.text两个标签，而设置width:50px只用了.input一个标签。这样做，无形中就把input.text的权重增大了，也就是说把它变得更优先了，所以解析器默认使用了width:100%这个参数。好了，到这里，给你一个意见，把.input改成.input.text，看看会发生什么？解决了这个，我们来继续看看问题。为什么width:100%参数生效了，可是宽度还是默认的呢？这只有一个可能，那就是包裹它的标签的宽度有问题。我们往上看一下，发现你对包裹input标签的div父标签设置了float:left这个属性。通过搜索，我们会发现，float参数具有破坏div标签宽度的作用（搜索了一下，发现很多专题讲述float的都很复杂，这里给一个直接简单的地址：http://my.oschina.net/jing31/blog/6601）。你又继续问了一个问题，为何这里的100%和auto是一样的效果呢。这里就要对100%进行解释。width为100%的话实际上应该理解为宽度为其父元素的100%宽度。但是我们又知道，父元素的宽度被float属性破坏了，其实际宽度应该是其子元素被撑大后的宽度。也就是说width:100%找不到比较对象了，不知道是谁的100%了（这里可能理解的不是那么准确）。所以浏览器解释成了auto。这里，你可以试验的将width:100%修改成width:300px，看看会发生什么？或者你在div父标签中填充点文字进去，看看又会发生什么？再次新加的内容可以很好的看上一段粗体的这个解释，应该是正常的情况。由于内部有文字所以div的宽度存在了基数，有了比较对象。没有文字的情况下，你可以这么理解，父元素的宽度靠子元素决定，子元素的宽度靠父元素决定，然后陷入死循环，然后浏览器疯了，然后浏览器就傲娇了，不知所措了，就给了默认的值了（这种情况应该挺正常的吧←_←）。好了，到这里问题应该解决了。最后结果是width:100%优先级高于width:50px而应用到了标签中，但是由于父标签的width变成了最小，所以被包裹的input也变成了默认的了。这里在给个意见，如果把父标签的float参数取消，看看又会发生什么呢？

经测试无论是display:none;还是visibility:hidden;隐藏的元素的都无法被点击,但是你可以在另一事件中获取到该input元素,然后在该事件中调用隐藏的input的点击事件,只不过这样没什么意义,我用这个模拟过图片上传,点击一张图片,然后实际点击的是一个文件input,然后可以选择文件

The submit event is fired when a form is submitted. Note that submit is fired only on the form element, not the button or submit input. (Forms are submitted, not buttons.) onsubmit添加在form元素上而不是input元素上当form表单被提交，submit事件发生时，onsubmit指向的函数就会被执行 <form action="www.baidu.com" onsubmit="return false;"> <input type="submit" class="btn" id="submit-comment" value="提交评论" ></input> </form>

可以使用jQuery 遍历中的 not() 方法来排除某些元素，例如根据元素的id，class等排除，示例代码 $("div.content ").not(".keep"); // 表示content类的div下除keep类以外的所有元素；另外，注意表示所有元素 下面给出实例演示：删除content类的div下除keep类以外的所有元素 创建Html元素<div class="box"> <span>点击按钮删除下面绿色框中所有不是keep类的元素，keep类的元素用红色区分。</span><br> <div class="content"> <input type="checkbox" name="item"><span>萝卜</span> <input type="checkbox" name="item"><span>青菜</span> <input type="checkbox" name="item" class="keep"><span class="keep">小葱</span><br> <input type="checkbox" name="item" class="keep"><span class="keep">豆腐</span> <input type="checkbox" name="item"><span>土豆</span> <input type="checkbox" name="item"><span>茄子</span><br> <input type="text" value="我也不是keep类的"> </div> <input type="button" value="删除"></div> 设置css样式div.box{width:300px;height:200px;padding:10px 20px;border:4px dashed #ccc;}div.box>span{color:#999;font-style:italic;}.keep{color:red;}div.content{width:250px;height:100px;margin:10px 0;border:1px solid green;}input{margin:10px;}input[type='button']{width:200px;height:35px;margin:10px;border:2px solid #ebbcbe;} 编写jquery代码$(function(){ $("input:button").click(function() { $("div.content ").not(".keep").each(function() { // ""表示div.content下的所有元素 $(this).remove(); }); });}) 观察显示效果 删除前 删除后 答案来源于网络

在不支持html5的环境下，可以在不想对其自动填充的input元素之上再添加一个display为none的input元素

在浏览器中解析后的html文件中是存在span的，而文本框的input也是在span中，所以需要这样选择$("#TxtClientName").next("span")是获取id为TxtClientName同级的后面span节点$("input",$("#TxtClientName").next("span"))是表示选择input元素和获取id为TxtClientName同级的后面span元素，逗号分隔多个选择器

1.汉诺塔问题 import javax.swing.JOptionPane; 　　public class Hanoi { 　　private static final String DISK_B = "diskB"; 　　private static final String DISK_C = "diskC"; 　　private static final String DISK_A = "diskA"; 　　static String from=DISK_A; 　　static String to=DISK_C; 　　static String mid=DISK_B; 　　public static void main(String[] args) { 　　String input=JOptionPane.showInputDialog("please input the number of the disks you want me move."); 　　int num=Integer.parseInt(input); 　　move(num，from，mid，to); 　　} 　　private static void move(int num， String from2， String mid2， String to2) { 　　if(num==1){ 　　System.out.println("move disk 1 from "+from2+" to "+to2); 　　} 　　else { 　　move(num-1，from2，to2，mid2); 　　System.out.println("move disk "+num+" from "+from2+" to "+to2); 　　move(num-1，mid2，from2，to2); 　　} 　　} 　　} 2. 这是一个排列的例子，它所做的工作是将输入的一个字符串中的所有元素进行排序并输出，例如：你给出的参数是"abc" 则程序会输出： 　　abc 　　acb 　　bac 　　bca 　　cab 　　cba 　　(1)算法的出口在于：low=high也就是现在给出的排列元素只有一个时。 　　(2)算法的逼近过程：先确定排列的第一位元素，也就是循环中i所代表的元素， 　　然后low+1开始减少排列元素，如此下去，直到low=high 　　public static void permute(String str) { 　　char[] strArray = str.toCharArray(); 　　permute(strArray， 0， strArray.length - 1); 　　} 　　public static void permute(char[] list， int low， int high) { 　　int i; 　　if (low == high) { 　　String cout = ""; 　　for (i = 0; i <= high; i++) 　　cout += list[i]; 　　System.out.println(cout); 　　} else { 　　for (i = low; i <= high; i++) { 　　char temp = list[low]; 　　list[low] = list[i]; 　　list[i] = temp; 　　permute(list， low + 1， high); 　　temp = list[low]; 　　list[low] = list[i]; 　　list[i] = temp; 　　} 　　} 　　} 　　3。这是一个组合的例子，与上述的例子相似，只是它所做的工作是，输出所给字符串中制定数目的元素的组合种类 　　(1)程序出口在于n=1，此时只要输出目标数组的所有元素即可 　　(2)逼近过程，当n>1　的时候，我们先取第一个元素放入目标数组中，然后n-1，如此下去，最后出来。 　　import javax.swing.JOptionPane; 　　public class Combination { 　　/** 　　* @param args 　　*/ 　　public static void main(String[] args) { 　　String input = JOptionPane.showInputDialog("please input your String： "); 　　String numString = JOptionPane.showInputDialog("please input the number of your Combination： "); 　　int num = Integer.parseInt(numString); 　　Combine(input， num); 　　} 　　private static void Combine(String input， int num) { 　　char[] a = input.toCharArray(); 　　String b = ""; 　　Combine(a， num， b， 0， a.length); 　　} 　　private static void Combine(char[] a， int num， String b， int low， int high) { 　　if (num == 0) { 　　System.out.println(b); 　　} else { 　　for (int i = low; i < a.length; i++) { 　　b += a[i]; 　　Combine(a， num - 1， b， i+1， a.length); 　　b=b.substring(0， b.length()-1); 　　} 　　} 　　} 　　}

建议你改进一下，首先应该优先使用placeholder <input type="text" name="搜索" value="搜索" placeholder="搜索" id="selector"/> 这个placeholder在ff、chrome等浏览器支持修改样式 ::-moz-placeholder{color:red;} //ff ::-webkit-input-placeholder{color:red;} //chrome,safari :-ms-input-placeholder{color:red;} //ie10 然后判断一下 如果浏览器不支持placeholder(我这个例子只判断了ie8)，再进行js模拟placeholder的操作 $(function(){ if(!!navigator.userAgent.match(/MSIE 8.0/)){ $('input[placeholder], textarea[placeholder]').each(function() { var input = $(this); if (input.val() === '' && input.attr("placeholder") !== ''){ input.addClass("placeholder").val(input.attr('placeholder')); } input.focus(function() { if (input.val() === input.attr('placeholder')) { input.val(''); } }); input.blur(function() { if (input.val() === '' || input.val() === input.attr('placeholder')) { input.val(input.attr('placeholder')); } }); }); } }); 注释::text选择所有类型为text的input元素。如果需要自定义样式，并且希望placeholder在所有浏览器下表现一致，可以通过利用label标签模拟一个placeholder的样式放到输入框上，当输入框获得焦点的时候，隐藏label，当输入框失去焦点的时候，显示label。

<input type="text" name="搜索" value="搜索" placeholder="搜索" id="selector"/> 这个placeholder在ff、chrome等浏览器支持修改样式 ::-moz-placeholder{color:red;} //ff ::-webkit-input-placeholder{color:red;} //chrome,safari :-ms-input-placeholder{color:red;} //ie10 然后判断一下 如果浏览器不支持placeholder(我这个例子只判断了ie8)，再进行js模拟placeholder的操作 $(function(){ if(!!navigator.userAgent.match(/MSIE 8.0/)){ $('input[placeholder], textarea[placeholder]').each(function() { var input = $(this); if (input.val() === '' && input.attr("placeholder") !== ''){ input.addClass("placeholder").val(input.attr('placeholder')); } input.focus(function() { if (input.val() === input.attr('placeholder')) { input.val(''); } }); input.blur(function() { if (input.val() === '' || input.val() === input.attr('placeholder')) { input.val(input.attr('placeholder')); } }); }); } }); 注释::text选择所有类型为text的input元素。如果需要自定义样式，并且希望placeholder在所有浏览器下表现一致，可以通过利用label标签模拟一个placeholder的样式放到输入框上，当输入框获得焦点的时候，隐藏label，当输入框失去焦点的时候，显示label。根据以上的代码 你就可以设置placeholder这个class的style了