1. JQ操作和原生JS操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.4.1.min.js"></script>
</head>
<style>
#dom1 #dom2{
height: 100px;
width: 100px;
border: 1px solid grey;
}
#dom2{
height: 100px;
width: 100px;
border: 1px solid grey;
}
</style>
<body>
<div id="dom1"></div>
<div id="dom2"></div>
</body>
<script>
let dom1 = document.querySelector('#dom1')
dom1.innerHTML = "我是原生JS"
dom1.style.backgroundColor = 'red'
dom1.onclick = function(){
alert('dom1被点击了')
dom1.style.backgroundColor = 'green'
}
$(function(){
$('#dom1').html('这是jq操作').css({backgroundColor:'yellow',font:'20px'}).click(function(){
alert('jq操作')
})
})
</script>
</html>
2.选择器
2.1基本选择器
<body>
<ul>
<li class="yi">1</li>
<li>2</li>
<li id="san">3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script>
//id选择器
$('#san').html('三')
//类选择器
$('.yi').html('一')
//标签选择器
$('li').css('fontSize','60px')
</script>
2.2后代选择器
<body>
<div class="one">
<div class="two">two</div>
<div class="three">three</div>
<div class="four">444</div>
<div class="five">
five
<div class="four">444</div>
</div>
</div>
<div class="four">444</div>
</body>
<script>
//后代选择器:one下的所有four
$('.one .four').css('color','red')
//直系子选择器:one下面的直系four
$('.one>.four').css('border','1px solid grey')
//兄弟选择器：给four下面的兄弟
$('.one>.four+div').css('color','green')
</script>
image.png
2.3 索引选择器
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
//偶数，索引从0开始
$('tr:even').css('backgroundColor','lightgreen')
//奇数
// $('tr:odd').css('backgroundColor','lightgreen')
//设置第一行
$('tr:first').css('backgroundColor','red')
//最后一行
$('tr:last').css('backgroundColor','lightyellow')
//获取1+4的行数
$('tr:eq(4)').css('backgroundColor','black')
</script>
image.png
2.4 显示隐藏效果
<body>
<button id="btn1">显示/隐藏</button>
<button id="btn2">下拉/上拉</button>
<div id="box"></div>
</body>
<script>
$('#btn1').click(function(){
$('#box').toggle(150)
})
$('#btn2').click(function(){
$('#box').slideToggle(150)
})
</script>
image.png
2.5 jquery与js对象互相转换
<body>
<input id="ck" type="checkbox" value="游泳" checked>游泳
</body>
<script>
let ck = document.querySelector('#ck')
//js转jq
let ck_j = $(ck)
//jq提供的方法：给表单的value赋值
ck_j.val("练习时常两年半")
ck_j.css('width','50px')
//jq转jsdome
let ckjs = ck_j[0]
//获取dome元素的状态
alert(ckjs.checked)
</script>
注意：JS转JQ的原因是：很多第三方库返回的是JS对象，要继续使JQ的话，就要转；JQ转JS，JQ提供的方法不够用的时候需要转为JS
2.6 tab选项卡切换练习
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
height: 400px;
width: 400px;
margin: 20px;
border: 1px solid #ccc;
}
.tab{
display: flex;
}
.tab li{
border: 1px solid #ccc;
margin: 5px;
padding: 5px 10px;
cursor: pointer;
}
.tab li.active{
background-color: orangered;
color: white;
}
.list{
margin:0 5px;
}
.list li{
display: none;
}
.list li.show{
display: block;
}
</style>
</head>
<body>
<div id="box">
<ul class="tab">
<li class="active">奔驰</li>
<li>宝马</li>
<li>奥迪</li>
</ul>
<ul class="list">
<li class="show">奔驰内饰好看</li>
<li>宝马价格贵</li>
<li>奥迪低调</li>
</ul>
</div>
</body>
<script>
//点击既要切换内容也要高亮
$('.tab li').click(function(){
//1.切换高亮
$(this).addClass('active').siblings('.active').removeClass('active')
//2.获取当前点击li的下标，this为dome,$转为jq
let li_index = $(this).index()
//3.根据下标获取指定的jq对象①添加show②移除sibling
$('.list li').eq(li_index).addClass('show').siblings('.show').removeClass('show')
})
</script>
</html>
注意：
index()方法，获取当前元素的下标
eq()方法，根据指定的index获取元素
addClass()方法，给元素添加class
removeClass()方法，给元素去除class
siblings()方法,获取元素的所有兄弟，该方法可以添加一个选择器参数，用于精确的查找兄弟元素
2.7 动态加载一级菜单
image.png
common.css
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
outline: none;
font-size: 12px;
}
.flex{
display: flex;
}
.j_c{
justify-content: center;
}
.j_s{
justify-content: space-between;
}
.a_c{
align-items: center;
}
-
menu.json模拟后台API传来的json
{
"data":[
{
"name":"Web",
"icon":""
},
{
"name":"Java",
"icon":""
},
{
"name":"BIG DATA",
"icon":""
},
{
"name":"CLOUND",
"icon":""
},
{
"name":"AI",
"icon":""
}
]
}
firstMenuDemo.html
<link rel="stylesheet" type="text/css" href="css/common.css">
<style type="text/css">
.nav{
background-color: #ccc;
height: 30px;
margin: 20px 0;
}
.introduce{
width: 100px;
height: 50px;
background-color: rgb(72,204,193);
margin-left: 100px;
line-height: 50px;
font-size: 20px;
text-align: center;
color: white;
transform: skew(-15deg);
}
ul>li:not(:first-child){
margin: 5px 0 0 20px;
font-size: 14px;
cursor: pointer;
}
ul>li:not(:first-child):hover{
color: lightskyblue;
}
</style>
</head>
<body>
<ul class="nav flex a-c">
<li class="introduce">课程介绍</li>
</ul>
</body>
<script>
//加载菜单的方法
function loadMenue(){
$.get(
'menu.json',
function(res){
console.log(res)
let {data} = res
//es6语法
data.forEach(r=>{
//每个对象创建一个对应的li
let li = '<li>'+r.name+'</li>'
//注意使用该方法创建标签必须使用语义化
let li_jq = $('<li>')
//将li添加到ul里面 jq的append=js的appendChild
$('.nav').append(li)
})
}
)
}
loadMenue()
</script>
</html>
网友评论