jQuery慢慢啃(四)

1.eq(index|-index) 获取第N个元素

其中负数:一个整数,指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)

$("p").eq(1)//获取匹配的第二个元素

$("p").eq(-2)//获取倒数匹配的第二个元素

2.$(‘li‘).first()//获取第一个元素

$(‘li‘).last()//获取最后个元素

$(this).hasClass("protected")和 $(this).is(".protected")相等//检查当前的元素是否含有某个特定的类,如果有,则返回true。

3.filter(expr|obj|ele|fn)//筛选出与指定表达式匹配的元素集合。

$("p").filter(".selected")//保留带有select类的元素

$("p").filter(".selected, :first")//保留第一个以及带有select类的元素

$("p").filter(function(index) { return $("ol", this).length == 0; });//保留子元素中不含有ol的元素。

4.is(expr|obj|ele|fn)//根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

$("input[type=‘checkbox‘]").parent().is("form")//由于input元素的父元素是一个表单元素,所以返回true。

<ul>
  <li><strong>list</strong> item 1 - one strong tag</li>
  <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li>
  <li>list item 3</li>
</ul>

$("li").click(function() {
  var $li = $(this),
    isWithTwo = $li.is(function() {
      return $(‘strong‘, this).length === 2;
    });
  if ( isWithTwo ) {
    $li.css("background-color", "green");
  } else {
    $li.css("background-color", "red");
  }
});

5.map(callback)//将一组元素转换成其他数组(不论是否是元素数组)

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

6.has(expr|ele)//保留包含特定后代的元素,去掉那些不含有指定后代的元素。

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

$(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘);

7.not(expr|ele|fn)//删除与指定表达式匹配的元素

$("p").not( $("#selected")[0] )

8.slice(start, [end])//选取一个匹配的子集

$("p").slice(0, 1).wrapInner("<b></b>");//wrapInner是在元素内部嵌套入HTML标签$("p").slice(0, 2).wrapInner("<b></b>");

9.children([expr])//取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

$("div").children()//获取所有子元素
$("div").children(".selected")//获取带有具体类的元素

10.closest(expr|object|element)(expr|object|element)//从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。。

closest和parents的主要区别是:

1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;

2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;

3,前者返回0或1个元素,后者可能包含0个,1个,或者多个元素。

$("li:first").closest(["ul", "body"]);

展示如何使用clostest来完成事件委托。

$(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});

11.find(expr|obj|ele)这个函数是找出正在处理的元素的后代元素的好方法。

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

12.next([expr])//取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。

$("p").next()

$("p").next(".selected")

13.nextAll([expr])//查找当前元素之后所有的同辈元素

$("div:first").nextAll().addClass("after");

14.nextUntil([exp|ele][,fil])//查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。

$("#term-1").nextUntil(term3, "dd").css("color", "green");

15.parent([expr])//取得一个包含着所有匹配元素的唯一父元素的元素集合

$("p").parent()

$("p").parent(".selected")

16.parents([expr])//取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

$("span").parents()

$("span").parents("p")

17.parentsUntil([expr|element][,filter])//查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止

18.prev([expr])//取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。

$("p").prev()

$("p").prev(".selected")

19.prevAll([expr])//查找当前元素之前所有的同辈元素

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

20.prevUntil([exp|ele][,fil])//找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止。

