jQuery中的一些常见方法小结(推荐)

1.filter()和not()方法

filter()和not()是一对反方法，filter()是过滤.

filter()方法是针对元素自身。（跟has()方法有区别）

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*filter(): 过滤
not():filter的反义词<BR>*/
$(function(){
  //$('div').filter('.box').css('background','red');  <SPAN style="COLOR: #ff0000">//将div中带有class=‘box'的div的背景色改成红色</SPAN>
  $('div').not('.box').css('background','red');    <SPAN style="COLOR: #ff0000">//将div中除带有class=‘box'的div的其他div设置背景色为红色</SPAN>
?
1 }); </script> <BR></head> <BR><body> <BR><div class="box">div</div><BR> <div>div2</div> <BR></body> <BR></html>

2.has()方法

has()方法表示的是包含的意思，它跟filter()方法是有区别的。has()方法有父子级关系。　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*filter(): 过滤
not():filter的反义词
has():包含 */
$(function(){
  //$('div').has('span').css('background','red'); <SPAN style="COLOR: #ff0000">//只有包含span标签的div(父级)的背景色为红色</SPAN>
  $('div').has('.box').css('background','red');  <SPAN style="COLOR: #ff0000">//只有包含的标签的class值是box的div(父级)的背景色为红色</SPAN>
  });
</script>
</head> 

<body>
<div> div
  <span class="box">
  span
  </span>
</div>
<div class="box">div2</div>
<div class="haha">div3</div>
</body>
</html>

3.next()、prev()、find()、eq()方法

next()、prev()方法就是寻找下一个兄弟节点和上一个兄弟节点。

find()方法：寻找　

eq()：索引

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*next():下一个兄弟节点
prev():上一个兄弟节点
find():寻找
eq():索引
*/
$(function(){
  //$('div').find('h2').css('background','red');   <SPAN style="COLOR: #ff0000">//只会给div下的所有h2的背景色设置为红色</SPAN>
  $('div').find('h2').eq(0).css('background','red');  <SPAN style="COLOR: #ff0000">//给div下的第一个h2的背景设置为红色</SPAN>
  });
</script>
</head> 

<body>
<div>
　　<h3>h3</h3>
  <h2>h2</h2>
  <h2>h2</h2>
  <h1>h1</h1>
</div>
<h2>haha</h2>  //不会变红 

</body>
</html>

4.index()方法　

<script>
/*
index():索引就是当前元素在所有兄弟节点中的位置
*/
$(function(){
  alert($('#h').index()); <SPAN style="COLOR: #ff0000"> //索引就是当前元素在所有兄弟节点中的位置</SPAN>
              //弹出是3
  });
</script>
</head> 

<body>
<div>
  <h3>h3</h3>
  <h2>h2</h2>
  <h2>h2</h2>
  <h3 id="h">h3</h3>
  <h1>h1</h1>
</div>
<h2>haha</h2> 

</body>
</html>

4.attr()方法　

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*
attr():属性设置
*/
$(function(){
  alert($('div').attr('title')); <SPAN style="COLOR: #ff0000">//获取属性title的值</SPAN>
  $('div').attr('title','456');  <SPAN style="COLOR: #ff0000">//设置title属性的值是456</SPAN>
  $('div').attr('class','box'); <SPAN style="COLOR: #ff0000"> //给div设置class属性，值是box</SPAN>
  });
</script>
</head> 

<body>
<div title="123">div</div>
</body>
</html>

以上这篇jQuery中的一些常见方法小结(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery中的一些常见方法小结(推荐)

    1.filter()和not()方法 filter()和not()是一对反方法,filter()是过滤. filter()方法是针对元素自身.(跟has()方法有区别) <script type="text/javascript" src="jquery-1.12.3.min.js"></script> <script> /*filter(): 过滤 not():filter的反义词<BR>*/ $(function(

  • 用JS动态设置CSS样式常见方法小结(推荐)

    用JS来动态设置CSS样式,常见的有以下几种 1. 直接设置style的属性 某些情况用这个设置 !important值无效 如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px'; element.style.height = '100px'; 2. 直接设置属性(只能用于某些属性,相关样式会自动识别) element.setAttribute('height', 100);

  • jquery中获取id值方法小结

    复制代码 代码如下: <div id="product_shift_out_{m}"> </div><script language = "JavaScript" type="text/javascript">$(document).ready(function(){name = $('div').eq(0).attr('id');alert(name)});</script> eq(0)是取第一个

  • jquery的ajax提交form表单的两种方法小结(推荐)

    jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:

  • Java中Spring获取bean方法小结

    Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架,如何在程序中获取Spring配置的bean呢? Bean工厂(com.springframework.beans.factory.BeanFactory)是Spring框架最核心的接口,它提供了高级IoC的配置机制.BeanFactory使管理不同类型的Java对象成为可能,应用上下文(com.springframework.context.ApplicationContext)建立在BeanFactory基础之上,提供

  • java中数组的相关知识小结(推荐)

    java中数组的相关知识小结(推荐)

    1. 2.数组的命名方法 1)int[]ages=new int[5]; 2) int[]ages; ages=new int[5]; 3)int[]ags={1,2,3,4,5}; 4)int[]ags; ags=new int{1,2,3,4}; 或者 int[]ags=new int{1,2,3,4}; 3.java不支持不同类型的重名数组 4.java中数组的循环赋值 package dierge; public class Shuzu { public static void main

  • jQuery DOM节点的遍历方法小结

    本文介绍了jQuery DOM节点的遍历方法小结,分享给大家,也给自己留个笔记 children()方法 jQuery是一个合集对象,如果想快速查找合集里面的第一级子元素,此时可以用children()方法.这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系) 节点查找关系 <div class="div"> <ul class="son"> <

  • jQuery Select下拉框操作小结(推荐)

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

  • jQuery中slidedown与slideup方法用法示例

    这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • jQuery中fadein与fadeout方法用法示例

    本文实例讲述了jQuery中fadein与fadeout方法用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

随机推荐