jQuery—一些常见方法（1）【filter(),not(),has(),next(),prev(),find(),eq(),index(),attr(),】
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(),】的更多相关文章
- 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 ...
- jQuery—一些常见方法（3）【width(),innerWidth(),outerWidth()】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQuery常见方法
<!DOCTYPE htmi> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
在asp.net webForm开发中,用Jquery ajax调用aspx页面的方法常用的有两种:下面我来简单介绍一下. [WebMethod] public static string SayHe ...
- VBS操作Excel常见方法
VBS操作Excel常见方法 作者: 字体:[增加 减小] 类型:转载 时间:2009-11-13我要评论 VBS控制Excel常见方法,需要的朋友可以参考下. dim oExcel,oWb,oShe ...
- jquery的clone方法bug的修复
最近发现jquery的clone的bug,textarea和select的jquery的clone方法有问题,textarea和select的值clone的时候会丢掉,在网上发现一个插件,下载地址如下 ...
- jquery的clone方法 于textarea和select的bug修复
在使用jquery的clone方法时,textarea和select的值clone的时候会丢掉,这可能是这个方法的一个BUG.解决办法就是在clone的时候将val再重新赋值一下. 引入到你要用的cl ...
- jquery中Live方法不可用，Jquery中Live方法失效
jquery中Live方法不可用,Jquery中Live方法失效 >>>>>>>>>>>>>>>>> ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
随机推荐
- ios开发——实用技术篇Swift篇&多点触摸与手势识别
多点触摸与手势识别 //点击事件 var atap = UITapGestureRecognizer(target: self, action: "tapDo:") self.vi ...
- 申请TexturePacker 或 PhysicsEditor free licenses
有一个跟开发有关的blog,就可以去 http://www.codeandweb.com/request-free-license 申请一个free licenses. 可以申请TexturePack ...
- java_闭包和回调实现一边按键盘一边演讲
package ming; interface Teachable { void work(); } class Programer { private String name; public Str ...
- JSONP(处理跨域问题)
Ajax直接请求普通文件存在跨域无权限访问的问题 凡是拥有"src"这个属性的标签都拥有跨域的能力,比如<script>.<img>.<iframe& ...
- [Security] Automatically adding CSRF tokens to ajax calls when using jQuery--转
地址:http://erlend.oftedal.no/blog/?blogid=118 When building a ajax based application, you want to pro ...
- BeanDefinitionRegistry extends AliasRegistry
// 用该Registry注册一个新定义的bean,但是新的bean必须支持父的定义和子的定义void registerBeanDefinition(String beanName, BeanDefi ...
- [Java] Eclipse注释模板设置详解
设置注释模板的入口: Window->Preference->Java->Code Style->Code Template 然后展开Comments节点就是所有需设置注释的元 ...
- 信号量和PV操作写出Bakery算法的同步程序
面包店烹制面包及蛋糕,由n个销售员卖出.当有顾客进店购买面包或蛋糕时,应先在取号机上取号,然后等待叫号,若有销售员空闲时便叫下一号,试用信号量和PV操作写出Bakery算法的同步程序. 设计要求 1) ...
- PHP－－关于模板的原理和解析
此内容用作笔记,以备日后查看,此内容为学习李炎恢课程而来,并非自己所创,如有问题请私信~ 将PHP代码和静态HTML代码进行分离,使代码的可读性和维护性得到显著提高. 使用模板引擎: 我们所说的模板是 ...
- [改善Java代码]避免对象的浅拷贝
建议43: 避免对象的浅拷贝 我们知道一个类实现了Cloneable接口就表示它具备了被拷贝的能力,如果再覆写clone()方法就会完全具备拷贝能力.拷贝是在内存中进行的,所以在性能方面比直接通过ne ...