3 jquery的选择器2
2018-08-03 本文已影响0人
流光已至
6 属性过滤选择器
自定义属性，用于正则表达式
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
//属性过滤选择器
function myclick(){
//自定义属性过滤
$("input[reg]").each(function(){
var val=$(this).val();
var reg=$(this).attr("reg");
var tip=$(this).attr("tip");
var regExp = new RegExp(reg);
if(!regExp.test(val)){
alert(tip);
}
})
}
</script>
</head>
<body>
用户名：<input id="username" name="usename" type="text" reg="^\d{6,8}$" tip="请输入6到8位用户名"> <br>
密码：<input name="password" type="password" reg="\w{6,8}$" tip="请输入6到8位单词字符的密码"><br>
<input type="button" value="点击" onclick="myclick()">
</body>
效果如下：
7 子元素过滤选择器
$("ul li:nth-child(2)") 匹配其父元素下第N个子元素
$("ul li:first-child") , $("ul li:last-child"), $("ul li:only-child")
8 小练习
给p标签，加onclick事件
<script type="text/javascript">
//小练习
$(function(){
$("p").click(function(){
alert($(this).html());
})
// 各行变色
$("li:even").css({"background":"green"});
})
//输出多选选中的个数
function myclick(){
var inputObj=$("input:checked");
alert(inputObj.length);
}
</script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
<input type="checkbox">多选项1
<input type="checkbox">多选项2
<input type="checkbox">多选项3
<input type="checkbox">多选项4
<input type="button" value="点击" onclick="myclick()">
</body>
效果如下：
