jQuery 选择方法及$(this)用法实例分析
更新时间：2020年05月19日 11:13:00 作者：人生如初见_张默
这篇文章主要介绍了jQuery 选择方法及$(this)用法,结合实例形式分析了jQuery 选择方法及$(this)相关使用技巧与注意事项,需要的朋友可以参考下
本文实例讲述了jQuery 选择方法及$(this)用法。分享给大家供大家参考，具体如下：
选择方法
用方法来选择元素，可以视作$()函数的链式调用，返回仍然是一个jQuery对象
$(function() {
//一、根据结果集中元素位置来选择：first(),last(),eq(),slice()
//1、选择第一个li
$('li').first().css('color','red');
//2、选择最后一个li
$('li').last().css('color','red');
//3、选择第三个li,索引从0开始
$('li').eq(2).css('color','red');
//4、范围选择：slice(起始索引，结束索引)，索引从0开始，结果中不包括结束索引的数据
$('li').slice(1,4).css('color','red');
//5、slice()省略结束索引，默认选取到最后一个元素
$('li').slice(1,).css('color','red');
//6、slice()支持负数，从倒数开始选择元素，如：slice(-3),选择最后三个
$('li').slice(-3).css('color','red');
//二、根据结果集中元素的自身特性来选择元素：filter(),not()
//从结果中选择class为red的元素，等价于$('li.red')
$('li').filter('.red').css('color','red');
//filter()方法可以传入一个回调判断函数，参数就是索引
$('li').filter(function(index) {return index%2 == 0}).css('color','red');
等价于：
$('li:even').css('color','red');
//与filter()功能相反的是not()方法，选择所有奇数行
$('li').not(function(index) {return index%2 == 0}).css('color','red');
等价于：
$('li:odd').css('color','red');
//三、将选中元素集合当作上下文，其实就是一个定位标志
//find(),children(),contents(),next(),prev(),nextAll(),prevAll(),parent(),parents(),closest(),parentsUntil()
//1、查询所有li元素下面的strong元素，文本设置为red，可以深入到多级
$('li').find('strong').css('color','red');
//2、获取当前元素的下一个元素，当前id在第5个li上
$('li').next().css('color','red');
//3、获取从当前开始到结束的全部元素，会将子孙元素全选中
$('li').nextAll().css('color','red');
//4、获取当前元素的前一个元素，prev()
$('li').prev().css('color','red');
//5、获取当前元素的前面所有元素，prevAll()
$('li').prevAll().css('color','red');
//6、获取当前元素父元素，parent()
$('li').parent().css('color','red');
});
$(this)用法
返回当前jQuery对象，与上下文相关：
<head>
<script>
$(document).ready(function() {
$('img').click(function(event) {
alert($(this).attr('alt'));
});
});
</script>
</head>
<body>
<img src="images/1.png" alt="one">
<img src="images/2.png" alt="two">
<img src="images/3.png" alt="three">
<img src="images/4.png" alt="four">
</body>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
jQuery的$符号非常神奇，它可以接受一个字符，也可以接受一个文档对象或window对象，亦可以传个函数进行变为domReady加载器2011-05-05
这篇文章主要介绍了jQuery中dequeue()方法用法,实例分析了dequeue()方法的功能、定义、使用技巧与相关注意事项,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
使用Google的UI的时候，在当前页面打开一个超链接，网页会根据需要进行局部刷新，而不是替换整个页面。当用户选择新窗口打开超链接的时候，超链接仍然可以到达预想的页面2012-05-05
这篇文章主要为大家详细介绍了jQuery遮罩层实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
下面小编就为大家带来一篇遍历json获得数据的几种方法小结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-01-01
本文给大家详细讲解的是如何利用jquery.more.js实现点击加载更多后在本页面内下面加载数据，十分的实用，有需要的小伙伴可以参考下。2015-05-05
这篇文章主要为大家详细介绍了jQuery-App输入框实现实时搜索，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
本篇文章主要介绍了jquery dataTable 获取某行数据的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
客户有这样一个需求在列表中的文本框里输入数据时，要能够通过上下左右键来切换光标，按回车键就把光标移到下一个文本框，接下来将为你介绍下如何实现，感兴趣的朋友可以参考下2013-03-03
$.ajax下json数据的传递方法，大家可以参考下。这样就可以传递json数据了2008-11-11
最新评论