JQuery
中文文档http://jquery.cuishifeng.cn/
1.查找:
1.选择器
1.id选择器 $('#XX',)
2.标签选择器 $('.xx',)
3.类选择器
4.组合选择器
5.层级选择器
$('div:eq(1)') 找到所有div标签,把索引号为1的拿出来
2.筛选器
$('div').eq(1) == $('div:eq(1)')
$('#i1').find('.item') == $('#i1 .item')
例子:简单的菜单栏
$(ths) 可以把dom对象转换成Jquery对象(ths是this参数,是dom对象)
$(ths)[0] 把Jquery对象转换成dom对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ /*height: 1000px;*/ width: 50px; background-color: #5ab2ce; } .title{ background-color: #2e6ab1; color: white; } .hide{ display: none; } </style> </head> <body> <div class="menu" > <div class="item"> <div class="title" onclick="Show(this)">标签一</div> <div class="neirong hide"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" onclick="Show(this)">标签二</div> <div class="neirong hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title" onclick="Show(this)">标签三</div> <div class="neirong hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-3.5.0.js"></script> <script> function Show(ths) { $(ths).next().removeClass('hide') $(ths).parent().siblings().find('.neirong').addClass('hide') } </script> </body> </html>
2.操作:
1.CSS
2.属性
3.文本操作
3.事件:
4.扩展:
1.$.login
2.form表单验证
5.Ajax:
在页面不显示刷新的时候,偷偷提交数据