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,群组, ...
随机推荐
- https的证书认证 iOS版
一.证书链 SecTrustRef: SecTrustRef trust = challenge.protectionSpace.serverTrust; 需要先拿出一个 SecTrustRef 对象 ...
- UVA1620-Lazy Susan（思维+逆序对）
Problem UVA1620-Lazy Susan Accept: 81 Submit: 375Time Limit: 3000 mSec Problem Description There ar ...
- [SHOI2015]自动刷题机
嘟嘟嘟 这题就比较水了,毕竟只评了个蓝. 想一下发现满足单调性,所以可以二分找最大值. 但是最小值怎么办?刚开始我很zz的以为只要把判断条件从大于等于改成小于等于就行了,后来发现根本不对. 想了想因为 ...
- html js获取URL传参
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code function GetQueryString(name) { var re ...
- P1365 WJMZBMR打osu! / Easy-洛谷luogu
传送门 题目背景 原 维护队列 参见P1903 题目描述 某一天WJMZBMR在打osu~~~但是他太弱逼了,有些地方完全靠运气:( 我们来简化一下这个游戏的规则 有nn次点击要做,成功了就是o,失败 ...
- 【vue】css解决“防抖动”——防止页面加载图片抖动
overflow:hidden;height:0;padding-bottom:*; // 其中*处填 图片的高宽百分比=高/宽*100%
- Java线程和线程池
Android中创建线程的方式有,new Thread,new Thread(Runnable),new Thread(Callable)的形式. A. 直接new Thread简单方便. B. ne ...
- JasperReport制作行内容合并的表格
效果图: 实现思路一: 交叉表 另一个思路: 普通表格 缺点:无法实现内容 垂直居中显示 准备工作 一.数据准备 DROP TABLE IF EXISTS `address_item_sex_valu ...
- 记录一次.Net框架Bug发现和提交过程：.Net Framework和.Net Core均受影响
SmtpClient一处代码编写错误导致异步发送邮件时DeliveryFormat配置项无法正确工作,异步操作已经完全不受我们设置属性控制了,UTF-8内容(如中文)转不转码完全看对方邮件服务器心情! ...
- [翻译] C# 8.0 新特性
原文: Building C# 8.0 [译注:原文主标题如此,但内容大部分为新特性介绍,所以意译标题为 "C# 8.0 新特性"] C# 的下一个主要版本是 8.0.我们已经为它 ...