$(‘#term-2‘).prevUntil(‘dt‘).css(‘background-color‘, ‘red‘);

21.siblings([expr])//取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

$("div").siblings(".selected")

22.add(expr|ele|html|obj[,con])//把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

<p>Hello</p><span>Hello Again</span>
$("p").add("span")
[ <p>Hello</p>, <span>Hello Again</span> ]

<p>Hello</p>
  $("p").add("<span>Again</span>")
[ <p>Hello</p>, <span>Hello Again</span> ]

<p>Hello</p><p><span id="a">Hello Again</span></p>
  $("p").add(document.getElementById("a"))
[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

23.andSelf()//加入先前所选的加入当前元素中

从jQuery1.8开始,.andSelf()方法已经被标注过时,在jQuery1.8和更高版本中应使用.addBack()。

$("div").find("p").andSelf().addClass("border");

24.contents()//查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

$("p").contents().not("[nodeType=1]").wrap("<b/>");

$("iframe").contents().find("body").append("I‘m in an iframe!");

25.end()//回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。

<p><span>Hello</span>,how are you?</p>
$("p").find("span").end()
[ <p><span>Hello</span> how are you?</p> ]
时间: 2024-11-01 02:11:43

jQuery慢慢啃(四)的相关文章

jQuery慢慢啃之CSS(五)

1.css(name|pro|[,val|fn])//访问匹配元素的样式属性 $("p").css("color");//获取 $("p").css({ "color": "#ff0011", "background": "blue" });//属性组设置 $("p").css("color","red");

jQuery慢慢啃之ajax(九)

1.jQuery.ajax(url,[settings])//通过 HTTP 请求加载远程数据 如果要处理$.ajax()得到的数据,则需要使用回调函数.beforeSend.error.dataFilter.success.complete. beforeSend 在发送请求之前调用,并且传入一个XMLHttpRequest作为参数. error 在请求出错时调用.传入XMLHttpRequest对象,描述错误类型的字符串以及一个异常对象(如果有的话) dataFilter 在请求成功之后调用

jQuery慢慢啃之CSS(七)

1.ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){ // 在这里写你的代码...}); 使用 $(document).ready() 的简写,同时内部的 jQuery 代码依然使用 $ 作为别名,而不管全局的 $ 为何. $(function($) { // 你可以在这里继续使用$作为别名... }); 2.on(events,[selector],[data],fn)//在选择元素上绑定一个或多个事件的事

jQuery慢慢啃之文档处理(五)

1.append(content|fn)//向每个匹配的元素内部追加内容. $("p").append("<b>Hello</b>"); 2.appendTo(content)//把所有匹配的元素追加到另一个指定的元素元素集合中. $("p").appendTo("div"); appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几

jQuery慢慢啃之工具(十)

1.jQuery.support//一组用于展示不同浏览器各自特性和bug的属性集合 2.jQuery.browser//浏览器内核标识.依据 navigator.userAgent 判断. 可用值: safari opera  msie mozilla 3.jQuery.browser.version//浏览器渲染引擎版本号 4.jQuery.boxModel//浏览器是否使用标准盒模型渲染页面. 建议使用 jQuery.support.boxModel 代替.W3C CSS 盒模型. 5.j

jQuery慢慢啃之特效(八)

1.show([speed,[easing],[fn]])\\显示隐藏的匹配元素 //speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000) //easing:(Optional) 用来指定切换效果,默认是"swing",可用参数"linear" $("p").show() $("p").s

jQuery慢慢啃之事件对象(十一)

1.event.currentTarget//在事件冒泡阶段中的当前DOM元素 $("p").click(function(event) { alert( event.currentTarget === this ); // true }); 2.event.data//当前执行的处理器被绑定的时候,包含可选的数据传递给jQuery.fn.bind. $("a").each(function(i) { $(this).bind('click', {index:i},

jQuery慢慢啃(三)

1.attr(name|properties|key,value|fn)设置或返回被选元素的属性值. $("img").attr("src");//获取属性 $("img").attr({ src: "test.jpg", alt: "Test Image" });//设置多个属性 $("img").attr("src","test.jpg");/

jQuery插件实例四:手风琴效果[无动画版]

手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是有动画效果的. 在这个插件中,CSS和JS的配置非常重要,需要特别注意.另外,加个思考,请先看完后再想这个问题:当点击其中某项时,给width直接添加animate是否合适,当快速在其上移动时,如何保证效果? 效果图预览 插件JS accordionB.js 1 ; 2 (function ($,