主要内容:
1 jquery的使用方法 : 先导入包, 然后再使用
<scipt src="包"></scipt>
<scipt >
console.log($('#d1').text());
</scipt>
2 .选择器 :
1) 基本选择器
id选择器
$('#id1')
$('#id1')[0] jQuery对象根据索引值能够拿到具体的标签对象
$('#id1')[0].innerText
类选择器
$('.c1')
标签选择器
#('h2')
组合选择器
$('.c1, h2')
2 ). 层级选择器
后代选择器 : $('div .c1') 找到div里所有包含.c1样式名的标签的子子代代
儿子选择器 : $(''div .c1') 找到div下面的儿子标签
毗邻选择器 : $('div .c1') 找到与div同级标签中的具有.c1样式名的下面相邻标签
兄弟选择器 : $('div .c1') 找到与div同级标签中的具有.c1样式名的所有标签
3) 属性选择器
1 ) [attribute] 找到具有该属性的标签
2 ) [attribute = value] $('[type="submit"]') 找到属性等于submit的值
3 ) [attribute != value] 找到不具有该属性的标签 的所有标签,html,body等
4 ) 基本筛选器
$('#u1>li:first')
$('#u1 li:last')
$('#u1 li:eq(3)') #索引是3的元素
$('#u1 li:even') #索引是偶数的元素 odd所以是奇数的元素
$('#u1 li:not(.l1)' #将有.l1样式名的标签移除
$('div:has(span.c2)')#找后代中有span标签中的div标签 (找的是div标签)
5 ) 表单选择器
:text
:password
:submit
:checkbox:
:radio
:seleced
注意: 当checked的时候: 如果有select会把select选中, 应该写成$('input:checked')
3 筛选器
上一个.prev(),下一个next()
$('#l1').next()
$('#l1').nextUntil('#l4')
$('#l1').nextAll()
父标签.parent( ) 祖先选择器.parents()
$('#l2').parent()
$('#l2').parents()
儿子标签.children( ) 和兄弟标签.siblings()
$('#u1').siblings()
w.fn.init(7) [div, div, div, input, input, input, select#ww, prevObject: w.fn.init(1)]0: div1: div2: div3: input4: input5: input6: select#wwlength: 7prevObject: w.fn.init [ul#u1]__proto__:
$('#u1').children()
w.fn.init(5) [li#l1, li#l2, li#l3, li#l4, li#l5, prevObject: w.fn.init(1)]
查找.find() 查找与指定表达式匹配的元素.
$('#d1').find('.c1')
====等价于下面的
$('#d1 .c1')
筛选.filter() 筛选出与指定表达式匹配的元素的集合.
$('div').filter('.c1') 从结果中过滤出有c1样式类的
====等价于下面的
$('div.c1')
4 class样式类
addClass( ) //添加指定的样式类
removeClass( ) // 移除指定的css类名
hasClass( ) //判断样式存不存在
toggleClass( ) //如果有就删除, 如果没有就添加.
5 . 计时器
!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>计时器</title>
</head>
<body>
<input type="text" id="s1">
<input type="button" value="开始" id="s2">
<input type="button" value="结束" id="s3">
<script>
var s1ele = document.getElementById('s1');
var t;
function f() {
var d1 = new Date();
s1ele.value= d1.toLocaleString();
}
f();
var s2ele = document.getElementById('s2'); //点开始
s2ele.onclick = function () {
if(!t){ //如果点击两次开始, 则无法结束, 由于当点击两次, 则第二次的可以删除, 第一次执行的任务的id由于被覆盖, 找不到, 则无法删除, 计时器一直计数,无法停止. 则加入条件 , 在每次清楚id时, t设置为空, 如果不为空, 则不进行开始操作.则不会开启两个任务
t = setInterval(f, 1000)
}
};
var s3ele = document.getElementById('s3'); // 点结束
s3ele.onclick = function () {
clearInterval(t); // 根据id清楚定时任务
console.log(t);
t = null
}
</script>
</body>
</html>
6 左边菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<title>Title</title>
<style>
.menu {
100px;
border: 1px solid darkgrey;
}
.item-title {
height: 30px;
line-height: 30px;
background-color: #449900;
color: white;
text-align: center;
border-bottom: 1px dotted darkgrey;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="item-title">菜单一</div>
<div class="item-body hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="item-title">菜单二</div>
<div class="item-body hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
<div class="item">
<div class="item-title">菜单三</div>
<div class="item-body hide">
<div>内容1</div>
<div>内容2</div>
<div>内容3</div>
</div>
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<!--<script src="jquery-3.3.1.js"></script>-->
<!--<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<script>
var $titleEles = $(".item-title");
for (var i=0;i<$titleEles.length;i++){
$titleEles[i].onclick=function () {
console.log(this);
// 把我自己的hide移除
//$(this).next().toggleClass("hide");
// 把其他的item-body标签 添加上hide
//$(this).parent().siblings().find(".item-body").addClass("hide");
$(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
}
}
// $(".item-title").click(function () {
// $(this).next().toggleClass("hide").parent().siblings().find(".item-body").addClass("hide");
// })
</script>
</body>
</html>