jQuery系列之操作select标签

每次看完东西基本就忘了,现在决定写一下博客来记录,不知道效果咋样。

一、jQuery操作选择器

1.基本选择器

  关于基本选择器,我就不用太多说了,包括了ID、类、标签等选择器。

2.层次选择器

  我觉得掌握层次选择器需要了解dom元素的树形结构,这样你才能准确的抓住你想要操作的dom元素。

  下面介绍一下层次选择器:

  a. $("ancestor descendant"),表示选取ancestor元素中的所有descendant元素,ancestor表示上代的一起,descendant表示后代的意思。

    举例,$("div span"),表示选选取<div>中所有<span>元素。

  b. $("parent>child"),这种选择器和上种有一点相似,不同的的是这个表示的是选取parent元素下的child子元素,上种是选取的后代元素,这个需要我们去区分。

    举例,$("div>span"),表示选取<div>下的子元素<span>。

  c. $("prev+next"),表示选取perv元素的下一个同辈元素,记住是同辈元素。此选择器可以用next()方法代替。

      举例,$(".div+span"),表示选取类名为.div的下一个<span>元素,也可以使用$(".div").next()表达。

  d. $("prev~siblings"),表示选取prev元素之后的所有siblings元素。此选择器可以用nextAll()方法代替。

    举例,$("#prev~div"),表示选取id为prev之后的所有div元素,当然,也是同辈的。也可以使用$("#prev").nextAll()代替。

  特别说明一下,$("#prev~div")选择器只能选取#prev之后的同辈div,$("#prev").siblings("div")则不管前后都会被选取。

3.过滤性选择器

  过滤性选择器主要是通过过滤规则来筛选出所需的DOM元素,过滤规则与CSS中的伪类选择器语法相同,选择器都以一个冒号(:)开头,按照不同的过滤规则,此类选择器还分为,基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤、表单对象属性过滤。

  a.基本过滤选择器

  :first,选取第一个元素,例如,$("div:first"),表示选择div中的第一个div元素。

  :last,选取最后一个元素,方法与上。

  :not(selector),去除匹配到的元素,例如,$("input:not(.myclass)"),选择input中类名不是myclass的元素。

  :even,选取索引是偶数的所有元素,索引从0开始算,例如,$("input:even"),选择input索引值为偶数的元素。

  :odd,选取索引是奇数的所有元素,方法与上。

  :eq[index],选取索引值为给定值的元素,例如,$("input:eq[1]"),选择索引值为1的input元素。

  :gt[index],选取索引值为大于给定值的元素,不包括给定值。

  :It[index],选取索引小于给定值得元素,不包括给定值。

  :header,选取页面上的所有标题元素,如h1,h2等......

  :animated,选取正在执行动画的元素。

  b.内容过滤选择器

  :contains(text),选取含有文本内容为“text”的元素,例如 $("div:contains(‘test‘)")。

  :empty,选取不包含子元素或者文本的空元素,例如$("div:empty")

  :has(selector),选取含有选择器所匹配的元素的元素,例如$("div:has(p)")选择含有p元素的div

  :parent,选取含有子元素的元素,例如$("div:parent")

  c.可见性过虑选择器

  此类选择器就两种,:hidden和:visible表示选择隐藏或者可见的元素。

  例如$(":hidden")、$("div:hidden")、$(":visible")、$("div:visible")

  d.属性过滤选择器

  [attribute],选取拥有此属性的元素,例如,$("div[id]")选取拥有id属性的元素。

  [attribute=value],选取属性值等于value的元素,例如,$("div[id=test]")。

  [attribute!=value],选取属性值不等于value的元素。

  [attribute^=value],选取属性值以value开始的元素。

  [attribute$=value],选取属性值以value结束的元素。

  [attribute*=value],选取属性值还有value的元素。

  [selector1][selector2][selectorN],复合属性选择器,例如$("div[id][title^=test]"),表示选取包含id属性并且title以test开头的div元素。

  e.子元素过滤选择器

  打字好累。。。。

  我决定快速概括。。

  :nth-child(index/even/odd/eq),这里的index是以1开头的哦。

  :first-child、:last-child、:only-child

  从字面可以理解它们的意思。

  f.表单对象属性过滤器

  :enable,选取可用元素,例如$("#form1:enable"),选取表单form1中的所有可用元素。

  :disable、:checked、:selected同理。

  g.表单选择器

  这个是jQuery为了灵活操作表单特意加的。

  只要是表单元素都可以使用“:”+“元素表示”,例如,$(":input")、$(":select")

ok,jQuery选择器大概就是这样,其实这些东西jQuery的API上都有,而且很方便,以后不记得了,可以用API查找。

  

  

  

  

  

时间: 2024-10-27 05:26:17

jQuery系列之操作select标签的相关文章

Jquery操作select标签的常用方法

<select id="search"> <option value='1'>baidu</option> <option value='2'>sogou</option> </select> 1.清空select标签下的option标签 (1)  $("#search").html(""); (2)  $("#search").find(“option”

JS操作select标签

主要利用这个来实现省市区三级联动的 我利用的是ajax,每一次onchange事件都改变相对应的select中的option,数据全是ajax请求服务器查询数据库而来的,效果还可以,在本地测试的时候速度还是可以的,用户基本体会不到带来的轻微卡顿,还有种方式是把数据直接写在本地的js中作为数组存放起来,但是我的数据已经在数据库中,所以这种方式被我否定了,但是我认为这种方式运行速度应该比我的快. 下面是JS操作select的几种用法,常用的我就记录一下. 1.动态创建select function

JQuery 获取多个select标签option的text内容

根据option的id属性,修改text值 1 $("#sel_div .select_class option[id='-选择省-']").text(data.province).attr("selected",true); 2 $("#sel_div .select_class option[id='-选择市-']").text( data.city).attr("selected",true); 3 $("#s

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

select标签中怎样控制option的显示数量

最近做项目,需要动态加载数据显示到下拉列表中. 刚开始用select标签,由于数据较多,一次性全部加载,下拉列表会拖得很长,不忍直视(默认会显示20个). 我想控制select中的option显示的个数,例如:只显示5个,其余的通过滚动条来控制显示. 经过反复折腾,发现直接操作select标签无法达到目的,于是改换策略,用input标签和ul标签来模拟select标签. 效果: Demo下载 select标签中怎样控制option的显示数量,布布扣,bubuko.com

Jquery操作select,左右移动,双击移动 取到所有option的值

$(function () { function MoveItem(fromId, toId) { $("#" + fromId + " option:selected").each(function () { $(this).appendTo($("#" + toId + ":not(:has(option[value=" + $(this).val() + "]))")); }); $("#&

转 jquery操作select(取值,设置选中)

每一次操作select的时候,总是要出来翻一下资料,不如自己总结一下,以后就翻这里了. 比如<select class="selector"></select> 1.设置value为pxx的项选中 $(".selector").val("pxx"); 2.设置text为pxx的项选中 $(".selector").find("option[text='pxx']").attr(&qu

JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转.传参(selected的值和页面其它元素的值) 代码如下: <script src="jquery.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document

jquery操作select(增加,删除,清空)

jQuery获取Select选择的Text和Value: 1 2 3 4 5 6 7 8 9 $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的text var checkValue=$("#se