1.filter()和not()方法

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

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

<script type="text/javascript" src="jquery-1.12.3.min.js"></script>
<script>
/*filter(): 过滤
not():filter的反义词
*/
$(function(){
//$('div').filter('.box').css('background','red'); //将div中带有class=‘box’的div的背景色改成红色
$('div').not('.box').css('background','red'); //将div中除带有class=‘box’的div的其他div设置背景色为红色
}); </script> 
</head>
<body>
<div class="box">div</div>
<div>div2</div>
</body>
</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标签的div(父级)的背景色为红色
$('div').has('.box').css('background','red'); //只有包含的标签的class值是box的div(父级)的背景色为红色
});
</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'); //只会给div下的所有h2的背景色设置为红色
$('div').find('h2').eq(0).css('background','red'); //给div下的第一个h2的背景设置为红色
});
</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()); //索引就是当前元素在所有兄弟节点中的位置
//弹出是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')); //获取属性title的值
$('div').attr('title','456'); //设置title属性的值是456
$('div').attr('class','box'); //给div设置class属性,值是box
});
</script>
</head> <body>
<div title="123">div</div>
</body>
</html>

  

 

 

jQuery—一些常见方法(1)【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】的更多相关文章

  1. jQuery—一些常见方法(2)DOM操作【insertBefore(),insertAfter(),appendTo(),prependTo(),before(),after(),append(),prepend(),remove(),on(),off(),scrollTop()】

    一.insertBefore() 如下代码:找到span标签,将span标签剪切到div的前面 <!DOCTYPE html> <html lang="en"&g ...

  2. jQuery—一些常见方法(3)【width(),innerWidth(),outerWidth()】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JQuery常见方法

    <!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...

  4. jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)

    在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...

  5. VBS操作Excel常见方法

    VBS操作Excel常见方法 作者: 字体:[增加 减小] 类型:转载 时间:2009-11-13我要评论 VBS控制Excel常见方法,需要的朋友可以参考下. dim oExcel,oWb,oShe ...

  6. jquery的clone方法bug的修复

    最近发现jquery的clone的bug,textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,在网上发现一个插件,下载地址如下 ...

  7. jquery的clone方法 于textarea和select的bug修复

    在使用jquery的clone方法时,textarea和select的值clone的时候会丢掉,这可能是这个方法的一个BUG.解决办法就是在clone的时候将val再重新赋值一下. 引入到你要用的cl ...

  8. jquery中Live方法不可用,Jquery中Live方法失效

    jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...

  9. jQuery中on()方法用法实例详解

    这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...

随机推荐

  1. 整型数组与vector对象之间的相互初始化

    #include<iostream> #include<vector> #include<string> using namespace std; int main ...

  2. jq实现竞拍倒计时

    1jq的效果代码 //全局变量用于存储当前时间 var nows; function rightZeroStr(v) { ) { " + v; } return v + "&quo ...

  3. the railway problem(the example of stack)

    this problem is a very classic problem which can use stack to solve. the problem can be searched thr ...

  4. 图形化管理debian服务

    bootupmanager这个软件 ,用着勉强吧, 功能不多. 安装 sudo apt-get install bum 卸载sudo apt-get remove --purge bum 多了不说 , ...

  5. CentOS6.5 一键部署运行环境shell脚本

     ################################################## #  CentOS6.5                                     ...

  6. Linux 学习笔记 Linux环境变量初稿

    set命令会显示为某个特定进程设置的所有环境变量,但不包括一些没有设置值的默认环境变量 可以通过等号来给环境变量赋值,值可以是数值或字符串 如果要给变量赋一个含有空格的字符串值,必需用单引号来界定字符 ...

  7. 炼数成金hadoop视频干货06-10

    视频地址:http://pan.baidu.com/s/1dDEgKwD 第六课统讲了hadoop几个子项目和HBase,第七课还是讲的HBase 第八课讲了PIG 第九课讲了Hive和Zookeep ...

  8. Android(java)学习笔记85:案例拨号程序

    手机拨号程序:(只有程序代码) package cn.itcast.phone; import android.app.Activity; import android.content.Intent; ...

  9. JavaScript 关于this的理解

    this是一个挺神奇的东西,经常不知道它绑定到了那里 ,因此出来了各种绞尽脑汁的面试题. 例1 <script> var person={}; person.name='li'; pers ...

  10. Flex性能优化常用手法总结 转

    转自:http://bbs.51aspx.com/showtopic-43693.html 随着Flex越来越多的被人们所熟知,越来越多的互联网也开始了RIA应用.众所周知,目前国内的宽带应用并不是像 ...