jQuery 选择方法及$(this)用法实例分析


Posted in jQuery onMay 19, 2020

本文实例讲述了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.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
Mar 21 jQuery
Jquery获取radio选中的值
May 05 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jQuery中DOM常见操作实例小结
Aug 01 jQuery
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
使用jquery实现轮播图效果
Jan 02 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 #jQuery
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 #jQuery
jQuery AJAX应用实例总结
May 19 #jQuery
jquery+css3实现的经典弹出层效果示例
May 16 #jQuery
JQuery事件冒泡和默认行为代码实例
May 13 #jQuery
JQuery表单元素取值赋值方法总结
May 12 #jQuery
JavaScript或jQuery 获取option value值方法解析
May 12 #jQuery
You might like
基于HBase Thrift接口的一些使用问题及相关注意事项的详解
2013/06/03 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
php微信开发之百度天气预报
2016/11/18 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
解决checkbox的attr(checked)一直为undefined问题
2014/06/16 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
2019/08/07 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
2019最新21个MySQL高频面试题介绍
2020/02/06 Javascript
详细分析vue表单数据的绑定
2020/07/20 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
在Python程序中操作MySQL的基本方法
2015/07/29 Python
用Python写一个无界面的2048小游戏
2016/05/24 Python
python matplotlib绘图,修改坐标轴刻度为文字的实例
2018/05/25 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
应届生骨科医生求职信
2013/10/31 职场文书
医院护士的求职信范文
2013/12/26 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
2014小学植树节活动总结
2014/03/10 职场文书
教职工代表大会主持词
2014/04/01 职场文书
赔偿协议书范本
2014/04/15 职场文书
大班亲子运动会方案
2014/06/10 职场文书
2015年教导处教学工作总结
2015/07/22 职场文书