收藏
批改状态：未批改
老师批语：
1、如何利用Jquery实现css属性设置
2、在元素后插入html元素【inserAfter】
3、选择器写法
4、JQuery的加载方式：本地加载、cdn加载
5、浏览器兼容问题
6、如何在head头部进行加载处理，以保证页面dom加载完后正常实现效果。
效果图
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<!--<script src="../js/jquery.js"></script>-->
<!--<script type="text/javascript">
$(document).ready(function(){
$(".caipiao").css({"width":"100%","height":"200px","background-color":"#898989","border":"1px solid red","text-align":"center"})
$("span:even").css({"color":"white","display":"inline-block","width":"30px","height":"30px","background-color":"red","line-height":"30px","border-radius":"50%"})
$("button").css({"width":"50px","height":"30px","background-color":"#e91e63","border":"none","border-radius":"3px"})
$("button#sc").click(function(){
var num1 = Math.floor(Math.random()*9+1 )
var num2= Math.floor(Math.random()*9+1 )
var num3= Math.floor(Math.random()*9+1 )
var result=Math.floor(num1+num2+num3)
$("span.num1").html(num1)
$("span.num2").html(num2)
$("span.num3").html(num3)
$("span.result").html(result)
})
})
</script>-->
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$(".caipiao").css({"width":"400px","height":"120px","background-color":"#efaaaa","border":"1px solid red","text-align":"center","margin":"auto"})
$("span:even").css({"color":"white","display":"inline-block","width":"30px","height":"30px","background-color":"red","line-height":"30px","border-radius":"50%"})
$("button").css({"width":"50px","height":"30px","background-color":"#e91e63","border":"none","border-radius":"3px","color":"#fff"})
$("button#sc").click(function(){
var num1 = Math.floor(Math.random()*9+1 )
var num2= Math.floor(Math.random()*9+1 )
var num3= Math.floor(Math.random()*9+1 )
var result=Math.floor(num1+num2+num3)
$("span.num1").html(num1)
$("span.num2").html(num2)
$("span.num3").html(num3)
$("span.result").html(result)
})
})
</script>
</head>
<body>
<div class="caipiao">
<h3>随机彩色球</h3>
<span class="num1">1</span>
<span class="add">+</span>
<span class="num2">1</span>
<span class="add">+</span>
<span class="num3">1</span>
<span class="all">=</span>
<span class="result">2</span>
<button id="sc">生成</button>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
总结：初次认识jQuery，和原生JS相比较而言，写法确实简单很多。以前总觉得很难，也可能今天老师只是稍微讲解了一下，没有涉及到难的地方。但是至少比原来有动力了，比原生的简便好多。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
