jQuery是对DOM的一种封装,可以更加快捷的修改添加js样式。首先我们需要下载相关版本的jQuery的脚本。这里使用的是jquery-3.4.1.js。用使用jQuery时要先引入所下载的东西。(<script src="...")></script>)
jQuery选择器
jQuery有许多简洁的选择器现在介绍其中常用的一些:
$('#id')
$(".c1")
$('a')
$('#10 a') //子子孙孙
$('#10>a') //儿子
//:first
//:last
//:eq()
$('[alex]')
$('[alex="123"]')
$("input[type='text']")==$(':text')
直接利用$符号搜索标签的id和class名称,可以把他和css的选择器归为一类记忆,有很多相似之处。(切记字符串要用引号包括)
jQuery的事件触发
- 基础的绑定还是在标签的后面添加“οnclick="xxx();”然后利用选择器寻找到后对其内部进行操作
- 更高级层次的应该是:
直接在选择器$('..')后面添加上事件如:“click”,“hover”等
如:
<script src="jquery-3.4.1.js")></script>
<script)>
$('#i1').click(function(){
$(this).xxx //这里的this指的是本标签
})
</script>
对于表单的选项设置:
$(this).prop('checked') 获取值
// $(this).prop('checked',true) 设置值
// $(this).each(function(k){
(k代表当前索引);
(this代表DOM对象)
利用jQuery事件做一个多下拉框菜单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.header {
height: 30px;
width: 90px;
background-color: #232651;
}
.hide {
display: none;
}
</style>
</head>
<body>
<div style="border:2px solid #216516;width: 90px;">
<div class="item">
<div class="header">1</div>
<div class="bode">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="item">
<div class="header">1</div>
<div class="bode hide">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="item">
<div class="header">1</div>
<div class="bode hide">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="item">
<div class="header">1</div>
<div class="bode hide">
<div>2</div>
<div>3</div>
</div>
</div>
<div class="item">
<div class="header">1</div>
<div class="bode hide">
<div>2</div>
<div>3</div>
</div>
</div>
</div>
<script src="jquery-3.4.1.js"></script>
<script>
$('.header').click(function(){
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.bode').addClass('hide');
})
</script>
</body>
</html>
从这个小案例中,我们应该掌握许多小的知识点:
$(’#i1’).next()——>//寻找i1标签的下一个标签
$(’#i1’).nextAll() ——> //寻找i1标签下的所有标签
$(’#i1’).nextUntil(’#ii1’)——> //寻找i1标签下的所有标签,直到找到ii1标签为止
$(’#i1’).prev() ——> //寻找i1标签的上一个标签
$(’#i1’).prevAll() ——> //寻找i1标签上的所有标签
$(’#i1’).prevUntil(’#ii1’) ——> //寻找i1标签上的所有标签,直到找到ii1标签为止
$(’#i1’).parent()——> //寻找i1标签的父级标签
$(’#i1’).children() ——>//寻找i1标签的子级标签
$(’#i1’).siblings() ——>//寻找i1标签的兄弟标签
$(’#i1’).find() ——> //寻找i1标签中的某一元素标签
$(…).text()——>获取标签文本
$(…).text(“1”)
$(…).html()
$(…).html(“1”)
$(…).val()——>获取input文本
$(…).val(…)