摘要：<!DOCTYPE html><html><head> <title>Jq基本语法</title> <style type="text/css"> *{margin: 0;padding: 0;} .radius{ border-radius: 50px; } button{ margin-
<!DOCTYPE html>
<html>
<head>
<title>Jq基本语法</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.radius{
border-radius: 50px;
}
button{
margin-left: 32px;
margin-top: 30px;
}
.radius1{
width: 80px;
height: 80px;
box-shadow: 1px 12px 10px #ccc;
border: 12px solid lightblue;
}
</style>
</head>
<body>
<!-- jq命令需要引入jquery-3.1.1.min.js -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
// 一 文档就绪, 在html中当文档加载完成后才执行JQ语法,
$(document).ready(function(){
// 二 function(){}为JQ的入口函数, 所有操作方法都是写在入口函数内
// 定义jq选择器 $符号+() 括号内是html的标签 id class
// $('div') $('span') 根据标签选择
// $('#box') 根据标签内部id选择
// $('.boxs') 基础形式选择 根据标签内部样式名称选择
// 三 标签样式操作
$('.boxs').css('background','blue');
$('#box').css('background','lightblue');
$('div').css('background','green');
// 四 标签属性操作 attr() 第一个参数是标签的class属性 第二个参数是属性的值
// 只有一个参数 就获取class属性的值
$('#box').attr('class','radius');
console.log($('#box').attr('class')); // 浏览器按F12 Console查看输出
// 五 JQ常用事件
// 当点击button标签时执行
$('button').click(function(){
// removeClass() 移除样式
// 注意removClass()参数是class样式的名称 不需要带"."
$('div').removeClass('radius');
});
// 当鼠标移入div时执行
$('div').mouseover(function(){
// addClass() 添加样式
// 注意addClass()参数是class样式的名称 不需要带"."
$(this).addClass('radius1'); // this 相对于选中的整个div
});
});
</script>
<div id="box" class="boxs" style="width: 100px;height: 100px;background: red;">
<button>点击</button>
</div>
<span></span>
</body>
</html>
批改老师：天蓬老师批改时间：2019-02-11 13:48:45
老师总结：jQuery的重点是选择器, dom操作, ajax,这也是核心,多练习
