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 Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
JS文件中加载jquery.js的实例代码
May 05 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
jQuery实时统计输入框字数及限制
Jun 24 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
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
基于php 随机数的深入理解
2013/06/05 PHP
php curl基本操作详解
2013/07/23 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
javascript使用输出语句实现网页特效代码
2015/08/06 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
python网络编程学习笔记(二):socket建立网络客户端
2014/06/09 Python
在Python中使用HTML模版的教程
2015/04/29 Python
小小聊天室Python代码实现
2016/08/17 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python安装numpy&amp;安装matplotlib&amp; scipy的教程
2017/11/02 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
Django ModelForm操作及验证方式
2020/03/30 Python
用python实现名片管理系统
2020/06/18 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
python 5个实用的技巧
2020/09/27 Python
事业单位辞职信范文
2014/01/19 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
企业公益活动策划方案
2014/08/24 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
西柏坡观后感
2015/06/08 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python