主要内容:
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 . 计时器
<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>!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>
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 {width: 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="/jquery/3.3.1/jquery.min.js"></script>--><script>var $titleEles = $(".item-title");for (var i=0;i<$titleEles.length;i++){$titleEles[i].οnclick=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>
