JQuery语法

一：jQuery选择器

jQuery选择器可分为基本选择器和过滤选择器

基本选择器又分为CSS选择器，层级选择器以及表单域选择器。

CSS选择器

1 id选择器

用于选择具有给定id属性值的单个元素。

//选择id为myid的元素并对其边框样式进行设置。

$("#myid").css("border","3px solid red");

2 类选择器

用于选择具有给定类的所有元素。

//选择具有给定类的所有元素。

$(".myClass").css("border","3px solid red");

3 元素选择器

用于选择具有给定HTML标记名的所有元素。

//选择文档中的所有div元素。

$("div");

4 群组选择器

用于所有指定的选择器组合的结果。

//选择文档中的所有div，span以及应用myclass类的p元素。

$("div,span,p.myclass);

5 通用选择器

用于从文档中获得所有元素。

//下列代码用于选择所有元素，然后显示出当前页面中的元素总和。

var elementCount=$("*").length;

$("body").prepend("

当前页面中共有"+elementCount+"个元素。

");

层级选择器

1 子元素选择器

在给定的父元素下查找所有的直接子元素。

//选择父元素

下的直接子元素(li)并对其边框进行样式设置。

$("ul.topnav>li").css("border","3px double red");

2 后代元素选择器

在给定的祖先元素下查找所有的后代元素。

//用于选择表单下的所有后代元素并对其边框样式进行设置。

$("form input").css("border","2px dotted blue");

3 紧邻同辈元素选择器

用于选择紧跟给定元素之后的那个同辈元素。

用户名：

Email:

//选择紧跟标签后面的input元素，并设置其文本颜色和值。

$("label+input").css("color","red").val("紧跟标签后的同辈！")

4 相邻同辈元素选择器

用于选择某元素后面的所有同辈元素。

div
位于#prev之前,故不匹配

span
#prev

div 同辈
div 同辈
div 的侄子

span 同辈不是div

div 同辈

//选择在span#prev元素后面的所有同辈div元素并对其进行设置。

$("#prev~div").css("border","3px groove green");

表单域选择器

1:input选择器

用于选择所有input,textarea,select和button元素。

$(":input");

2:text选择器

选择所有单行文本框().

$(":text");

3:password选择器

选择所有密码框().

$(":password");

4:radio选择器

选择所有单选按钮().

$(":radio");

5:checkbox选择器

选择多有复选框().

$(":checkbox");

6:file选择器

选择所有文件域().

$(":file");

7:image选择器

选择所有图片域().

$(":image");

8:hidden选择器

选择所有不可见元素(CSS display属性为none)以及隐藏域().

$(":hidden");

9:button选择器

选择所有按钮()和.....

$(":button");

10:submit选择器

选择所有提交按钮()和.....

$(":submit");

11:reset选择器

选择所有重置按钮().

过滤选择器

jQuery简单过滤选择器

1:first选择器

对当前jQuery集合进行过滤并选择出第一个匹配的元素。

第一行

第二行

第三行

//选择表格中的第一行并将单元格文本颜色设置为红色。

$("tr:first").css("color","red");

2:last选择器

对当前jQuery集合进行过滤并选择出最后一个匹配的元素。

//选择表格中最后一行，并将单元格背景颜色设置为蓝色而且加粗显示。

$("tr:last").css({backgroundColor:"blue",fonWeight:"bolder"});

3:odd选择器

选择索引为奇数(从0开始计数)的所有元素。

索引为0的行

索引为1的行

索引为2的行

索引为3的行

//从表格中选择奇数行并对其背景颜色进行设置。

$("tr:odd").css("backgrount-color","blue");

4:even选择器

选择索引为偶数(从0开始计数)的所有元素。

//从表格中选择偶数行并对其背景颜色进行设置.

$("tr:even").css("","");

5:eq()选择器

从匹配的集合中选择索引索引等于给定值的元素。

TD#0	TD#1	TD#2
TD#3	TD#4	TD#5
TD#6	TD#7	TD#8

//想将包含TD#3的单元格文本设置为红色，可使用下面的代码。

$("td:eq(3)").css("color","red");

6:gt()选择器

用于从匹配的集合中选择索引大与给定值的所有元素。

//选择出索引高于5的单元格并对其文本添加删除线。

$("td:gt(5)").css("text-decoration","line-through")

7:it()选择器

用于从匹配的集合中选择索引小与给定值的所有元素。

//查找出索引大于3且小于6的所有元素。

$("td:it(6),td:gt(3)")

8:not()选择器

用于从匹配的集合中去除所有与给定选择器匹配的元素。

第1行

第2行

第3行

第4行

//从表格中选择第一行和最后一行之外的所有行并对其背景颜色进行设置。

$("tr:not(:first,:last)").css("background","blue");

9:header选择器

用于选择所有诸如h1,h2,h3之类的标题元素。

$(":header");

10:animated选择器

选择所有正在执行动画效果的元素。

jQuery内容过滤选择器

1:contains()选择器

用于选择包含给定文本的所有元素。

//选择包含Jack的div元素并对其文本添加下划线。

$("div:contains("Jack")").css("text-decoration","underline");

2:has()选择器

用于选择含有给定子元素的元素。

//选择包含span元素的div元素并对其背景颜色进行设置。

$("div:has(span)").css("background-color","skyblue");

3:empty选择器

用于选择不包含子元素和文本的所有空元素。

//查找空白单元格并设置其文本

$("td:empty").text("空白单元格");

4:parent选择器

用于选择包含子元素和文本的所有元素。

//查找非空白单元格并对文本内容和背景颜色进行设置。

$("td:parent").text("非空单元格").css("background","yellow");

jQuery属性过滤选择器

1:包含属性选择器

用于选择包含给定属性的所有元素。

//选中属性中包含id 的元素

$("div[id]")

2:属性等于选择器

用于选择给定属性等于某特定值的所有元素。

//选中名称为inputname的元素。

$("input[name=inputname]").attr("checked",true);

3:属性包含选择器

用于选择指定属性值包含给定子字符串的所有元素。

//用于选择名称中包含"man"的文本框并对其值进行设置。

$("input[name*=man]").val("has man in it")

4:属性包含单词选择器

用于选择指定属性值中包含给定单词(有空格分隔)的元素。

$("input[name~=man]").val("mr man is in it")

5:属性不等于选择器

不包含指定属性，或者包含指定属性但该属性不等于某个值的所有元素。

//选择没有name属性或者名称中不包含"newsletter"的单选按钮，并在紧跟其后的span 元素中添加一些文本。

var content="名称中不包含newsletter";

$("input[name!=newsletter]+span").append(content);

6:属性开始选择器

用于选择给定属性是以某特定值开始的所有元素。

//选择名称以"news"为开始的文本框并对其值进行设置。

$("input[name^=news]").val("名称以news开始")

7:属性结尾选择器和属性开始选择器相反。

$("input[name$=letter]").val("名称以letter结尾)

8:复合属性选择器

用于选择同时满足多个条件的的所有元素。

$("input[id][title]").val("符合条件");

jQuery 子元素过滤选择器

1:first-child选择器

选择是其父级的第一个子元素的所有元素。

John,Sam
Glen,David

//文本John,Glen被添加了下划线。

$("div span:first-child").css("text-decoration","underline"); 2:last-child选择器

选择是其父级的最后一个子元素的所有元素。

//文本Sam,David被添加了下划线。

$("div span:last-child").css("text-decoration","underline"); 3:nth-child()选择器

用于选择父元素下的第N个子元素或奇偶元素。

//无序列表中的第二项的背景颜色和文本颜色发生了变化。

$("ul li:nth-child(2)").css({background:"yellow",color:"red"}); 4:only-child选择器

用于选择某元素的唯一子元素。

//查找只含有h3作为子元素的div元素。

$("div h3:only-child");

jQuery 表单域属性过滤选择器

1:checked选择器

用于选择所有被选中的表单域。

$(":radio:checked");

2:disabled选择器

用于选择所有被禁用的表单域。

$("input:disabled");

3:enabled选择器

用于选择所有可哟哦那个的表单域。

$("input.enabled");

4:selected选择器

用于从列表框选择所有选中的option元素。

Flowers

Shrubs

Trees

Bushes

Grass

var a=[];

$("select option:selected").each(function(){

a[a.length]=$(this).text();

});

$("div").text(a.join('',''));

二：遍历DOM元素

2.1：按索引筛选元素

1：eq()方法

此方法从匹配的元素集合中获取具有指定索引值的单个元素。

2：first()方法

从匹配的集合中获取第一个元素，并返回包含该元素的jQuery对象。

3：last()方法

从匹配的集合中获取最后一个元素，并返回包含该元素的jQuery对象。

4：slice()方法

从匹配的元素集合中获取索引值位于指定范围的元素子集。

2.2：筛选方法

1：.filter()方法

(1)当传入一个表达式时，可以从匹配元素集合中筛选出复合该表达式的元素集合，并返回jQuery对象。

//把所有的div元素的背景色改变，然后对应用middle类的div元素的边框改为红色。

$("div").css("background-color","").filter(".middle").css("border-color","red")

(2)当返回一个函数时，可以从匹配元素集合中筛选出与函数返回值匹配的元素，并返回由这个元素子集包装的jQuery对象。

//设置所有div的背景色，然后从这些div中筛选出索引值为1或属性为id=three的元素，并设置边框属性

$("div").css("background","#b3b0da").filter(function(index){return index==1 ||$(this).attr("id")=="three";}).css("border","3px double red");

2.3：检查元素

is(selector)方法

使用指定的选择器selector来检查匹配元素的集合，其返回值是一个Boolean值，若

集合中至少有一个元素与选择器selector匹配，则is()方法返回ture,若没有则返回flase.

//检查单选按钮是否被选中，若已经选中则弹出一个对话框。

if("input#radio1").is(":checked")alert("这个单选按钮已被删除。")

2.4：数组映射

.map()方法

将当前匹配的元素集合中的每个元素传入一个回调函数中，生成并返回一个新的jQuery对象，其中包含回调函数的返回值，可以是一组值，属性，css值，DOM元素，jQuery 对象或者是

其它特殊的列表。.map()方法可用于获取或设置一个集合中每个元素的值。

//下列实例代码将文档中的div元素映射为一组字符串，即"div1","div2","div3"等，然后在段落中显示这些字符串。

var values=$("div").map(function(index){

return "div"+(index+1);}).get().join(",")

$("p").html(values);

2.5：移除元素

.not()方法

从匹配元素集合中移除符合表达式的所有元素，并返回剩下的元素包装成的jQuery对象。

//一下5行语句的作用都是相同的，即从所有段落中移除id为p3的段落，然后对剩下的段落添加dimo类。

$("p").not("#p3").addClass("demo"); //以选择器为参数

$("p").not($("#p3")).addClass("demo"); //以jQuery对象为参数

$("p").not($("#p3")[0]).addClass("demo"); //以DOM元素为参数

$("p").not(document.getElementById("p3")).addClass("demo"); //以DOM元素作为参数

$("p").not(function(){return(this.id=="p3")}).addClass("demo"); //以回调函数作为参数

2.6：搜索父元素

.parents()方法

获取当前匹配元素集合中每个元素的祖先元素，根据需要还可以使用一个选择器进行筛选。

My parents are:

//显示My parents are:SPAN,P,DIV,HTML

var parentsEls=$("em").parents().map(function(){return this.tagName;}).get().join(",");

$("em").append(parentEls);

.parentsUntil()方法

获取当前匹配元素集合中每个元素的祖先元素，直至给定的选择器匹配的元素(但不包含该元素)

i
• a
• b

  • 1
  • 2
  • 3

//下列代码用于查找

元素的祖先元素直至

,并且为找到的元素添加红色背景色。

$("li.item-a").parentsUntil(".level-i").css("background-color","#F99")

.parent()方法

该方法用于获取当前匹配元素集合中的每个元素的父元素。与.parents()方法类似，只不过只遍历了DOM树中的一个层级。

查找并并显示的父元素。

$("td").append(""+$("td").parent()[0].tagName+"")

.closest()方法

次方法从当前元素开始向上遍历DOM树并获取与选择器匹配的第一个元素。.closest()开始与当前元素，.parents()则开始与父元素。

//执行一下语句时，将改变

元素的背景色。

$("li.item-a").closest("ul").css("background"，“#AFA")

//执行下列语句时，将只改变

• 元素的背景色。

  $("li.item-a").closest("li").css("background-color","#AFA")

  2.7搜索同辈元素

  1.next()方法

  此方法用于获取紧跟在每个匹配元素之后的单个同辈元素，根据需要还可以指定一个选择器对同辈元素进行筛选。

  //查找每个被禁用的按钮后面的同辈元素，并将其文本该为this button is disabled.

  $("button[disabled]).next().text("this button is disabled")

  2.nextAll()方法

  用于搜索跟在每个匹配元素之后的所有同辈元素。

  //下列语句可以查找第3项后面的条目并将其背景色改为红色。

  $("li.third-item").nextAll().css("background-color","red");

  3.nextUntil()方法

  用于获取跟在每个匹配元素后面的同辈元素直至匹配给定选择器的元素(但不包括该元素),如果没有提供参数或无法找到匹配的元素，这与未提供筛选选择器的nextAll()方法相同。

  term1

  definition 1-a

  definition 1-b

  term 2

  definition 2-a

  definition 2-b

  definition 2-c

  term 3

  definition 3-a

  definition 3-b

  //可以选择第二个术语下面的3个定义项并对其添加蓝色背景色。

  $("#term-2").nextUntil("dt").css("background-color","#99F")

  4.prev()方法

  此方法用于搜索紧邻每个匹配元素前面的单个同辈元素。

  • list item 1
  • list item 2
  • list item 3
  • list item 4
  • list item 5

  //可以选择出第二个选择项。

  $("li.third-item").prev().css();

  5.prevAll()方法

  此方法用于搜索每个匹配元素前面的所有同辈元素。

  //下列语句可以选择最后一个div元素之前的三个同辈元素并添加before类。

  $("div:last").prevAll().addClass("before");

  6.prevUntil()方法

  此方法用于获取每个匹配元素之前的所有同辈元素直至达到指定的元素(不包含该元素)

  //可以选择出位于中间的3个div元素并添加红色边框。

  $("div:last").prevUntil("#div1").addClass()

  7.siblings()方法

  此方法用于搜索每个匹配元素的所有同辈元素。

  //第一个语句查找每个div的多有同辈元素，并设置其文本的颜色，第二个语句查找每个div的所有同辈元素中带有类名为selected的元素并设置其边框。

  $("div").siblings().css("color","red")

  $("div").siblings(".selected").("boder","insert red 2px");

  2.8搜索子元素

  1.children()方法

  该方法用于获取每个匹配元素的子元素的集合。

  $("form").children() //获取表单内的所有子元素

  $("form").children(":checkbox:checked") //获取表单内所有选择的复选框

  $("select").children(":selected") //获取列表中所有选择中的选项

  2.contents()方法

  此方法从每个匹配元素内查找所有的子节点(包括文本节点)或者文档内容对于iform元素。

  //用于查找所有文本节点

  $("p").contents().not("[nodeType=1]").wrap("")

  3.find()方法

  从每个匹配元素内符合指定选择器表达式的后代元素。

  //用于搜索所有段落中的span元素并对其添加demo类。

  $("p").find("span").addClass("demo")

  2.9添加元素

  add()方法

  向匹配的元素集合中添加新的元素。

  3.0串联操作

  1.end()方法

  用于结束当前链式操作中最新的筛选操作属于破坏性操作，并使匹配元素集合返回到以前的状态。

  //下列语句首选选取

  元素下的
  • 并设置背景色，然后使用end()方法使jQuery对象恢复到搜索操作之前的状态(即$("ul"),表示两个
    元素)

    //接着选取

    元素下的
    • 元素，并设置其背景色。

      $("ul").find(".foo").css("background-color","#F99").end().find("bar").css("background-color","#99F")

      2.andSelf()方法

      此方法将先前选择的元素添加到当前选择的元素集合中。

      • list item 1
      • list item 2
      • list item 3
      • list item 4
      • list item 5

      //下列语句

      $("li.third-item").nextAll().andSelf().css("background-color","red")

      3.1对象操作

      1 jQuery.each()

      ///////////

      ///////////

      4jQuery文档处理

      4.1.1：创建元素

      1：$()

      创建HTML内容：jQuery(html[,ownerDocument])

      其中，参数html是一个HTML字符串，用于指定动态创建的HTML内容。ownerDocument是可选的，表示用来创建新元素的文档

      创建单个HTML元素jQuery(html,props)

      参数html是一个字符串，用于定义单个独立的HTML元素。props表示在该新建元素上调用的属性，事件和方法。

      //下列代码用于创建一个段落，并设置其align和title属性以及段落内部的文本。

      $('p align="center" title="这是一个段落。">Hello jQuery!

      ')

      //下列代码用于创建一个表格行，并对该行的bgcolo进行设置，改行包含两个td 子元素，每个td元素都包含着文本。

      $('column1column2')

      //

      $("

      ",{id:"div1",text:"Click

      Here",width:80,css:{textAlign:"center",background-color:"#99F",

      border:"1px solid #CCC",padding:"3px"},click:function(){alert("Hello!");}})

      4.1.2内部插入

      1 .append()方法

      此方法在匹配元素集合的每个元素末尾插入由参数指定的内容并返回jQuery对

      象。

      编程语言

      VB

      C#

      //使用.prepend()可以创建一个新内容并将其插入目标元素

      $("p.inner").append("我喜欢")

      执行结果

      编程语言

      VB我喜欢

      C#我喜欢

      //也可以从页面中选择一个元素并将其插入其他位置

      $("div.container").append($("h3"))

      执行结果

      VB

      C#

      编程语言

      2.appendT o()方法

      此方法将匹配的集合中的每个元素插入目标元素元素的末尾并返回jQuery对象。

      与append()方法大致相同，主要区别就是在于语法内容和目标的位置不同

      3.prepend()方法

      此方法将参数指定的内容插入匹配元素集合的开头。

      $("p.inner").prepend($("h3"))

      执行结果

      编程语言

      VB

      C#

      4.prependTo()方法

      此方法将匹配元素集合中的每个元素插入目标元素的开头并返回jQuery对象

      5.html()方法

      用于设置或获取匹配元素的HTML内容，它不适于XML文档，根据传入的参数不同，.html()有3种语法格式

      (1).html()

      var content=$("div.demo").html();alert(content); //用于显示第一个匹配元素HTML内容

      (2).html(htmlstring)

      var content=$("div#container").html();

      $("div#container").html(content+"

      这是新添的段落

      ")//获取一个元素的HTML内容，然后又在原有的内容中添加一个段落。

      (3).html(function(index,html))

      根据传递的函数来设置匹配元素集合中每个元素的HTML内容并返回jQuery对象

      //在每个匹配元素的开头添加了一个段落并保留原来的内容。

      $("div.demo").html(function(index,heml){return "

      这是第"+(index+1)+"个div元素

      "+html})

      6.text()方法

      获取或设置匹配元素的文本内容。

      4.1.3外部插入

      1.after()方法

      此方法在匹配元素集合中的每个元素之后插入有参数指定的内容。

      编程语言

      VB

      C#

      (1)

      $("p.inner").after(",我喜欢")

      执行结果

      编程语言

      VB

      ,我喜欢

      C#

      ,我喜欢

      (2)

      $("div.container").after($("h3"))

      执行结果如下：

      VB

      C#

      编程语言

      2.insertAfter()方法

      此方法将匹配元素集合中的每个元素插入到目标之后。并返回jQuery对象。

      3.befer()方法

      此方法将参数指定的内容插入到匹配元素集合中的每个元素之前，并返回jQuery对象。

      编程语言

      VB

      C#

      (1)

      $("p.inner").before("我喜欢")\

      执行结果:

      编程语言

      我喜欢

      VB

      我喜欢

      C#

      (2)

      使用before()方法也可以从页面中选择元素将其移动到目标元素之前：

      $("h3").before($("div.container"))

      执行结果

      VB

      C#

      编程语言

      4.insertbefore()方法

      次方法将匹配集合中的元素插入到目标元素之前并返回jQuery对象

      相关主题