html文件
<!DOCTYPE html>
<html>
<head>
<title>jquery 学习</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<img src="./img/1.jpg">
<div class="outter">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
<script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
<script type="text/javascript" src="./js/script.js"></script>
</body>
</html>
js文件
//确保文档加载完后再加载代码
$(function(){
$(".div").click(function(){
//操作样式
$(this).css({'background':'green','width':'500px'});//设置
var width = $(this).css('width');//读取
console.info(width);
//操作html
var input = "<input type='text'>";
$(this).html(input);//设置html
var str = $(this).html();//读取
console.info(str);
//操作文本
$(this).text("Hello World");
var str = $(this).text();//读取
console.info(text);
})
//操作属性
$('img').click(function(){
$(this).attr("src",'./img/2.jpg')
})
$(".outter").click(function(){
//$(".outter .inner").css('background','green');
$(this).children().css('background','green');
$(this).children().each(function(i){
$(this).text(i+1);
})
})
//阻止事件冒泡
$(".outter .inner").click(function(e){
e.stopPropagation();
alert("inner");
})
})
