jquery选择基础
1 元素选择器
之前不熟悉的是如：
$("input.cls1");
这种用法
2 属性选择器
包含name属性的input元素，
如 $("input[name]");
name属性以xx结尾的input元素
$("input[name$=xx]");
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
//选择器总结
//jquery中选择器编写均可以以元素名为开头 后跟id,class或则属性选择器来组成。
//$("input[name$='3']") input为元素名,[]中包含属性name,name的值以3结尾
//$("input#none5") 不能有空格
//$("input.cls1") 不能有空格
//$("input:first")
//$("input[class][name^='none']") 复合选择器，返回含有class属性且name属性的值以none值开头
//$("input.cls1[name^='none']") 返回class为.cls1且name属性的值以none值开头 //form所有后代input元素
var Init1 = function () {
$("form input").each(function () {
alert($(this).attr("name"));
})
};
//form所有input子元素
var Init2 = function () {
$("form > input").each(function () {
alert($(this).attr("name"));
})
};
//紧接form后的所有input同辈元素
var Init3 = function () {
$("form ~ input").each(function () {
alert($(this).attr("name"));
}) //$("input[name='none2'] ~ input").each(function () {
// alert($(this).attr("name"));
//})
};
//紧接form的第一个input同辈元素
var Init4 = function () {
$("form + input").each(function () {
alert($(this).attr("name"));
})
};
//返回属性name包含none的所有input元素
var Init5 = function () {
$("input[name*='none']").each(function () {
alert($(this).attr("name"));
})
}
//返回class为cls1的所有input元素
var Init6 = function () {
//alert($("input.cls1").attr("name"));
$("input.cls1").each(function () {
alert($(this).attr("name"));
})
}
//返回id为none5的所有input元素
var Init7 = function () {
//alert($("input.cls1").attr("name"));
$("input#none5").each(function () {
alert($(this).attr("name"));
})
}
//返回第一个input元素
var Init8 = function () {
$("input:first").each(function () {
alert($(this).attr("name"));
})
} var log = function(para){
console.log(para);
} //返回第一个input元素
var Init9 = function () {
//$("input[class][name^='none']").each(function () {
// alert($(this).attr("name"));
//})
// alert('xxxxxxxxxxxxxx');
$("input.cls1[name^='none']").each(function () {
alert($(this).attr("name"));
}); var len = $("input.cls1").length;
console.log('input.cls1 的len:'+len);
//基本选择器 id选择器，实际上也可以加上元素名称，与$("input.cls1")这种形式做对比
var len2 = $("input#cls1").length;
console.log('input#cls1 的len2:'+len2);
//基本选择器 class选择，
//var len3 = $("button.cls1").length;
//console.log('button.cls1 的len3:'+len3); // 属性选择器 查找所有含有 id 属性的 div 元素
var divid = $("div[id]");
log('divid:'+divid);
divid.css('background','pink').attr('display','block').html('div[id]的元素一共有'+divid.length+"个"); // 属性选择器 匹配给定的属性是以某些值开始的元素
var divid2 = $("div[id^=test2]");
log('div[id^=test2]的个数:'+divid2.length); // 属性选择器 匹配给定的属性是以某些值结尾的元素
var divid3 = $("div[id$=test2]");
log('div[id$=test2]的个数:'+divid3.length); // 属性选择器 复合属性选择器，需要同时满足多个条件时使用。
// 找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的 input
var lenA = $('input[id][name$=man]').length;
var lenB = $("input[id][name$='man']").length;
//以上这两种写法都可以，推荐使用第二种
log('lenA:'+lenA);
log('lenB:'+lenB);
}
$(Init9);
</script>
</head>
<body>
<input name="none2" />
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input class="cls1" name="none" />
<input class="cls1" name="none5" />
<input type="button" class="cls1" name="none5" value="xxx"/>
<input class="cls1" name="none44" id="cls1" />
<input id="none6" class="cls1" name="none6" />
<input name="none3" />
<br>
属性选择器
<div>
<p>Hello!</p>
</div>
<div id="test2">test....</div>
<div id="test2ABC">test....</div>
<div id="BCDtest2">test....</div>
<div id="test3xx">test....</div> 属性选择器之 复合属性选择器
<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />
</body>
</html>
jquery选择基础的更多相关文章
- jQuery 插件基础
jQuery 插件基础 翻译 How to Create a Basic Plugin 如果你需要在 jQuery 选择器上执行一系列重复操作, 这时候你需要编写 jQuery 插件. jQuery ...
- jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
- web前端基础——jQuery编程基础
1 jQuery简介 jQuery是一个兼容多浏览器的JavaScript库,核心理念是write less,do more(写得更少,做得更多).它对JavaScript进行了封装,使开发更便捷,并 ...
- jQuery语法基础&选择器
jQuery 语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(select ...
- jQuery的基础语法实例
jQuery 基础语法 jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作. 基础语法是:$(selector).action() 美元符号定义 jQuery 选择符(sele ...
- jQuery之基础核心（demo)
jQuery之基础核心 作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
- 第一百六十三节，jQuery，基础核心
jQuery,基础核心 一．代码风格 在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象,所 ...
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
随机推荐
- 两段锁协议（Two-Phase Locking――2PL）
两段锁协议(Two-Phase Locking――2PL) 两段锁协议规定所有的事务应遵守的规则: ① 在对任何数据进行读.写操作之前,首先要申请并获得对该数据的封锁. ② 在释放一个封锁之后,事务不 ...
- UVA11925-Generating Permutations（贪心）
Problem UVA11925-Generating Permutations Accept: 214 Submit: 1429Time Limit: 1000 mSec Problem Desc ...
- 关于xampp中无法启动mysql,Attempting to start MySQL service...的解决办法！！
最近在学习服务器方面的知识,找到了这款功能强大的建站集成软件包——xampp.但是在开数据库服务器的时候,出现了这种情况.一直在Attemptng to start MySQL service... ...
- springboot RestTemplate请求
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 1.定义 RestTemplateConfig 配置类 @Configuratio ...
- MYSQL学习笔记——sql语句优化工具
优化sql:思路: 使用explan->先查询type类型看看是all还是ref,然后判断 possible_keys (显示可能应用在这张表中的索引, 一个或多个.查询涉及到的字段是若存在索引 ...
- binarySearch(int[] a,int fromIndex,int toIndex, int key)的用法
package com.Summer_0420.cn; import java.util.Arrays; /** * @author Summer * binarySearch(int[] a,int ...
- if选择语句与switch选择语句的比较、区别及应用场景
if选择语句和switch选择语句的比较: 1.switch语句只支持常量值相等的分支判断,而if语句支持更为灵活,任意布尔表达式均可: 2.switch语句通常比一系列嵌套if语句效率更高:逻辑更加 ...
- bsxfun, arrayfun, cellfun, spfun, structfun
在使用matlab进行矩阵计算的时候,经常会遇到要使用for循环的情况.但其实很多操作可以用内部的一些函数代替.今天总结一些几个函数的用法: bsxfun, arrayfun, cellfun, sp ...
- 江苏省选2019Round1游记
JSOI2019R1过去了. Day0 打板子.看白书. 晚上太热了,楼下还在打铁,睡不着. 折腾到好晚才勉强睡着. Day1 早上好困啊. 开T1.看起来T1的60分很可做的样子?5min打完了(为 ...
- python之函数、参数、作用域、递归
函数的定义 函数也就是带名字的代码块.使用关键字def来定义,指出函数名及参数,以冒号结尾. def fibs(num): result =[0,1] for i in range(num-2): r ...