jQuery选择器和遍历

news/2024/7/19 14:48:51 标签: javascript, js, jquery, java, css

jQuery中选择器的使用

有哪些选择器:
ID选择器、类选择器、标签选择器、属性选择器、伪类选择器
常用的获取元素的方式:
第一种:通过CSS中的选择器来进行元素的获取
第二种:通过JQuery提供的方法来进行获取

需求1:使用选择器的形式获取元素
:first / :last 获取一组元素中的第一个或者最后一个元素
:even / :odd 获取一组元素中下标为偶数的元素或者奇数的元素
:nth-of-type(表达式) 表达式格式:2n 2n+1 2n+2
:eq(index) 获取指定下标的元素对象
:not(selector) 除…之外的元素

实例如下:

javascript>javascript">    $('button:first').html() 获取一组button元素中的第一个元素的值
    $('button:even').text()	获取一组button元素中下标为偶数的元素的值,下标从0开始
    $('button:nth-of-type(2n+1)').text() 获取一组button元素中下标为奇数的元素的值
    $('input:not([type="submit"])') 获取除了类型为submit外的input元素

需求2:以函数的形式获取元素
eq(index) 和:eq功能一样,代表获取指定下标的元素
not() 和:not功能一样,代表获取除…外的元素
next() 获取当前元素紧邻的下一个元素,在表单中会用到

实例如下:

javascript>javascript">$('button').eq(1).text()  获取一组button元素中下标为1的元素
$('input').not("[type=submit]") 获取除了类型为submit的input元素
$('input').eq(0).next() 获取下标为0的input元素的下一个元素

需求3:便利button按钮的值

javascript>javascript">使用js遍历
var btns = document.getElementByTagName("button");
for(var i=0;i<btns.length;i++){
	console.log(btns[i].innerHTML);
}

jQuery的形式遍历节点对象 节点数组 .each(function(index,element){}) 参数可省略
$('button').each(function(index,element){
	console.log($('button').eq(index).text());
	console.log($('button')[index].innerHTML);
	console.log(element.innerHTML);
	console.log(this.innerHTML)
	})

需求4:遍历数组或json对象

javascript>javascript">var arr = ["你","我","他","她"]
var json = [
		{"name":"1","price":"1"},
		{"name":"2","price":"2"},
		{"name":"3","price":"3"}
		];
//jQuery遍历数组和json对象用的是$.each(data.function(index,element){})
$.each(arr,function(index,element){
	console.log(index,element);
})
$.each(json,function(index,jsonObj){
	console.log(index,jsonObj.name,jsonObj.price);
})

http://www.niftyadmin.cn/n/1679731.html

相关文章

Atlassian的Stash数据中心为Git提供了高可用性及可伸缩性

Atlassian最近发布了Stash数据中心&#xff0c;这是一个具有高可用性以及横向扩展能力的部署选择&#xff0c;用于本地源代码与Git库管理解决方案Stash。这套系统能够在不产生停机时间的情况下直接添加新节点&#xff0c;以实现双主机方式&#xff08;active/active&#xff09…

matlab 程序中tf,tftoolbox 本书包含的实例所使用的源程序清单,文件夹第3章~第7章分别包括各章节内 matlab 238万源代码下载- www.pudn.com...

文件名称: tftoolbox下载收藏√ [5 4 3 2 1 ]开发工具: matlab文件大小: 2243 KB上传时间: 2013-03-09下载次数: 1提 供 者: double详细说明&#xff1a;本书包含的实例所使用的源程序清单&#xff0c;文件夹第3章&#xff5e;第7章分别包括各章节内的实例源程序。2.源程序…

request对象与登录流程

第1阶段&#xff1a;课前必备基础知识 &#xff08;1&#xff09;web流程图 &#xff08;2&#xff09;http协议 简介&#xff1a; 超文本传输协议&#xff08;英文&#xff1a;HyperText Transfer Protocol&#xff0c;缩写&#xff1a;HTTP&#xff09;是一种用于分布式、协…

php生成excel完整实例代码,php生成excel列序号代码实例

php生成excel列序号代码实例发布于 2015-02-01 11:55:57 | 112 次阅读 | 评论: 0 | 来源: 网友投递PHP开源脚本语言PHP(外文名: Hypertext Preprocessor&#xff0c;中文名&#xff1a;“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点&#xff…

131. Palindrome Partitioning

题目&#xff1a; Given a string s, partition s such that every substring of the partition is a palindrome. Return all possible palindrome partitioning of s. For example, given s "aab",Return [["aa","b"],["a","a…

java 汉字 字节,JAVA 中汉字在不同编码下的字节不同

*/utf-8中文字节长度&#xff1a;6utf-16中文字节长度&#xff1a;6UTF-16BE中文字节长度&#xff1a;4UTF-16LE中文字节长度&#xff1a;4UTF-32中文字节长度&#xff1a;8UTF-32BE中文字节长度&#xff1a;8UTF-32LE中文字节长度&#xff1a;8unicode中文字节长度&#xff1a…

Node.js安装及环境配置与cnpm的安装,绝对一遍成功

第一步 安装 前期准备: 去360软件中心下载一个 微软常用运行库合集-2020.03.25-X64 然后开始安装 第二步 配置环境 打开cmd 测试安装是否成功 在安装目录下新建两个文件夹 node_cache和node_global 创建完两个空文件夹之后&#xff0c;打开cmd命令窗口&#xff0c;输入…

Php上个月的同一周,如何获取本周、上周、本月、上个月数据的起止时间 PHP

1、本周的起止时间&#xff0c;这个在网上搜&#xff0c;有很多&#xff0c;但大多都是不对的&#xff0c;代码程序毕竟是外国人研发出来的&#xff0c;按外国人的习惯&#xff0c;周日算下一周的开始&#xff0c;网上搜出来的大多是这样的&#xff0c;没有按国人的统计方式肯定…