• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery中的一些常见方法小结(推荐)

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

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jquery常见问题等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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中的一些常见方法小结(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • jquery实现多条件筛选特效代码分享
  • JQuery模板插件 jquery.tmpl 动态ajax扩展
  • 学习jquery必备 api中英文对照的chm手册 下载
  • jquery 弹出登录窗口实现代码
  • jquery不常用方法汇总
  • 7款风格新颖的jQuery/CSS3菜单导航分享
  • 用自定义图片代替原生checkbox实现全选,删除以及提交的方法
  • jQuery分组选择器用法实例
  • JQquery的一些使用心得分享
  • jQuery中insertBefore()方法用法实例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery插件制作简单示例说明
    • jQuery Easyui datagrid editor为combobox时指定数据源实例
    • cssQuery()的下载与使用方法
    • jquery动画2.元素坐标动画效果(创建一个图片走廊)
    • 遍历jquery对象的代码分享
    • 方便实用的jQuery checkbox复选框全选功能简单实例
    • 基于MVC3方式实现下拉列表联动(JQuery)
    • jQuery EasyUI API 中文文档 - ComboGrid 组合表格
    • jq checkbox 的全选并ajax传参的实例
    • jquery 快速回到页首的方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有