01.$()和css()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// window.onload = function(){
// var oBox=document.getElementById('box');
// oBox.style.width='100px';
// oBox.style.height='100px';
// oBox.style.background='red';
// oBox.style.border = '1px solid #000';
// const aBox = document.getElementsByTagName('div');
// for(let i = 0;i<aBox.length;i++ ){
// aBox[i].style.width='100px';
// aBox[i].style.height='100px';
// aBox[i].style.background='red';
// aBox[i].style.border = '1px solid #000';
// }
// }
$(function(){
//var oBox=document.getElementById('box');
// $('#box').css('width','100px').css('border','1px solid #000').css('background','red').css('height','100px');
$('div').css('width','100px').css('border','1px solid #000').css('background','red').css('height','100px');
$('.a').css('font-size','20px');
})
</script>
</head>
<body>
<!-- <div id="box"></div> -->
<div></div>
<div></div>
<div></div>
<p class="a">1</p>
<p class="a">2</p>
<p class="a">3</p>
<p class="a">4</p>
</body>
</html>
02.省略循环
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('li').css('background','red');
// $('li').click(function(){
// console.log(1);
// })
// $('li').on('click',function(){
// console.log(1);
// })
$(document).on('click','li',function(){
console.log(1);
})
})
</script>
</head>
<body>
<ul>
<li>1111</li>
<li>1111</li>
<li>1111</li>
<li>1111</li>
</ul>
</body>
</html>
03.html()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$('button').click(function(){
// html() 等同于innerHTML
// alert($('#box').html())
$('#box').html('哈哈');
})
})
</script>
</head>
<body>
<button type="button">按钮</button>
<div id="box">测试文字</div>
</body>
</html>
04.练习1-点击文字div切换颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
span{
margin-right: 20px;
cursor: pointer;
}
div{
width: 100px;
height: 100px;
border: 1px solid #000;
display: inline-block;
}
</style>
<script type="text/javascript">
$(function(){
let color = '';
$('span').click(function(){
color = $(this).html();
})
$('div').click(function(){
$(this).css('background',color);
})
})
</script>
<body>
<p>
<span>red</span>
<span>yellow</span>
<span>blue</span>
<span>green</span>
</p>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
05.attr()和val()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid #000;
}
.test{
border: 5px solid #fc3 !important;
}
</style>
<script type="text/javascript">
$(function(){
$('button').click(function(){
// $('input').val('red');
$('#box').css('background',$('input').val()).attr('class','test');
})
})
</script>
</head>
<body>
<p><input type="text" name="" id="" value="" />
<button type="button">切换</button></p>
<div id="box"></div>
</body>
</html>
06.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jq.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// $('input[type="text"]').css('color','aqua');
$('input[value^=1]').css('color','aqua');
$('input[value$=1]').css('color','red');
$('input[value*=4]').css('color','green');
})
</script>
<style type="text/css">
/* input[type='text']{
color:aqua;
} */
</style>
</head>
<body>
<input type="text" name="" id="" value="123" />
<input type="text" name="" id="" value="321" />
<input type="text" name="" id="" value="3124" />
<div type="text">大法师地方</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
