jquery 常用选择器 回顾 ajax() parent() parents() children() siblings() find() eq()

1. $.ajax()

ajax 本身是异步操作,当需要将 异步 改为 同步时:

async: false

2.parent()  父级元素  和  parents() 祖先元素 的区别

parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

例如:

<div id=‘div1‘>
  <div id=‘div2‘>
	  <p></p>
  </div>
  <div id=‘div3‘ class=‘a‘>
	  <p></p>
  </div>
  <div id=‘div4‘>
	  <p></p>
  </div>
</div>

$(‘p‘).parent()  取到的是div2,div3,div4
$(‘p‘).parent(‘.a‘)  取到的是div3
$(‘p‘).parent().parent()  取到的是div1,这点比较奇特;不过Jquery对象本身的特点决定了这是可行的。
$(‘p‘).parents()  取到的是div1,div2,div3,div4
$(‘p‘).parents(‘.a‘)  取到的是div3

3.children()  子级元素

children(":eq()")  与  children().eq()

$(‘ul‘).children(":eq(0)").css(‘color‘ , ‘red‘);
与
$(‘ul‘).children().eq(0).css(‘color‘ , ‘red‘);
相同

3.siblings()  同胞元素

$this.parent().siblings().eq(1).text();
当前操作元素父元素的第一个同胞元素的内容
$("给定元素").siblings(".selected")

其作用是筛选给定的同胞同类元素(不包括给定元素本身)

例如:

//显示选项卡对应的内容并隐藏未被选中的内容
$("#content li:eq(" + index + ")").show().siblings().hide();

4.find()  查找

找到的是 所有的后代元素,即是子孙元素

$(‘div‘).find(‘ul‘).eq(2).css(‘color‘ , ‘red‘);

小结:

find()查找的是后代,子代,子子代,而且参数必须填写
children()本身查找的就是子代,里面的参数选填

5.eq()

.eq() 与:eq() 的区别

$("p").eq(1).css("color","red");
与
$("p:eq(1)").css("color","red");
相同

6.has()

例如:

$("li").has("span").css("color","green");

匹配含有span元素的li元素,并将其中的字体颜色设置为绿色。

7.filter()

.filter()  方法 过滤的是集合本身

filter()   方法将匹配元素集合缩减为匹配指定选择器的元素。

例如:

$(‘p‘).find(‘.tag‘);
$(‘p‘).filter(‘.tag‘);

(1)第一行语句是在p标签下面的子元素去找是否有类为tag的元素.返回的元素若不为空一定是p标签下面的子元素
(2)第二行语句是找p标签中是否有tag类的元素.返回的元素一定是在$(‘p‘)这些P标签里面(即 找到所有 类名为tag的 P 标签)

8.next()

next() 获得匹配元素集合中每个元素紧邻的同胞元素。如果提供选择器,则取回匹配该选择器的下一个同胞元素。

例如:

$("p").next(".selected").css("background", "yellow");

查找每个段落的下一个同胞元素,仅选中类名为 "selected" 的段落

.

时间: 2024-08-26 07:49:12

jquery 常用选择器 回顾 ajax() parent() parents() children() siblings() find() eq()的相关文章

Jquery常用选择器

Jquery常用选择器<p id="test">这是段落中的<b>粗体</b>文本.</p>text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容(包括 HTML 标记)$("#test").text():这是段落中的粗体文本.$("#test").html():这是段落中的<b>粗体</b>文本. append() - 在被选元素的结尾插入

jQuery常用选择器总结

jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择器方式众多,我就自己平时工作之中所遇到的常见的方式做一个总结. 一,元素查找方式: $("#myElement")    选择id为myElement的元素,因为id在使用中是唯一的,所以这样的选择也是指定的不变的. $("div")    选择所有的div标签元素,返

jquery常用选择器(转)

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 $("div") 选择所有的div标签元素,返回div元素数组 $(".myClass") 选择使用myClass类的css的所有元素 $("*") 选择文档中的所有的元素,可以运用多种的选择方式进行

JQuery常用选择器,方法,正则表达式

JQuer常用选择器,方法,正则表达式 JQuer 选择器 1) 标签选择器:$(" h3 ")取全部的h2元素 层次选择器:$("#div a ")取div下全部<a>元素 类选择器:  $(".title ")取全部class下的title元素 子选择器:     $(" #menu>span ")选取#menu下的子元素 Id 选择器:     $(" # title")取id 为t

恶补jquery(二)jquery常用选择器

jquery选择器与js获取页面元素比较 我们以简单的例子说明,其中div的id为divT,如下所示 用js在div中内容输出代码如下: window.onload=function(){ var myDiv = document.getElementById("divT"); myDiv.innerHTML = "这是个测试页面"; } 用jquery选择div元素然后输出,代码如下: $(function(){ $("#divT").html

jquery 常用选择器详解2

1.常用内容过滤选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="jquery-3.1.1.min.js"></script> <script t

js+jquery 常用选择器函数

一.获取当前标签 JS: this,如下: <button onclick="fun(this)"></button> Jquery,如下: $("#button").click(function(){ $(this) }) 二.获取父标签 <div><span id="test"></span></div> JS: parentNode,如下: document.getEl

jquery 常用选择器及方法

1.jQeury:$("div span")和$("div>span")有什么区别啊?不都是选择div标签下的span么? 这涉及到CSS的知识哦~说明你的CSS没怎么学好呢嘿嘿,有空记得补学一下CSS基础. 关于CSS的选择器, > 是用来选取兄弟什么的(具体叫法我也忘了) 举个例子 <div> <span id = "span1"></span> <span id = "span

jQuery常用选择器汇总

一.基本选择器 <body> <div> <div id="div1"> aaaaaaaaaaa</div> <div class="c1"> bbbbbbbbb</div> <span>ccccccccc</span> </div> </body> $(function () { $("#div1").html("h