jquery选择器练习
1 点击自增无限循环小病毒
用编辑工具打开文件无法停止没有出口死循环
for(i=1;i=i+1;i++){
alert(i);
}
2 jquery基本过滤选择器
基本过滤选择器
First:获取第一个元素
Last :获取最后元素
Even :匹配所有索引值为偶数的元素,从0开始计数Odd:匹配所有所有索引值为奇数的元素,从0开始计数Eq(index)匹配一个给定索引值的元素
Lt(index)匹配所有小于给定索引值的元素
Gt(index)匹配所有大于戈丁索引值的元素
No(selector)去除所有与给定选择器匹配的元素
Header 匹配如h1 h2 h3 之类的标题元素
框架
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:30px;
height:50px;
border:1px solid red;
background: pink;
float:left;
}
基本过滤选择器
这些都是div元素
选择器案例
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:30px;
height:50px;
border:1px solid red;
background: pink;
float:left;
}
基本过滤选择器
这些都是div元素
/*
* 过滤选择器:
* * 使用":"符号用法
* * ":"和选择器是一体的(不是分离的)
*
* 基本过滤选择器:
* * 选择器 - ":first" - "first()" - 获取第一个元素
*/
// 获取第一个元素,最外面最大的div变色
$("#btn1").click(function(){
$("div:first").css("background","green");
});
// 获取最后个元素,最后一个div变色
$("#btn2").click(function(){
$("div:last").css("background","yellow");
});
// 匹配所有索引值为偶数的元素,从 0 开始计数
$("#btn3").click(function(){
$("div:even").css("background","yellow");
});
// 匹配所有索引值为奇数的元素,从 0 开始计数
$("#btn4").click(function(){
$("div:odd").css("background","yellow");
});
// 匹配一个给定索引值的元素
$("#btn5").click(function(){
// 查找到的是第几个? 从0开始算 eq(0)
$("div:eq(2)").css("background","yellow");
});
// 匹配所有大于给定索引值的元素,从第三个开始算
$("#btn6").click(function(){
$("div:gt(2)").css("background","yellow");
});
// 匹配所有小于给定索引值的元素
$("#btn7").click(function(){
$("div:lt(2)").css("background","yellow");
});
// 去除所有与给定选择器匹配的元素,就里面的小div不变其他都变
$("#btn8").click(function(){
// 不是特别的常用
$("div:not('.one')").css("background","yellow");
});
// 匹配如 h1, h2, h3之类的标题元素,匹配标题
$("#btn9").click(function(){
// :header的写法是固定写法 - 不常用
$(":header").css("background","yellow");
});
3 内容过滤器
Contains(text)包含了指定的文本
Empty 没有文本,也没有子节点
Parent 有文本或者子节点
Has(selector)有负责selector要求后代的元素
框架
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:30px;
height:50px;
border:1px solid red;
background: pink;
float:left;
}
选择器运用
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:30px;
height:50px;
border:1px solid red;
background: pink;
float:left;
}
// 匹配包含给定文本的元素,文本中含有div的变色
$("#btn1").click(function(){
// 文本中包含"div"的div元素
$("div:contains('div')").css("background","blue");
});
// 匹配所有不包含子元素或者文本的空元素,里面是空的
$("#btn2").click(function(){
$("div:empty").css("background","yellow");
});
// 匹配含有子元素或者文本的元素,最外面大的变色
$("#btn3").click(function(){
$("div:parent").css("background","yellow");
});
// 匹配包含选择器所匹配的元素的元素(爹),上面的变色
$("#btn4").click(function(){
$("div:has('.one')").css("background","yellow");
});
4 可见选择器
Visible :匹配所有的可见元素
Hidden:匹配所有不可见元素,或者type为hidden的元素
框架
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:100px;
height:100px;
border:1px solid red;
float:left;
display:none;
}
框架案例
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:100px;
height:100px;
border:1px solid red;
float:left;
display:none;
}
// 三个div元素 - 2个显示1个隐藏
// 匹配所有的可见元素
$("#btn1").click(function(){
$("div:visible").css("background","yellow");
});
// 匹配所有不可见元素,或者type为hidden的元素
$("#btn2").click(function(){
// 先将隐藏的div元素,显示出来,再改变背景颜色
$("div:hidden").show(3000).css("background","pink");
// 链式操作 - jQuery所有的方法都返回jQuery对象
});
5 属性选择器
框架
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:100px;
height:100px;
border:1px solid red;
float:left;
display:none;
}
框架案例
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:100px;
height:100px;
border:1px solid red;
float:left;
display:none;
}
// 匹配包含给定属性的元素
$("#btn1").click(function(){
// 定位的是具有title属性的div元素
$("div[title]").css("background","yellow");
});
// 匹配给定的属性是某个特定值的元素
$("#btn2").click(function(){
$("div[title='test']").css("background","yellow");
});
// 匹配所有不含有指定的属性,或者属性不等于特定值的元素
$("#btn3").click(function(){
// 定位具有title属性值不等于test的 - 包含没有title属性的元素
$("div[title!='test']").css("background","yellow");
});
// 匹配给定的属性是以某些值开始的元素
$("#btn4").click(function(){
$("div[title^='tes']").css("background","yellow");
});
// 匹配给定的属性是以某些值结尾的元素
$("#btn5").click(function(){
$("div[title$='est']").css("background","yellow");
});
// 匹配给定的属性是以包含某些值的元素
$("#btn6").click(function(){
$("div[title*='es']").css("background","yellow");
});
// 复合属性选择器,需要同时满足多个条件时使用
$("#btn7").click(function(){
// 多个属性过滤选择器并列使用 - 交集
$("div[id][title*='es']").css("background","yellow");
});
6子元素框架选择器
框架
div{
width:100px;
height:100px;
border:1px solid black;
float:left;
}
.one{
width:30px;
height:30px;
border:1px solid red;
float:left;
}
框架案例
div{
width:100px;
height:100px;
border:1px solid black;
float :left;
}
.one{
width:30px;
height:30px;
border:1px solid red;
float:left;
}
// 匹配第一个子元素,三个都变化
$("#btn1").click(function(){
$("div:first-
child").css("background","yellow");
});
// 匹配最后一个子元素,三个小div都变化
$("#btn2").click(function(){
$("div:last-
child").css("background","yellow");
});
// 匹配其父元素下的第N个子或奇偶元素,大的是偶不算
$("#btn3").click(function(){
// :nth-child()选择器,是从 1 开始
$("div:nth-
child(2)").css("background","yellow");
});
// 如果某个元素是父元素中唯一的子元素,独生子变色
$("#btn4").click(function(){
$("div:only-
child").css("background","yellow");
});
7 表单过滤
Enable 可用的
Disabled 禁用的
Checked 被选中的
Selected 被选中的
$(function(){
$("#btn1").click(function(){
$("input[type='text']:enabled").val("this is my jquery") /*Val是jquery的属性值*/
})
$("#btn2").click(function(){
$("input[type='text']:disabled").val("this is my jquery")
})
$("#btn3").click(function(){
alert($("input[type='checkbox']:checked").val())
})
})
value="HTML" />HTML
CSS
value="javaScript" name="love" />javaScript